safety margins for sidebar resize

Author: h908714124

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

@@ -64,6 +64,7 @@ export const Game = () => {
   let countingGroup = !gameHasEnded() && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
   let sidebarWidth = useLayoutStore(state => state.sidebarWidth)
   let vw = useLayoutStore(state => state.vw)
+  let dragging = useLayoutStore(state => state.dragging)
 
   let context = useMemo(() => {
     let dim = board.length
@@ -128,6 +129,9 @@ export const Game = () => {
     if (gameHasEnded()) {
       return
     }
+    if (dragging) {
+      return
+    }
     if (!board.length) {
       return
     }
@@ -143,7 +147,7 @@ export const Game = () => {
       setCursor_x(-1)
       setCursor_y(-1)
     }
-  }, [context, currentPlayer, auth, board.length, counting, gameHasEnded])
+  }, [context, currentPlayer, auth, board.length, counting, gameHasEnded, dragging])
 
   let onClick = useCallback((e) => {
     if (gameHasEnded()) {
@@ -253,9 +257,10 @@ export const Game = () => {
 
   return (
   <div
-    style={{width: (vw - sidebarWidth) + "px"}}>
-    <div className="grid justify-center mt-8">
-      <canvas ref={canvasRef}
+    style={{width: (vw - sidebarWidth) + "px"}}
+    className="h-full">
+    <div className="grid h-full">
+      <canvas className="place-self-center" ref={canvasRef}
         onMouseLeave={() => {
           setCursor_x(-1)
           setCursor_y(-1)

src/main/client/src/index.css

@@ -3,9 +3,16 @@
 @tailwind utilities;
 
 @layer base {
+  html {
+    @apply h-full;
+  }
   body {
     @apply bg-stone-800;
     @apply font-sans;
     @apply text-stone-100;
+    @apply h-full;
+  }
+  #root {
+    @apply h-full;
   }
 }

src/main/client/src/layout.js

@@ -10,7 +10,7 @@ import {
 
 export const useLayoutStore = create(
   persist(
-    (set) => ({
+    (set, get) => ({
       dragging: false,
       vw: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
       sidebarWidth: 24 * getPixelRem(),
@@ -20,6 +20,9 @@ export const useLayoutStore = create(
         }))
       },
       setSidebarWidth: (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)
         set(produce(state => {
           state.sidebarWidth = width
         }))