wip review

Author: h908714124

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

@@ -69,7 +69,7 @@ export function Game() {
       className="h-full">
       <MuteIcon />
       <Board gameState={gameState} setGameState={setGameState} />
-      <GamePanel gameState={gameState} />
+      <GamePanel gameState={gameState} setGameState={setGameState} />
     </div>
   )
 }

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

@@ -43,21 +43,23 @@ import {
   countingComplete,
   currentPlayer,
   isSelfPlay,
+  isKibitz,
+  moveBack,
   countingAgreed,
   gameHasEnded,
 } 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)
@@ -146,15 +148,17 @@ function Panel({gameState}) {
       <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 && <>
+      {!isKibitz(gameState, auth) && (
+        <div className="flex-none">
+          <Button
+            onClick={onPass}
+            className="py-1 px-4"
+            disabled={gameHasEnded(gameState) || counting || currentPlayer(gameState) !== auth.name}>
+            Pass
+          </Button>
+        </div>
+      )}
+      {!isKibitz(gameState, auth) && counting && <>
         <div className="flex-none">
           <Button
             className="py-1 px-4"
@@ -172,6 +176,15 @@ function Panel({gameState}) {
           </Button>
         </div>
       </>}
+      {(gameHasEnded(gameState) || isKibitz(gameState, auth)) && (
+        <div className="flex-none">
+          <Button
+            onClick={() => setGameState(moveBack(gameState))}
+            className="py-1 px-2">
+            Back
+          </Button>
+        </div>
+      )}
       {result && (
         <div className="flex-none">
           {(result.w > result.b ? "W+" : "B+") + Math.abs(result.b - result.w)}

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

@@ -26,6 +26,7 @@ export function initialState() {
     id: "",
     moves: [],
     baseBoard: [],
+    viewPos: 0,
     dim: 0,
     handicap: 0,
     queueStatus: "behind",
@@ -68,6 +69,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 +83,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 +99,43 @@ export function gameHasEnded({moves}) {
   return move.action === "end"
 }
 
+export function moveBack(baseState) {
+  return produce(baseState, (draft) => {
+    let moves = baseState.moves
+    let queueLength = baseState.queueLength
+    if (!queueLength) {
+      return
+    }
+    let move = moves[queueLength - 1]
+    let baseBoard = unApply(baseState.baseBoard, move)
+    draft.baseBoard = baseBoard
+    draft.board = rehydrate(baseBoard)
+  })
+}
+
+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.x === x && move.y === y) {
+        result[y][x] = 0
+      } else {
+        result[y][x] = board[y][x]
+      }
+    }
+  }
+  if (move.dead) {
+    move.dead.forEach((x, y) => {
+      result[y][x] = move.color ^ COLORS
+    })
+  }
+  return result
+}
+
 export function addMove(baseState, move) {
   return produce(baseState, (draft) => {
     let {action, n} = move
@@ -199,7 +241,7 @@ 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]
 }