fix a reload issue

src/main/client/src/Game.jsx

@@ -166,7 +166,7 @@ export const Game = () => {
         y: cursor_y,
       }),
     })
-  }, [context, currentPlayer, currentColor, auth, board, gameId, stompClient, counting, forbidden_x, forbidden_y, gameHasEnded])
+  }, [context, currentPlayer, currentColor, auth, board, stompClient, counting, forbidden_x, forbidden_y, gameHasEnded, movesLength])
 
   useEffect(() => {
     if (!board.length) {

src/main/client/src/feature/GamePanel.jsx

@@ -3,7 +3,6 @@ import {
   useContext,
 } from "react"
 import {
-  useParams,
   useNavigate,
 } from "react-router-dom"
 import {
@@ -46,11 +45,11 @@ export const GamePanel = ({zoom, setZoom}) => {
 }
 
 function Panel({zoom, setZoom}) {
-  let { gameId } = useParams()
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
   let black = useGameStore(state => state.black)
   let white = useGameStore(state => state.white)
+  let isSelfPlay = black === white
   let queueLength = useGameStore(state => state.queueLength)
   let movesLength = useGameStore(state => state.moves.length)
   let counting = useGameStore(state => state.counting)
@@ -71,7 +70,7 @@ function Panel({zoom, setZoom}) {
         action: "pass",
       }),
     })
-  }, [stompClient, gameId, movesLength])
+  }, [stompClient, movesLength])
   let onResetCounting = useCallback(() => {
     stompClient.publish({
       destination: "/app/game/move",
@@ -80,7 +79,7 @@ function Panel({zoom, setZoom}) {
         action: "resetCounting",
       }),
     })
-  }, [stompClient, gameId, movesLength])
+  }, [stompClient, movesLength])
   let onCountingAgree = useCallback(() => {
     setAgreeCounting(true)
     stompClient.publish({
@@ -90,7 +89,7 @@ function Panel({zoom, setZoom}) {
         action: "agreeCounting",
       }),
     })
-  }, [stompClient, gameId, movesLength])
+  }, [stompClient, movesLength, setAgreeCounting])
   if (!board.length) {
     return <span>Loading...</span>
   }
@@ -162,7 +161,7 @@ function Panel({zoom, setZoom}) {
         </div>
         <div className="flex-none">
           <Button
-            disabled={agreeCounting || gameHasEnded || !countingComplete()}
+            disabled={(!isSelfPlay && agreeCounting) || gameHasEnded || !countingComplete()}
             className="py-1 px-4"
             onClick={onCountingAgree}>
             OK

src/main/client/src/store.js

@@ -119,10 +119,6 @@ export const useGameStore = create((set, get) => ({
         state.gameState.gameHasEnded = true
         return
       }
-      if (move.action === "agreeCounting") {
-        return
-      }
-      state.agreeCounting = false
       let moves = get().moves
       let baseBoard = get().baseBoard
       if (move.n < moves.length) {
@@ -139,6 +135,9 @@ export const useGameStore = create((set, get) => ({
       }
       let [storedMove, updated, forbidden] = createMoveData(baseBoard, moves, move, counting, get().handicap)
       state.moves.push(storedMove)
+      if (move.action !== "agreeCounting") {
+        state.agreeCounting = false
+      }
       state.lastMove = move.action === "pass" ? undefined : move
       state.baseBoard = updated
       state.gameState.board = rehydrate(updated)
@@ -167,7 +166,7 @@ export const useGameStore = create((set, get) => ({
           state.gameState.gameHasEnded = true
           break
         }
-        if (move.pass) {
+        if (move.action === "pass") {
           if (passes) {
             counting = true
             queueLength = move.n
@@ -201,6 +200,9 @@ export const useGameStore = create((set, get) => ({
 
 function createMoveData(baseBoard, moves, colorlessMove, counting, handicap) {
   let move = {...colorlessMove, color: nextMoveColor(moves, handicap)}
+  if (move.action === "agreeCounting") {
+    return [move, baseBoard, [-1, -1]]
+  }
   if (move.action === "pass" && moves.length && moves[moves.length - 1].action === "pass") {
     return [move, count(baseBoard), [-1, -1]]
   }