fix more stale data issues

src/main/client/src/feature/game/Game.jsx

@@ -44,6 +44,7 @@ export const Game = () => {
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
   let id = useGameStore(state => state.id)
+  let gameHasEnded = useGameStore(state => state.gameHasEnded)
   let lastMove = useGameStore(state => state.lastMove)
   let setGameState = useGameStore(state => state.setGameState)
   let queueStatus = useGameStore(state => state.queueStatus)
@@ -52,9 +53,9 @@ export const Game = () => {
   let currentPlayer = useGameStore(state => state.currentPlayer)
   let counting = useGameStore(state => state.counting)
   let currentColor = useGameStore(state => state.currentColor)
-  let {board, forbidden: [forbidden_x, forbidden_y], gameHasEnded} = useGameStore(state => state.gameState)
+  let {board, forbidden: [forbidden_x, forbidden_y]} = useGameStore(state => state.gameState)
   let canvasRef = useRef()
-  let countingGroup = !gameHasEnded && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
+  let countingGroup = !gameHasEnded() && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
 
   let context = useMemo(() => {
     let dim = board.length
@@ -116,7 +117,7 @@ export const Game = () => {
   }, [board.length, canvasRef, zoom])
 
   let onMouseMove = useCallback((e) => {
-    if (gameHasEnded) {
+    if (gameHasEnded()) {
       return
     }
     if (!board.length) {
@@ -137,7 +138,7 @@ export const Game = () => {
   }, [context, currentPlayer, auth, board.length, counting, gameHasEnded])
 
   let onClick = useCallback((e) => {
-    if (gameHasEnded) {
+    if (gameHasEnded()) {
       return
     }
     if (!board.length) {
@@ -222,7 +223,7 @@ export const Game = () => {
           "Authorization": "Bearer " + auth.token,
         },
       })
-      setGameState(game)
+      setGameState(game, auth)
     }, () => navigate(base + "/lobby"))
   }, [setGameState, queueStatus, auth, id, gameId, navigate])
 
@@ -232,7 +233,7 @@ export const Game = () => {
       addMove(move)
     })
     return sub.unsubscribe
-  }, [setGameState, addMove, stompClient, gameId, auth])
+  }, [addMove, stompClient, gameId])
 
   if (!board.length) {
     return <div>Loading...</div>

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

@@ -53,11 +53,11 @@ function Panel({zoom, setZoom}) {
   let queueLength = useGameStore(state => state.queueLength)
   let movesLength = useGameStore(state => state.moves.length)
   let counting = useGameStore(state => state.counting)
-  let agreeCounting = useGameStore(state => state.agreeCounting)
-  let setAgreeCounting = useGameStore(state => state.setAgreeCounting)
+  let countingAgreed = useGameStore(state => state.countingAgreed)
+  let gameHasEnded = useGameStore(state => state.gameHasEnded)
   let countingComplete = useGameStore(state => state.countingComplete)
   let currentPlayer = useGameStore(state => state.currentPlayer)
-  let { board, gameHasEnded } = useGameStore(state => state.gameState)
+  let {board} = useGameStore(state => state.gameState)
   let navigate = useNavigate()
   let onExit = useCallback(() => {
     navigate(base + "/lobby")
@@ -81,19 +81,18 @@ function Panel({zoom, setZoom}) {
     })
   }, [stompClient, movesLength])
   let onCountingAgree = useCallback(() => {
-    setAgreeCounting(true)
     stompClient.publish({
       destination: "/app/game/move",
       body: JSON.stringify({
         n: movesLength,
         action: "agreeCounting",
       }),
     })
-  }, [stompClient, movesLength, setAgreeCounting])
+  }, [stompClient, movesLength])
   if (!board.length) {
     return <span>Loading...</span>
   }
