feat: add scale check

package.json

@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "mprocs": "^0.6.4",
+    "mprocs": "^0.7.1",
     "wait-port": "^1.1.0"
   }
 }

packages/client/src/store.ts

@@ -53,6 +53,8 @@ export type PersistUIStore = {
     setLoggedIn: (loggedIn: boolean) => void;
     agreeTerm: boolean;
     setAgreeTerm: (agreeTerm: boolean) => void;
+    didScaleCheck: boolean;
+    setDidScaleCheck: (didScaleCheck: boolean) => void;
     skipGuide: boolean;
     setSkipGuide: (skipGuide: boolean) => void;
     soundVolumes: Volume;
@@ -71,6 +73,8 @@ export const persistUIStore = createStore(
             setLoggedIn: (loggedIn: boolean) => set(() => ({ loggedIn })),
             agreeTerm: false,
             setAgreeTerm: (agreeTerm: boolean) => set(() => ({ agreeTerm })),
+            didScaleCheck: false,
+            setDidScaleCheck: (didScaleCheck: boolean) => set(() => ({ didScaleCheck })),
             skipGuide: false,
             setSkipGuide: (skipGuide: boolean) => set(() => ({ skipGuide })),
             soundVolumes: { music: 100, effect: 100 },

packages/client/src/ui/Home.tsx

@@ -14,15 +14,15 @@ import { SessionWalletCreate } from "./features/login/SessionWalletCreate";
 import { HomeBg } from "./components/HomeBg";
 import { logDebug } from "./lib/utils";
 import { Rank } from "./features/info/Rank";
+import { ScaleCheck } from "./features/scaleCheck/scaleCheck";
 
 export const Home = () => {
     const {
         account: { playerEntity },
         clientComponents: { PlayerProfile },
     } = useDojo();
 
-    const agreeTerm = usePersistUIStore((state) => state.agreeTerm);
-    const loggedIn = usePersistUIStore((state) => state.loggedIn);
+    const { agreeTerm, loggedIn, didScaleCheck } = usePersistUIStore((state) => state);
 
     const sessionWalletShow = useUIStore((state: UIStore) =>
         state.getShow(ShowItem.SessionWalletCreate)
@@ -41,8 +41,13 @@ export const Home = () => {
 
     logDebug("sessionWalletShow: ", sessionWalletShow);
 
+    if (!didScaleCheck) {
+        return <ScaleCheck />
+    }
+
     return (
         <HomeBg>
+
             {sessionWalletShow && <SessionWalletCreate />}
 
             {!agreeTerm && <AgreeTerm />}

packages/client/src/ui/features/scaleCheck/scaleCheck.tsx

@@ -0,0 +1,61 @@
+import { HomeBg } from '../../components/HomeBg';
+import { usePersistUIStore } from '../../../store';
+import { GreenButton } from '../../components/GreenButton';
+
+export function ScaleCheck() {
+    const { setDidScaleCheck } = usePersistUIStore((state) => state);
+
+    const handleConfirm = () => {
+        setDidScaleCheck(true);
+    };
+
+    return (
+        <HomeBg className="relative w-screen h-screen overflow-hidden select-none">
+            {/* TopBar Reference */}
+            <div className="absolute left-1/2 transform -translate-x-1/2 w-[40rem] h-[5rem] bg-gray-800/50 border border-gray-600 z-10 flex items-center justify-center">
+                <div className="text-white">Top Bar Area</div>
+            </div>
+
+            {/* Game Board Reference (PhaserLayer) */}
+            <div
+                style={{
+                    position: "absolute",
+                    top: "calc(4% + 5rem)",
+                    left: "50%",
+                    width: "40rem",
+                    height: "40rem",
+                    transform: "translateX(-50%)",
+                    zIndex: "5",
+                }}
+                className="bg-blue-500/20 border border-blue-400"
+            >
+                <div className="text-center text-white mt-4">Game Board Area</div>
+            </div>
+
+            {/* Commit Button Reference */}
+            <div className="absolute top-[calc(13%+40rem)] left-1/2 transform -translate-x-1/2 w-[10rem] h-10 bg-gray-800/50 border border-gray-600 text-xs flex justify-center items-center">
+                <div className="text-white">Commit Button</div>
+            </div>
+
+            {/* Inventory Reference */}
+            <div className="fixed bottom-0 w-1/2 m-3 flex items-center justify-center z-10 h-[5rem] bg-gray-800/50 border border-gray-600">
+                <div className="text-white">Inventory Area</div>
+            </div>
+
+            {/* Scale Check Dialog */}
+            <div className="fixed right-8 top-1/2 transform -translate-y-1/2 bg-black/80 p-6 rounded-lg z-50 w-[24rem]">
+                <h1 className="text-2xl font-bold mb-4 text-white">Scale Check</h1>
+                <p className="text-white mb-6">
+                    1. Use mouse wheel or cmd+ + cmd- to zoom<br/>
+                    2. Zoom until all areas are comfortably arranged
+                </p>
+                <GreenButton 
+                    onClick={handleConfirm}
+                    className="mt-2"
+                >
+                    Confirm Scale
+                </GreenButton>
+            </div>
+        </HomeBg>
+    );
+}

packages/fly-deployments/katana.toml

@@ -22,8 +22,8 @@ dockerfile = "katana.Dockerfile"
 [http_service]
 internal_port = 5050
 force_https = true
-auto_stop_machines = false
-auto_start_machines = false
+auto_stop_machines = true
+auto_start_machines = true
 min_machines_running = 0
 processes = ['app']
 

packages/fly-deployments/torii.toml

@@ -13,8 +13,8 @@ dockerfile = "torii.Dockerfile"
 [http_service]
 internal_port = 8080
 force_https = true
-auto_stop_machines = false
-auto_start_machines = false
+auto_stop_machines = true
+auto_start_machines = true
 min_machines_running = 0
 processes = ['app']