Refactor Scoreboard component styles and enhance layout functionality

- Adjusted SCSS styles for improved layout consistency, including spacing and positioning of elements.
- Updated Scoreboard.tsx to utilize Textfit for dynamic text resizing, ensuring player names fit within designated areas.
- Modified layout settings in AdminPanel to allow for more flexible header and player card heights.
- Improved README documentation for clarity on component structure and functionality.

Author: RXDCODX

src/components/OBS_Components/Scoreboard/AdminPanel/LayoutCard.tsx

@@ -134,7 +134,7 @@ const LayoutCard: React.FC = () => {
             <Form.Group className="mb-3">
               <Form.Label>Высота заголовка (px)</Form.Label>
               <Form.Range
-                min="40"
+                min="10"
                 max="120"
                 value={layout.headerHeight}
                 onChange={e =>
@@ -164,7 +164,7 @@ const LayoutCard: React.FC = () => {
             <Form.Group className="mb-3">
               <Form.Label>Высота карточки игрока (px)</Form.Label>
               <Form.Range
-                min="60"
+                min="10"
                 max="150"
                 value={layout.playerBarHeight}
                 onChange={e =>

src/components/OBS_Components/Scoreboard/AdminPanel/MetaPanel/README.md

@@ -6,15 +6,15 @@
 
 ## Функциональность
 
-### Основные возможности:
+### Основные возможности
 
 - **Название турнира**: Текстовое поле для ввода названия турнира
 - **Режим драки**: Выбор из предустановленных вариантов или кастомный ввод
 - **Синхронизация**: Автоматическая синхронизация с другими клиентами
 - **Компактный дизайн**: Оптимизирован для размещения в один ряд с VisibilityCard
 - **Вертикальная компоновка**: Элементы расположены в столбик для компактности
 
-### Режимы драки:
+### Режимы драки
 
 #### **Предустановленные варианты:**
 
@@ -29,7 +29,7 @@
 - **None** - Без режима драки (отдельный ряд)
 - **Custom** - Кастомный режим с текстовым вводом
 
-### Состояния кнопок:
+### Состояния кнопок
 
 - **Активный режим**: Синяя кнопка с белым текстом
 - **Неактивный режим**: Прозрачная кнопка с синей рамкой
@@ -72,7 +72,7 @@ const AdminPanel = () => {
 - **Компактность**: Уменьшенные размеры для размещения в один ряд
 - **Выравнивание**: Высота 100% для выравнивания с VisibilityCard
 
-### Размеры:
+### Размеры
 
 - **Иконки**: 20px
 - **Заголовок**: 14px
@@ -81,7 +81,7 @@ const AdminPanel = () => {
 - **Кнопки режимов**: 12px
 - **Кастомное поле**: 12px
 
-### Цвета:
+### Цвета
 
 - **Основной**: Фиолетовый (#6f42c1)
 - **Кнопки режимов**: Синий (#0d6efd)
@@ -91,7 +91,7 @@ const AdminPanel = () => {
 
 ## Структура компонента
 
-### Компоновка:
+### Компоновка
 
 1. **Заголовок**: Иконка и текст "Meta Panel" (верх)
 2. **Название турнира**: Текстовое поле (центр)
@@ -100,7 +100,7 @@ const AdminPanel = () => {
    - Кнопка "None" в отдельном ряду
    - Кнопка "Custom" с текстовым полем (при необходимости)
 
-### Логика работы:
+### Логика работы
 
 #### **Обработка выбора режима:**
 
@@ -134,27 +134,27 @@ const handleFightRuleChange = (rule: string) => {
 
 ## Интеграция с бекендом
 
-### SignalR методы:
+### SignalR методы
 
 - `UpdateMeta(MetaInfo meta)` - обновление мета-информации
 - `ReceiveState` - получение обновленного состояния от сервера
 
-### Сохранение состояния:
+### Сохранение состояния
 
 - Состояние сохраняется в `config.ini` в секции `[Scoreboard]`
 - Ключи: `Title`, `FightRule`
 - Автоматическая загрузка при старте приложения
 
 ## Особенности дизайна
 
-### Кнопка "None":
+### Кнопка "None"
 
 - **Расположение**: Отдельный ряд под предустановленными вариантами
 - **Цвет**: Серый (#6c757d) для визуального отличия
 - **Функция**: Отключает режим драки
 - **Ширина**: Полная ширина контейнера
 
-### Кастомное поле:
+### Кастомное поле
 
 - **Отображение**: Только при выборе "Custom" или вводе нестандартного значения
 - **Цвет**: Желтый (#ffc107) для выделения

src/components/OBS_Components/Scoreboard/AdminPanel/README.md

@@ -4,7 +4,7 @@
 
 ## Структура файлов
 
-```
+```text
 src/AdminPanel/
 ├── index.ts              # Экспорты всех компонентов
 ├── types.ts              # TypeScript типы

src/components/OBS_Components/Scoreboard/AdminPanel/VisibilityCard/README.md

@@ -6,7 +6,7 @@
 
 ## Функциональность
 
-### Основные возможности:
+### Основные возможности
 
 - **Включение/выключение панели**: Компактная кнопка для переключения видимости панели скорборда
 - **Анимация затухания**: Плавная анимация при переключении состояния (500ms)
@@ -17,13 +17,13 @@
 - **Информация о времени**: Отображение времени последнего обновления и времени открытия страницы (только JavaScript)
 - **Реальное время**: Время открытия страницы обновляется каждую секунду
 
-### Состояния кнопки:
+### Состояния кнопки
 
 - **Видимая панель**: Красная кнопка "Скрыть" с иконкой EyeSlash
 - **Скрытая панель**: Зеленая кнопка "Показать" с иконкой Eye
 - **Анимация**: Полупрозрачная кнопка с спиннером и текстом "Скрываем..." или "Показываем..."
 
-### Информация о времени (JavaScript):
+### Информация о времени (JavaScript)
 
 - **Время последнего обновления**: Отображается в формате ЧЧ:ММ:СС с иконкой Clock
 - **Время открытия страницы**: Отображается в формате "Xч Yм Zс" или "Xм Yс" или "Zs" с иконкой PlayCircle
@@ -67,7 +67,7 @@ const AdminPanel = () => {
 - **Выравнивание**: Высота 100% для выравнивания с соседними кардами
 - **Центрирование**: Вся информация о времени размещена по центру карда
 
-### Размеры:
+### Размеры
 
 - **Иконки**: 20px (уменьшены с 22px)
 - **Заголовок**: 14px (уменьшен с 18px)
@@ -77,26 +77,26 @@ const AdminPanel = () => {
 - **Иконки времени**: 14px (увеличены с 12px)
 - **Статус панели**: 12px с жирным шрифтом
 
-### Цвета времени:
+### Цвета времени
 
 - **Текст времени**: Белый (#ffffff) с жирным шрифтом
 - **Иконки времени**: Красный (#dc3545) для контраста
 - **Статус панели**: Зеленый (#28a745) для видимой, красный (#dc3545) для скрытой
 
 ## Интеграция с бекендом
 
-### SignalR методы:
+### SignalR методы
 
 - `UpdateVisibility(bool isVisible)` - обновление состояния видимости
 - `ReceiveState` - получение обновленного состояния от сервера
 
-### Сохранение состояния:
+### Сохранение состояния
 
 - Состояние сохраняется в `config.ini` в секции `[Scoreboard]`
 - Ключ: `IsVisible` (true/false)
 - Автоматическая загрузка при старте приложения
 
-### Время (только JavaScript):
+### Время (только JavaScript)
 
 - **Время последнего обновления**: Обновляется при изменении видимости
 - **Время открытия страницы**: Отсчитывается с момента загрузки компонента
@@ -125,7 +125,7 @@ const AdminPanel = () => {
 
 ## Форматирование времени (JavaScript)
 
-### Время последнего обновления:
+### Время последнего обновления
 
 ```typescript
 const formatTime = (timestamp: number) => {
@@ -138,7 +138,7 @@ const formatTime = (timestamp: number) => {
 };
 ```
 
-### Время открытия страницы:
+### Время открытия страницы
 
 ```typescript
 const formatPageOpenTime = () => {
@@ -157,7 +157,7 @@ const formatPageOpenTime = () => {
 };
 ```
 
-### Хуки для обновления времени:
+### Хуки для обновления времени
 
 ```typescript
 // Состояние для времени
@@ -191,29 +191,29 @@ useEffect(() => {
 
 ## Компоновка
 
-### Структура карда:
+### Структура карда
 
 1. **Заголовок**: Иконка и текст "Видимость" (верх)
 2. **Кнопка управления**: Кнопка включения/выключения (центр)
 3. **Информация о времени**: Время обновления и открытия (центр)
 4. **Статус панели**: Текущий статус видимости (центр)
 
-### Выравнивание:
+### Выравнивание
 
 - **Вертикальное**: `justify-content-center` для центрирования всего содержимого
 - **Горизонтальное**: `align-items-center` для центрирования элементов времени
 - **Отступы**: Увеличенные отступы между секциями для лучшей читаемости
 
 ## Технические детали
 
-### Состояния компонента:
+### Состояния компонента
 
 - `isTransitioning`: Блокировка повторных нажатий во время анимации
 - `pageOpenTime`: Время загрузки компонента (неизменное)
 - `lastUpdateTime`: Время последнего изменения видимости
 - `currentTime`: Текущее время (обновляется каждую секунду)
 
-### Интервалы и очистка:
+### Интервалы и очистка
 
 - **Интервал обновления**: 1000ms (1 секунда)
 - **Автоматическая очистка**: `clearInterval` при размонтировании компонента

src/components/OBS_Components/Scoreboard/Scoreboard.module.scss

@@ -78,7 +78,8 @@ $font-size-small: 14px;
     letter-spacing: 1px;
     opacity: 0.9;
   }
-  > .headerLeftBorder {
+
+  >.headerLeftBorder {
     position: absolute;
     top: -2px;
     left: 3px;
@@ -88,7 +89,8 @@ $font-size-small: 14px;
     transform: rotate(148deg);
     border: 11px solid $border-color;
   }
-  > .headerRightBorder {
+
+  >.headerRightBorder {
     position: absolute;
     top: -2px;
     right: 3px;
@@ -180,7 +182,7 @@ $font-size-small: 14px;
     font-weight: 600;
     color: $secondary-color;
     line-height: 1.2;
-    height: 15px;
+    height: auto;
   }
 
   .playerTag {
@@ -216,23 +218,19 @@ $font-size-small: 14px;
 // Срез для левого счета
 .playerLeft .score {
   margin-left: calc(var(--banner-skew) * -3);
-  clip-path: polygon(
-    0 0,
-    calc(100% - var(--banner-skew)) 0,
-    100% 100%,
-    var(--banner-skew) 100%
-  );
+  clip-path: polygon(0 0,
+      calc(100% - var(--banner-skew)) 0,
+      100% 100%,
+      var(--banner-skew) 100%);
 }
 
 // Срез для правого счета
 .playerRight .score {
   margin-right: calc(var(--banner-skew) * -3);
-  clip-path: polygon(
-    var(--banner-skew) 0,
-    100% 0,
-    calc(100% - var(--banner-skew)) 100%,
-    0 100%
-  );
+  clip-path: polygon(var(--banner-skew) 0,
+      100% 0,
+      calc(100% - var(--banner-skew)) 100%,
+      0 100%);
 }
 
 // Флаг
@@ -274,17 +272,20 @@ $font-size-small: 14px;
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes pulse {
+
   0%,
   100% {
     transform: scale(1);
   }
+
   50% {
     transform: scale(1.05);
   }
@@ -328,4 +329,4 @@ $font-size-small: 14px;
   .score h3 {
     font-size: $font-size-medium;
   }
-}
+}