simple lobby state

Author: h908714124

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

@@ -31,8 +31,14 @@ import {
 } from "./ActiveGames.jsx"
 import {
   useAuthStore,
-  useLobbyStore,
 } from "src/store.js"
+import {
+  checkNewGameOpen,
+  setNewGameOpen,
+  handleLobbyClick,
+  closeLobbyPopup,
+  initialState,
+} from "./lobbyState.js"
 import {
   CgClose,
 } from "react-icons/cg"
@@ -46,10 +52,8 @@ const detailData = [
 ]
 
 export function Lobby() {
-  let isNewGameOpen = useLobbyStore(state => state.isNewGameOpen())
-  let setNewGameOpen = useLobbyStore(state => state.setNewGameOpen)
-  let handleLobbyClick = useLobbyStore(state => state.handleLobbyClick)
-  let closeLobbyPopup = useLobbyStore(state => state.closeLobbyPopup)
+  let [lobbyState, setLobbyState] = useState(initialState())
+  let isNewGameOpen = checkNewGameOpen(lobbyState)
   let [detail, setDetail] = useState("open")
   let stompClient = useContext(StompContext)
   let navigate = useNavigate()
@@ -69,8 +73,8 @@ export function Lobby() {
       navigate(base + "/game/" + game.id)
       sub.unsubscribe()
     })
