feat: refine the Lobby screen
This commit is contained in:
+22
-5
@@ -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);
|
||||
|
||||
+6
-5
@@ -36,11 +36,12 @@
|
||||
|
||||
<section id="screen-lobby" class="screen" aria-labelledby="lobby-title" hidden>
|
||||
<h2 id="lobby-title">Лобби</h2><p id="lobby-description"></p>
|
||||
<div id="mode-controls" class="panel" hidden>
|
||||
<h3>Режим игры</h3>
|
||||
<div class="button-row"><button type="button" data-mode="human" class="mode-button">Два игрока</button><button type="button" data-mode="bot" class="mode-button">Против ESP32</button></div>
|
||||
<button id="start-game" type="button">Начать игру</button>
|
||||
</div>
|
||||
<section id="mode-controls" class="lobby-mode-section" aria-labelledby="mode-title" hidden>
|
||||
<h3 id="mode-title">Режим игры</h3>
|
||||
<div class="mode-options" role="radiogroup" aria-labelledby="mode-title"><button type="button" role="radio" aria-checked="false" data-mode="human" class="mode-button"><span class="mode-indicator" aria-hidden="true"></span><span>Два игрока</span></button><button type="button" role="radio" aria-checked="false" data-mode="bot" class="mode-button"><span class="mode-indicator" aria-hidden="true"></span><span>Против ESP32</span></button></div>
|
||||
<p id="mode-description" class="muted" aria-live="polite"></p>
|
||||
<button id="start-game" type="button" aria-describedby="mode-description">Начать игру</button>
|
||||
</section>
|
||||
<p id="lobby-help" class="muted"></p>
|
||||
</section>
|
||||
|
||||
|
||||
+4
-3
@@ -10,11 +10,12 @@ button.secondary { background: #31536e; color: #f1f7ff; } button.text-button { m
|
||||
.app-header, .screen-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 1rem; } .app-header > div { min-width: 0; }
|
||||
h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: .2rem; font-size: clamp(1.75rem, 6vw, 2.6rem); } h2 { font-size: clamp(1.35rem, 4vw, 1.8rem); } h3 { margin-bottom: .75rem; font-size: 1.05rem; }
|
||||
.eyebrow, .muted { color: #b6d1e3; } .eyebrow { margin-bottom: .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.connection-status { max-width: 100%; margin: .25rem 0; padding: .4rem .6rem; border-radius: 99rem; background: #28485f; color: #d8eaff; font-size: .88rem; overflow-wrap: anywhere; } .connection-status.online { background: #145b4b; color: #cdfae6; } .connection-status.offline { background: #6f3c36; color: #ffddd8; }
|
||||
.connection-status { max-width: 100%; margin: .25rem 0; padding: .4rem .6rem; border-radius: 99rem; background: #28485f; color: #d8eaff; font-size: .88rem; overflow-wrap: anywhere; } .connection-status.online { background: #145b4b; color: #cdfae6; } .connection-status.polling { background: #234c69; color: #d8eaff; } .connection-status.offline { background: #6f3c36; color: #ffddd8; }
|
||||
.notice { margin: 1rem 0; padding: .75rem 1rem; border-left: .3rem solid #ffe56a; border-radius: .35rem; background: #403b22; } .notice.error { border-color: #ff8e80; background: #4d2929; }
|
||||
.screen, .panel { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid #41708d; border-radius: 1rem; background: rgb(8 39 62 / 92%); box-shadow: 0 1rem 3rem rgb(0 0 0 / 18%); } .panel { margin-top: 1rem; background: #0b304b; }
|
||||
.stack-form { display: grid; gap: .7rem; max-width: 28rem; } input { width: 100%; min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid #6a94ad; border-radius: .65rem; background: #061c2d; color: #f1f7ff; } input:focus-visible { border-color: #3ec6f0; background: #082a41; box-shadow: 0 0 0 .22rem rgb(62 198 240 / 28%); }
|
||||
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; } .button-row > * { flex: 1 1 11rem; } .mode-button[aria-pressed="true"] { background: #ffe56a; color: #312c00; }
|
||||
.button-row { display: flex; flex-wrap: wrap; gap: .6rem; } .button-row > * { flex: 1 1 11rem; }
|
||||
.lobby-mode-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(80 128 156 / 65%); } .lobby-mode-section h3 { margin-bottom: .65rem; } .mode-options { display: grid; gap: .6rem; } .mode-button { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 3rem; border: 1px solid #41708d; background: #123b58; color: #f1f7ff; text-align: left; } .mode-button:hover:not(:disabled) { background: #1a4d6d; } .mode-button[aria-checked="true"] { border-color: #3ec6f0; background: #0d5276; box-shadow: 0 0 0 .12rem rgb(62 198 240 / 20%); } .mode-indicator { display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border: 2px solid #8eb4cb; border-radius: 50%; } .mode-button[aria-checked="true"] .mode-indicator { border-color: #b9f0ff; background: #3ec6f0; color: #032035; } .mode-button[aria-checked="true"] .mode-indicator::before { content: "✓"; font-size: .76rem; font-weight: 900; } #mode-description { min-height: 1.4rem; margin: .7rem 0; } #start-game { width: 100%; min-height: 3rem; }
|
||||
.connection-layout { display: grid; gap: 1.25rem; } .connection-form { min-width: 0; } .connection-support { padding: 1rem; border: 1px solid #315a75; border-radius: .8rem; background: rgb(10 48 75 / 68%); } .connection-support h3 { margin-bottom: .65rem; } .join-steps { display: grid; gap: .55rem; margin: 0; padding-left: 1.35rem; color: #c8e9f8; } .join-steps li { padding-left: .15rem; } .availability-panel { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgb(80 128 156 / 65%); } .availability-panel .eyebrow { margin-bottom: .45rem; }
|
||||
#availability { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; margin-bottom: 0; } .availability-item { display: block; padding: .45rem .6rem; border-left: 2px solid #41708d; border-radius: .35rem; background: rgb(18 59 88 / 62%); }
|
||||
.turn-status { margin-bottom: 0; color: #c8e9f8; font-weight: 650; } .score { margin: .15rem 0; padding: .5rem .75rem; border-radius: .6rem; background: #123b58; font-weight: 750; white-space: nowrap; }
|
||||
@@ -23,6 +24,6 @@ h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: .2rem; font-size: clamp(1.7
|
||||
.board-grid { display: grid; grid-template-columns: 1.15rem repeat(10, minmax(0, 1fr)); gap: 2px; width: 100%; aspect-ratio: 1.1; } .axis { display: grid; place-items: center; color: #b8d3e6; font-size: clamp(.52rem, 2.2vw, .72rem); font-weight: 700; }
|
||||
.cell { min-height: 0; padding: 0; border-radius: .12rem; border: 1px solid #4e87a6; background: #167aa6; color: #fff; font-size: clamp(.68rem, 3vw, 1.15rem); line-height: 1; } .cell.ship { background: #b2c8d6; color: #1c3442; } .cell.miss::before { content: "•"; color: #08253a; font-size: 1.15em; } .cell.hit, .cell.sunk { background: #b83e42; color: #fff; } .cell.hit::before, .cell.sunk::before { content: "×"; font-size: 1.25em; font-weight: 900; } .cell.sunk { outline: 2px solid #ffe56a; outline-offset: -3px; } .cell.target { background: #0c648b; cursor: pointer; } .cell.selected { outline: 3px solid #ffe56a; outline-offset: -3px; } .cell[disabled] { opacity: 1; cursor: default; }
|
||||
.shot-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1rem; } .shot-controls p { flex: 1 1 14rem; margin: 0; } .reconnecting { border-color: #ffe56a; } .error-screen { border-color: #ff8e80; }
|
||||
@media (min-width: 44rem) { .app-shell { display: flex; flex-direction: column; min-height: 100svh; } .app-header { align-items: center; } .connection-status { margin: 0; } #screen-connect { width: min(100%, 48rem); margin: clamp(1.25rem, 4vh, 2.5rem) auto auto; padding: clamp(1.5rem, 4vw, 2.5rem); } #screen-connect .stack-form { width: min(100%, 42rem); max-width: 42rem; } #screen-connect .button-row > * { flex-basis: 16rem; } .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board-tabs { display: none; } .board[hidden] { display: block; } }
|
||||
@media (min-width: 44rem) { .app-shell { display: flex; flex-direction: column; min-height: 100svh; } .app-header { align-items: center; } .connection-status { margin: 0; } #screen-connect, #screen-lobby { width: min(100%, 48rem); margin: clamp(1.25rem, 4vh, 2.5rem) auto auto; padding: clamp(1.5rem, 4vw, 2.5rem); } #screen-connect .stack-form { width: min(100%, 42rem); max-width: 42rem; } #screen-connect .button-row > * { flex-basis: 16rem; } .mode-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .board-tabs { display: none; } .board[hidden] { display: block; } }
|
||||
@media (min-width: 60rem) { #screen-connect { width: 100%; max-width: none; min-height: min(29rem, calc(100svh - 9rem)); display: grid; align-content: center; } #screen-connect .connection-layout { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); align-items: stretch; gap: clamp(1.5rem, 4vw, 3rem); } #screen-connect .stack-form { max-width: none; } #screen-connect .connection-support { display: flex; flex-direction: column; justify-content: center; } }
|
||||
@media (max-width: 43.99rem) { .app-shell { padding-inline: max(1.25rem, env(safe-area-inset-left)) max(1.25rem, env(safe-area-inset-right)); } .app-header { flex-direction: column; align-items: stretch; gap: .45rem; } .connection-status { align-self: flex-start; margin: 0; } #screen-connect { padding: 1.25rem; } .button-row { flex-direction: column; flex-wrap: nowrap; } .button-row > * { flex: 0 0 auto; width: 100%; min-height: 3rem; } #availability { margin-top: 0; } .board[hidden] { display: none; } .result-boards .board[hidden] { display: block; } }
|
||||
|
||||
Reference in New Issue
Block a user