refactoring

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

@@ -81,6 +81,7 @@ 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 fulltime = useTimeoutStore(state => state.fulltime)
   let setTimeout = useTimeoutStore(state => state.setTimeout)
   let timeoutRef = useRef()
   timeoutRef.current = timeout
@@ -113,7 +114,7 @@ function Board({gameState, setGameState}) {
     if (intervalIdRef.current) {
       clearInterval(intervalIdRef.current)
     }
-    setTimeout(10)
+    setTimeout(fulltime)
     intervalIdRef.current = setInterval(() => {
       let t = timeoutRef.current - 1
       setTimeout(t)
@@ -122,7 +123,7 @@ function Board({gameState, setGameState}) {
       }
     }, 1000)
 
-  }, [setTimeout])
+  }, [setTimeout, fulltime])
 
   useEffect(() => {
     resetCountdown()

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

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

src/main/client/src/store.js

@@ -48,9 +48,10 @@ export const useMuteStore = create(
 
 export const useTimeoutStore = create(set => (
   {
+    fulltime: 10,
     timeout: 10,
-    setTimeout: timeout => set({
-      timeout: timeout,
-    })
+    setTimeout: timeout => set(produce(draft => {
+      draft.timeout = timeout
+    }), true)
   }
 ))