frontend/src/app/app.component.html - develop - Dmitry_SH79/FeelWordGap

frontend/src/app/app.component.html
96 строк3 KB
Dmitry_SH79
оно работает
21 май 2026, 17:20
21 май 2026, 17:20c2626e7
<header class="game-header">
  <div class="user-profile">
    <span class="user-avatar">👤</span>
    <!-- Безопасно выводим имя первого юзера из массива -->
    <span class="user-name">
      @if (users && users.length > 0) {
      {{ users[0].name }}
      } @else {
      Загрузка...
      }
    </span>
  </div>

  <div class="category-selector">
    <label for="category-select">Категория:</label>
    <select id="category-select" (change)="onCategoryChange($event)">
      <option value="">-- Выберите тему --</option>
      <!-- Новый синтаксис циклов Angular 19 -->
      @for (cat of categories; track cat.id) {
      <option [value]="cat.id">{{ cat.name }}</option>
      }
    </select>
    <p></p>
    <!-- НОВЫЙ БЛОК: Выбор размера сетки -->
    <label for="size-select" style="margin-left: 15px;">Размер:</label>
    <select id="size-select" (change)="onSizeChange($event)" [value]="selectedSize">
      <option value="4">4 x 4</option>
      <option value="6">6 x 6</option>
      <option value="8">8 x 8</option>
      <option value="10">10 x 10</option>
      <option value="12">12 x 12</option>
    </select>

  </div>

  <div class="game-stats">
    <span class="stat-item">⏱️ Время: <strong class="timer">00:00</strong></span>
  </div>
</header>

<main class="game-container">
  @if (selectedCategoryId && currentGame) {
  <div class="game-layout">

    <!-- Контейнер для сетки букв -->
    <div class="field-grid">
      @for (row of gridCells; track $index) {
      <div class="grid-row">
        @for (cell of row; track cell.y) {
        <button class="grid-cell" [class.selected]="cell.statusId === 1" [class.guessed]="cell.statusId === 2"
          (mousedown)="onCellMouseDown(cell, $event)" (mouseenter)="onCellMouseEnter(cell)">
          {{ cell.char | uppercase }}
        </button>
        }
      </div>
      }
    </div>

    <!-- БОКОВАЯ ПАНЕЛЬ: Управление подсказками и список слов -->
    <div class="words-sidebar">
      <div class="score-counter">
        Найдено: <strong>{{ guessedWords.length }}</strong> из <strong>{{ currentGame.words.length }}</strong>
      </div>

      <!-- Кнопка-ссылка для раскрытия списка -->
      <button class="spoiler-link" (click)="toggleSidebar()">
        {{ isSidebarVisible ? '🙈 Скрыть список' : '👁️ Подсмотреть слова (' + (currentGame.words.length -
        guessedWords.length) + ')' }}
      </button>

      <!-- Список рендерится строго по условию -->
      @if (isSidebarVisible) {
      <div class="sidebar-content">
        <h3>Осталось найти:</h3>
        <ul class="words-list">
          @for (w of currentGame.words; track w.wordId) {
          <li [class.found]="guessedWords.includes(w.word)">
            {{ w.word | uppercase }}
          </li>
          }
        </ul>
      </div>
      }
    </div>

  </div>
  } @else if (selectedCategoryId && !currentGame) {
  <div class="placeholder-grid">
    <p>Генерируем змейку слов бэкендом...</p>
  </div>
  } @else {
  <div class="welcome-message">
    <p>Выберите категорию сверху, чтобы начать игру</p>
  </div>
  }
</main>