fix timeoutless game

Author: h908714124

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

@@ -82,11 +82,11 @@ export function Game() {
 function Board({gameState, setGameState}) {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
-  let timeout = useTimeoutStore(state => state.timeout)
+  let timeRemaining = useTimeoutStore(state => state.timeRemaining)
   let timesetting = gameState.timesetting
-  let setTimeout = useTimeoutStore(state => state.setTimeout)
-  let timeoutRef = useRef()
-  timeoutRef.current = timeout
+  let setTimeRemaining = useTimeoutStore(state => state.setTimeRemaining)
+  let timeRemainingRef = useRef()
+  timeRemainingRef.current = timeRemaining
   let gameStateRef = useRef()
   gameStateRef.current = gameState
   let [ctrlKeyDown, setCtrlKeyDown] = useState(false)
@@ -118,10 +118,13 @@ function Board({gameState, setGameState}) {
     if (intervalIdRef.current) {
       clearInterval(intervalIdRef.current)
     }
-    setTimeout(timesetting)
+    setTimeRemaining(timesetting)
+    if (!timesetting) {
+      return
+    }
     intervalIdRef.current = setInterval(() => {
-      let t = timeoutRef.current - 1
-      setTimeout(t)
+      let t = timeRemainingRef.current - 1
+      setTimeRemaining(t)
       if (t <= 0) {
         clearInterval(intervalIdRef.current)
         window.setTimeout(() => {
@@ -133,7 +136,7 @@ function Board({gameState, setGameState}) {
       }
     }, 1000)
 
-  }, [setTimeout, timesetting, stompClient])
+  }, [setTimeRemaining, timesetting, stompClient])
 
   useEffect(() => {
     resetCountdown()
@@ -265,9 +268,9 @@ function Board({gameState, setGameState}) {
 
   useEffect(() => {
     if (!showMoveNumbers && !counting && !end) {
-      paintLastMove(context, lastMove, timeout)
+      paintLastMove(context, lastMove, timeRemaining)
     }
-  }, [showMoveNumbers, context, lastMove, timeout, counting, end])
+  }, [showMoveNumbers, context, lastMove, timeRemaining, counting, end])
 
   let onMouseMove = useCallback((e) => {
     if (dragging) {
@@ -363,7 +366,7 @@ function Board({gameState, setGameState}) {
     if (showMoveNumbers) {
       paintMoveNumbers(context, board)
     } else if (!counting && !end) {
-      paintLastMove(context, lastMove, timeoutRef.current)
+      paintLastMove(context, lastMove, timeRemainingRef.current)
     } else if (lastMove && !lastMove.action) {
       paintNumber(context, lastMove.x, lastMove.y, lastMove.n + 1, lastMove.color)
     }

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

@@ -89,13 +89,14 @@ function WhoIsWho({gameState}) {
   let {black, white} = gameState
   let counting = isCounting(gameState)
   let end = gameHasEnded(gameState)
-  let timeout = useTimeoutStore(state => state.timeout)
+  let timeRemaining = useTimeoutStore(state => state.timeRemaining)
   let timesetting = gameState.timesetting
   let color = currentColor(gameState)
   let navigate = useNavigate()
   let onExit = useCallback(() => {
     navigate(base + "/lobby")
   }, [navigate])
+  let timeClassname = timeRemaining > 0 && timeRemaining <= 5 ? "font-bold text-red-500" : "text-white"
   return (
     <div className="flex-none grid grid-cols-[max-content_max-content_max-content_auto_max-content] w-full gap-x-4">
       <div className="flex"><BabyStone color="white" className="pr-1" />{white}</div>
@@ -110,11 +111,17 @@ function WhoIsWho({gameState}) {
           <IoMdExit />
         </IconContext.Provider>
       </button>
-      <div>{!counting && !end && color === WHITE ? timeout : timesetting}</div>
-      <div />
-      <div>{!counting && !end && color === BLACK ? timeout : timesetting}</div>
-      <div />
-      <div />
+      {timesetting ? <>
+        <div className={color === WHITE ? timeClassname : ""}>
+          {!counting && !end && color === WHITE ? timeRemaining : timesetting}
+        </div>
+        <div />
+        <div className={color === BLACK ? timeClassname : ""}>
+          {!counting && !end && color === BLACK ? timeRemaining : timesetting}
+        </div>
+        <div />
+        <div />
+      </> : ""}
     </div>
   )
 }

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

@@ -199,7 +199,7 @@ export function paintNumber(context, grid_x, grid_y, n, color) {
   ctx.fillText(n, x, y)
 }
 
-export function paintLastMove(context, lastMove, countdown) {
+export function paintLastMove(context, lastMove, timeRemaining) {
   if (!lastMove) {
     return
   }
@@ -211,8 +211,8 @@ export function paintLastMove(context, lastMove, countdown) {
   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) {
-    paintNumber(context, grid_x, grid_y, countdown, color)
+  if (timeRemaining > 0 && timeRemaining < 10) {
+    paintNumber(context, grid_x, grid_y, timeRemaining, color)
     return
   }
   let length = stoneRadius * 0.875

src/main/client/src/store.js

@@ -47,8 +47,8 @@ export const useMuteStore = create(
 )
 
 export const useTimeoutStore = create(set => ({
-  timeout: 10,
-  setTimeout: timeout => set(produce(draft => {
-    draft.timeout = timeout
+  timeRemaining: 10,
+  setTimeRemaining: timeRemaining => set(produce(draft => {
+    draft.timeRemaining = timeRemaining
   }), true),
 }))

src/main/java/com/bernd/GameController.java

@@ -3,7 +3,6 @@
 import com.bernd.game.Board;
 import com.bernd.game.MoveList;
 import com.bernd.model.AcceptRequest;
-import com.bernd.model.ActiveGame;
 import com.bernd.model.Chat;
 import com.bernd.model.ChatMessage;
 import com.bernd.model.Game;
@@ -93,7 +92,8 @@ public void action(Move move, Principal p) {
     }
     int color = getColorFromGameState(game);
     Chat chat = chats.get(game.id());
-    if (System.currentTimeMillis() > game.updated() + game.timesetting() * 1000L) {
+    if (game.timesetting() != 0
+        && System.currentTimeMillis() > game.updated() + game.timesetting() * 1000L) {
       games.put(game.withTimeoutState());
       String text = color == Board.W ? "B+Time" : "W+Time";
       ChatMessage message = new ChatMessage(chat.counter().getAndIncrement(), text, null, "status", null);