Skip to content

Commit 040a172

Browse files
h908714124h908714124
committed
refactoring, split off NewGameDialog
1 parent fc26214 commit 040a172

File tree

3 files changed

+144
-123
lines changed

3 files changed

+144
-123
lines changed

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

Lines changed: 4 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,16 @@ import {
33
useState,
44
useEffect,
55
useContext,
6-
useCallback,
76
} from "react"
87
import {
98
twJoin,
109
} from "tailwind-merge"
1110
import {
1211
useNavigate,
1312
} from "react-router-dom"
14-
import {
15-
Button,
16-
} from "src/component/Button.jsx"
1713
import {
1814
base,
1915
StompContext,
20-
tfetch,
21-
doTry,
2216
stopPropagation,
2317
} from "src/util.js"
2418
import {
@@ -33,23 +27,18 @@ import {
3327
import {
3428
Requests,
3529
} from "./Requests.jsx"
30+
import {
31+
NewGameDialog,
32+
} from "./NewGameDialog.jsx"
3633
import {
3734
useAuthStore,
3835
} from "src/store.js"
3936
import {
4037
getZindex,
4138
setNewGameOpen,
42-
setOpenGameId,
4339
handleLobbyClick,
44-
closeLobbyPopup,
4540
initialState,
4641
} from "./lobbyState.js"
47-
import {
48-
CgClose,
49-
} from "react-icons/cg"
50-
import {
51-
IconContext,
52-
} from "react-icons"
5342

5443
const detailData = [
5544
["open", "Open Games"],
@@ -81,28 +70,15 @@ export function Lobby() {
8170
sub.unsubscribe()
8271
}
8372
}, [auth, initialized, stompClient, navigate])
84-
let onStartEdit = useCallback((d) => doTry(async () => {
85-
let response = await tfetch("/api/start_edit", {
86-
method: "POST",
87-
headers: {
88-
"Authorization": "Bearer " + auth.token,
89-
"Content-Type": "application/json",
90-
},
91-
body: JSON.stringify(d),
92-
})
93-
navigate(base + "/game/" + response.id)
94-
}), [auth, navigate])
9573
return (
9674
<div onClick={(event) => setLobbyState(handleLobbyClick(lobbyState, event))} className="h-full">
9775
<div className={twJoin(
9876
"mt-2 py-2 pr-4",
9977
)}>
10078
<NewGameDialog
101-
zNewGame={zNewGame}
10279
lobbyState={lobbyState}
10380
setLobbyState={setLobbyState}
104-
newGameRef={newGameRef}
105-
onStartEdit={onStartEdit} />
81+
newGameRef={newGameRef} />
10682
<button disabled={zNewGame !== 0} className={twJoin(
10783
"ml-2 border-2 border-transparent px-4 py-2 rounded-lg",
10884
zNewGame && "bg-gray-400",
@@ -132,98 +108,6 @@ export function Lobby() {
132108
)
133109
}
134110

135-
function NewGameDialog({zNewGame, lobbyState, setLobbyState, onStartEdit, newGameRef}) {
136-
let dimRef = useRef(9)
137-
let timeRef = useRef(10)
138-
let [edit, setEdit] = useState(false)
139-
let auth = useAuthStore(state => state.auth)
140-
let onNewGame = useCallback((d) => doTry(async () => {
141-
let response = await tfetch("/api/create", {
142-
method: "POST",
143-
headers: {
144-
"Authorization": "Bearer " + auth.token,
145-
"Content-Type": "application/json",
146-
},
147-
body: JSON.stringify(d),
148-
})
149-
let newState = closeLobbyPopup(lobbyState)
150-
setLobbyState(setOpenGameId(newState, response.id))
151-
}), [auth.token, lobbyState, setLobbyState])
152-
return (
153-
<form onSubmit={(e) => {
154-
e.preventDefault()
155-
let game = {dim: dimRef.current, timesetting: timeRef.current}
156-
if (edit) {
157-
onStartEdit(game)
158-
} else {
159-
onNewGame(game)
160-
}
161-
}}>
162-
<div ref={newGameRef}
163-
style={{
164-
zIndex: zNewGame,
165-
}}
166-
className={twJoin(
167-
!zNewGame && "hidden",
168-
"absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg px-3 py-2",
169-
)}>
170-
<div className="absolute top-1 right-1">
171-
<button onClick={() => setLobbyState(closeLobbyPopup(lobbyState))} className="text-stone-100 hover:text-stone-300">
172-
<IconContext.Provider value={{ size: "1.25em" }}>
173-
<CgClose />
174-
</IconContext.Provider>
175-
</button>
176-
</div>
177-
<div className="mt-1">
178-
<span className="italic text-gray-400">Board Dimension:</span>
179-
</div>
180-
<div className="flex flex-row gap-x-4">
181-
<div>
182-
<input id="dim-9" type="radio" name="dim" value="9" defaultChecked={true} onClick={() => dimRef.current = 9} />
183-
<label htmlFor="dim-9" className="pt-[0.625rem]">9x9</label>
184-
</div>
185-
<div>
186-
<input id="dim-13" type="radio" name="dim" value="13" onClick={() => dimRef.current = 13} />
187-
<label htmlFor="dim-13" className="pt-[0.625rem]">13x13</label>
188-
</div>
189-
<div>
190-
<input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
191-
<label htmlFor="dim-19" className="pt-[0.625rem]">19x19</label>
192-
</div>
193-
</div>
194-
<div className="mt-3">
195-
<span className="italic text-gray-400">Time Setting:</span>
196-
</div>
197-
<div className="flex flex-row gap-x-3">
198-
<div>
199-
<input id="time-0" type="radio" name="time" value="0" onClick={() => timeRef.current = 0} />
200-
<label htmlFor="time-0" className="pt-[0.625rem]" >No time limit</label>
201-
</div>
202-
<div>
203-
<input id="time-10" type="radio" name="time" value="10" defaultChecked={true} onClick={() => timeRef.current = 10} />
204-
<label htmlFor="time-10" className="pt-[0.625rem]">10s</label>
205-
</div>
206-
<div>
207-
<input id="time-30" type="radio" name="time" value="30" onClick={() => timeRef.current = 30} />
208-
<label htmlFor="time-30" className="pt-[0.625rem]">30s</label>
209-
</div>
210-
</div>
211-
<div className="flex flex-row w-full mt-3">
212-
<div className="self-end">
213-
<input id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
214-
<label htmlFor="cb-edit" className={twJoin(
215-
!edit && "text-gray-400",
216-
"pt-[0.625rem] ml-1",
217-
)}>Edit Mode</label>
218-
</div>
219-
<div className="grow" />
220-
<Button type="submit">OK</Button>
221-
</div>
222-
</div>
223-
</form>
224-
)
225-
}
226-
227111
function DetailNavigation({detail, setDetail}) {
228112
return (
229113
<div className={twJoin(

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

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import {
2+
useRef,
3+
useState,
4+
useCallback,
5+
} from "react"
6+
import {
7+
twJoin,
8+
} from "tailwind-merge"
9+
import {
10+
useNavigate,
11+
} from "react-router-dom"
12+
import {
13+
Button,
14+
} from "src/component/Button.jsx"
15+
import {
16+
base,
17+
tfetch,
18+
doTry,
19+
} from "src/util.js"
20+
import {
21+
useAuthStore,
22+
} from "src/store.js"
23+
import {
24+
getZindex,
25+
setOpenGameId,
26+
closeLobbyPopup,
27+
} from "./lobbyState.js"
28+
import {
29+
CgClose,
30+
} from "react-icons/cg"
31+
import {
32+
IconContext,
33+
} from "react-icons"
34+
35+
export function NewGameDialog({lobbyState, setLobbyState, newGameRef}) {
36+
let zNewGame = getZindex(lobbyState, "newgame")
37+
let dimRef = useRef(9)
38+
let timeRef = useRef(10)
39+
let [edit, setEdit] = useState(false)
40+
let auth = useAuthStore(state => state.auth)
41+
let navigate = useNavigate()
42+
let onNewGame = useCallback((game) => doTry(async () => {
43+
let response = await tfetch("/api/create", {
44+
method: "POST",
45+
headers: {
46+
"Authorization": "Bearer " + auth.token,
47+
"Content-Type": "application/json",
48+
},
49+
body: JSON.stringify(game),
50+
})
51+
let newState = closeLobbyPopup(lobbyState)
52+
setLobbyState(setOpenGameId(newState, response.id))
53+
}), [auth.token, lobbyState, setLobbyState])
54+
let onStartEdit = useCallback((game) => doTry(async () => {
55+
let response = await tfetch("/api/start_edit", {
56+
method: "POST",
57+
headers: {
58+
"Authorization": "Bearer " + auth.token,
59+
"Content-Type": "application/json",
60+
},
61+
body: JSON.stringify(game),
62+
})
63+
navigate(base + "/game/" + response.id)
64+
}), [auth, navigate])
65+
return (
66+
<form onSubmit={(e) => {
67+
e.preventDefault()
68+
let game = {dim: dimRef.current, timesetting: timeRef.current}
69+
if (edit) {
70+
onStartEdit(game)
71+
} else {
72+
onNewGame(game)
73+
}
74+
}}>
75+
<div ref={newGameRef}
76+
style={{
77+
zIndex: zNewGame,
78+
}}
79+
className={twJoin(
80+
!zNewGame && "hidden",
81+
"absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg px-3 py-2",
82+
)}>
83+
<div className="absolute top-1 right-1">
84+
<button onClick={() => setLobbyState(closeLobbyPopup(lobbyState))} className="text-stone-100 hover:text-stone-300">
85+
<IconContext.Provider value={{ size: "1.25em" }}>
86+
<CgClose />
87+
</IconContext.Provider>
88+
</button>
89+
</div>
90+
<div className="mt-1">
91+
<span className="italic text-gray-400">Board Dimension:</span>
92+
</div>
93+
<div className="flex flex-row gap-x-4">
94+
<div>
95+
<input id="dim-9" type="radio" name="dim" value="9" defaultChecked={true} onClick={() => dimRef.current = 9} />
96+
<label htmlFor="dim-9" className="pt-[0.625rem]">9x9</label>
97+
</div>
98+
<div>
99+
<input id="dim-13" type="radio" name="dim" value="13" onClick={() => dimRef.current = 13} />
100+
<label htmlFor="dim-13" className="pt-[0.625rem]">13x13</label>
101+
</div>
102+
<div>
103+
<input id="dim-19" type="radio" name="dim" value="19" onClick={() => dimRef.current = 19} />
104+
<label htmlFor="dim-19" className="pt-[0.625rem]">19x19</label>
105+
</div>
106+
</div>
107+
<div className="mt-3">
108+
<span className="italic text-gray-400">Time Setting:</span>
109+
</div>
110+
<div className="flex flex-row gap-x-3">
111+
<div>
112+
<input id="time-0" type="radio" name="time" value="0" onClick={() => timeRef.current = 0} />
113+
<label htmlFor="time-0" className="pt-[0.625rem]" >No time limit</label>
114+
</div>
115+
<div>
116+
<input id="time-10" type="radio" name="time" value="10" defaultChecked={true} onClick={() => timeRef.current = 10} />
117+
<label htmlFor="time-10" className="pt-[0.625rem]">10s</label>
118+
</div>
119+
<div>
120+
<input id="time-30" type="radio" name="time" value="30" onClick={() => timeRef.current = 30} />
121+
<label htmlFor="time-30" className="pt-[0.625rem]">30s</label>
122+
</div>
123+
</div>
124+
<div className="flex flex-row w-full mt-3">
125+
<div className="self-end">
126+
<input id="cb-edit" type="checkbox" name="edit" checked={edit} onChange={() => setEdit(!edit)} />
127+
<label htmlFor="cb-edit" className={twJoin(
128+
!edit && "text-gray-400",
129+
"pt-[0.625rem] ml-1",
130+
)}>Edit Mode</label>
131+
</div>
132+
<div className="grow" />
133+
<Button type="submit">OK</Button>
134+
</div>
135+
</div>
136+
</form>
137+
)
138+
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function Requests({lobbyState}) {
5252
{requests.map((request) => (
5353
<Request
5454
request={request}
55-
key={request.id} />
55+
key={request.opponent} />
5656
))}
5757
</div>
5858
</div>
@@ -79,8 +79,7 @@ function Request({request}) {
7979
"contents",
8080
"*:py-3",
8181
"cursor-pointer *:hover:bg-sky-200 *:hover:text-black",
82-
)}
83-
key={request.game.id}>
82+
)} >
8483
<div className="pl-3 pr-1 rounded-l-lg">
8584
{request.flip ? "B" : "W"}: {request.opponent}
8685
</div>

0 commit comments

Comments
 (0)