Skip to content

Commit deda601

Browse files
h908714124h908714124
committed
use timesetting from server
1 parent 9b3ca97 commit deda601

File tree

4 files changed

+57
-54
lines changed

4 files changed

+57
-54
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ function Board({gameState, setGameState}) {
8484
let [cursor_x, setCursor_x] = useState(-1)
8585
let [cursor_y, setCursor_y] = useState(-1)
8686
let timeout = useTimeoutStore(state => state.timeout)
87-
let fulltime = useTimeoutStore(state => state.fulltime)
87+
let timesetting = gameState.timesetting
8888
let setTimeout = useTimeoutStore(state => state.setTimeout)
8989
let timeoutRef = useRef()
9090
timeoutRef.current = timeout
@@ -119,7 +119,7 @@ function Board({gameState, setGameState}) {
119119
if (intervalIdRef.current) {
120120
clearInterval(intervalIdRef.current)
121121
}
122-
setTimeout(fulltime)
122+
setTimeout(timesetting)
123123
intervalIdRef.current = setInterval(() => {
124124
let t = timeoutRef.current - 1
125125
setTimeout(t)
@@ -131,7 +131,7 @@ function Board({gameState, setGameState}) {
131131
}
132132
}, 1000)
133133

134-
}, [setTimeout, fulltime, setGameState])
134+
}, [setTimeout, timesetting, setGameState])
135135

