game sidebar width is independent of lobby

Author: h908714124

src/main/client/src/Router.jsx

@@ -14,6 +14,9 @@ import {
 import {
   Toaster,
 } from "react-hot-toast"
+import {
+  twJoin,
+} from "tailwind-merge"
 import {
   useAuthStore,
 } from "./store.js"
@@ -30,18 +33,17 @@ import {
   base,
   StompContext,
 } from "./util.js"
+import {
+  useLayoutStore,
+} from "./layout.js"
 
 export const Router = createBrowserRouter(
   createRoutesFromElements(
   <>
     <Route
       element={<WithConnection />}>
       <Route
-        element={
-          <>
-            <Outlet />
-            <Toaster position="top-right" />
-          </>}>
+        element={<Frame />}>
         <Route
           path={base + "/lobby"}
           element={<Lobby />} />
@@ -60,6 +62,19 @@ export const Router = createBrowserRouter(
   )
 )
 
+function Frame() {
+  let dragging = useLayoutStore(state => state.dragging)
+  return <>
+    <div className={twJoin(
+        "h-full",
+        dragging && "cursor-col-resize",
+      )}>
+      <Outlet />
+    </div>
+    <Toaster position="top-right" />
+  </>
+}
+
 function WithConnection() {
   let auth = useAuthStore(state => state.auth)
   let stompClient = useContext(StompContext)

src/main/client/src/component/SideBar.jsx

@@ -7,11 +7,11 @@ import {
   useLayoutStore,
 } from "../layout.js"
 
-export const SideBar = ({children}) => {
+export const SideBar = ({page, children}) => {
   let vw = useLayoutStore(state => state.vw)
   let dragging = useLayoutStore(state => state.dragging)
   let setDragging = useLayoutStore(state => state.setDragging)
-  let sidebarWidth = useLayoutStore(state => state.sidebarWidth)
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth[page])
   let setSidebarWidth = useLayoutStore(state => state.setSidebarWidth)
   let sanitizeSidebarWidth = useLayoutStore(state => state.sanitizeSidebarWidth)
   let [ghostWidth, setGhostWidth] = useState(sidebarWidth)
@@ -24,15 +24,16 @@ export const SideBar = ({children}) => {
       if (!draggingRef.current) {
         return
       }
-      setGhostWidth(Math.trunc(vw - e.clientX))
+      let width = sanitizeSidebarWidth(vw - e.clientX)
+      setGhostWidth(width)
     }
     let mouseup = () => {
       if (!draggingRef.current) {
         return
       }
       let width = sanitizeSidebarWidth(ghostWidthRef.current)
-      setSidebarWidth(width)
-      setGhostWidth(width)
+      setSidebarWidth(page, Math.trunc(width))
+      setGhostWidth(Math.trunc(width))
       setDragging(false)
     }
     window.document.addEventListener("mousemove", mousemove)
@@ -41,7 +42,7 @@ export const SideBar = ({children}) => {
       window.document.removeEventListener("mousemove", mousemove)
       window.document.removeEventListener("mouseup", mouseup)
     }
-  }, [vw, draggingRef, setDragging, setSidebarWidth, sanitizeSidebarWidth])
+  }, [vw, page, draggingRef, setDragging, setSidebarWidth, sanitizeSidebarWidth])
   return (
     <div
         style={{width: sidebarWidth + "px"}}

src/main/client/src/feature/game/Game.jsx

@@ -62,7 +62,7 @@ export const Game = () => {
   let [forbidden_x, forbidden_y] = useGameStore(state => state.forbidden)
   let canvasRef = useRef()
   let countingGroup = !gameHasEnded() && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
-  let sidebarWidth = useLayoutStore(state => state.sidebarWidth)
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth.game)
   let vw = useLayoutStore(state => state.vw)
   let dragging = useLayoutStore(state => state.dragging)
 

src/main/client/src/feature/game/GamePanel.jsx

@@ -42,7 +42,7 @@ import {
 
 export const GamePanel = () => {
   return (
-    <SideBar>
+    <SideBar page="game">
       <div className="pr-3 pt-4 pl-2 h-full flex flex-col gap-y-1">
         <Panel />
       </div>

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

@@ -17,7 +17,7 @@ import {
 
 export const LobbyPanel = () => {
   return (
-    <SideBar>
+    <SideBar page="lobby">
       <div className="pt-2">
         <Panel />
       </div>

src/main/client/src/layout.js

@@ -14,7 +14,10 @@ export const useLayoutStore = create(
       zoom: 0,
       dragging: false,
       vw: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
-      sidebarWidth: 24 * getPixelRem(),
+      sidebarWidth: {
+        "game": 24 * getPixelRem(),
+        "lobby": 24 * getPixelRem(),
+      },
       setZoom: (zoom) => {
         set(produce(state => {
           if (!zoom) {
@@ -34,9 +37,11 @@ export const useLayoutStore = create(
         width = Math.max(200, width)
         return Math.min(Math.abs(get().vw - vh), width)
       },
-      setSidebarWidth: (width) => {
+      setSidebarWidth: (page, width) => {
         set(produce(state => {
-          state.sidebarWidth = width
+          let newSidebarWidth = {...get().sidebarWidth}
+          newSidebarWidth[page] = width
+          state.sidebarWidth = newSidebarWidth
           if (!get().zoom) {
             state.zoom = 0.000244140625 // force re-render
           } else {