Лобби: комнаты на сервере (C++) и UI на клиенте

Сервер: Lobby/Room/Player — create/join/leave/list_rooms, broadcast обновлений, проверка авторизации (hello) и состояния комнаты (waiting/full/in_progress). Клиент: полноценный UI лобби (создание, список, вход в комнату, выход), блокировка кнопок до установки WS-соединения. nginx: no-cache для JS/CSS (нет хеширования имён файлов).
2026-07-26 21:22:20 +05:00
parent 238d3d5d26
commit 864868de49
9 changed files with 538 additions and 42 deletions
@@ -1,21 +1,136 @@
-// TODO: полноценный UI лобби (список/создание/присоединение комнат) — этап 3.
-// Пока — проверка связки клиент <-> gameserver (hello -> lobby.list_rooms).
 import { Network, ServerMessage } from './network.js';

-export function connectAndProbe() {
-  const net = new Network();
+const container = document.getElementById('lobby');

-  net.on('_open', () => net.hello('cacto'));
+let net;
+let rooms = [];
+let currentRoom = null;
+let errorMessage = '';
+let connected = false;
+let nickname = 'cacto-' + Math.floor(Math.random() * 1000);
+
+function roomRow(room) {
+  const full = room.players >= room.max_players;
+  return `
+    <li class="room-list__item">
+      <span class="room-list__name">${room.name}</span>
+      <span class="tag">${room.mode}</span>
+      <span class="room-list__count">${room.players}/${room.max_players}</span>
+      <span class="room-list__state">${room.state}</span>
+      <button data-action="join" data-room-id="${room.id}" ${full || room.state !== 'waiting' || !connected ? 'disabled' : ''}>войти</button>
+    </li>`;
+}
+
+function errorBanner() {
+  return errorMessage ? `<p class="lobby-error">! ${errorMessage}</p>` : '';
+}
+
+function renderLobbyView() {
+  const dis = connected ? '' : 'disabled';
+  container.innerHTML = `
+    <div class="lobby-panel">
+      ${errorBanner()}
+      ${connected ? '' : '<p class="lobby-error">подключение...</p>'}
+      <div class="lobby-panel__row">
+        <label class="prompt-inline">nickname</label>
+        <input id="nickname-input" type="text" value="${nickname}" maxlength="20" ${dis} />
+      </div>
+      <div class="lobby-panel__row">
+        <button data-action="create" data-mode="coop" ${dis}>создать комнату (coop)</button>
+        <button data-action="create" data-mode="pvp" ${dis}>создать комнату (pvp)</button>
+        <button data-action="refresh" ${dis}>обновить список</button>
+      </div>
+      <ul class="room-list">
+        ${rooms.length === 0 ? '<li class="room-list__empty">пока пусто — создай комнату</li>' : rooms.map(roomRow).join('')}
+      </ul>
+    </div>`;
+}
+
+function renderRoomView() {
+  container.innerHTML = `
+    <div class="lobby-panel">
+      ${errorBanner()}
+      <h3 class="prompt">room ${currentRoom.name}</h3>
+      <p>режим: <span class="tag">${currentRoom.mode}</span></p>
+      <ul class="room-players">
+        ${currentRoom.players.map((p) => `<li>${p.nickname}</li>`).join('')}
+      </ul>
+      <button data-action="leave">выйти в лобби</button>
+    </div>`;
+}
+
+function render() {
+  if (currentRoom) {
+    renderRoomView();
+  } else {
+    renderLobbyView();
+  }
+}
+
+container?.addEventListener('click', (e) => {
+  const btn = e.target.closest('[data-action]');
+  if (!btn) return;
+  errorMessage = '';
+  switch (btn.dataset.action) {
+    case 'create':
+      net.createRoom(btn.dataset.mode);
+      break;
+    case 'join':
+      net.joinRoom(btn.dataset.roomId);
+      break;
+    case 'leave':
+      currentRoom = null;
+      net.leaveRoom();
+      render();
+      break;
+    case 'refresh':
+      net.listRooms();
+      break;
+  }
+});
+
+container?.addEventListener('change', (e) => {
+  if (e.target.id === 'nickname-input') {
+    nickname = e.target.value.trim() || nickname;
+  }
+});
+
+export function initLobby() {
+  net = new Network();
+
+  net.on('_open', () => net.hello(nickname));
  net.on(ServerMessage.HELLO_ACK, () => {
-    console.log('[gameserver] hello.ack received');
+    connected = true;
    net.listRooms();
  });
-  net.on(ServerMessage.LOBBY_ROOMS, (payload) => {
-    console.log('[gameserver] rooms:', payload.rooms);
-  });
-  net.on(ServerMessage.ERROR, (payload) => {
-    console.error('[gameserver] error:', payload);
+  net.on('_close', () => {
+    connected = false;
+    render();
  });

+  net.on(ServerMessage.LOBBY_ROOMS, (payload) => {
+    rooms = payload.rooms;
+    render();
+  });
+
+  net.on(ServerMessage.LOBBY_ROOM_JOINED, (payload) => {
+    currentRoom = payload;
+    render();
+  });
+
+  net.on(ServerMessage.LOBBY_ROOM_UPDATED, (payload) => {
+    if (currentRoom) {
+      currentRoom.players = payload.players;
+      render();
+    }
+  });
+
+  net.on(ServerMessage.ERROR, (payload) => {
+    console.error('[gameserver] error:', payload);
+    errorMessage = payload.message;
+    render();
+  });
+
+  render();
  return net;
 }