Skip to content

Commit

Permalink
use timesetting from server
Browse files Browse the repository at this point in the history
  • Loading branch information
@h908714124
h908714124 committed Sep 25, 2024
1 parent 9b3ca97 commit deda601
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 54 deletions.
8 changes: 4 additions & 4 deletions src/main/client/src/feature/game/Game.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand All @@ -131,7 +131,7 @@ function Board({gameState, setGameState}) {
}
}, 1000)

}, [setTimeout, fulltime, setGameState])
}, [setTimeout, timesetting, setGameState])

useEffect(() => {
resetCountdown()
Expand Down Expand Up @@ -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) {
Expand Down
6 changes: 3 additions & 3 deletions src/main/client/src/feature/game/GamePanel.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -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>
Expand Down
96 changes: 50 additions & 46 deletions src/main/client/src/feature/lobby/Lobby.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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>
)
}
Expand Down
1 change: 0 additions & 1 deletion src/main/client/src/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit deda601

Please sign in to comment.