show timeout in sidebar

src/main/client/src/component/BabyStone.jsx

@@ -0,0 +1,14 @@
+import {
+  FaCircle,
+} from "react-icons/fa"
+import {
+  IconContext,
+} from "react-icons"
+
+export function BabyStone({color, className}) {
+  return (
+    <IconContext.Provider value={{ color: color, size: "1.5em", className: className }}>
+      <FaCircle />
+    </IconContext.Provider>
+  )
+}

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

@@ -115,7 +115,11 @@ function Board({gameState, setGameState}) {
     }
     setTimeout(10)
     intervalIdRef.current = setInterval(() => {
-      setTimeout(timeoutRef.current - 1)
+      let t = timeoutRef.current - 1
+      setTimeout(t)
+      if (t <= 0) {
+        clearInterval(intervalIdRef.current)
+      }
     }, 1000)
 
   }, [setTimeout])

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

@@ -15,22 +15,29 @@ import {
 import {
   StompContext,
   base,
+  BLACK,
+  WHITE,
 } from "src/util.js"
 import {
   Button,
 } from "src/component/Button.jsx"
 import {
   useAuthStore,
+  useTimeoutStore,
 } from "src/store.js"
 import {
   Chat,
 } from "src/component/Chat.jsx"
 import {
   SideBar,
 } from "src/component/SideBar.jsx"
+import {
+  BabyStone,
+} from "src/component/BabyStone.jsx"
 import {
   countingComplete,
   currentPlayer,
+  currentColor,
   isKibitz,
   moveBack,
   moveForward,
@@ -53,15 +60,15 @@ export const GamePanel = ({gameState, setGameState}) => {
 function Panel({gameState, setGameState}) {
   let {gameId} = useParams()
   let auth = useAuthStore(state => state.auth)
-  let {black, white, counting, board} = gameState
+  let {counting, board} = gameState
 
   if (!board.length) {
     return <span>Loading...</span>
   }
   let activePlay = !isKibitz(gameState, auth) && !gameHasEnded(gameState)
   return (
     <>
-      <WhoIsWho black={black} white={white} />
+      <WhoIsWho gameState={gameState} />
       <WarpControls
         gameState={gameState}
         setGameState={setGameState}
@@ -76,17 +83,20 @@ function Panel({gameState, setGameState}) {
   )
 }
 
-function WhoIsWho({black, white}) {
+function WhoIsWho({gameState}) {
+  let {black, white} = gameState
+  let timeout = useTimeoutStore(state => state.timeout)
+  let color = currentColor(gameState)
   let navigate = useNavigate()
   let onExit = useCallback(() => {
     navigate(base + "/lobby")
   }, [navigate])
   return (
-    <div className="flex-none flex w-full gap-x-1">
-      <div>{white}</div>
-      <div>vs</div>
-      <div>{black}</div>
-      <div className="grow" />
+    <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>
+      <div>VS</div>
+      <div className="flex"><BabyStone color="black" className="pr-1" />{black}</div>
+      <div />
       <button title="Leave the game" onClick={onExit}>
         <IconContext.Provider value={{
           size: "1.5em",
@@ -95,6 +105,11 @@ function WhoIsWho({black, white}) {
           <IoMdExit />
         </IconContext.Provider>
       </button>
+      <div>{color === WHITE ? timeout : "10"}</div>
+      <div />
+      <div>{color === BLACK ? timeout : "10"}</div>
+      <div />
+      <div />
     </div>
   )
 }

src/main/client/src/feature/lobby/OpenGames.jsx

@@ -6,7 +6,6 @@ import {
   useCallback,
 } from "react"
 import {
-  FaCircle,
   FaAngleLeft,
   FaAngleRight,
 } from "react-icons/fa"
@@ -25,6 +24,9 @@ import {
 import {
   Button,
 } from "src/component/Button.jsx"
+import {
+  BabyStone,
+} from "src/component/BabyStone.jsx"
 import {
   base,
   StompContext,
@@ -156,13 +158,13 @@ function AcceptDialog({acceptableGame, onAccept}) {
       className="absolute bg-sky-200 px-4 py-3 rounded-lg z-10 flex flex-col">
       <div className="text-black">
         <button type="button" className="inline-flex" onClick={() => setFlip(!isFlip)}>
-          <BabyStone color={isFlip ? "white": "black"} />
+          <BabyStone color={isFlip ? "white": "black"} className="pr-2" />
           {acceptableGame.game.user}
         </button>
       </div>
       <div className="text-black">
         <button type="button" className="inline-flex" onClick={() => setFlip(!isFlip)}>
-          <BabyStone color={isFlip ? "black": "white"} />
+          <BabyStone color={isFlip ? "black": "white"} className="pr-2" />
           {auth.name}
         </button>
       </div>
@@ -193,10 +195,3 @@ function AcceptDialog({acceptableGame, onAccept}) {
   )
 }
 
-function BabyStone({color}) {
-  return (
-    <IconContext.Provider value={{ color: color, size: "1.5em", className: "pr-2" }}>
-      <FaCircle />
-    </IconContext.Provider>
-  )
-}