wip time

Author: h908714124

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

@@ -79,6 +79,9 @@ export function Game() {
 function Board({gameState, setGameState}) {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
+  let [countdown, setCountdown] = useState(9)
+  let countdownRef = useRef()
+  countdownRef.current = countdown
   let [ctrlKeyDown, setCtrlKeyDown] = useState(false)
   let zoom = useViewStateStore(state => state.zoom)
   let {gameId} = useParams()
@@ -100,6 +103,18 @@ function Board({gameState, setGameState}) {
   let dragging = useLayoutStore(state => state.dragging)
   let muted = useMuteStore(state => state.muted)
   let howler = useRef()
+  let showMoveNumbers = ctrlKeyDown && (isKibitz(gameState, auth) || gameHasEnded(gameState))
+
+  useEffect(() => {
+    let intervalId = setInterval(() => {
+      setCountdown(countdown => {
+        if (countdown <= 1) {
+          clearInterval(intervalId)
+        }
+        return countdown - 1
+      })
+    }, 1000)
+  }, [setCountdown])
   let playClickSound = useCallback(() => {
     if (muted) {
       return
@@ -164,8 +179,6 @@ function Board({gameState, setGameState}) {
     return has
   }, [gameState, counting, board, isCursorInBounds])
 
-  let showMoveNumbers = ctrlKeyDown && (isKibitz(gameState, auth) || gameHasEnded(gameState))
-
   let context = useMemo(() => {
     let dim = board.length
     if (!dim) {
@@ -224,6 +237,12 @@ function Board({gameState, setGameState}) {
     }
   }, [board, canvasRef, zoom])
 
+  useEffect(() => {
+    if (!showMoveNumbers) {
+      paintLastMove(context, lastMove, countdown)
+    }
+  }, [showMoveNumbers, context, lastMove, countdown])
+
   let onMouseMove = useCallback((e) => {
     if (dragging) {
       return
@@ -312,7 +331,7 @@ function Board({gameState, setGameState}) {
     if (showMoveNumbers) {
       paintMoveNumbers(context, board)
     } else {
-      paintLastMove(context, lastMove)
+      paintLastMove(context, lastMove, countdownRef.current)
     }
     if (currentPlayer(gameState) !== auth.name) {
       return

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

@@ -174,16 +174,26 @@ function paintMoveNumber({cursorXref, cursorYref, stoneRadius, canvasRef, grid},
   ctx.fillText(historyEntry.n + 1, x, y)
 }
 
-export function paintLastMove({canvasRef, grid, stoneRadius}, lastMove) {
+export function paintLastMove(context, lastMove, countdown) {
   if (!lastMove) {
     return
   }
+  let {canvasRef, grid, stoneRadius} = context
   let {x: grid_x, y: grid_y, color} = lastMove
   let style = color === BLACK ?
     "rgba(255,255,255)" :
     "rgba(0,0,0)"
+  paintStone(context, grid_x, grid_y, color)
   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)
+    return
+  }
   let length = stoneRadius * 0.875
   ctx.fillStyle = style
   ctx.beginPath()