time: show countdown

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,29 @@ 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))
+  let intervalIdRef = useRef()
+
+  let resetCountdown = useCallback(() => {
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+    }
+    setCountdown(10)
+    intervalIdRef.current = setInterval(() => {
+      setCountdown(countdown => countdown - 1)
+    }, 1000)
+
+  }, [])
+
+  useEffect(() => {
+    resetCountdown()
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current)
+      }
+    }
+  }, [resetCountdown])
+
   let playClickSound = useCallback(() => {
     if (muted) {
       return
@@ -164,8 +190,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 +248,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
@@ -285,12 +315,13 @@ function Board({gameState, setGameState}) {
     if (!isSelfPlay(gameState)) { // can't add early in self play; myColor is 0
       setGameState(addMove(gameState, {...move, color: myColor})) // early add move
     }
+    resetCountdown()
     playClickSound()
     stompClient.publish({
       destination: "/app/game/move",
       body: JSON.stringify(move),
     })
-  }, [gameState, setGameState, auth, board, stompClient, counting, forbidden_x, forbidden_y, myColor, playClickSound, isCursorInBounds, showMoveNumbers])
+  }, [gameState, setGameState, auth, board, stompClient, counting, forbidden_x, forbidden_y, myColor, playClickSound, isCursorInBounds, showMoveNumbers, resetCountdown])
 
   useEffect(() => {
     if (!board.length) {
@@ -312,7 +343,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
@@ -352,9 +383,10 @@ function Board({gameState, setGameState}) {
     let sub = stompClient.subscribe("/topic/move/" + gameId, (message) => {
       let move = JSON.parse(message.body)
       setGameState(addMove(gameState, move))
+      resetCountdown()
     })
     return sub.unsubscribe
-  }, [gameState, setGameState, stompClient, gameId])
+  }, [gameState, setGameState, stompClient, gameId, resetCountdown])
 
   if (!board.length) {
     return <div>Loading...</div>

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()