feat: add the always-available recovery menu and child-safe confirmations

2026-08-30 23:28:47 +03:00
parent a68023e684
commit d5eb26d330
6 changed files with 143 additions and 4 deletions
@@ -11,7 +11,8 @@
    fire: el('fire-button'), cancel: el('cancel-target'), abort: el('abort-game'), rematch: el('rematch-button'),
    result: el('result-description'), error: el('error-description'), lobbyIcon: el('lobby-icon'), resultIcon: el('result-icon'),
    cue: el('action-cue'), cueIcon: el('action-cue-icon'), cueText: el('action-cue-text'), effects: el('game-effects'),
-    effectIcon: el('effect-icon'), effectText: el('effect-text'), effectBurst: el('effect-burst'), effectBadge: el('effect-badge')
+    effectIcon: el('effect-icon'), effectText: el('effect-text'), effectBurst: el('effect-burst'), effectBadge: el('effect-badge'),
+    recoveryButton: el('recovery-menu-button'), recoveryDialog: el('recovery-dialog'), recoveryClose: el('recovery-close'), recoveryChoices: el('recovery-choices'), recoveryGlobal: el('recovery-global-choice'), recoveryConfirmation: el('recovery-confirmation'), recoveryCancel: el('recovery-cancel'), recoveryConfirm: el('recovery-confirm'), recoveryConfirmTitle: el('recovery-confirm-title'), recoveryConfirmText: el('recovery-confirm-text'), recoveryConfirmLabel: el('recovery-confirm-label'), recoveryHoldNote: el('recovery-hold-note'), recoveryScopeIcon: el('recovery-scope-icon'), recoveryLive: el('recovery-live')
  };
  let token = localStorage.getItem(storage.token) || '';
  let role = '';
@@ -31,6 +32,10 @@
  let retryIndex = 0;
  let effectTimer;
  let hitStreak = 0;
+  let recoveryAction;
+  let recoveryPending = false;
+  let recoveryHoldTimer;
+  let recoveryOpener;

  const reaction = (kind, icon, text, motion = 'pop', burst = 'none', vibration = [45]) => ({ kind, icon, text, motion, burst, vibration });
  const feedback = {
@@ -190,6 +195,68 @@

  function showScreen(name) {
    screens.forEach(screen => { el(`screen-${screen}`).hidden = screen !== name; });
+    ui.recoveryButton.hidden = name === 'connect' || !token;
+  }
+
+  function clearRecoveryTimers() {
+    window.clearTimeout(retryTimer); retryTimer = undefined;
+    window.clearInterval(pollTimer); pollTimer = undefined;
+    window.clearInterval(heartbeatTimer); heartbeatTimer = undefined;
+    window.clearInterval(lobbyInfoTimer); lobbyInfoTimer = undefined;
+    window.clearTimeout(effectTimer); effectTimer = undefined;
+    window.clearTimeout(recoveryHoldTimer); recoveryHoldTimer = undefined;
+  }
+
+  function clearLocalProfile(profile) {
+    clearRecoveryTimers();
+    if (socket) { socket.onclose = null; socket.close(); socket = undefined; }
+    selectedTarget = undefined; firePending = false; cumulativeStatistics = undefined; statisticsGameId = undefined;
+    activeBoard = 'own'; hitStreak = 0; state = undefined; role = ''; info = undefined; targetActivator = undefined;
+    document.body.classList.remove('fx-hit', 'fx-damage'); ui.effects.hidden = true; notify('');
+    Object.keys(localStorage).filter(key => key.startsWith('battleship.')).forEach(key => localStorage.removeItem(key));
+    if (!profile) { const rememberedName = ui.name.value.trim(); if (rememberedName) localStorage.setItem(storage.name, rememberedName); }
+    token = ''; ui.name.value = profile ? '' : (localStorage.getItem(storage.name) || '');
+    closeRecovery(); showScreen('connect'); setConnection('Готово к подключению');
+  }
+
+  function closeRecovery() {
+    window.clearTimeout(recoveryHoldTimer); recoveryHoldTimer = undefined; recoveryAction = undefined; recoveryPending = false;
+    ui.recoveryDialog.hidden = true; ui.recoveryButton.setAttribute('aria-expanded', 'false');
+    if (recoveryOpener) recoveryOpener.focus();
+  }
+
+  function recoveryIcon(symbol) { setSpriteIcon(ui.recoveryScopeIcon, symbol); }
+  function showRecoveryConfirmation(action) {
+    recoveryAction = action; ui.recoveryChoices.hidden = true; ui.recoveryConfirmation.hidden = false;
+    const game = action === 'game'; const profile = action === 'profile';
+    recoveryIcon(game ? 'icon-players' : 'icon-person');
+    ui.recoveryConfirmTitle.textContent = game ? 'Сбросить всю игру?' : profile ? 'Сбросить мой профиль?' : 'Выйти из игры?';
+    ui.recoveryConfirmText.textContent = game ? 'Все игроки вернутся к началу.' : profile ? 'На этом устройстве очистятся имя и данные.' : 'Вы вернётесь к подключению. Имя останется.';
+    ui.recoveryConfirmLabel.textContent = game ? 'Удерживать для сброса' : profile ? 'Сбросить профиль' : 'Выйти';
+    ui.recoveryHoldNote.hidden = !game; ui.recoveryConfirm.classList.remove('holding'); ui.recoveryConfirm.disabled = false;
+    ui.recoveryCancel.focus();
+  }
+
+  function openRecovery() {
+    if (!token) return; recoveryOpener = document.activeElement; ui.recoveryDialog.hidden = false; ui.recoveryButton.setAttribute('aria-expanded', 'true');
+    ui.recoveryChoices.hidden = false; ui.recoveryConfirmation.hidden = true; ui.recoveryGlobal.hidden = !isPlayer(); ui.recoveryClose.focus();
+  }
+
+  async function submitRecovery() {
+    if (!recoveryAction || recoveryPending) return;
+    recoveryPending = true; ui.recoveryConfirm.disabled = true; ui.recoveryLive.textContent = 'Выполняем действие…';
+    const action = recoveryAction;
+    if (action === 'profile' && navigator.onLine === false) {
+      clearLocalProfile(true);
+      notify('Профиль очищен на этом устройстве. Место на ESP32 освободится после восстановления связи или таймаута.');
+      return;
+    }
+    try {
+      if (action === 'leave') await request('/api/session/leave', { method: 'POST', headers: headers(), body: JSON.stringify({ token, gameId: state?.gameId || 0 }) });
+      else if (action === 'profile') await request('/api/session/profile-reset', { method: 'POST', headers: headers(), body: JSON.stringify({ token, gameId: state?.gameId || 0 }) });
+      else await request('/api/game/reset', { method: 'POST', headers: headers(), body: JSON.stringify({ token, gameId: state?.gameId || 0 }) });
+      clearLocalProfile(action !== 'leave');
+    } catch (error) { recoveryPending = false; ui.recoveryConfirm.disabled = false; ui.recoveryLive.textContent = 'Не получилось. Можно повторить или отменить.'; notify(error.message, true); }
  }

  function setConnection(text, status) {
@@ -590,6 +657,8 @@
        if (message.type === 'state') {
          acceptState(message); retryIndex = 0; stopPolling(); setConnection('Синхронизация онлайн', 'online');
          if (!heartbeatTimer) heartbeatTimer = window.setInterval(() => { if (socket?.readyState === WebSocket.OPEN) socket.send('{"type":"ping"}'); }, 15000);
+        } else if (message.type === 'reset') {
+          clearLocalProfile(true);
        } else if (message.ok === false) notify(apiError(message), true);
      } catch (_) { socket.close(); }
    };
