add matchmaking progress screen

2026-10-25 23:59:41 +03:00
parent 656fc44fd8
commit 9987407187
7 changed files with 520 additions and 1 deletions
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from 'react'
+import { createGameConnection } from '../game'
+
+export default function GameScreen({ session, onLeave }) {
+  const [status, setStatus] = useState('connecting') // 'connecting' | 'ready' | 'error'
+  const [error, setError] = useState(null)
+  const attemptRef = useRef(0)
+
+  useEffect(() => {
+    const attempt = ++attemptRef.current
+    let cancelled = false
+    const connection = createGameConnection(session)
+
+    connection.promise
+      .then(() => {
+        if (!cancelled && attempt === attemptRef.current) setStatus('ready')
+      })
+      .catch((err) => {
+        if (cancelled || attempt !== attemptRef.current) return
+        setError(err.message || 'Не удалось подключиться к игре')
+        setStatus('error')
+      })
+
+    return () => {
+      cancelled = true
+      connection.cancel()
+    }
+  }, [session])
+
+  return (
+    <div className="page">
+      <main className="search-screen">
+        {status === 'connecting' && (
+          <>
+            <div className="search-label">Подключение к игре...</div>
+            <div className="bouncing-dots" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+            </div>
+          </>
+        )}
+        {status === 'ready' && <div className="search-label">Расстановка кораблей</div>}
+        {status === 'error' && (
+          <>
+            <div className="search-error">{error}</div>
+            <button className="btn btn-big btn-secondary" onClick={onLeave}>
+              Назад в меню
+            </button>
+          </>
+        )}
+      </main>
+    </div>
+  )
+}
@@ -0,0 +1,83 @@
+import { useEffect, useRef, useState } from 'react'
+import { createMatchmaking, MatchmakingError } from '../matchmaking'
+
+const STAGE_LABELS = {
+  connecting: 'Подключение...',
+  searching: 'Подбор соперника...',
+}
+
+const ERROR_LABELS = {
+  timeout: 'Соперник не найден. Попробуйте ещё раз.',
+  connection: 'Сетевая ошибка. Проверьте подключение и попробуйте снова.',
+  rejected: 'Не удалось начать поиск. Попробуйте позже.',
+}
+
+export default function SearchScreen({ token, onMatched, onCancel }) {
+  const [stage, setStage] = useState('connecting') // 'connecting' | 'searching'
+  const [error, setError] = useState(null)
+  const [retryToken, setRetryToken] = useState(0)
+  const attemptRef = useRef(0)
+
+  useEffect(() => {
+    const attempt = ++attemptRef.current
+    let cancelled = false
+    let matchmaking = null
+
+    setStage('connecting')
+    setError(null)
+
+    matchmaking = createMatchmaking(token, (status) => {
+      if (!cancelled && attempt === attemptRef.current) setStage(status)
+    })
+
+    matchmaking.promise.then(onMatched).catch((err) => {
+      if (cancelled || attempt !== attemptRef.current) return
+      if (err instanceof MatchmakingError) {
+        setError(ERROR_LABELS[err.code] || ERROR_LABELS.connection)
+      } else {
+        setError(ERROR_LABELS.connection)
+      }
+    })
+
+    return () => {
+      cancelled = true
+      matchmaking.cancel()
+    }
+  }, [token, onMatched, retryToken])
+
+  const handleCancel = () => {
+    onCancel()
+  }
+
+  return (
+    <div className="page">
+      <main className="search-screen">
+        {error ? (
+          <>
+            <div className="search-error">{error}</div>
+            <div className="search-actions">
+              <button className="btn btn-big" onClick={() => setRetryToken((n) => n + 1)}>
+                Ещё раз
+              </button>
+              <button className="btn btn-big btn-secondary" onClick={handleCancel}>
+                Назад
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="search-label">{STAGE_LABELS[stage]}</div>
+            <div className="bouncing-dots" aria-hidden="true">
+              <span />
+              <span />
+              <span />
+            </div>
+            <button className="btn btn-big btn-secondary" onClick={handleCancel}>
+              Отмена
+            </button>
+          </>
+        )}
+      </main>
+    </div>
+  )
+}