no counting after game has ended

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

@@ -84,7 +84,8 @@ function Panel({gameState, setGameState}) {
 }
 
 function WhoIsWho({gameState}) {
-  let {black, white} = gameState
+  let {black, white, counting} = gameState
+  let end = gameHasEnded(gameState)
   let timeout = useTimeoutStore(state => state.timeout)
   let color = currentColor(gameState)
   let navigate = useNavigate()
@@ -105,9 +106,9 @@ function WhoIsWho({gameState}) {
           <IoMdExit />
         </IconContext.Provider>
       </button>
-      <div>{color === WHITE ? timeout : "10"}</div>
+      <div>{!counting && !end && color === WHITE ? timeout : "10"}</div>
       <div />
-      <div>{color === BLACK ? timeout : "10"}</div>
+      <div>{!counting && !end && color === BLACK ? timeout : "10"}</div>
       <div />
       <div />
     </div>

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

@@ -143,12 +143,13 @@ function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, color) {
     "rgba(80,80,80,0)" :
     "hsla(0,0%,100%,0)"
   let [x, y] = grid[grid_y][grid_x]
+  let offset = Math.trunc(stoneRadius / 4)
   let ctx = canvasRef.current.getContext("2d")
   ctx.fillStyle = color === BLACK ? "#111" : "#ddd"
   ctx.beginPath()
   ctx.arc(x, y, stoneRadius, 0, TAU)
   ctx.fill()
-  let gradient = ctx.createRadialGradient(x - (stoneRadius/4), y - (stoneRadius/4), 0, x - (stoneRadius/4), y - (stoneRadius/4), stoneRadius)
+  let gradient = ctx.createRadialGradient(x - offset, y - offset, 0, x - offset, y - offset, stoneRadius)
   gradient.addColorStop(color === BLACK ? 0.55 : 0.7, innerStyle);
   gradient.addColorStop(color === BLACK ? 0.1 : 0.2, outerStyle);
   ctx.fillStyle = gradient