refactor view state

Author: h908714124

src/main/client/src/component/Chat.jsx

@@ -175,7 +175,7 @@ function SplitPane({messageRef, topElement, bottomElement}) {
       )}>
       <div
         style={{height: splitPos + "px"}}
-        className="px-1 flex-none overflow-y-scroll">
+        className="px-1 pt-1 flex-none overflow-y-scroll">
         {topElement}
       </div>
       <div

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

@@ -4,17 +4,20 @@ import {
   useState,
   useCallback,
 } from "react"
+import {
+  vw,
+  sanitizeSidebarWidth,
+} from "../util.js"
 import {
   useLayoutStore,
+  useViewStateStore,
 } from "../layout.js"
 
 export const SideBar = ({page, children}) => {
-  let vw = useLayoutStore(state => state.vw)
-  let dragging = useLayoutStore(state => state.dragging)
-  let setDragging = useLayoutStore(state => state.setDragging)
+  let dragging = useViewStateStore(state => state.dragging)
+  let setDragging = useViewStateStore(state => state.setDragging)
   let sidebarWidth = useLayoutStore(state => state.sidebarWidth[page])
   let setSidebarWidth = useLayoutStore(state => state.setSidebarWidth)
-  let sanitizeSidebarWidth = useLayoutStore(state => state.sanitizeSidebarWidth)
   let [ghostWidth, setGhostWidth] = useState(sidebarWidth)
   let draggingRef = useRef()
   let ghostWidthRef = useRef()
@@ -25,7 +28,7 @@ export const SideBar = ({page, children}) => {
       if (!draggingRef.current) {
         return
       }
-      let width = sanitizeSidebarWidth(vw - e.clientX)
+      let width = sanitizeSidebarWidth(vw() - e.clientX)
       setGhostWidth(width)
     }
     let mouseup = () => {
@@ -43,7 +46,7 @@ export const SideBar = ({page, children}) => {
       window.document.removeEventListener("mousemove", mousemove)
       window.document.removeEventListener("mouseup", mouseup)
     }
-  }, [vw, page, draggingRef, setDragging, setSidebarWidth, sanitizeSidebarWidth])
+  }, [page, draggingRef, setDragging, setSidebarWidth])
   let onMouseDown = useCallback((e) => {
     e.preventDefault()
     setDragging(true)

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

@@ -11,6 +11,7 @@ import {
   useNavigate,
 } from "react-router-dom"
 import {
+  vw,
   base,
   StompContext,
   BLACK,
@@ -27,6 +28,7 @@ import {
 } from "../../store.js"
 import {
   useLayoutStore,
+  useViewStateStore,
 } from "../../layout.js"
 import {
   paintShadow,
@@ -52,7 +54,7 @@ import {
 export const Game = () => {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
-  let zoom = useLayoutStore(state => state.zoom)
+  let zoom = useViewStateStore(state => state.zoom)
   let {gameId} = useParams()
   let navigate = useNavigate()
   let stompClient = useContext(StompContext)
@@ -74,7 +76,6 @@ export const Game = () => {
   let canvasRef = useRef()
   let countingGroup = !gameHasEnded() && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
   let sidebarWidth = useLayoutStore(state => state.sidebarWidth.game)
-  let vw = useLayoutStore(state => state.vw)
   let dragging = useLayoutStore(state => state.dragging)
   let muted = useMuteStore(state => state.muted)
   let setMuteState = useMuteStore((state) => state.setMuted)
@@ -287,7 +288,7 @@ export const Game = () => {
 
   return (
     <div
-      style={{ width: (vw - sidebarWidth) + "px" }}
+      style={{ width: (vw() - sidebarWidth) + "px" }}
       className="h-full">
       <div className="grid h-full">
         <canvas className="place-self-center" ref={canvasRef}

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

@@ -32,7 +32,7 @@ import {
   useGameStore,
 } from "../../store.js"
 import {
-  useLayoutStore,
+  useViewStateStore,
 } from "../../layout.js"
 import {
   Chat,
@@ -53,8 +53,8 @@ export const GamePanel = () => {
 
 function Panel() {
   let {gameId} = useParams()
-  let zoom = useLayoutStore(state => state.zoom)
-  let setZoom = useLayoutStore(state => state.setZoom)
+  let zoom = useViewStateStore(state => state.zoom)
+  let setZoom = useViewStateStore(state => state.setZoom)
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
   let black = useGameStore(state => state.black)

src/main/client/src/layout.js

@@ -8,52 +8,47 @@ import {
   persist,
 } from "zustand/middleware"
 
+const TINY = 0.0001220703125
+
+export const useViewStateStore = create((set, get) => ({
+  zoom: 0,
+  dragging: false,
+  setDragging: (dragging) => {
+    set(produce(state => {
+      state.dragging = dragging
+    }))
+  },
+  setZoom: (zoom) => {
+    set(produce(state => {
+      if (Math.trunc(zoom)) {
+        state.zoom = zoom
+      } else {
+        state.zoom = get().zoom ? 0 : TINY // force re-render
+      }
+    }))
+  },
+}))
+
 export const useLayoutStore = create(
   persist(
     (set, get) => ({
-      zoom: 0,
-      dragging: false,
-      vw: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
       sidebarWidth: {
-        "game": 24 * getPixelRem(),
-        "lobby": 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
-        }))
-      },
-      sanitizeSidebarWidth: (width) => {
-        let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
-        width = Math.max(200, width)
-        return Math.min(Math.abs(get().vw - vh), width)
+        "game": 24 * getRemInPixel(),
+        "lobby": 24 * getRemInPixel(),
       },
       setSidebarWidth: (page, width) => {
         set(produce(state => {
           let newSidebarWidth = {...get().sidebarWidth}
-          newSidebarWidth[page] = width
+          newSidebarWidth[page] = Math.trunc(width)
           state.sidebarWidth = newSidebarWidth
-          if (!get().zoom) {
-            state.zoom = 0.000244140625 // force re-render
-          } else {
-            state.zoom = 0
-          }
         }))
       },
     }),
     {name: "layout-storage"},
   ),
 )
 
-function getPixelRem() {
-    return parseFloat(window.getComputedStyle(window.document.documentElement).fontSize)
+function getRemInPixel() {
+  let fontSize = window.getComputedStyle(window.document.documentElement).fontSize
+  return Math.trunc(parseFloat(fontSize))
 }

src/main/client/src/util.js

@@ -98,3 +98,15 @@ export async function doTry(task, onError) {
     toast.error(e.message)
   }
 }
+
+export function vw() {
+  return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+}
+
+export function vh() {
+  return Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+}
+
+export function sanitizeSidebarWidth(width) {
+  return Math.min(Math.abs(vw() - vh()), Math.max(200, width))
+}