From deda60127ff4a585e4fb19d9f524de5f4a4047cf Mon Sep 17 00:00:00 2001
From: jbock <jbock-java@gmx.de>
Date: Wed, 25 Sep 2024 10:25:39 +0200
Subject: [PATCH] use timesetting from server

---
 src/main/client/src/feature/game/Game.jsx     |  8 +-
 .../client/src/feature/game/GamePanel.jsx     |  6 +-
 src/main/client/src/feature/lobby/Lobby.jsx   | 96 ++++++++++---------
 src/main/client/src/store.js                  |  1 -
 4 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/src/main/client/src/feature/game/Game.jsx b/src/main/client/src/feature/game/Game.jsx
index 26d238a..64e5554 100644
--- a/src/main/client/src/feature/game/Game.jsx
+++ b/src/main/client/src/feature/game/Game.jsx
@@ -84,7 +84,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 timesetting = gameState.timesetting
   let setTimeout = useTimeoutStore(state => state.setTimeout)
   let timeoutRef = useRef()
   timeoutRef.current = timeout
@@ -119,7 +119,7 @@ function Board({gameState, setGameState}) {
     if (intervalIdRef.current) {
       clearInterval(intervalIdRef.current)
     }
-    setTimeout(fulltime)
+    setTimeout(timesetting)
     intervalIdRef.current = setInterval(() => {
       let t = timeoutRef.current - 1
       setTimeout(t)
@@ -131,7 +131,7 @@ function Board({gameState, setGameState}) {
       }
     }, 1000)
 
-  }, [setTimeout, fulltime, setGameState])
+  }, [setTimeout, timesetting, setGameState])
 
   useEffect(() => {
     resetCountdown()
@@ -372,7 +372,7 @@ function Board({gameState, setGameState}) {
     if (board[cursor_y][cursor_x].isForbidden(currentColor(gameState))) {
       return
     }
-    if (cursor_x == forbidden_x && cursor_y == forbidden_y) {
+    if (cursor_x === forbidden_x && cursor_y === forbidden_y) {
       return
     }
     if (!showMoveNumbers && !counting && !end) {
diff --git a/src/main/client/src/feature/game/GamePanel.jsx b/src/main/client/src/feature/game/GamePanel.jsx
index c045d0e..302bdca 100644
--- a/src/main/client/src/feature/game/GamePanel.jsx
+++ b/src/main/client/src/feature/game/GamePanel.jsx
@@ -87,7 +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 timesetting = gameState.timesetting
   let color = currentColor(gameState)
   let navigate = useNavigate()
   let onExit = useCallback(() => {
@@ -107,9 +107,9 @@ function WhoIsWho({gameState}) {
           <IoMdExit />
         </IconContext.Provider>
       </button>
-      <div>{!counting && !end && color === WHITE ? timeout : fulltime}</div>
+      <div>{!counting && !end && color === WHITE ? timeout : timesetting}</div>
       <div />
-      <div>{!counting && !end && color === BLACK ? timeout : fulltime}</div>
+      <div>{!counting && !end && color === BLACK ? timeout : timesetting}</div>
       <div />
       <div />
     </div>
diff --git a/src/main/client/src/feature/lobby/Lobby.jsx b/src/main/client/src/feature/lobby/Lobby.jsx
index d61bebb..0f1cae0 100644
--- a/src/main/client/src/feature/lobby/Lobby.jsx
+++ b/src/main/client/src/feature/lobby/Lobby.jsx
@@ -133,7 +133,7 @@ export function Lobby() {
 
 function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, newGameRef}) {
   let dimRef = useRef(9)
-  let timeRef = useRef(0)
+  let timeRef = useRef(10)
   let [edit, setEdit] = useState(false)
   return (
     <form className="contents" onSubmit={(e) => {
@@ -145,56 +145,60 @@ function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, newGameRef}) {
           onNewGame(game)
         }
       }}>
-      <div className="flex justify-start">
-        <div ref={newGameRef} className="absolute ml-40 bg-slate-800 w-96 border-2 border-slate-600 rounded-lg">
-          <div className="absolute top-1 right-0 mr-2">
-            <button onClick={() => setNewGameOpen(false)} className="ml-1 text-stone-100 hover:text-stone-300">
-              <IconContext.Provider value={{ size: "1.25em" }}>
-                <CgClose />
-              </IconContext.Provider>
-            </button>
+      <div ref={newGameRef} className="absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg z-10 px-3 py-2">
+        <div className="absolute top-1 right-1">
+          <button onClick={() => setNewGameOpen(false)} className="text-stone-100 hover:text-stone-300">
+            <IconContext.Provider value={{ size: "1.25em" }}>
+              <CgClose />
+            </IconContext.Provider>
+          </button>
+        </div>
+        <div className="mt-1">
+          <span className="italic text-gray-400">Board Dimension:</span>
+        </div>
+        <div className="flex flex-row gap-x-4">
+          <div>
+            <input id="dim-9" type="radio" name="dim" value="9" defaultChecked={true} onClick={() => dimRef.current = 9} />
+            <label htmlFor="dim-9" className="pt-[0.625rem]">9x9</label>
+          </div>
+          <div>
+            <input id="dim-13" type="radio" name="dim" value="13" onClick={() => dimRef.current = 13} />
+            <label htmlFor="dim-13" className="pt-[0.625rem]">13x13</label>
+          </div>
+          <div>
+            <input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
+            <label htmlFor="dim-19" className="pt-[0.625rem]">19x19</label>
           </div>
-          <div className="grid grid-cols-3 gap-1">
-            <div className="col-span-3 pt-3">
-              <label className="italic text-gray-400 ml-2">Dimension</label>
-            </div>
-            <div>
-              <input id="dim-9" type="radio" name="dim" value="9" className="ml-2" defaultChecked={true} onClick={() => dimRef.current = 9} />
-              <label htmlFor="dim-9" className="pt-[0.625rem] pr-1" >9x9</label>
-            </div>
-            <div>
-              <input id="dim-13" type="radio" name="dim" value="13" onClick={() => dimRef.current = 13} />
-              <label htmlFor="dim-13" className="pt-[0.625rem] pr-1">13x13</label>
-            </div>
-            <div>
-              <input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
-              <label htmlFor="dim-19" className="pt-[0.625rem] pr-5">19x19</label>
-            </div>
-            <div className="col-span-3">
-              <label className="italic text-gray-400 ml-2">Time</label>
-            </div>
-            <div>
-              <input id="time-0" type="radio" name="time" value="0" className="ml-2" defaultChecked={true} onClick={() => timeRef.current = 0} />
-              <label htmlFor="time-0" className="pt-[0.625rem] pr-1" >0s</label>
-            </div>
-            <div>
-              <input id="time-10" type="radio" name="time" value="10" onClick={() => timeRef.current = 10} />
-              <label htmlFor="time-10" className="pt-[0.625rem] pr-1">10s</label>
-            </div>
-            <div>
-              <input id="time-30" type="radio" name="time" value="30" onClick={() => timeRef.current = 30} />
-              <label htmlFor="time-30" className="pt-[0.625rem] pr-1">30s</label>
-            </div>
+        </div>
+        <div className="mt-3">
+          <span className="italic text-gray-400">Time Setting:</span>
+        </div>
+        <div className="flex flex-row gap-x-3">
+          <div>
+            <input id="time-0" type="radio" name="time" value="0" onClick={() => timeRef.current = 0} />
+            <label htmlFor="time-0" className="pt-[0.625rem]" >No time limit</label>
+          </div>
+          <div>
+            <input id="time-10" type="radio" name="time" value="10" defaultChecked={true} onClick={() => timeRef.current = 10} />
+            <label htmlFor="time-10" className="pt-[0.625rem]">10s</label>
           </div>
-          <div className="flex flex-row w-full pt-2 pr-2 pb-2">
-            <input className="ml-2" id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
-            <label htmlFor="cb-edit" className="pt-[0.625rem] ml-1">Edit</label>
-            <div className="grow" />
-            <Button type="submit" className="ml-2">OK</Button>
+          <div>
+            <input id="time-30" type="radio" name="time" value="30" onClick={() => timeRef.current = 30} />
+            <label htmlFor="time-30" className="pt-[0.625rem]">30s</label>
+          </div>
+        </div>
+        <div className="flex flex-row w-full mt-3">
+          <div className="self-end">
+          <input id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
+          <label htmlFor="cb-edit" className={twJoin(
+            !edit && "text-gray-400",
+            "pt-[0.625rem] ml-1",
+          )}>Edit Mode</label>
           </div>
+          <div className="grow" />
+          <Button type="submit">OK</Button>
         </div>
       </div>
-      
     </form>
   )
 }
diff --git a/src/main/client/src/store.js b/src/main/client/src/store.js
index 9720d93..e579a20 100644
--- a/src/main/client/src/store.js
+++ b/src/main/client/src/store.js
@@ -48,7 +48,6 @@ export const useMuteStore = create(
 
 export const useTimeoutStore = create(set => (
   {
-    fulltime: 10,
     timeout: 10,
     setTimeout: timeout => set(produce(draft => {
       draft.timeout = timeout