feat: refine the Lobby screen

data/app.js

@@ -5,7 +5,7 @@
   const el = id => document.getElementById(id);
   const ui = {
     status: el('connection-status'), notice: el('notice'), name: el('display-name'), availability: el('availability'),
-    lobbyDescription: el('lobby-description'), lobbyHelp: el('lobby-help'), modeControls: el('mode-controls'),
+    lobbyDescription: el('lobby-description'), lobbyHelp: el('lobby-help'), modeControls: el('mode-controls'), modeDescription: el('mode-description'),
     start: el('start-game'), boards: el('boards'), resultBoards: el('result-boards'), tabs: el('board-tabs'),
     turn: el('turn-status'), wins: el('wins'), shotControls: el('shot-controls'), target: el('target-status'),
     fire: el('fire-button'), cancel: el('cancel-target'), abort: el('abort-game'), rematch: el('rematch-button'),
@@ -23,6 +23,7 @@
   let retryTimer;
   let pollTimer;
   let heartbeatTimer;
+  let lobbyInfoTimer;
   let retryIndex = 0;
 
   function showScreen(name) {
@@ -68,6 +69,7 @@
         availabilityItem(`Игрок 2: ${info.player2Available ? 'свободен' : 'занят'}`),
         availabilityItem(`зрительских мест: ${info.spectatorsAvailable}`),
       );
+      if (state?.phase === 'lobby') renderLobby();
     } catch (error) {
       ui.availability.textContent = error.message;
     }
@@ -93,6 +95,13 @@
 
   function stopPolling() { if (pollTimer) window.clearInterval(pollTimer); pollTimer = undefined; }
   function stopHeartbeat() { if (heartbeatTimer) window.clearInterval(heartbeatTimer); heartbeatTimer = undefined; }
+  function startLobbyInfoPolling() {
+    if (!lobbyInfoTimer) {
+      lobbyInfoTimer = window.setInterval(refreshInfo, 2000);
+      refreshInfo();
+    }
+  }
+  function stopLobbyInfoPolling() { if (lobbyInfoTimer) window.clearInterval(lobbyInfoTimer); lobbyInfoTimer = undefined; }
 
   function safeState(payload) {
     return payload && payload.type === 'state' && Array.isArray(payload.boards) && payload.boards.length === 2 &&
@@ -198,17 +207,23 @@
     const playerOne = role === 'player1';
     ui.lobbyDescription.textContent = role === 'spectator' ? 'Вы наблюдаете за подготовкой партии.' : 'Ожидайте готовности партии или настройте режим.';
     ui.modeControls.hidden = !playerOne;
+    if (playerOne) startLobbyInfoPolling();
+    else stopLobbyInfoPolling();
+    const playerTwoReady = info?.player2Available === false;
+    const canStart = playerOne && (state.mode === 'bot' || playerTwoReady);
     document.querySelectorAll('.mode-button').forEach(button => {
       const selected = button.dataset.mode === state.mode;
-      button.setAttribute('aria-pressed', String(selected));
+      button.setAttribute('aria-checked', String(selected));
       button.disabled = !playerOne;
     });
-    ui.start.disabled = !playerOne;
-    ui.lobbyHelp.textContent = playerOne ? (state.mode === 'human' ? 'Для игры вдвоём дождитесь второго игрока.' : 'ESP32 станет вашим соперником.') : 'Игрок 1 выбирает режим и запускает партию.';
+    ui.start.disabled = !canStart;
+    ui.modeDescription.textContent = state.mode === 'human' ? (playerTwoReady ? 'Второй игрок готов. Можно начать партию.' : 'Ожидаем подключения второго игрока.') : 'Игра против ESP32. Можно начать сразу.';
+    ui.lobbyHelp.textContent = playerOne ? '' : 'Игрок 1 выбирает режим и запускает партию.';
   }
 
   function renderGame() {
     if (!state) return;
+    stopLobbyInfoPolling();
     showScreen('game');
     ui.turn.textContent = state.turn === role ? 'Ваш ход. Выберите клетку соперника.' : `Ходит ${playerLabel(state.turn === 'player2' ? 1 : 0)}.`;
     ui.wins.textContent = `Победы: ${state.wins[0]} : ${state.wins[1]}`;
@@ -222,6 +237,7 @@
   }
 
   function renderResult() {
+    stopLobbyInfoPolling();
     showScreen('result');
     if (statisticsGameId !== state.gameId) refreshStatistics();
     const waiting = state.phase === 'rematch_wait';
@@ -243,6 +259,7 @@
   }
 
   function showError(message) {
+    stopLobbyInfoPolling();
     ui.error.textContent = message;
     setConnection('Нет связи', 'offline');
     showScreen('error');
@@ -297,7 +314,7 @@
     };
     socket.onerror = () => socket.close();
     socket.onclose = () => {
-      socket = undefined; stopHeartbeat(); beginPolling(); setConnection('HTTP-обновление', 'offline');
+      socket = undefined; stopHeartbeat(); beginPolling(); setConnection('HTTP-обновление', 'polling');
       const delays = [1000, 2000, 5000, 10000];
       const delay = delays[Math.min(retryIndex++, delays.length - 1)];
       retryTimer = window.setTimeout(() => { retryTimer = undefined; connectSocket(); }, delay);