z index from stack

Author: h908714124

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

@@ -33,7 +33,7 @@ import {
   useAuthStore,
 } from "src/store.js"
 import {
-  checkNewGameOpen,
+  getZindex,
   setNewGameOpen,
   handleLobbyClick,
   closeLobbyPopup,
@@ -53,7 +53,7 @@ const detailData = [
 
 export function Lobby() {
   let [lobbyState, setLobbyState] = useState(initialState())
-  let isNewGameOpen = checkNewGameOpen(lobbyState)
+  let zNewGame = getZindex(lobbyState, "newgame")
   let [detail, setDetail] = useState("open")
   let stompClient = useContext(StompContext)
   let navigate = useNavigate()
@@ -89,20 +89,19 @@ export function Lobby() {
   return (
     <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",
+          "mt-2 py-2 pr-4",
         )}>
         <NewGameDialog
+          zNewGame={zNewGame}
           lobbyState={lobbyState}
           setLobbyState={setLobbyState}
           newGameRef={newGameRef}
           onNewGame={onNewGame}
           onStartEdit={onStartEdit} />
-        <button disabled={isNewGameOpen}  className={twJoin(
+        <button disabled={zNewGame !== 0}  className={twJoin(
             "ml-2 border-2 border-transparent px-4 py-2 rounded-lg",
-            isNewGameOpen && "bg-gray-400",
-            !isNewGameOpen && "hover:border-sky-700",
+            zNewGame && "bg-gray-400",
+            !zNewGame && "hover:border-sky-700",
           )}
           onClick={(event) => {
             setLobbyState(setNewGameOpen(lobbyState, newGameRef.current))
@@ -125,11 +124,10 @@ export function Lobby() {
   )
 }
 
-function NewGameDialog({lobbyState, setLobbyState, onNewGame, onStartEdit, newGameRef}) {
+function NewGameDialog({zNewGame, lobbyState, setLobbyState, onNewGame, onStartEdit, newGameRef}) {
   let dimRef = useRef(9)
   let timeRef = useRef(10)
   let [edit, setEdit] = useState(false)
-  let isNewGameOpen = checkNewGameOpen(lobbyState)
   return (
     <form onSubmit={(e) => {
         e.preventDefault()
@@ -141,10 +139,13 @@ function NewGameDialog({lobbyState, setLobbyState, onNewGame, onStartEdit, newGa
         }
       }}>
       <div ref={newGameRef}
+        style={{
+          zIndex: zNewGame,
+        }}
         className={twJoin(
-          !isNewGameOpen && "hidden",
-          "absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg z-10 px-3 py-2",
-          )}>
+          !zNewGame && "hidden",
+          "absolute ml-40 bg-slate-800 border-2 border-slate-600 rounded-lg px-3 py-2",
+        )}>
         <div className="absolute top-1 right-1">
           <button onClick={() => setLobbyState(closeLobbyPopup(lobbyState))} className="text-stone-100 hover:text-stone-300">
             <IconContext.Provider value={{ size: "1.25em" }}>

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

@@ -35,6 +35,7 @@ import {
   stopPropagation,
 } from "src/util.js"
 import {
+  getZindex,
   getAcceptData,
   setAcceptDialogOpen,
 } from "./lobbyState.js"
@@ -96,10 +97,10 @@ export function OpenGames({lobbyState, setLobbyState}) {
         ))}
       </div>
       <AcceptDialog
+        lobbyState={lobbyState}
         acceptableGame={acceptableGame}
         onAccept={onAccept}
-        acceptDialogRef={acceptDialogRef}
-        />
+        acceptDialogRef={acceptDialogRef} />
     </div>
   )
 }
@@ -108,11 +109,6 @@ function OpenGame({game, onClick}) {
   let dimRef = useRef()
   let auth = useAuthStore(state => state.auth)
   let disabled = auth.name === game.user
-  let classes = twJoin(
-    "contents",
-    "*:py-3",
-    !disabled && "cursor-pointer *:hover:bg-sky-200 *:hover:text-black",
-  )
   return (
     <div
       onClick={disabled ? undefined : (event) => {
@@ -125,7 +121,11 @@ function OpenGame({game, onClick}) {
           },
         })
       }}
-      className={classes}
+      className={twJoin(
+        "contents",
+        "*:py-3",
+        !disabled && "cursor-pointer *:hover:bg-sky-200 *:hover:text-black",
+      )}
       key={game.id}>
       <div className="pl-3 pr-1 rounded-l-lg">{game.user}</div>
       <div className="px-1">
@@ -138,10 +138,11 @@ function OpenGame({game, onClick}) {
   )
 }
 
-function AcceptDialog({onAccept, acceptableGame, acceptDialogRef}) {
+function AcceptDialog({lobbyState, onAccept, acceptableGame, acceptDialogRef}) {
   let [isFlip, setFlip] = useState(false)
   let [handi, setHandi] = useState(1)
   let auth = useAuthStore(state => state.auth)
+  let zAccept = getZindex(lobbyState, "accept")
   return (
     <Form
       forwardedRef={acceptDialogRef}
@@ -151,12 +152,13 @@ function AcceptDialog({onAccept, acceptableGame, acceptDialogRef}) {
         handicap: handi === 1 ? 0 : handi,
       })}
       style={{
+        zIndex: zAccept,
         top: acceptableGame?.rect.top || 0,
         left: Math.trunc(acceptableGame?.rect.right || 0) + 16,
       }}
       className={twJoin(
-        !acceptableGame && "hidden",
-        "absolute bg-sky-200 px-4 py-3 rounded-lg z-8 flex flex-col",
+        !zAccept && "hidden",
+        "absolute bg-sky-200 px-4 py-3 rounded-lg flex flex-col",
       )}>
       <div className="text-black">
         <button type="button" className="inline-flex" onClick={() => setFlip(!isFlip)}>

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

@@ -20,23 +20,26 @@ function setOpen(state, el, kind, data) {
   }
 }
 
-export function checkNewGameOpen({stack}) {
-  return stack.some(obj => obj.kind === "newgame")
+export function getZindex({stack}, kind) {
+  for (let i = 0; i < stack.length; i++) {
+    if (stack[i].kind === kind) {
+      return 5 + i
+    }
+  }
+  return 0
 }
 
 export function setNewGameOpen(state, el) {
   return setOpen(state, el, "newgame")
 }
 
 export function getAcceptData({stack}) {
-  if (!stack.length) {
-    return undefined
-  }
-  let result = stack.filter(obj => obj.kind === "accept")
-  if (!result.length) {
-    return undefined
+  for (let i = 0; i < stack.length; i++) {
+    if (stack[i].kind === "accept") {
+      return stack[i].data
+    }
   }
-  return result[0].data
+  return undefined
 }
 
 export function setAcceptDialogOpen(state, el, data) {