@@ -620,6 +689,31 @@
  ui.abort.addEventListener('click', () => post('/api/game/abort', { token, gameId: state.gameId }));
  ui.rematch.addEventListener('click', () => post('/api/game/rematch', { token, gameId: state.gameId }));
  el('retry-button').addEventListener('click', () => { refreshInfo(); pollState(); connectSocket(); });
+  ui.recoveryButton.addEventListener('click', openRecovery);
+  ui.recoveryClose.addEventListener('click', closeRecovery);
+  ui.recoveryCancel.addEventListener('click', () => { recoveryAction = undefined; ui.recoveryConfirmation.hidden = true; ui.recoveryChoices.hidden = false; ui.recoveryClose.focus(); });
+  ui.recoveryChoices.addEventListener('click', event => {
+    const choice = event.target.closest('[data-recovery-action]');
+    if (choice && !choice.hidden) showRecoveryConfirmation(choice.dataset.recoveryAction);
+  });
+  ui.recoveryConfirm.addEventListener('click', event => { if (recoveryAction !== 'game' || event.detail === 0) submitRecovery(); });
+  ui.recoveryConfirm.addEventListener('pointerdown', event => {
+    if (recoveryAction !== 'game' || event.button !== 0 || recoveryPending) return;
+    ui.recoveryConfirm.classList.add('holding'); recoveryHoldTimer = window.setTimeout(submitRecovery, 2000);
+  });
+  ['pointerup', 'pointercancel', 'pointerleave'].forEach(type => ui.recoveryConfirm.addEventListener(type, () => {
+    if (recoveryHoldTimer) { window.clearTimeout(recoveryHoldTimer); recoveryHoldTimer = undefined; ui.recoveryConfirm.classList.remove('holding'); ui.recoveryLive.textContent = 'Удерживание отменено.'; }
+  }));
+  document.addEventListener('keydown', event => {
+    if (ui.recoveryDialog.hidden) return;
+    if (event.key === 'Escape') { event.preventDefault(); closeRecovery(); }
+    else if (event.key === 'Tab') {
+      const items = [...ui.recoveryDialog.querySelectorAll('button:not([hidden]):not(:disabled)')];
+      const first = items[0]; const last = items[items.length - 1];
+      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
+      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
+    }
+  });

  async function boot() {
    ui.name.value = localStorage.getItem(storage.name) || '';