136136
useEffect(() => {
137137
resetCountdown()
@@ -372,7 +372,7 @@ function Board({gameState, setGameState}) {
372372
if (board[cursor_y][cursor_x].isForbidden(currentColor(gameState))) {
373373
return
374374
}
375-
if (cursor_x == forbidden_x && cursor_y == forbidden_y) {
375+
if (cursor_x === forbidden_x && cursor_y === forbidden_y) {
376376
return
377377
}
378378
if (!showMoveNumbers && !counting && !end) {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ function WhoIsWho({gameState}) {
8787
let {black, white, counting} = gameState
8888
let end = gameHasEnded(gameState)
8989
let timeout = useTimeoutStore(state => state.timeout)
90-
let fulltime = useTimeoutStore(state => state.fulltime)
90+
let timesetting = gameState.timesetting
9191
let color = currentColor(gameState)
9292
let navigate = useNavigate()
9393
let onExit = useCallback(() => {
@@ -107,9 +107,9 @@ function WhoIsWho({gameState}) {
107107
<IoMdExit />
108108
</IconContext.Provider>
109109
</button>
110-
<div>{!counting && !end && color === WHITE ? timeout : fulltime}</div>
110+
<div>{!counting && !end && color === WHITE ? timeout : timesetting}</div>
111111
<div />
112-
<div>{!counting && !end && color === BLACK ? timeout : fulltime}</div>
112+
<div>{!counting && !end && color === BLACK ? timeout : timesetting}</div>
113113
<div />
114114
<div />
115115
</div>

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

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export function Lobby() {
133133

134134
function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, newGameRef}) {
135135
let dimRef = useRef(9)
136-
let timeRef = useRef(0)
136+
let timeRef = useRef(10)
137137
let [edit, setEdit] = useState(false)
138138
return (
139139
<form className="contents" onSubmit={(e) => {
@@ -145,56 +145,60 @@ function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, newGameRef}) {
145145
onNewGame(game)
146146
}
147147
}}>
148-
<div className="flex justify-start">
149-
<div ref={newGameRef} className="absolute ml-40 bg-slate-800 w-96 border-2 border-slate-600 rounded-lg">
150-
<div className="absolute top-1 right-0 mr-2">
151-
<button onClick={() => setNewGameOpen(false)} className="ml-1 text-stone-100 hover:text-stone-300">
152-
<IconContext.Provider value={{ size: "1.25em" }}>
153-
<CgClose />
154-
</IconContext.Provider>
155-
</button>
148+
<div ref={newGameRef} className="absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg z-10 px-3 py-2">
149+
<div className="absolute top-1 right-1">
150+
<button onClick={() => setNewGameOpen(false)} className="text-stone-100 hover:text-stone-300">
151+
<IconContext.Provider value={{ size: "1.25em" }}>
152+
<CgClose />
153+
</IconContext.Provider>
154+
</button>
155+
</div>
156+
<div className="mt-1">
157+
<span className="italic text-gray-400">Board Dimension:</span>
158+
</div>
159+
<div className="flex flex-row gap-x-4">
160+
<div>
161+
<input id="dim-9" type="radio" name="dim" value="9" defaultChecked={true} onClick={() => dimRef.current = 9} />
162+
<label htmlFor="dim-9" className="pt-[0.625rem]">9x9</label>
163+
</div>
164+
<div>
165+
<input id="dim-13" type="radio" name="dim" value="13" onClick={() => dimRef.current = 13} />
166+
<label htmlFor="dim-13" className="pt-[0.625rem]">13x13</label>
167+
</div>
168+
<div>
169+
<input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
170+
<label htmlFor="dim-19" className="pt-[0.625rem]">19x19</label>
156171
</div>
157-
<div className="grid grid-cols-3 gap-1">
158-
<div className="col-span-3 pt-3">
159-
<label className="italic text-gray-400 ml-2">Dimension</label>
160-
</div>
161-
<div>
162-
<input id="dim-9" type="radio" name="dim" value="9" className="ml-2" defaultChecked={true} onClick={() => dimRef.current = 9} />
163-
<label htmlFor="dim-9" className="pt-[0.625rem] pr-1" >9x9</label>
164-
</div>
165-
<div>
166-
<input id="dim-13" type="radio" name="dim" value="13" onClick={() => dimRef.current = 13} />
167-
<label htmlFor="dim-13" className="pt-[0.625rem] pr-1">13x13</label>
168-
</div>
169-
<div>
170-
<input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
171-
<label htmlFor="dim-19" className="pt-[0.625rem] pr-5">19x19</label>
172-
</div>
173-
<div className="col-span-3">
174-
<label className="italic text-gray-400 ml-2">Time</label>
175-
</div>
176-
<div>
177-
<input id="time-0" type="radio" name="time" value="0" className="ml-2" defaultChecked={true} onClick={() => timeRef.current = 0} />
178-
<label htmlFor="time-0" className="pt-[0.625rem] pr-1" >0s</label>
179-
</div>
180-
<div>
181-
<input id="time-10" type="radio" name="time" value="10" onClick={() => timeRef.current = 10} />
182-
<label htmlFor="time-10" className="pt-[0.625rem] pr-1">10s</label>
183-
</div>
184-
<div>
185-
<input id="time-30" type="radio" name="time" value="30" onClick={() => timeRef.current = 30} />
186-
<label htmlFor="time-30" className="pt-[0.625rem] pr-1">30s</label>
187-
</div>
172+
</div>
173+
<div className="mt-3">
174+
<span className="italic text-gray-400">Time Setting:</span>
175+
</div>
176+
<div className="flex flex-row gap-x-3">
177+
<div>
178+
<input id="time-0" type="radio" name="time" value="0" onClick={() => timeRef.current = 0} />
179+
<label htmlFor="time-0" className="pt-[0.625rem]" >No time limit</label>
180+
</div>
181+
<div>
182+
<input id="time-10" type="radio" name="time" value="10" defaultChecked={true} onClick={() => timeRef.current = 10} />
183+
<label htmlFor="time-10" className="pt-[0.625rem]">10s</label>
188184
</div>
189-
<div className="flex flex-row w-full pt-2 pr-2 pb-2">
190-
<input className="ml-2" id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
191-
<label htmlFor="cb-edit" className="pt-[0.625rem] ml-1">Edit</label>
192-
<div className="grow" />
193-
<Button type="submit" className="ml-2">OK</Button>
185+
<div>
186+
<input id="time-30" type="radio" name="time" value="30" onClick={() => timeRef.current = 30} />
187+
<label htmlFor="time-30" className="pt-[0.625rem]">30s</label>
188+
</div>
189+
</div>
190+
<div className="flex flex-row w-full mt-3">
191+
<div className="self-end">
192+
<input id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
193+
<label htmlFor="cb-edit" className={twJoin(
194+
!edit && "text-gray-400",
195+
"pt-[0.625rem] ml-1",
196+
)}>Edit Mode</label>
194197
</div>
198+
<div className="grow" />
199+
<Button type="submit">OK</Button>
195200
</div>
196201
</div>
197-
198202
</form>
199203
)
200204
}

‎src/main/client/src/store.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export const useMuteStore = create(
4848

4949
export const useTimeoutStore = create(set => (
5050
{
51-
fulltime: 10,
5251
timeout: 10,
5352
setTimeout: timeout => set(produce(draft => {
5453
draft.timeout = timeout

0 commit comments

Comments
 (0)