kibitz feature: show move numbers on ctrl hold

Author: h908714124

src/main/client/src/component/Chat.jsx

@@ -112,7 +112,7 @@ export const Chat = ({chatId, className}) => {
             {message.type === "start" && <>
               <div className="w-full grid grid-cols-2 text-stone-100">
                 {Object.keys(message.rows).map((key) => (
-                  <div className="content" key={key}>
+                  <div className="contents" key={key}>
                     <div>{key}</div>
                     <div>{message.rows[key]}</div>
                   </div>

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

@@ -34,7 +34,6 @@ import {
 import {
   useAuthStore,
   useMuteStore,
-  useGameTicker,
 } from "src/store.js"
 import {
   useLayoutStore,
@@ -57,6 +56,7 @@ import {
   currentColor,
   gameHasEnded,
   addMove,
+  isKibitz,
   createGameState,
   isReviewing,
 } from "./state.js"
@@ -78,12 +78,14 @@ export function Game() {
 function Board({gameState, setGameState}) {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
+  let [ctrlKeyDown, setCtrlKeyDown] = useState(false)
   let zoom = useViewStateStore(state => state.zoom)
   let {gameId} = useParams()
-  let toggleGameTicker = useGameTicker(state => state.toggleGameTicker)
   let navigate = useNavigate()
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
+  let showMoveNumbersRef = useRef()
+  showMoveNumbersRef.current = ctrlKeyDown && isKibitz(gameState, auth)
   let id = gameState.id
   let lastMove = gameState.lastMove
   let queueStatus = gameState.queueStatus
@@ -112,6 +114,25 @@ function Board({gameState, setGameState}) {
     howler.current.play()
   }, [howler, muted])
 
+  useEffect(() => {
+    let onKeyDown = (e) => {
+      if (e.ctrlKey) {
+        setCtrlKeyDown(true)
+      }
+    }
+    let onKeyUp = (e) => {
+      if (!e.ctrlKey) {
+        setCtrlKeyDown(false)
+      }
+    }
+    window.addEventListener("keydown", onKeyDown)
+    window.addEventListener("keyup", onKeyUp)
+    return () => {
+      window.removeEventListener("keydown", onKeyDown)
+      window.removeEventListener("keyup", onKeyUp)
+    }
+  }, [setCtrlKeyDown])
+
   let context = useMemo(() => {
     let dim = board.length
     if (!dim) {
@@ -161,6 +182,7 @@ function Board({gameState, setGameState}) {
       step,
       grid,
       canvasRef,
+      showMoveNumbersRef,
       isCursorInBounds: function(x, y) {
         return x >= 0 && x < dim && y >= 0 && y < dim
       },
@@ -181,6 +203,7 @@ function Board({gameState, setGameState}) {
     if (!board.length) {
       return
     }
+    setCtrlKeyDown(e.ctrlKey)
     if (!counting && currentPlayer(gameState) !== auth.name) {
       return
     }
@@ -229,14 +252,13 @@ function Board({gameState, setGameState}) {
     }
     if (!isSelfPlay(gameState)) { // myColor is 0 in self play
       setGameState(addMove(gameState, {...move, color: myColor}))
-      toggleGameTicker()
     }
     playClickSound()
     stompClient.publish({
       destination: "/app/game/move",
       body: JSON.stringify(move),
     })
-  }, [gameState, setGameState, toggleGameTicker, context, auth, board, stompClient, counting, forbidden_x, forbidden_y, movesLength, myColor, playClickSound])
+  }, [gameState, setGameState, context, auth, board, stompClient, counting, forbidden_x, forbidden_y, movesLength, myColor, playClickSound])
 
   useEffect(() => {
     if (!board.length) {
@@ -275,7 +297,7 @@ function Board({gameState, setGameState}) {
       "rgba(0,0,0,0.25)" :
       "rgba(255,255,255,0.25)"
     paintShadow(context, cursor_x, cursor_y, style)
-  }, [gameState, cursor_x, cursor_y, context, canvasRef, auth, board, counting, countingGroup, forbidden_x, forbidden_y, lastMove])
+  }, [gameState, cursor_x, cursor_y, context, ctrlKeyDown, canvasRef, auth, board, counting, countingGroup, forbidden_x, forbidden_y, lastMove])
 
   useEffect(() => {
     if (id === gameId && queueStatus === "up_to_date") {
@@ -288,18 +310,16 @@ function Board({gameState, setGameState}) {
         },
       })
       setGameState(createGameState(game, auth))
-      toggleGameTicker()
     }, () => navigate(base + "/lobby"))
-  }, [setGameState, toggleGameTicker, queueStatus, auth, id, gameId, navigate])
+  }, [setGameState, queueStatus, auth, id, gameId, navigate])
 
   useEffect(() => {
     let sub = stompClient.subscribe("/topic/move/" + gameId, (message) => {
       let move = JSON.parse(message.body)
       setGameState(addMove(gameState, move))
-      toggleGameTicker()
     })
     return sub.unsubscribe
-  }, [gameState, setGameState, toggleGameTicker, stompClient, gameId])
+  }, [gameState, setGameState, stompClient, gameId])
 
   if (!board.length) {
     return <div>Loading...</div>

src/main/client/src/feature/game/paint.js

@@ -76,18 +76,27 @@ export function paintShadow({canvasRef, grid, stoneRadius}, grid_x, grid_y, styl
 }
 
 export function paintStones(context, board, lastMove) {
+  let showMoveNumbers = context.showMoveNumbersRef.current
   for (let grid_y = 0; grid_y < board.length; grid_y++) {
     for (let grid_x = 0; grid_x < board.length; grid_x++) {
-      let {hasStone, color} = board[grid_y][grid_x]
+      let {hasStone, color, n} = board[grid_y][grid_x]
       if (hasStone) {
         let style = color === BLACK ?
           "rgba(0,0,0)" :
           "rgba(255,255,255)"
         paintStone(context, grid_x, grid_y, style)
+        if (showMoveNumbers) {
+          let antiStyle = color === BLACK ?
+            "rgba(255,255,255)" :
+            "rgba(0,0,0)"
+          paintMoveNumber(context, grid_x, grid_y, antiStyle, n + 1)
+        }
       }
     }
   }
-  paintLastMove(context, lastMove)
+  if (!showMoveNumbers) {
+    paintLastMove(context, lastMove)
+  }
 }
 
 export function paintStonesCounting(context, board, countingGroup) {
@@ -141,6 +150,17 @@ function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, style) {
   ctx.fill()
 }
 
+function paintMoveNumber({stoneRadius, canvasRef, grid}, grid_x, grid_y, style, n) {
+  let [x, y] = grid[grid_y][grid_x]
+  let size = Math.trunc(stoneRadius * 0.75)
+  let ctx = canvasRef.current.getContext("2d")
+  ctx.font = size + "px sans-serif"
+  ctx.textBaseline = "middle"
+  ctx.textAlign = "center"
+  ctx.fillStyle = style
+  ctx.fillText(n, x, y)
+}
+
 function paintLastMove({isCursorInBounds, canvasRef, grid, stoneRadius}, lastMove) {
   if (!lastMove) {
     return

src/main/client/src/feature/game/state.js

@@ -31,6 +31,7 @@ export function initialState() {
     id: "",
     moves: [],
     baseBoard: [],
+    countBoard: [],
     viewPos: Number.NaN,
     dim: 0,
     handicap: 0,
@@ -109,17 +110,17 @@ export function isReviewing(baseState) {
 }
 
 export function moveBack(baseState) {
+  let viewPos = baseState.viewPos - 1
+  if (viewPos < 0) {
+    return baseState
+  }
+  let moves = baseState.moves
+  let move = moves[viewPos]
+  let baseBoard = unApply(baseState.baseBoard, move)
+  let countBoard = baseState.countBoard
   return produce(baseState, (draft) => {
-    let moves = baseState.moves
-    let viewPos = baseState.viewPos
-    viewPos--
-    if (viewPos < 0) {
-      return
-    }
-    let move = moves[viewPos]
-    let baseBoard = unApply(baseState.baseBoard, move)
     draft.baseBoard = baseBoard
-    draft.board = cheapRehydrate(baseBoard)
+    draft.board = cheapRehydrate(baseBoard, countBoard)
     draft.viewPos = viewPos
     if (viewPos) {
       let previous = moves[viewPos - 1]
@@ -138,9 +139,10 @@ export function moveForward(baseState) {
   let moves = baseState.moves
   let move = moves[viewPos]
   let [, updated] = updateBoard(baseState.baseBoard, move)
+  let countBoard = baseState.countBoard
   return produce(baseState, (draft) => {
     draft.baseBoard = updated
-    draft.board = cheapRehydrate(updated)
+    draft.board = cheapRehydrate(updated, countBoard)
     draft.viewPos = viewPos + 1
     draft.lastMove = move.action === "pass" ? undefined : move
   })
@@ -150,20 +152,21 @@ function goToEnd(baseState) {
   let moves = baseState.moves
   let queueLength = baseState.queueLength
   let baseBoard = baseState.baseBoard
+  let countBoard = baseState.countBoard
   for (let i = queueLength; i < moves.length; i++) {
     let move = moves[i]
     let previousMove = getMove(moves, i - 1)
     let [, updated] = updateBoardState(baseBoard, previousMove, move, true)
     baseBoard = updated
   }
   return produce(baseState, (draft) => {
-    draft.board = rehydrate(baseBoard)
+    draft.board = rehydrate(baseBoard, countBoard)
   })
 }
 
 export function addMove(baseState, move) {
   let {action, n} = move
-  let {moves, baseBoard, counting, queueLength} = baseState
+  let {moves, baseBoard, countBoard, counting, queueLength} = baseState
   let previousMove = getMove(moves, n - 1)
   if (n < moves.length) {
     return baseState
@@ -188,7 +191,9 @@ export function addMove(baseState, move) {
     draft.moves.push(storedMove)
     draft.lastMove = action === "pass" ? undefined : storedMove
     draft.baseBoard = updated
-    draft.board = rehydrate(updated)
+    let updatedCountBoard = updateCountBoard(countBoard, move)
+    draft.countBoard = updatedCountBoard
+    draft.board = rehydrate(updated, updatedCountBoard)
     draft.forbidden = forbidden
     if (action === "pass" && previousMove?.action === "pass") {
       draft.counting = true
@@ -198,8 +203,10 @@ export function addMove(baseState, move) {
 
 export function createGameState(game, auth) {
   let baseBoard = Array(game.dim)
+  let countBoard = Array(game.dim)
   for (let y = 0; y < game.dim; y++) {
     baseBoard[y] = new Int32Array(game.dim)
+    countBoard[y] = new Int32Array(game.dim)
   }
   let moves = []
   let forbidden = [-1, -1]
@@ -224,6 +231,7 @@ export function createGameState(game, auth) {
     }
     let previousMove = getMove(moves, i - 1)
     let [storedMove, updated, newForbidden] = updateBoardState(baseBoard, previousMove, move, counting)
+    countBoard[move.y][move.x] = move.n
     moves.push(storedMove)
     forbidden = newForbidden
     baseBoard = updated
@@ -236,8 +244,9 @@ export function createGameState(game, auth) {
     handicap: game.handicap,
     counting: counting,
     baseBoard: baseBoard,
+    countBoard: countBoard,
     moves: moves,
-    board: rehydrate(baseBoard),
+    board: rehydrate(baseBoard, countBoard),
     forbidden: forbidden,
     viewPos: queueLength || moves.length,
     queueLength: queueLength || moves.length,
@@ -304,7 +313,7 @@ function unApply(board, move) {
   return result
 }
 
-function cheapRehydrate(board) {
+function cheapRehydrate(board, countBoard) {
   let dim = board.length
   let result = Array(dim)
   for (let i = 0; i < board.length; i++) {
@@ -313,6 +322,7 @@ function cheapRehydrate(board) {
   for (let y = 0; y < board.length; y++) {
     for (let x = 0; x < board[y].length; x++) {
       result[y][x] = {
+        n: countBoard[y][x],
         x: x,
         y: y,
         color: board[y][x],
@@ -335,3 +345,10 @@ function getMove(moves, i) {
   }
   return moves[i]
 }
+
+function updateCountBoard(countBoard, {x, y, n}) {
+  let updated = countBoard.slice()
+  updated[y] = countBoard[y].slice()
+  updated[y][x] = n
+  return updated
+}

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

@@ -16,8 +16,6 @@ export function getGroupInfo(board, xx, yy) {
   let dim = board.length
   if (!hasStone(color)) {
     return {
-      x: xx,
-      y: yy,
       color: color,
       hasStone: false,
       liberties: 0,
@@ -77,8 +75,6 @@ export function getGroupInfo(board, xx, yy) {
   }
   let set = points.toSet()
   return {
-    x: xx,
-    y: yy,
     color: color,
     hasStone: true,
     liberties: liberties,
@@ -87,7 +83,7 @@ export function getGroupInfo(board, xx, yy) {
   }
 }
 
-export function rehydrate(board) {
+export function rehydrate(board, countBoard) {
   let dim = board.length
   let result = Array(dim)
   for (let i = 0; i < board.length; i++) {
@@ -96,12 +92,16 @@ export function rehydrate(board) {
   for (let y = 0; y < board.length; y++) {
     for (let x = 0; x < board[y].length; x++) {
       if (result[y][x]) {
-        result[y][x] = {...result[y][x], x: x, y: y}
         continue
       }
       let groupInfo = getGroupInfo(board, x, y)
-      groupInfo.points.forEach((_x, _y) => {
-        result[_y][_x] = groupInfo
+      groupInfo.points.forEach((xx, yy) => {
+        result[yy][xx] = {
+          ...groupInfo,
+          x: xx,
+          y: yy,
+          n: countBoard[yy][xx],
+        }
       })
     }
   }

src/main/client/src/store.js

@@ -45,13 +45,3 @@ export const useMuteStore = create(
     { name: "mute-storage" },
   )
 )
-
-// trick to re-render chat after each move
-export const useGameTicker = create((set, get) => ({
-  gameTicker: false,
-  toggleGameTicker: () =>
-    set(() => ({
-      gameTicker: !get().gameTicker
-    }))
-  }),
-)