set winner by time

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

@@ -22,6 +22,7 @@ import {
   StompContext,
   tfetch,
   doTry,
+  COLORS,
 } from "src/util.js"
 import {
   PointList,
@@ -42,6 +43,7 @@ import {
   paintStones,
   paintStonesCounting,
   paintLastMove,
+  paintNumber,
   paintMoveNumbers,
 } from "./paint.js"
 import {
@@ -58,6 +60,7 @@ import {
   createGameState,
   isReviewing,
   teleport,
+  setWinnerByTime,
 } from "./state.js"
 import { 
   BoardSettings,
@@ -85,6 +88,8 @@ function Board({gameState, setGameState}) {
   let setTimeout = useTimeoutStore(state => state.setTimeout)
   let timeoutRef = useRef()
   timeoutRef.current = timeout
+  let gameStateRef = useRef()
+  gameStateRef.current = gameState
   let [ctrlKeyDown, setCtrlKeyDown] = useState(false)
   let zoom = useViewStateStore(state => state.zoom)
   let {gameId} = useParams()
@@ -120,10 +125,13 @@ function Board({gameState, setGameState}) {
       setTimeout(t)
       if (t <= 0) {
         clearInterval(intervalIdRef.current)
+        let gameState = gameStateRef.current
+        let updated = setWinnerByTime(gameState, currentColor(gameState) ^ COLORS)
+        setGameState(updated)
       }
     }, 1000)
 
-  }, [setTimeout, fulltime])
+  }, [setTimeout, fulltime, setGameState])
 
   useEffect(() => {
     resetCountdown()
@@ -349,8 +357,8 @@ function Board({gameState, setGameState}) {
       paintMoveNumbers(context, board)
     } else if (!counting && !end) {
       paintLastMove(context, lastMove, timeoutRef.current)
-    } else {
-      paintLastMove(context, lastMove)
+    } else if (lastMove) {
+      paintNumber(context, lastMove.x, lastMove.y, lastMove.n + 1, lastMove.color)
     }
     if (currentPlayer(gameState) !== auth.name) {
       return

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

@@ -185,6 +185,20 @@ function paintMoveNumber({cursorXref, cursorYref, stoneRadius, canvasRef, grid},
   ctx.fillText(historyEntry.n + 1, x, y)
 }
 
+export function paintNumber(context, grid_x, grid_y, n, color) {
+  let {canvasRef, grid, stoneRadius} = context
+  let ctx = canvasRef.current.getContext("2d")
+  let [x, y] = grid[grid_y][grid_x]
+  let style = color === BLACK ?
+    "rgba(255,255,255)" :
+    "rgba(0,0,0)"
+  ctx.font = "bold " + Math.trunc(stoneRadius * 1.125) + "px sans-serif"
+  ctx.textBaseline = "middle"
+  ctx.textAlign = "center"
+  ctx.fillStyle = style
+  ctx.fillText(n, x, y)
+}
+
 export function paintLastMove(context, lastMove, countdown) {
   if (!lastMove) {
     return
@@ -198,11 +212,7 @@ export function paintLastMove(context, lastMove, countdown) {
   let [x, y] = grid[grid_y][grid_x]
   let ctx = canvasRef.current.getContext("2d")
   if (countdown && countdown < 10 && countdown > 0) {
-    ctx.font = "bold " + Math.trunc(stoneRadius * 1.125) + "px sans-serif"
-    ctx.textBaseline = "middle"
-    ctx.textAlign = "center"
-    ctx.fillStyle = style
-    ctx.fillText(countdown, x, y)
+    paintNumber(context, grid_x, grid_y, countdown, color)
     return
   }
   let length = stoneRadius * 0.875

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

@@ -33,6 +33,7 @@ export function initialState() {
     baseBoard: [],
     historyBoard: [],
     viewPos: Number.NaN,
+    winnerByTime: 0,
     dim: 0,
     handicap: 0,
     queueStatus: "behind",
@@ -97,7 +98,10 @@ export function countingAgreed({moves, myColor}) {
   return move.color === myColor && move.action === "agreeCounting"
 }
 
-export function gameHasEnded({moves}) {
+export function gameHasEnded({winnerByTime, moves}) {
+  if (winnerByTime) {
+    return true
+  }
   if (!moves.length) {
     return false
   }
@@ -161,15 +165,17 @@ function goToEnd(baseState) {
   let queueLength = baseState.queueLength
   let baseBoard = baseState.baseBoard
   let historyBoard = baseState.historyBoard
-  for (let i = queueLength; i < moves.length; i++) {
+  for (let i = baseState.viewPos; i < moves.length; i++) {
     let move = moves[i]
     let previousMove = getMove(moves, i - 1)
-    let [, updated] = updateBoardState(baseBoard, previousMove, move, true)
+    let [, updated] = updateBoardState(baseBoard, previousMove, move, !baseState.winnerByTime)
     baseBoard = updated
   }
+  let board = rehydrate(baseBoard, historyBoard)
   return produce(baseState, (draft) => {
-    draft.board = rehydrate(baseBoard, historyBoard)
-    draft.viewPos = baseState.queueLength
+    draft.board = board
+    draft.viewPos = queueLength
+    draft.lastMove = getMove(moves, queueLength - 1)
   })
 }
 
@@ -210,6 +216,12 @@ export function addMove(baseState, move) {
   })
 }
 
+export function setWinnerByTime(baseState, winnerByTime) {
+  return produce(baseState, (draft) => {
+    draft.winnerByTime = winnerByTime
+  })
+}
+
 export function createGameState(game, auth) {
   let baseBoard = Array(game.dim)
   let historyBoard = Array(game.dim)