implement ship placing UI

frontend/src/components/GameScreen.jsx

@@ -1,19 +1,70 @@
-import { useEffect, useRef, useState } from 'react'
-import { createGameConnection } from '../game'
+import { useEffect, useRef, useState, useCallback } from 'react'
+import {
+  createGameConnection,
+  STATE_PLACING_SHIPS,
+  STATE_OPPONENT_READY,
+  STATE_WAIT_OPPONENT_READY,
+  STATE_YOUR_TURN,
+  STATE_WAIT_OPPONENT_TURN,
+} from '../game'
+import ShipPlacementScreen from './ShipPlacementScreen'
 
 export default function GameScreen({ session, onLeave }) {
-  const [status, setStatus] = useState('connecting') // 'connecting' | 'ready' | 'error'
+  const [status, setStatus] = useState('connecting') // 'connecting' | 'placing' | 'game' | 'error'
+  const [gameState, setGameState] = useState(STATE_PLACING_SHIPS)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [opponentReady, setOpponentReady] = useState(false)
   const [error, setError] = useState(null)
+
+  const connectionRef = useRef(null)
   const attemptRef = useRef(0)
 
   useEffect(() => {
     const attempt = ++attemptRef.current
     let cancelled = false
-    const connection = createGameConnection(session)
+    const connInstance = createGameConnection(session)
 
-    connection.promise
-      .then(() => {
-        if (!cancelled && attempt === attemptRef.current) setStatus('ready')
+    connInstance.promise
+      .then((conn) => {
+        if (cancelled || attempt !== attemptRef.current) return
+        connectionRef.current = conn
+
+        conn.onState = (newState) => {
+          if (cancelled || attempt !== attemptRef.current) return
+
+          if (newState === STATE_OPPONENT_READY) {
+            setOpponentReady(true)
+          } else if (
+            newState === STATE_WAIT_OPPONENT_READY ||
+            newState === STATE_YOUR_TURN ||
+            newState === STATE_WAIT_OPPONENT_TURN
+          ) {
+            setIsSubmitting(false)
+            setGameState(newState)
+            setStatus('game')
+          }
+        }
+
+        conn.onEnd = (_code, reason) => {
+          if (cancelled || attempt !== attemptRef.current) return
+          setIsSubmitting(false)
+          setError(reason || 'Партия завершена')
+          setStatus('error')
+        }
+
+        conn.onClose = () => {
+          if (cancelled || attempt !== attemptRef.current) return
+          setIsSubmitting(false)
+          setStatus((prev) => {
+            if (prev !== 'error') {
+              setError('Соединение с сервером прервано')
+              return 'error'
+            }
+            return prev
+          })
+        }
+
+        setStatus('placing')
       })
       .catch((err) => {
         if (cancelled || attempt !== attemptRef.current) return
@@ -23,33 +74,89 @@ export default function GameScreen({ session, onLeave }) {
 
     return () => {
       cancelled = true
-      connection.cancel()
+      connInstance.cancel()
     }
   }, [session])
 
+  const handleReady = useCallback((ships) => {
+    if (!connectionRef.current) return
+    setIsSubmitting(true)
+    connectionRef.current.placeShips(ships)
+  }, [])
+
+  // Текст заглушки в зависимости от состояния игры
+  const getGameStubText = () => {
+    switch (gameState) {
+      case STATE_WAIT_OPPONENT_READY:
+        return 'Соперник расставляет корабли...'
+      case STATE_YOUR_TURN:
+        return 'Ваш ход'
+      case STATE_WAIT_OPPONENT_TURN:
+        return 'Соперник ходит'
+      default:
+        return ''
+    }
+  }
+
   return (
-    <div className="page">
-      <main className="search-screen">
-        {status === 'connecting' && (
-          <>
-            <div className="search-label">Подключение к игре...</div>
+    <div className="page game-page">
+      {status === 'connecting' && (
+        <main className="search-screen">
+          <div className="search-label">Подключение к игре...</div>
+          <div className="bouncing-dots" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </div>
+        </main>
+      )}
+
+      {status === 'placing' && (
+        <main className="game-screen-main">
+          <ShipPlacementScreen
+            onReady={handleReady}
+            isSubmitting={isSubmitting}
+            opponentReady={opponentReady}
+          />
+        </main>
+      )}
+
+      {status === 'game' && (
+        <main className="search-screen">
+          <div className="search-label">{getGameStubText()}</div>
+          {(gameState === STATE_WAIT_OPPONENT_READY ||
+            gameState === STATE_WAIT_OPPONENT_TURN) && (
             <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>
+          )}
+        </main>
+      )}
+
+      {status === 'error' && (
+        <main className="search-screen">
+          <div className="search-error">{error}</div>
+          <button className="btn btn-big btn-secondary" onClick={onLeave}>
+            Назад в меню
+          </button>
+        </main>
+      )}
+
+      {/* Модальный pop-up с надписью "Загрузка...", пока сервер не ответит сменой состояния */}
+      {isSubmitting && (
+        <div className="modal-overlay">
+          <div className="modal loading-modal">
+            <h2 className="modal-title">Загрузка...</h2>
+            <div className="bouncing-dots" style={{ justifyContent: 'center', marginTop: 16 }}>
+              <span />
+              <span />
+              <span />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }