add review buttons

Author: h908714124

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

@@ -58,6 +58,7 @@ import {
   gameHasEnded,
   addMove,
   createGameState,
+  isReviewing,
 } from "./state.js"
 
 export function Game() {
@@ -69,7 +70,7 @@ export function Game() {
       className="h-full">
       <MuteIcon />
       <Board gameState={gameState} setGameState={setGameState} />
-      <GamePanel gameState={gameState} />
+      <GamePanel gameState={gameState} setGameState={setGameState} />
     </div>
   )
 }
@@ -249,7 +250,7 @@ function Board({gameState, setGameState}) {
       return
     }
     paintGrid(context)
-    if (counting) {
+    if (counting && !isReviewing(gameState)) {
       paintStonesCounting(context, board, countingGroup)
       return
     } else {

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

@@ -43,32 +43,32 @@ import {
   countingComplete,
   currentPlayer,
   isSelfPlay,
+  isKibitz,
+  moveBack,
+  moveForward,
   countingAgreed,
   gameHasEnded,
+  isReviewing,
 } from "./state.js"
 
-export const GamePanel = ({gameState}) => {
+export const GamePanel = ({gameState, setGameState}) => {
   return (
     <SideBar page="game">
       <div className="pr-3 pt-4 pl-2 h-full flex flex-col">
-        <Panel gameState={gameState} />
+        <Panel gameState={gameState} setGameState={setGameState} />
       </div>
     </SideBar>
   )
 }
 
-function Panel({gameState}) {
+function Panel({gameState, setGameState}) {
   let {gameId} = useParams()
   let zoom = useViewStateStore(state => state.zoom)
   let setZoom = useViewStateStore(state => state.setZoom)
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
-  let black = gameState.black
-  let white = gameState.white
-  let queueLength = gameState.queueLength
+  let {black, white, viewPos, counting, board} = gameState
   let movesLength = gameState.moves.length
-  let counting = gameState.counting
-  let board = gameState.board
   let navigate = useNavigate()
   let onExit = useCallback(() => {
     navigate(base + "/lobby")
@@ -106,7 +106,7 @@ function Panel({gameState}) {
   let result = gameHasEnded(gameState) ? getScore(board) : undefined
   return (
     <>
-      <div className="flex-none grid w-full grid-cols-[min-content_max-content_min-content_auto] gap-x-2">
+      <div className="flex-none flex w-full gap-x-2">
         <button
           onClick={() => setZoom(zoom - 1)}>
           <IconContext.Provider value={{
@@ -128,8 +128,8 @@ function Panel({gameState}) {
             <FaAngleRight />
           </IconContext.Provider>
         </button>
-        <button title="Leave the game" onClick={onExit}
-          className="justify-self-end">
+        <div className="grow" />
+        <button title="Leave the game" onClick={onExit}>
           <IconContext.Provider value={{
             size: "1.5em",
             className: "pr-[4px]",
@@ -143,18 +143,38 @@ function Panel({gameState}) {
         <div>vs</div>
         <div>{black}</div>
       </div>
-      <div className="flex-none">
-        Move {queueLength}
-      </div>
-      <div className="flex-none">
-        <Button
-          onClick={onPass}
-          className="py-1 px-4"
-          disabled={gameHasEnded(gameState) || counting || currentPlayer(gameState) !== auth.name}>
-          Pass
-        </Button>
-      </div>
-      {counting && <>
+      {(gameHasEnded(gameState) || isKibitz(gameState, auth)) ? (
+        <div className="flex-none flex gap-x-1 items-center">
+          <Button
+            onClick={() => setGameState(moveBack(gameState))}
+            className="py-1 px-2">
+            Back
+          </Button>
+          <div className="flex-none">
+            <div>Move {viewPos}</div>
+          </div>
+          <Button
+            onClick={() => setGameState(moveForward(gameState))}
+            className="py-1 px-2">
+            Forward
+          </Button>
+        </div>
+      ) : (
+        <div className="flex-none">
+          <div>Move {viewPos}</div>
+        </div>
+      )}
+      {!isKibitz(gameState, auth) && !gameHasEnded(gameState) && (
+        <div className="flex-none">
+          <Button
+            onClick={onPass}
+            className="py-1 px-4"
+            disabled={counting || currentPlayer(gameState) !== auth.name}>
+            Pass
+          </Button>
+        </div>
+      )}
+      {!isKibitz(gameState, auth) && !gameHasEnded(gameState) && counting && <>
         <div className="flex-none">
           <Button
             className="py-1 px-4"
@@ -165,14 +185,14 @@ function Panel({gameState}) {
         </div>
         <div className="flex-none">
           <Button
-            disabled={(!isSelfPlay(gameState) && countingAgreed(gameState)) || gameHasEnded(gameState) || !countingComplete(gameState)}
+            disabled={(!isSelfPlay(gameState) && countingAgreed(gameState)) || !countingComplete(gameState)}
             className="py-1 px-4"
             onClick={onCountingAgree}>
             OK
           </Button>
         </div>
       </>}
-      {result && (
+      {result && !isReviewing(gameState) && (
         <div className="flex-none">
           {(result.w > result.b ? "W+" : "B+") + Math.abs(result.b - result.w)}
         </div>

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

@@ -5,6 +5,8 @@ import {
   BLACK,
   WHITE,
   COLORS,
+  hasStone,
+  resurrect,
 } from "src/util.js"
 import {
   rehydrate,
@@ -20,12 +22,16 @@ import {
   toggleStonesAt,
   resetCounting,
 } from "src/model/count.js"
+import {
+  PointList,
+} from "src/model/PointList.js"
 
 export function initialState() {
   return {
     id: "",
     moves: [],
     baseBoard: [],
+    viewPos: Number.NaN,
     dim: 0,
     handicap: 0,
     queueStatus: "behind",
@@ -68,6 +74,10 @@ export function isSelfPlay({black, white}) {
   return black === white
 }
 
+export function isKibitz({black, white}, auth) {
+  return black !== auth.name && white !== auth.name
+}
+
 export function currentColor({moves, handicap}) {
   if (handicap > moves.length) {
     return BLACK
@@ -78,7 +88,7 @@ export function currentColor({moves, handicap}) {
   return moves[moves.length - 1].color ^ COLORS
 }
 
-export function countingAgreed ({moves, myColor}) {
+export function countingAgreed({moves, myColor}) {
   if (!moves.length) {
     return false
   }
@@ -94,6 +104,48 @@ export function gameHasEnded({moves}) {
   return move.action === "end"
 }
 
+export function isReviewing(baseState) {
+  return baseState.viewPos < baseState.queueLength
+}
+
+export function moveBack(baseState) {
+  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.viewPos = viewPos
+    if (viewPos) {
+      let previous = moves[viewPos - 1]
+      draft.lastMove = previous.action === "pass" ? undefined : previous
+    } else {
+      draft.lastMove = undefined
+    }
+  })
+}
+
+export function moveForward(baseState) {
+  return produce(baseState, (draft) => {
+    let moves = baseState.moves
+    let viewPos = baseState.viewPos
+    if (viewPos - baseState.queueLength >= 0) {
+      return
+    }
+    let move = moves[viewPos]
+    let [, updated] = updateBoard(baseState.baseBoard, move)
+    draft.baseBoard = updated
+    draft.board = cheapRehydrate(updated)
+    draft.viewPos = viewPos + 1
+    draft.lastMove = move.action === "pass" ? undefined : move
+  })
+}
+
 export function addMove(baseState, move) {
   return produce(baseState, (draft) => {
     let {action, n} = move
@@ -112,6 +164,7 @@ export function addMove(baseState, move) {
     draft.queueStatus = "up_to_date"
     if (!counting) {
       draft.queueLength = queueLength + 1
+      draft.viewPos = queueLength + 1
     }
     let [storedMove, updated, forbidden] = createMoveData(baseBoard, moves, move, counting)
     draft.moves.push(storedMove)
@@ -166,6 +219,7 @@ export function createGameState(game, auth) {
     moves: moves,
     board: rehydrate(baseBoard),
     forbidden: forbidden,
+    viewPos: queueLength || moves.length,
     queueLength: queueLength || moves.length,
     queueStatus: "up_to_date",
   }
@@ -199,7 +253,52 @@ function createMoveData(baseBoard, moves, move, counting) {
     return [move, count(updated), [-1, -1]]
   }
   let [dead, updated] = updateBoard(baseBoard, move)
-  let storedMove = {...move, dead}
+  let storedMove = {...move, dead: dead}
   let forbidden = getForbidden(baseBoard, updated, storedMove)
   return [storedMove, updated, forbidden]
 }
+
+function unApply(board, move) {
+  let dim = board.length
+  let result = Array(dim)
+  for (let i = 0; i < board.length; i++) {
+    result[i] = Array(dim)
+  }
+  for (let y = 0; y < board.length; y++) {
+    for (let x = 0; x < board[y].length; x++) {
+      if (move.action !== "pass" && move.x === x && move.y === y) {
+        result[y][x] = 0
+      } else {
+        result[y][x] = (resurrect(board[y][x]) & COLORS)
+      }
+    }
+  }
+  if (move.dead) {
+    move.dead.forEach((x, y) => {
+      result[y][x] = (move.color ^ COLORS)
+    })
+  }
+  return result
+}
+
+function cheapRehydrate(board) {
+  let dim = board.length
+  let result = Array(dim)
+  for (let i = 0; i < board.length; i++) {
+    result[i] = Array(dim)
+  }
+  for (let y = 0; y < board.length; y++) {
+    for (let x = 0; x < board[y].length; x++) {
+      result[y][x] = {
+        x: x,
+        y: y,
+        color: board[y][x],
+        hasStone: hasStone(board[y][x]),
+        liberties: 0,
+        has: () => false,
+        points: PointList.empty(),
+      }
+    }
+  }
+  return result
+}

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

@@ -1,12 +1,12 @@
 import {
   PointQueue,
-} from "./PointQueue.js"
+} from "src/model/PointQueue.js"
 import {
   PointList,
-} from "./PointList.js"
+} from "src/model/PointList.js"
 import {
   PointSet,
-} from "./PointSet.js"
+} from "src/model/PointSet.js"
 import {
   hasStone,
 } from "src/util.js"

src/main/client/src/model/count.js

@@ -6,6 +6,7 @@ import {
 } from "./PointSet.js"
 import {
   hasStone,
+  resurrect,
   BLACK,
   WHITE,
   COLORS,
@@ -208,16 +209,6 @@ function toggleRemoved(color) {
   return color
 }
 
-function resurrect(color) {
-  if (color & REMOVED_B) {
-    return color ^ TOGGLE_B
-  }
-  if (color & REMOVED_W) {
-    return color ^ TOGGLE_W
-  }
-  return color
-}
-
 function createAcc(dim) {
   let result = Array(dim)
   for (let y = 0; y < dim; y++) {

src/main/client/src/util.js

@@ -118,3 +118,13 @@ export function getRemInPixel() {
   let fontSize = window.getComputedStyle(document.documentElement).fontSize
   return parseFloat(fontSize)
 }
+
+export function resurrect(color) {
+  if (color & REMOVED_B) {
+    return color ^ TOGGLE_B
+  }
+  if (color & REMOVED_W) {
+    return color ^ TOGGLE_W
+  }
+  return color
+}