review mode: also show move numbers on empty fields

Author: h908714124

src/main/client/src/component/SideBar.jsx

@@ -53,7 +53,7 @@ export const SideBar = ({page, children}) => {
   return (
     <div
         style={{width: sidebarWidth + "px"}}
-        className="absolute border-l border-gray-500 top-0 right-0 h-full bg-slate-800">
+        className="fixed border-l border-gray-500 top-0 right-0 h-full bg-slate-800">
       <div
         onMouseDown={!dragging ? onMouseDown : undefined}
         style={{

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

@@ -367,7 +367,7 @@ function Board({gameState, setGameState}) {
     <div className="grid h-full">
       <canvas className={twJoin(
           "place-self-center",
-          isCursorInBounds() && showMoveNumbers() && board[cursor_y][cursor_x].hasStone && "cursor-pointer",
+          isCursorInBounds() && showMoveNumbers() && board[cursor_y][cursor_x].historyEntry.n !== -1 && "cursor-pointer",
         )}
         ref={canvasRef}
         onMouseLeave={() => {

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

@@ -83,13 +83,10 @@ export function paintStones(context, board, showMoveNumbers) {
   let cursor_y = context.cursorYref.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]
-      if (!hasStone) {
-        continue
-      }
-      if (showMoveNumbers && grid_x === cursor_x && grid_y === cursor_y) {
-        paintShadow(context, grid_x, grid_y, color)
-      } else {
+      let {hasStone, color, historyEntry} = board[grid_y][grid_x]
+      if (showMoveNumbers && historyEntry.n !== -1 && grid_x === cursor_x && grid_y === cursor_y) {
+        paintShadow(context, grid_x, grid_y, historyEntry.color)
+      } else if (hasStone) {
         paintStone(context, grid_x, grid_y, color)
       }
     }
@@ -99,11 +96,8 @@ export function paintStones(context, board, showMoveNumbers) {
 export function paintMoveNumbers(context, board) {
   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, n} = board[grid_y][grid_x]
-      if (!hasStone) {
-        continue
-      }
-      paintMoveNumber(context, grid_x, grid_y, color, n + 1)
+      let {color, historyEntry} = board[grid_y][grid_x]
+      paintMoveNumber(context, grid_x, grid_y, color, historyEntry)
     }
   }
 }
@@ -113,20 +107,18 @@ export function paintStonesCounting(context, board, countingGroup, showMoveNumbe
   let cursor_y = context.cursorYref.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]
-      if (hasStone) {
-        if (countingGroup && countingGroup(grid_x, grid_y)) {
-          paintShadow(context, grid_x, grid_y, color)
-        } else if (showMoveNumbers && grid_x === cursor_x && grid_y === cursor_y) {
-          paintShadow(context, grid_x, grid_y, color)
-        } else {
-          paintStone(context, grid_x, grid_y, color)
-        }
-      }
-      if (color & ANY_REMOVED) {
+      let {hasStone, color, historyEntry} = board[grid_y][grid_x]
+      let isHover = showMoveNumbers && historyEntry.n !== -1 && grid_x === cursor_x && grid_y === cursor_y
+      if (countingGroup && countingGroup(grid_x, grid_y)) {
+        paintShadow(context, grid_x, grid_y, color)
+      } else if (isHover) {
+        paintShadow(context, grid_x, grid_y, historyEntry.color)
+      } else if (hasStone) {
+        paintStone(context, grid_x, grid_y, color)
+      } else if (color & ANY_REMOVED) {
         paintShadow(context, grid_x, grid_y, color)
       }
-      if (color & TERRITORY) {
+      if (color & TERRITORY && !isHover) {
         let style = (color & TERRITORY) === TERRITORY_B ?
           "rgba(0,0,0)" :
           "rgba(255,255,255)"
@@ -157,18 +149,31 @@ function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, color) {
   ctx.fill()
 }
 
-function paintMoveNumber({stoneRadius, canvasRef, grid}, grid_x, grid_y, color, n) {
-  let style = color === BLACK ?
-    "rgba(255,255,255)" :
-    "rgba(0,0,0)"
+function paintMoveNumber({cursorXref, cursorYref, stoneRadius, canvasRef, grid}, grid_x, grid_y, color, historyEntry) {
+  if (historyEntry.n === -1) {
+    return
+  }
+  let cursor_x = cursorXref.current
+  let cursor_y = cursorYref.current
+  let textColor
+  if (cursor_x === grid_x && cursor_y === grid_y) {
+    textColor = historyEntry.color === BLACK ?
+      "rgba(255,255,255)" :
+      "rgba(0,0,0)"
+  } else {
+    textColor = (color & (BLACK | TERRITORY_B)) ?
+      "rgba(255,255,255)" :
+      "rgba(0,0,0)"
+  }
   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.font = (cursor_x === grid_x && cursor_y === grid_y) ?
+    ("bold " + Math.trunc(stoneRadius * 1.125) + "px sans-serif") :
+    Math.trunc(stoneRadius * 0.75) + "px sans-serif"
   ctx.textBaseline = "middle"
   ctx.textAlign = "center"
-  ctx.fillStyle = style
-  ctx.fillText(n, x, y)
+  ctx.fillStyle = textColor
+  ctx.fillText(historyEntry.n + 1, x, y)
 }
 
 export function paintLastMove({canvasRef, grid, stoneRadius}, lastMove) {

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

@@ -31,7 +31,7 @@ export function initialState() {
     id: "",
     moves: [],
     baseBoard: [],
-    countBoard: [],
+    historyBoard: [],
     viewPos: Number.NaN,
     dim: 0,
     handicap: 0,
@@ -117,10 +117,10 @@ export function moveBack(baseState) {
   let moves = baseState.moves
   let move = moves[viewPos]
   let baseBoard = unApply(baseState.baseBoard, move)
-  let countBoard = baseState.countBoard
+  let historyBoard = baseState.historyBoard
   return produce(baseState, (draft) => {
     draft.baseBoard = baseBoard
-    draft.board = cheapRehydrate(baseBoard, countBoard)
+    draft.board = cheapRehydrate(baseBoard, historyBoard)
     draft.viewPos = viewPos
     if (viewPos) {
       let previous = moves[viewPos - 1]
@@ -139,10 +139,10 @@ export function moveForward(baseState) {
   let moves = baseState.moves
   let move = moves[viewPos]
   let [, updated] = updateBoard(baseState.baseBoard, move)
-  let countBoard = baseState.countBoard
+  let historyBoard = baseState.historyBoard
   return produce(baseState, (draft) => {
     draft.baseBoard = updated
-    draft.board = cheapRehydrate(updated, countBoard)
+    draft.board = cheapRehydrate(updated, historyBoard)
     draft.viewPos = viewPos + 1
     draft.lastMove = move.action === "pass" ? undefined : move
   })
@@ -152,21 +152,21 @@ function goToEnd(baseState) {
   let moves = baseState.moves
   let queueLength = baseState.queueLength
   let baseBoard = baseState.baseBoard
-  let countBoard = baseState.countBoard
+  let historyBoard = baseState.historyBoard
   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, countBoard)
+    draft.board = rehydrate(baseBoard, historyBoard)
   })
 }
 
 export function addMove(baseState, move) {
   let {action, n} = move
-  let {moves, baseBoard, countBoard, counting, queueLength} = baseState
+  let {moves, baseBoard, historyBoard, counting, queueLength} = baseState
   let previousMove = getMove(moves, n - 1)
   if (n < moves.length) {
     return baseState
@@ -191,9 +191,9 @@ export function addMove(baseState, move) {
     draft.moves.push(storedMove)
     draft.lastMove = action === "pass" ? undefined : storedMove
     draft.baseBoard = updated
-    let updatedCountBoard = updateCountBoard(countBoard, move)
-    draft.countBoard = updatedCountBoard
-    draft.board = rehydrate(updated, updatedCountBoard)
+    let updatedFinalBoard = counting ? historyBoard : updateHistoryBoard(historyBoard, move)
+    draft.historyBoard = updatedFinalBoard
+    draft.board = rehydrate(updated, updatedFinalBoard)
     draft.forbidden = forbidden
     if (action === "pass" && previousMove?.action === "pass") {
       draft.counting = true
@@ -203,10 +203,16 @@ export function addMove(baseState, move) {
 
 export function createGameState(game, auth) {
   let baseBoard = Array(game.dim)
-  let countBoard = Array(game.dim)
+  let historyBoard = Array(game.dim)
   for (let y = 0; y < game.dim; y++) {
     baseBoard[y] = new Int32Array(game.dim)
-    countBoard[y] = new Int32Array(game.dim)
+    historyBoard[y] = []
+    for (let x = 0; x < game.dim; x++) {
+      historyBoard[y][x] = {
+        n: -1,
+        color: 0,
+      }
+    }
   }
   let moves = []
   let forbidden = [-1, -1]
@@ -223,15 +229,17 @@ export function createGameState(game, auth) {
       if (passes) {
         counting = true
         queueLength = move.n
-      } else {
-        passes = 1
       }
+      passes = 1
     } else {
       passes = 0
     }
     let previousMove = getMove(moves, i - 1)
     let [storedMove, updated, newForbidden] = updateBoardState(baseBoard, previousMove, move, counting)
-    countBoard[move.y][move.x] = move.n
+    historyBoard[move.y][move.x] = {
+      n: move.n,
+      color: 0,
+    }
     moves.push(storedMove)
     forbidden = newForbidden
     baseBoard = updated
@@ -244,9 +252,9 @@ export function createGameState(game, auth) {
     handicap: game.handicap,
     counting: counting,
     baseBoard: baseBoard,
-    countBoard: countBoard,
+    historyBoard: historyBoard,
     moves: moves,
-    board: rehydrate(baseBoard, countBoard),
+    board: rehydrate(baseBoard, historyBoard),
     forbidden: forbidden,
     viewPos: queueLength || moves.length,
     queueLength: queueLength || moves.length,
@@ -313,20 +321,20 @@ function unApply(board, move) {
   return result
 }
 
-function cheapRehydrate(board, countBoard) {
-  let dim = board.length
+function cheapRehydrate(baseBoard, historyBoard) {
+  let dim = baseBoard.length
   let result = Array(dim)
-  for (let i = 0; i < board.length; i++) {
+  for (let i = 0; i < baseBoard.length; i++) {
     result[i] = Array(dim)
   }
-  for (let y = 0; y < board.length; y++) {
-    for (let x = 0; x < board[y].length; x++) {
+  for (let y = 0; y < baseBoard.length; y++) {
+    for (let x = 0; x < baseBoard[y].length; x++) {
       result[y][x] = {
-        n: countBoard[y][x],
+        historyEntry: historyBoard[y][x],
         x: x,
         y: y,
-        color: board[y][x],
-        hasStone: hasStone(board[y][x]),
+        color: baseBoard[y][x],
+        hasStone: hasStone(baseBoard[y][x]),
         isForbidden: () => false,
         liberties: 0,
         has: () => false,
@@ -347,9 +355,17 @@ 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
+function updateHistoryBoard(historyBoard, move) {
+  let {x, y, n, color, action} = move
+  if (action) {
+    return historyBoard
+  }
+  if (!color) {
+    return historyBoard
+  }
+  let updated = historyBoard.slice()
+  updated[y] = historyBoard[y].slice()
+  let oldColor = updated[y][x].color
+  updated[y][x] = {n, color: color || oldColor}
   return updated
 }

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

@@ -83,7 +83,7 @@ export function getGroupInfo(board, xx, yy) {
   }
 }
 
-export function rehydrate(board, countBoard) {
+export function rehydrate(board, historyBoard) {
   let dim = board.length
   let result = Array(dim)
   for (let i = 0; i < board.length; i++) {
@@ -100,7 +100,7 @@ export function rehydrate(board, countBoard) {
           ...groupInfo,
           x: xx,
           y: yy,
-          n: countBoard[yy][xx],
+          historyEntry: historyBoard[yy][xx],
         }
       })
     }