setting timeout

Author: Christopher Strauss

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

@@ -35,6 +35,7 @@ export function initialState() {
     viewPos: Number.NaN,
     winnerByTime: 0,
     dim: 0,
+    timesetting: 0,
     handicap: 0,
     queueStatus: "behind",
     black: "",
@@ -272,6 +273,7 @@ export function createGameState(game, auth) {
     black: game.black,
     white: game.white,
     dim: game.dim,
+    timesetting: game.timesetting,
     handicap: game.handicap,
     counting: counting,
     baseBoard: baseBoard,

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

@@ -49,6 +49,20 @@ export function Lobby() {
   let stompClient = useContext(StompContext)
   let navigate = useNavigate()
   let auth = useAuthStore(state => state.auth)
+  let newGameRef = useRef()
+  let onClickOutside = useCallback((event) => {
+    if (!isNewGameOpen) {
+      return
+    }
+    let el = newGameRef.current
+    if (!el) {
+      return
+    }
+    let rect = el.getBoundingClientRect()
+    if (event.clientX > rect.right || event.clientX < rect.left || event.clientY > rect.bottom || event.clientY < rect.top) {
+      setNewGameOpen(false)
+    }
+  }, [isNewGameOpen] )
   let onNewGame = useCallback((d) => doTry(async () => {
     let response = await tfetch("/api/create", {
       method: "POST",
@@ -77,28 +91,31 @@ export function Lobby() {
     navigate(base + "/game/" + response.id)
   }), [auth, navigate])
   return (
-    <div className="h-full">
+    <div onClick={onClickOutside} className="h-full">
       <div className={twJoin(
-          "mt-2 inline-flex py-2 pr-4 gap-x-1 border-r-2 border-y-2",
-          isNewGameOpen && "rounded-r-full border-slate-600",
+          "mt-2 py-2 pr-4 gap-x-1",
+          isNewGameOpen && "",
           !isNewGameOpen && "border-transparent",
         )}>
         {isNewGameOpen ? (
           <NewGameDialog
+            onRef={ref => newGameRef.current = ref}
             onNewGame={onNewGame}
             onStartEdit={onStartEdit}
             setNewGameOpen={setNewGameOpen} />
-        ) : (
-          <button className={twJoin(
+        ) : "" }
+          <button disabled={isNewGameOpen}  className={!isNewGameOpen ? twJoin(
               "ml-2 border-2 border-transparent px-4 py-2 rounded-lg",
               "hover:border-sky-700",
+            ) : twJoin(
+              "ml-2 border-2 bg-gray-400 border-transparent px-4 py-2 rounded-lg",
             )}
             onClick={() => {
               setNewGameOpen(true)
             }}>
             New Game
           </button>
-        )}
+
       </div>
       <div className="mt-2 grid gap-x-4 grid-cols-[max-content_auto]">
         <DetailNavigation detail={detail} setDetail={setDetail} />
@@ -114,33 +131,70 @@ export function Lobby() {
   )
 }
 
-function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen}) {
+function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, onRef}) {
   let dimRef = useRef(9)
+  let timeRef = useRef(0)
   let [edit, setEdit] = useState(false)
   return (
     <form className="contents" onSubmit={(e) => {
         e.preventDefault()
-        let game = {dim: dimRef.current}
+        let game = {dim: dimRef.current, timesetting: timeRef.current}
         if (edit) {
           onStartEdit(game)
         } else {
           onNewGame(game)
         }
       }}>
-      <Button type="submit" className="ml-2">OK</Button>
-      <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>
-      <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>
-      <input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
-      <label htmlFor="dim-19" className="pt-[0.625rem] pr-1">19x19</label>
-      <input id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
-      <label htmlFor="cb-edit" className="pt-[0.625rem] ml-1">Edit</label>
-      <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 className="flex justify-start">
+        <div ref={onRef} 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>
+          <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="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>
+        </div>
+      </div>
+      
     </form>
   )
 }

src/main/java/com/bernd/LobbyController.java

@@ -72,6 +72,7 @@ public ViewGame startEdit(@RequestBody MatchRequest request) {
         false,
         createEmptyBoard(request.dim()),
         request.dim(),
+        request.timesetting(),
         request.handicap(),
         new int[]{-1, -1},
         MoveList.create(request.dim())));

src/main/java/com/bernd/model/Game.java

@@ -20,6 +20,7 @@ public record Game(
     boolean counting,
     int[][] board,
     int dim,
+    int timesetting,
     int handicap,
     int[] forbidden,
     MoveList moves

src/main/java/com/bernd/model/GameBuilder.java

@@ -46,6 +46,7 @@ public Game build() {
         counting,
         board,
         game.dim(),
+        game.timesetting(),
         game.handicap(),
         forbidden,
         game.moves()

src/main/java/com/bernd/model/MatchRequest.java

@@ -2,6 +2,7 @@
 
 public record MatchRequest(
     int dim,
+    int timesetting,
     boolean editMode,
     int handicap) {
 }

src/main/java/com/bernd/model/OpenGame.java

@@ -8,14 +8,15 @@ public record OpenGame(
     String id,
     String user,
     int dim,
+    int timesetting,
     int handicap) {
 
   public OpenGame withId(String id) {
-    return new OpenGame(id, user, dim, handicap);
+    return new OpenGame(id, user, dim, timesetting, handicap);
   }
 
   public OpenGame withUser(String name) {
-    return new OpenGame(id, name, dim, handicap);
+    return new OpenGame(id, name, dim, timesetting, handicap);
   }
 
   public Game accept(String opponent, AcceptRequest acceptRequest) {
@@ -28,6 +29,7 @@ public Game accept(String opponent, AcceptRequest acceptRequest) {
         false,
         createEmptyBoard(dim),
         dim,
+        timesetting,
         acceptRequest.handicap(),
         new int[]{-1, -1},
         MoveList.create(dim));

src/main/java/com/bernd/model/ViewGame.java

@@ -7,6 +7,7 @@ public record ViewGame(
     String black,
     String white,
     int dim,
+    int timesetting,
     int handicap,
     List<Move> moves
 ) {
@@ -17,6 +18,7 @@ static ViewGame fromGame(Game game) {
         game.black(),
         game.white(),
         game.dim(),
+        game.timesetting(),
         game.handicap(),
         game.moves().moves());
   }

src/test/java/com/bernd/model/GameBuilderTest.java

@@ -18,6 +18,7 @@ void unchanged() {
         createEmptyBoard(9),
         9,
         2,
+        0,
         new int[]{-1, -1},
         MoveList.create(2));
     Game game2 = GameBuilder.builder(game).build();

src/test/java/com/bernd/util/SgfCreatorTest.java

@@ -17,7 +17,7 @@ void testCreate() {
     MoveList moveList = MoveList.create(20);
     moveList.add(new Move(Board.B, 0, null, 3, 4));
     moveList.add(new Move(Board.W, 0, null, 6, 4));
-    Game game = new Game("1234", "B", "W", false, new int[9][], 9, 0, null, moveList);
+    Game game = new Game("1234", "B", "W", false, new int[9][], 9, 0, 0, new int[]{-1, -1}, moveList);
     String sgf = SgfCreator.createSgf(game, LocalDate.of(2024, Month.AUGUST, 30));
     assertEquals("(;FF[4]CA[UTF-8]GM[1]DT[2024-08-30]GN[1234]PB[B]PW[W]RE[?]SZ[9];B[de];W[ge])",
         sgf.replace("\n", ""));