wip incremental updates

Author: h908714124

src/main/client/src/Game.jsx

@@ -47,6 +47,7 @@ export const Game = () => {
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
   let setGameState = useGameStore(state => state.setGameState)
+  let addMove = useGameStore(state => state.addMove)
   let { board, currentColor, currentPlayer, counting, forbidden } = useGameStore(state => state.gameState)
   let [forbidden_x, forbidden_y] = forbidden
   let initialized = useRef()
@@ -192,13 +193,9 @@ export const Game = () => {
       return
     }
     initialized.current = true
-    let sub1 = stompClient.subscribe("/topic/game/" + gameId, (message) => {
-      let game = JSON.parse(message.body)
-      setGameState(game)
-    })
     let sub2 = stompClient.subscribe("/topic/move/" + gameId, (message) => {
       let move = JSON.parse(message.body)
-      console.log(move) // TODO
+      addMove(move)
     })
     doTry(async () => {
       let game = await tfetch("/api/game/" + gameId, {
@@ -209,10 +206,9 @@ export const Game = () => {
       setGameState(game)
     })
     return () => {
-      sub1.unsubscribe()
       sub2.unsubscribe()
     }
-  }, [setGameState, initialized, stompClient, gameId, auth])
+  }, [setGameState, addMove, initialized, stompClient, gameId, auth])
   if (!board.length) {
     return <div>Loading...</div>
   }

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

@@ -46,7 +46,8 @@ function Panel({zoom, setZoom}) {
   let { gameId } = useParams()
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
-  let { black, white} = useGameStore(state => state)
+  let black = useGameStore(state => state.black)
+  let white = useGameStore(state => state.white)
   let { board, currentPlayer, counting } = useGameStore(state => state.gameState)
   let navigate = useNavigate()
   let onExit = useCallback(() => {

src/main/client/src/model/board.js

@@ -166,3 +166,14 @@ export function isForbidden(board, groupInfo, currentColor) {
   }
   return true
 }
+
+export function updateBoard(board, {color, pass, x: xx, y: yy}) {
+  let result = []
+  for (let y = 0; y < board.length; y++) {
+    result[y] = board[y].slice()
+  }
+  if (!pass) {
+    result[yy][xx] = color
+  }
+  return result
+}

src/main/client/src/store.js

@@ -6,9 +6,11 @@ import {
 } from "immer"
 import {
   BLACK,
+  WHITE,
 } from "./util.js"
 import {
   rehydrate,
+  updateBoard,
 } from "./model/board.js"
 
 export const useAuthStore = create((set) => ({
@@ -31,7 +33,10 @@ export const useAuthStore = create((set) => ({
   },
 }))
 
-export const useGameStore = create((set) => ({
+export const useGameStore = create((set, get) => ({
+  moves: [],
+  baseBoard: [],
+  queueStatus: "up_to_date",
   editMode: false,
   black: {
     name: "",
@@ -52,11 +57,28 @@ export const useGameStore = create((set) => ({
     counting: false,
     forbidden: [-1, -1],
   },
+  addMove: (move) => {
+    set(produce(state => {
+      if (get().moves.length < move.n) {
+        state.queueStatus = "behind"
+        return
+      }
+      state.queueStatus = "up_to_date"
+      state.moves.push(move)
+      let updated = updateBoard(get().baseBoard, move)
+      state.baseBoard = updated
+      state.gameState.board = rehydrate(updated)
+      state.gameState.currentColor = get().gameState.currentColor ^ (BLACK | WHITE)
+      state.gameState.currentPlayer = get().gameState.currentPlayer === get().black.name ? get().white.name : get().black.name
+    }))
+  },
   setGameState: (game) => {
     set(produce(state => {
       state.black = game.black
       state.white = game.white
       state.editMode = game.editMode
+      state.baseBoard = game.board
+      state.moves = game.moves
       state.gameState.board = rehydrate(game.board)
       state.gameState.currentPlayer = game.currentPlayer
       state.gameState.currentColor = game.currentColor