review: teleport when ctrl click

Author: h908714124

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

@@ -56,6 +56,7 @@ import {
   isKibitz,
   createGameState,
   isReviewing,
+  teleport,
 } from "./state.js"
 import { 
   BoardSettings,
@@ -84,8 +85,6 @@ function Board({gameState, setGameState}) {
   let navigate = useNavigate()
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
-  let ctrlKeyDownRef = useRef()
-  ctrlKeyDownRef.current = ctrlKeyDown
   let cursorXref = useRef()
   cursorXref.current = cursor_x
   let cursorYref = useRef()
@@ -166,7 +165,7 @@ function Board({gameState, setGameState}) {
     return has
   }, [gameState, counting, board, isCursorInBounds])
 
-  let showMoveNumbers = ctrlKeyDownRef.current && (isKibitz(gameState, auth) || gameHasEnded(gameState))
+  let showMoveNumbers = ctrlKeyDown && (isKibitz(gameState, auth) || gameHasEnded(gameState))
 
   let context = useMemo(() => {
     let dim = board.length
@@ -249,6 +248,13 @@ function Board({gameState, setGameState}) {
   let onClick = useCallback(() => {
     let cursor_x = cursorXref.current
     let cursor_y = cursorYref.current
+    if (showMoveNumbers) {
+      let historyEntry = board[cursor_y][cursor_x].historyEntry
+      if (historyEntry.n !== -1) {
+        setGameState(teleport(gameState, historyEntry.n + 1))
+      }
+      return
+    }
     if (gameHasEnded(gameState)) {
       return
     }
@@ -278,15 +284,15 @@ function Board({gameState, setGameState}) {
       x: cursor_x,
       y: cursor_y,
     }
-    if (!isSelfPlay(gameState)) { // myColor is 0 in self play
-      setGameState(addMove(gameState, {...move, color: myColor}))
+    if (!isSelfPlay(gameState)) { // can't add early in self play; myColor is 0
+      setGameState(addMove(gameState, {...move, color: myColor})) // early add move
     }
     playClickSound()
     stompClient.publish({
       destination: "/app/game/move",
       body: JSON.stringify(move),
     })
-  }, [gameState, setGameState, auth, board, stompClient, counting, forbidden_x, forbidden_y, movesLength, myColor, playClickSound, isCursorInBounds])
+  }, [gameState, setGameState, auth, board, stompClient, counting, forbidden_x, forbidden_y, movesLength, myColor, playClickSound, isCursorInBounds, showMoveNumbers])
 
   useEffect(() => {
     if (!board.length) {

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

@@ -109,14 +109,21 @@ export function isReviewing(baseState) {
   return baseState.viewPos < baseState.queueLength
 }
 
-export function moveBack(baseState) {
-  let viewPos = baseState.viewPos - 1
-  if (viewPos < 0) {
-    return baseState
+export function teleport(baseState, targetPos) {
+  let viewPos = baseState.viewPos
+  if (targetPos >= baseState.queueLength) {
+    return goToEnd(baseState)
   }
+  let diff = targetPos - viewPos
+  let direction = Math.sign(diff)
   let moves = baseState.moves
-  let move = moves[viewPos]
-  let baseBoard = unApply(baseState.baseBoard, move)
+  let baseBoard = baseState.baseBoard
+  let action = diff < 0 ? unApply : updateBoard
+  for (let i = 0; i < Math.abs(diff); i++) {
+    let [, updated] = action(baseBoard, diff < 0 ? moves[viewPos - 1] : moves[viewPos])
+    baseBoard = updated
+    viewPos += direction
+  }
   let historyBoard = baseState.historyBoard
   return produce(baseState, (draft) => {
     draft.baseBoard = baseBoard
@@ -131,21 +138,14 @@ export function moveBack(baseState) {
   })
 }
 
+export function moveBack(baseState) {
+  let viewPos = baseState.viewPos
+  return teleport(baseState, viewPos - 1)
+}
+
 export function moveForward(baseState) {
   let viewPos = baseState.viewPos
-  if (viewPos - baseState.queueLength >= 0) {
-    return goToEnd(baseState)
-  }
-  let moves = baseState.moves
-  let move = moves[viewPos]
-  let [, updated] = updateBoard(baseState.baseBoard, move)
-  let historyBoard = baseState.historyBoard
-  return produce(baseState, (draft) => {
-    draft.baseBoard = updated
-    draft.board = cheapRehydrate(updated, historyBoard)
-    draft.viewPos = viewPos + 1
-    draft.lastMove = move.action === "pass" ? undefined : move
-  })
+  return teleport(baseState, viewPos + 1)
 }
 
 function goToEnd(baseState) {
@@ -161,6 +161,7 @@ function goToEnd(baseState) {
   }
   return produce(baseState, (draft) => {
     draft.board = rehydrate(baseBoard, historyBoard)
+    draft.viewPos = baseState.queueLength
   })
 }
 
@@ -320,7 +321,7 @@ function unApply(board, move) {
       result[y][x] = (move.color ^ COLORS)
     })
   }
-  return result
+  return [1, result]
 }
 
 function cheapRehydrate(baseBoard, historyBoard) {