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>
+  )
+}