-    closeLobbyPopup()
-  }), [auth.token, navigate, stompClient, closeLobbyPopup])
+    setLobbyState(closeLobbyPopup(lobbyState))
+  }), [auth.token, navigate, stompClient, lobbyState])
   let onStartEdit = useCallback((d) => doTry(async () => {
     let response = await tfetch("/api/start_edit", {
       method: "POST",
@@ -83,13 +87,15 @@ export function Lobby() {
     navigate(base + "/game/" + response.id)
   }), [auth, navigate])
   return (
-    <div onClick={handleLobbyClick} className="h-full">
+    <div onClick={(event) => setLobbyState(handleLobbyClick(lobbyState, event))} className="h-full">
       <div className={twJoin(
           "mt-2 py-2 pr-4 gap-x-1",
           isNewGameOpen && "",
           !isNewGameOpen && "border-transparent",
         )}>
         <NewGameDialog
+          lobbyState={lobbyState}
+          setLobbyState={setLobbyState}
           newGameRef={newGameRef}
           onNewGame={onNewGame}
           onStartEdit={onStartEdit} />
@@ -99,7 +105,7 @@ export function Lobby() {
             !isNewGameOpen && "hover:border-sky-700",
           )}
           onClick={(event) => {
-            setNewGameOpen(newGameRef.current)
+            setLobbyState(setNewGameOpen(lobbyState, newGameRef.current))
             stopPropagation(event)
           }}>
           New Game
@@ -108,7 +114,7 @@ export function Lobby() {
       <div className="mt-2 grid gap-x-4 grid-cols-[max-content_auto]">
         <DetailNavigation detail={detail} setDetail={setDetail} />
         {detail === "open" && (
-          <OpenGames />
+          <OpenGames lobbyState={lobbyState} setLobbyState={setLobbyState} />
         )}
         {detail === "active" && (
           <ActiveGames />
@@ -119,12 +125,11 @@ export function Lobby() {
   )
 }
 
-function NewGameDialog({onNewGame, onStartEdit, newGameRef}) {
+function NewGameDialog({lobbyState, setLobbyState, onNewGame, onStartEdit, newGameRef}) {
   let dimRef = useRef(9)
   let timeRef = useRef(10)
   let [edit, setEdit] = useState(false)
-  let closeLobbyPopup = useLobbyStore(state => state.closeLobbyPopup)
-  let isNewGameOpen = useLobbyStore(state => state.isNewGameOpen())
+  let isNewGameOpen = checkNewGameOpen(lobbyState)
   return (
     <form onSubmit={(e) => {
         e.preventDefault()
@@ -141,7 +146,7 @@ function NewGameDialog({onNewGame, onStartEdit, newGameRef}) {
           "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={closeLobbyPopup} className="text-stone-100 hover:text-stone-300">
+          <button onClick={() => setLobbyState(closeLobbyPopup(lobbyState))} className="text-stone-100 hover:text-stone-300">
             <IconContext.Provider value={{ size: "1.25em" }}>
               <CgClose />
             </IconContext.Provider>

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

@@ -34,15 +34,17 @@ import {
   doTry,
   stopPropagation,
 } from "src/util.js"
+import {
+  getAcceptDialog,
+  setAcceptDialogOpen,
+} from "./lobbyState.js"
 import {
   useAuthStore,
-  useLobbyStore,
 } from "src/store.js"
 
-export function OpenGames() {
+export function OpenGames({lobbyState, setLobbyState}) {
   let [openGames, setOpenGames] = useState([])
-  let acceptDialog = useLobbyStore(state => state.getAcceptDialog())
-  let setAcceptDialogOpen = useLobbyStore(state => state.setAcceptDialogOpen)
+  let acceptDialog = getAcceptDialog(lobbyState)
   let stompClient = useContext(StompContext)
   let navigate = useNavigate()
   let auth = useAuthStore(state => state.auth)
@@ -90,13 +92,14 @@ export function OpenGames() {
               if (acceptDialog) {
                 return
               }
-              setAcceptDialogOpen(acceptDialogRef.current, acceptableGame)
+              setLobbyState(setAcceptDialogOpen(lobbyState, acceptDialogRef.current, acceptableGame))
               stopPropagation(event)
             }}
             key={game.id} />
         ))}
       </div>
       <AcceptDialog
+        acceptDialog={acceptDialog}
         onAccept={onAccept}
         acceptDialogRef={acceptDialogRef}
         />
@@ -140,8 +143,7 @@ function OpenGame({game, onClick}) {
   )
 }
 
-function AcceptDialog({onAccept, acceptDialogRef}) {
-  let acceptDialog = useLobbyStore(state => state.getAcceptDialog())
+function AcceptDialog({onAccept, acceptDialog, acceptDialogRef}) {
   let acceptableGame = acceptDialog?.data
   let [isFlip, setFlip] = useState(false)
   let [handi, setHandi] = useState(1)

src/main/client/src/feature/lobby/lobbyState.js

@@ -0,0 +1,69 @@
+export function initialState() {
+  return {
+    stack: [],
+  }
+}
+
+function setOpen(state, el, kind, data) {
+  if (!el) {
+    return state
+  }
+  if (state.stack.some(obj => obj.kind === kind)) {
+    return state
+  }
+  return {
+    stack: [...state.stack, {
+      kind: kind,
+      el: el,
+      data: data,
+    }],
+  }
+}
+
+export function checkNewGameOpen({stack}) {
+  return stack.some(obj => obj.kind === "newgame")
+}
+
+export function setNewGameOpen(state, el) {
+  return setOpen(state, el, "newgame")
+}
+
+export function getAcceptDialog({stack}) {
+  let result = stack.filter(obj => obj.kind === "accept")
+  if (!result.length) {
+    return undefined
+  }
+  return result[0]
+}
+
+export function setAcceptDialogOpen(state, el, data) {
+  return setOpen(state, el, "accept", data)
+}
+
+export function closeLobbyPopup(state) {
+  if (!state.stack.length) {
+    return state
+  }
+  let newStack = [...state.stack]
+  newStack.pop()
+  return {
+    stack: newStack,
+  }
+}
+
+export function handleLobbyClick(state, event) {
+  if (!state.stack.length) {
+    return state
+  }
+  let {clientX, clientY} = event
+  let {el} = state.stack[state.stack.length - 1]
+  let {left, right, top, bottom} = el.getBoundingClientRect()
+  if (clientX <= right && clientX >= left && clientY <= bottom && clientY >= top) {
+    return state
+  }
+  let newStack = [...state.stack]
+  newStack.pop()
+  return {
+    stack: newStack,
+  }
+}

src/main/client/src/store.js

@@ -52,54 +52,3 @@ export const useTimeoutStore = create(set => ({
     draft.timeout = timeout
   }), true),
 }))
-
-export const useLobbyStore = create((set, get) => ({
-  stack: [],
-  isNewGameOpen: () => {
-    return get().stack.some(obj => obj.kind === "newgame")
-  },
-  setOpen: (el, kind, data) => set(produce(draft => {
-    if (!el) {
-      return
-    }
-    if (get().stack.some(obj => obj.kind === kind)) {
-      return
-    }
-    draft.stack = [...get().stack, {
-      kind: kind,
-      el: el,
-      data: data,
-    }]
-  }), true),
-  setNewGameOpen: (el) => get().setOpen(el, "newgame"),
-  getAcceptDialog: () => {
-    let result = get().stack.filter(obj => obj.kind === "accept")
-    if (!result.length) {
-      return undefined
-    }
-    return result[0]
-  },
-  setAcceptDialogOpen: (el, data) => get().setOpen(el, "accept", data),
-  closeLobbyPopup: () => set(produce(draft => {
-    if (!get().stack.length) {
-      return
-    }
-    let newStack = [...get().stack]
-    newStack.pop()
-    draft.stack = newStack
-  }), true),
-  handleLobbyClick: (event) => set(produce(draft => {
-    if (!get().stack.length) {
-      return
-    }
-    let {clientX, clientY} = event
-    let {el} = get().stack[get().stack.length - 1]
-    let {left, right, top, bottom} = el.getBoundingClientRect()
-    if (clientX <= right && clientX >= left && clientY <= bottom && clientY >= top) {
-      return
-    }
-    let newStack = [...get().stack]
-    newStack.pop()
-    draft.stack = newStack
-  }), true),
-}))