Put move list in a drag-up drawer on mobile layouts

client/package.json

@@ -26,11 +26,11 @@
     "@capacitor/core": "^4.0.1",
     "@capacitor/ios": "^4.0.1",
     "@capacitor/status-bar": "^4.0.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-brands-svg-icons": "^6.1.2",
+    "@fortawesome/free-regular-svg-icons": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@react-spring/three": "^9.5.2",
     "@react-spring/web": "^9.5.2",
     "@react-three/drei": "^9.21.0",
@@ -50,6 +50,7 @@
     "ramda": "^0.27.1",
     "react": "^18.2.0",
     "react-aria": "^3.18.0",
+    "react-cool-dimensions": "^2.0.7",
     "react-div-100vh": "^0.7.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",

client/src/app/MainGameStructure.tsx

@@ -13,7 +13,7 @@ import { toggleIsOpen } from "../features/gamelist/gamelistSlice";
 import { raf } from "@react-spring/shared";
 
 // default tailwind breakpoints
-const BREAKPOINTS = {
+export const BREAKPOINTS = {
   xs: 0,
   sm: 640,
   md: 768,
@@ -84,17 +84,17 @@ const MainGameStructure: React.FC = () => {
   });
 
   return (
-    <ScreenHeightWraper className="flex flex-col">
+    <ScreenHeightWraper className="flex flex-col relative overflow-hidden">
       <TopBar />
       <div
         style={{ display: "flex" }}
         className="bg-lightbg mt-[50px] overflow-hidden max-w-[100vw] flex-row safe-area-pad flex-auto"
       >
         <a.div
-          className="w-[300px] flex-shrink-0 z-20"
+          className="w-[300px] flex-shrink-0 z-30"
           style={{ marginLeft: sidebarSpring.marginLeft }}
         >
-          {renderSidebar && <GameList hideBee={mobileLayout} />}
+          <GameList hideBee={mobileLayout} />
         </a.div>
         <SidebarRightSide mobileLayout={mobileLayout} bindDragArgs={bind()}>
           <Outlet />

client/src/app/SidebarRightSide.tsx

@@ -32,7 +32,7 @@ const SidebarRightSide: React.FC<{
   return (
     <div
       className={classNames(
-        "flex-auto overflow-hidden h-full touch-none",
+        "flex-auto overflow-hidden h-full touch-none relative",
         mobileLayout && "min-w-[100vw]"
       )}
       {...bindDragArgs}
@@ -43,7 +43,7 @@ const SidebarRightSide: React.FC<{
           value && (
             <a.div
               id="shade"
-              className="fixed top-[calc(50px+var(--sat))] right-0 h-full left-0 bg-black"
+              className="fixed top-[calc(50px+var(--sat))] right-0 h-full left-0 bg-black z-20"
               style={styles}
             ></a.div>
           )

client/src/assets/Bee.tsx

@@ -42,10 +42,10 @@ const Bee = (props: GroupProps) => {
 
   const bind = useGesture({
     onDrag: ({ down, delta: [mx, my] }) => {
-      invalidate();
       rotateSpringApi.set({
         x: mx / aspect + rotateSpring.x.get(),
       });
+      invalidate();
       isDragging.current = down;
     },
   });

client/src/features/canvas/Canvas.tsx

@@ -5,18 +5,21 @@ import { ReactReduxContext } from "react-redux";
 
 import Wrap3d from "./Wrap3d";
 import classNames from "classnames";
+import useDimensions from "react-cool-dimensions";
 
 const Canvas: React.FC<{
   className?: string;
   children: ReactNode;
   isGameboard?: boolean;
 }> = ({ children, className, isGameboard }) => {
   const ReduxProvider = useContextBridge(ReactReduxContext);
+  const { observe, width, height } = useDimensions();
 
   return (
     <ThreeCanvas
+    ref={observe}
       frameloop="demand"
-      className={classNames("shrinkable", className)}
+      className={classNames("flex-shrink", className)}
       camera={{
         position: [0, 0, 20],
         zoom: 5,
@@ -29,7 +32,7 @@ const Canvas: React.FC<{
       flat
     >
       <ReduxProvider>
-        <Wrap3d isGameboard={isGameboard}>{children}</Wrap3d>
+        <Wrap3d isGameboard={isGameboard} width={width} height={height}>{children}</Wrap3d>
       </ReduxProvider>
     </ThreeCanvas>
   );

client/src/features/canvas/Wrap3d.tsx

@@ -46,14 +46,16 @@ const setZoom = (
 interface Wrap3dProps {
   children: ReactNode;
   isGameboard: boolean | undefined;
+  width: number;
+  height: number;
 }
 
-const Wrap3d = ({ children, isGameboard }: Wrap3dProps) => {
+const Wrap3d = ({ children, isGameboard, width, height }: Wrap3dProps) => {
   extend({ TextGeometry });
   const { progress } = useProgress();
 
   const groupRef = useRef<Group>();
-  const { width, height } = useThree((state) => state.size);
+  // const { width, height } = useThree((state) => state.size);
   const camera = useThree((state) => state.camera) as PerspectiveCamera;
   const [boundingBox] = useState(() => new Box3());
   const invalidate = useThree((state) => state.invalidate);
@@ -73,19 +75,19 @@ const Wrap3d = ({ children, isGameboard }: Wrap3dProps) => {
           invalidate();
         }
       });
-      setTimeout(() => {
-        if (groupRef.current) {
-          setZoom(
-            groupRef.current,
-            width,
-            height,
-            boundingBox,
-            camera,
-            isGameboard
-          );
-          invalidate();
-        }
-      }, 200);
+      // setTimeout(() => {
+      //   if (groupRef.current) {
+      //     setZoom(
+      //       groupRef.current,
+      //       width,
+      //       height,
+      //       boundingBox,
+      //       camera,
+      //       isGameboard
+      //     );
+      //     invalidate();
+      //   }
+      // }, 200);
     }
   }, [
     progress,