-  let result = gameHasEnded ? getScore(board) : undefined
+  let result = gameHasEnded() ? getScore(board) : undefined
   return (
     <>
       <div className="flex-none grid w-full grid-cols-[min-content_min-content_min-content_auto] gap-x-2">
@@ -146,22 +145,22 @@ function Panel({zoom, setZoom}) {
         <Button
           onClick={onPass}
           className="py-1 px-4"
-          disabled={gameHasEnded || counting || currentPlayer() !== auth.name}>
+          disabled={gameHasEnded() || counting || currentPlayer() !== auth.name}>
           Pass
         </Button>
       </div>
       {counting && <>
         <div className="flex-none">
           <Button
             className="py-1 px-4"
-            disabled={gameHasEnded}
+            disabled={gameHasEnded()}
             onClick={onResetCounting}>
             Reset Counting
           </Button>
         </div>
         <div className="flex-none">
           <Button
-            disabled={(!isSelfPlay && agreeCounting) || gameHasEnded || !countingComplete()}
+            disabled={(!isSelfPlay && countingAgreed()) || gameHasEnded() || !countingComplete()}
             className="py-1 px-4"
             onClick={onCountingAgree}>
             OK

src/main/client/src/store.js

@@ -9,6 +9,7 @@ import {
 } from "zustand/middleware"
 import {
   BLACK,
+  WHITE,
   COLORS,
 } from "./util.js"
 import {
@@ -60,6 +61,9 @@ export const useGameStore = create((set, get) => ({
   queueStatus: "behind",
   black: "",
   white: "",
+  myColor: 0,
+  counting: false,
+  queueLength: 0,
   lastMove: undefined,
   countingComplete: () => {
     if (!get().counting) {
@@ -89,7 +93,6 @@ export const useGameStore = create((set, get) => ({
     }
     return moves[moves.length - 1].color === BLACK ? white : black
   },
-  queueLength: 0,
   currentColor: () => {
     let moves = get().moves
     let handicap = get().handicap
@@ -101,8 +104,23 @@ export const useGameStore = create((set, get) => ({
     }
     return moves[moves.length - 1].color ^ COLORS
   },
-  counting: false,
-  agreeCounting: false,
+  countingAgreed: () => {
+    let moves = get().moves
+    let myColor = get().myColor
+    if (!moves.length) {
+      return false
+    }
+    let move = moves[moves.length - 1]
+    return move.color === myColor && move.action === "agreeCounting"
+  },
+  gameHasEnded: () => {
+    let moves = get().moves
+    if (!moves.length) {
+      return false
+    }
+    let move = moves[moves.length - 1]
+    return move.action === "end"
+  },
   setAgreeCounting: (agree) => {
     set(produce(state => {
       state.agreeCounting = agree
@@ -111,7 +129,6 @@ export const useGameStore = create((set, get) => ({
   gameState: {
     board: [],
     forbidden: [-1, -1],
-    gameHasEnded: false,
   },
   addMove: (move) => {
     set(produce(state => {
@@ -148,11 +165,19 @@ export const useGameStore = create((set, get) => ({
       }
     }))
   },
-  setGameState: (game) => {
+  setGameState: (game, auth) => {
     set(produce(state => {
       state.id = game.id
       state.black = game.black
       state.white = game.white
+      state.counting = false
+      if (auth.name === game.black) {
+        state.myColor = BLACK
+      } else if (auth.name === game.white) {
+        state.myColor = WHITE
+      } else {
+        state.myColor = 0
+      }
       let baseBoard = Array(game.dim)
       for (let y = 0; y < game.dim; y++) {
         baseBoard[y] = new Int32Array(game.dim)
@@ -178,7 +203,7 @@ export const useGameStore = create((set, get) => ({
         } else {
           passes = 0
         }
-        let [storedMove, updated, newForbidden] = createMoveData(baseBoard, moves, move, counting, game.handicap)
+        let [storedMove, updated, newForbidden] = createMoveData(baseBoard, moves, move, counting)
         moves.push(storedMove)
         forbidden = newForbidden
         baseBoard = updated
@@ -202,8 +227,7 @@ export const useGameStore = create((set, get) => ({
   },
 }))
 
-function createMoveData(baseBoard, moves, colorlessMove, counting, handicap) {
-  let move = {...colorlessMove, color: nextMoveColor(moves, handicap)}
+function createMoveData(baseBoard, moves, move, counting) {
   if (move.action === "agreeCounting") {
     return [move, baseBoard, [-1, -1]]
   }
@@ -221,14 +245,3 @@ function createMoveData(baseBoard, moves, colorlessMove, counting, handicap) {
   let forbidden = getForbidden(baseBoard, updated, storedMove)
   return [storedMove, updated, forbidden]
 }
-
-function nextMoveColor(moves, handicap) {
-    let remainingHandicap = Math.max(0, handicap - moves.length)
-    if (remainingHandicap) {
-      return BLACK
-    }
-    if (!moves.length) {
-      return BLACK
-    }
-    return moves[moves.length - 1].color ^ COLORS
-  }

src/main/java/com/bernd/game/MoveList.java

@@ -3,7 +3,6 @@
 import com.bernd.model.Move;
 import java.util.ArrayList;
 import java.util.List;
-import java.util.stream.Stream;
 
 public final class MoveList {
 
@@ -37,8 +36,8 @@ public int size() {
     return moves.size();
   }
 
-  public Stream<Move> asStream() {
-    return moves.stream();
+  public List<Move> moves() {
+    return moves;
   }
 
   @Override

src/main/java/com/bernd/model/Move.java

@@ -15,8 +15,8 @@ public Move withColor(int color) {
     return new Move(color, n, action, x, y);
   }
 
-  public ColorlessMove removeColor() {
-    return new ColorlessMove(n, action, x, y);
+  public Move removeColor() {
+    return this;
   }
 
   public boolean agreeCounting() {

src/main/java/com/bernd/model/ViewGame.java

@@ -8,8 +8,7 @@ public record ViewGame(
     String white,
     int dim,
     int handicap,
-    int remainingHandicap,
-    List<ColorlessMove> moves
+    List<Move> moves
 ) {
 
   static ViewGame fromGame(Game game) {
@@ -19,7 +18,6 @@ static ViewGame fromGame(Game game) {
         game.white(),
         game.dim(),
         game.handicap(),
-        game.remainingHandicap(),
-        game.moves().asStream().map(Move::removeColor).toList());
+        game.moves().moves());
   }
 }