lobby popup stack

Author: h908714124

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

@@ -30,6 +30,7 @@ import {
 } from "./ActiveGames.jsx"
 import {
   useAuthStore,
+  useLobbyStore,
 } from "src/store.js"
 import {
   CgClose,
@@ -44,25 +45,15 @@ const detailData = [
 ]
 
 export function Lobby() {
-  let [isNewGameOpen, setNewGameOpen] = useState(false)
+  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 [detail, setDetail] = useState("open")
   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,7 +68,7 @@ export function Lobby() {
       navigate(base + "/game/" + game.id)
       sub.unsubscribe()
     })
-    setNewGameOpen(false)
+    closeLobbyPopup()
   }), [auth.token, navigate, stompClient])
   let onStartEdit = useCallback((d) => doTry(async () => {
     let response = await tfetch("/api/start_edit", {
@@ -91,27 +82,29 @@ export function Lobby() {
     navigate(base + "/game/" + response.id)
   }), [auth, navigate])
   return (
-    <div onClick={onClickOutside} className="h-full">
+    <div onClick={handleLobbyClick} className="h-full">
       <div className={twJoin(
           "mt-2 py-2 pr-4 gap-x-1",
           isNewGameOpen && "",
           !isNewGameOpen && "border-transparent",
         )}>
-        {isNewGameOpen ? (
-          <NewGameDialog
-            newGameRef={newGameRef}
-            onNewGame={onNewGame}
-            onStartEdit={onStartEdit}
-            setNewGameOpen={setNewGameOpen} />
-        ) : "" }
-          <button disabled={isNewGameOpen}  className={!isNewGameOpen ? twJoin(
+        <NewGameDialog
+          newGameRef={newGameRef}
+          onNewGame={onNewGame}
+          onStartEdit={onStartEdit} />
+          <button disabled={isNewGameOpen}  className={isNewGameOpen ? twJoin(
+              "ml-2 border-2 bg-gray-400 border-transparent px-4 py-2 rounded-lg",
+            ) : 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)
+            onClick={(event) => {
+              setNewGameOpen(newGameRef.current)
+              if (event.stopPropagation) {
+                event.stopPropagation()
+              } else {
+                event.cancelBubble = true
+              }
             }}>
             New Game
           </button>
@@ -131,12 +124,14 @@ export function Lobby() {
   )
 }
 
-function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, newGameRef}) {
+function NewGameDialog({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())
   return (
-    <form className="contents" onSubmit={(e) => {
+    <form onSubmit={(e) => {
         e.preventDefault()
         let game = {dim: dimRef.current, timesetting: timeRef.current}
         if (edit) {
@@ -145,9 +140,13 @@ function NewGameDialog({onNewGame, onStartEdit, setNewGameOpen, newGameRef}) {
           onNewGame(game)
         }
       }}>
-      <div ref={newGameRef} className="absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg z-10 px-3 py-2">
+      <div ref={newGameRef}
+        className={twJoin(
+          !isNewGameOpen && "hidden",
+          "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">
+          <button onClick={closeLobbyPopup} 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

@@ -35,6 +35,7 @@ import {
 } from "src/util.js"
 import {
   useAuthStore,
+  useLobbyStore,
 } from "src/store.js"
 
 export function OpenGames() {
@@ -87,13 +88,11 @@ export function OpenGames() {
             key={game.id} />
         ))}
       </div>
-      {acceptableGame && (
-        <AcceptDialog
-          acceptableGame={acceptableGame}
-          setAcceptableGame={setAcceptableGame}
-          onAccept={onAccept}
+      <AcceptDialog
+        acceptableGame={acceptableGame}
+        setAcceptableGame={setAcceptableGame}
+        onAccept={onAccept}
         />
-      )}
     </div>
   )
 }
@@ -139,7 +138,7 @@ function OpenGame({game, acceptableGame, setAcceptableGame}) {
 }
 
 function AcceptDialog({acceptableGame, onAccept}) {
-  let { top, right } = acceptableGame.rect
+  let { top, right } = acceptableGame?.rect || {top: 0, right: 0}
   let [isFlip, setFlip] = useState(false)
   let [handi, setHandi] = useState(1)
   let auth = useAuthStore(state => state.auth)
@@ -151,15 +150,17 @@ function AcceptDialog({acceptableGame, onAccept}) {
         handicap: handi === 1 ? 0 : handi,
       })}
       style={{
-        position: "absolute",
         top: top,
         left: Math.trunc(right) + 16,
       }}
-      className="absolute bg-sky-200 px-4 py-3 rounded-lg z-10 flex flex-col">
+      className={twJoin(
+        !acceptableGame && "hidden",
+        "absolute bg-sky-200 px-4 py-3 rounded-lg z-8 flex flex-col",
+      )}>
       <div className="text-black">
         <button type="button" className="inline-flex" onClick={() => setFlip(!isFlip)}>
           <BabyStone color={isFlip ? "white": "black"} className="pr-2" />
-          {acceptableGame.game.user}
+          {acceptableGame?.game.user}
         </button>
       </div>
       <div className="text-black">

src/main/client/src/store.js

@@ -46,11 +46,58 @@ export const useMuteStore = create(
   )
 )
 
-export const useTimeoutStore = create(set => (
-  {
-    timeout: 10,
-    setTimeout: timeout => set(produce(draft => {
-      draft.timeout = timeout
-    }), true)
-  }
-))
+export const useTimeoutStore = create(set => ({
+  timeout: 10,
+  setTimeout: timeout => set(produce(draft => {
+    draft.timeout = timeout
+  }), true),
+}))
+
+export const useLobbyStore = create((set, get) => ({
+  stack: [],
+  isNewGameOpen: () => {
+    return get().stack.some(obj => obj.kind === "newgame")
+  },
+  setOpen: (el, kind) => set(produce(draft => {
+    if (!el) {
+      return
+    }
+    if (get().stack.some(obj => obj.kind === kind)) {
+      return
+    }
+    let rect = el.getBoundingClientRect()
+    draft.stack = [...get().stack, {
+      kind: kind,
+      left: rect.left,
+      right: rect.right,
+      bottom: rect.bottom,
+      top: rect.top,
+    }]
+  }), true),
+  setNewGameOpen: (el) => get().setOpen(el, "newgame"),
+  isAcceptOpen: () => {
+    return get().stack.some(obj => obj.kind === "accept")
+  },
+  setAcceptOpen: (el) => get().setOpen(el, "accept"),
+  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 {left, right, top, bottom} = get().stack[get().stack.length - 1]
+    if (clientX <= right && clientX >= left && clientY <= bottom && clientY >= top) {
+      return
+    }
+    let newStack = [...get().stack]
+    newStack.pop()
+    draft.stack = newStack
+  }), true),
+}))