clear ghost bar position after drag

Author: h908714124

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

@@ -13,6 +13,7 @@ export const SideBar = ({children}) => {
   let setDragging = useLayoutStore(state => state.setDragging)
   let sidebarWidth = useLayoutStore(state => state.sidebarWidth)
   let setSidebarWidth = useLayoutStore(state => state.setSidebarWidth)
+  let sanitizeSidebarWidth = useLayoutStore(state => state.sanitizeSidebarWidth)
   let [ghostWidth, setGhostWidth] = useState(sidebarWidth)
   let draggingRef = useRef()
   let ghostWidthRef = useRef()
@@ -29,7 +30,9 @@ export const SideBar = ({children}) => {
       if (!draggingRef.current) {
         return
       }
-      setSidebarWidth(ghostWidthRef.current)
+      let width = sanitizeSidebarWidth(ghostWidthRef.current)
+      setSidebarWidth(width)
+      setGhostWidth(width)
       setDragging(false)
     }
     window.document.addEventListener("mousemove", mousemove)
@@ -38,7 +41,7 @@ export const SideBar = ({children}) => {
       window.document.removeEventListener("mousemove", mousemove)
       window.document.removeEventListener("mouseup", mouseup)
     }
-  }, [vw, draggingRef, setDragging, setSidebarWidth])
+  }, [vw, draggingRef, setDragging, setSidebarWidth, sanitizeSidebarWidth])
   return (
     <div
         style={{width: sidebarWidth + "px"}}

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

@@ -41,7 +41,7 @@ import {
 export const Game = () => {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
-  let [zoom, setZoom] = useState(0)
+  let zoom = useLayoutStore(state => state.zoom)
   let {gameId} = useParams()
   let navigate = useNavigate()
   let stompClient = useContext(StompContext)
@@ -270,7 +270,7 @@ export const Game = () => {
         width={context.width} height={context.width}>
       </canvas>
     </div>
-    <GamePanel zoom={zoom} setZoom={setZoom} />
+    <GamePanel />
   </div>
   )
 }

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

@@ -30,24 +30,29 @@ import {
   useAuthStore,
   useGameStore,
 } from "../../store.js"
+import {
+  useLayoutStore,
+} from "../../layout.js"
 import {
   GameChat,
 } from "./GameChat.jsx"
 import {
   SideBar,
 } from "../../component/SideBar.jsx"
 
-export const GamePanel = ({zoom, setZoom}) => {
+export const GamePanel = () => {
   return (
     <SideBar>
       <div className="pr-3 pt-4 pl-2 h-full flex flex-col gap-y-1">
-        <Panel zoom={zoom} setZoom={setZoom} />
+        <Panel />
       </div>
     </SideBar>
   )
 }
 
-function Panel({zoom, setZoom}) {
+function Panel() {
+  let zoom = useLayoutStore(state => state.zoom)
+  let setZoom = useLayoutStore(state => state.setZoom)
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
   let black = useGameStore(state => state.black)
@@ -98,7 +103,7 @@ function Panel({zoom, setZoom}) {
   let result = gameHasEnded() ? getScore(board) : undefined
   return (
     <>
-      <div className="flex-none grid w-full grid-cols-[min-content_min-content_min-content_auto] gap-x-2">
+      <div className="flex-none grid w-full grid-cols-[min-content_max-content_min-content_auto] gap-x-2">
         <button
           onClick={() => setZoom(zoom - 1)}>
           <IconContext.Provider value={{
@@ -108,14 +113,8 @@ function Panel({zoom, setZoom}) {
             <FaAngleLeft />
           </IconContext.Provider>
         </button>
-        <button onClick={() => {
-          if (!zoom) {
-            setZoom(-zoom) // force re-render
-          } else {
-            setZoom(0)
-          }
-        }}>
-          <span>Zoom:&nbsp;{zoom + 0}</span>
+        <button onClick={() => setZoom(0)}>
+          <span>Zoom: {Math.trunc(zoom)}</span>
         </button>
         <button
           onClick={() => setZoom(zoom + 1)}>

src/main/client/src/layout.js

@@ -11,20 +11,37 @@ import {
 export const useLayoutStore = create(
   persist(
     (set, get) => ({
+      zoom: 0,
       dragging: false,
       vw: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
       sidebarWidth: 24 * getPixelRem(),
+      setZoom: (zoom) => {
+        set(produce(state => {
+          if (!zoom) {
+            state.zoom = 0.000244140625 // force re-render
+          } else {
+            state.zoom = zoom
+          }
+        }))
+      },
       setDragging: (dragging) => {
         set(produce(state => {
           state.dragging = dragging
         }))
       },
-      setSidebarWidth: (width) => {
+      sanitizeSidebarWidth: (width) => {
         let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
         width = Math.max(200, width)
-        width = Math.min(Math.abs(get().vw - vh), width)
+        return Math.min(Math.abs(get().vw - vh), width)
+      },
+      setSidebarWidth: (width) => {
         set(produce(state => {
           state.sidebarWidth = width
+          if (!get().zoom) {
+            state.zoom = 0.000244140625 // force re-render
+          } else {
+            state.zoom = 0
+          }
         }))
       },
     }),