feat: prep for wallet setup

packages/client/src/components/ui/tutorialModal.tsx

@@ -32,7 +32,7 @@ function TutorialModal({
     },
   });
   return (
-    <div className="fixed left-0 top-0 flex h-full w-full items-center justify-center bg-black/50">
+    <div className="fixed left-0 top-0 flex h-full w-full select-none items-center justify-center bg-black/50">
       <animated.div className="flex max-w-[50rem] flex-col" style={props}>
         <div className="flex-1  rounded-lg  border-b border-[#FDBF7F33] bg-[#2B3840] p-6 pb-10 text-white shadow-lg">
           <h2 className="mb-4 text-2xl text-[#ffddbb]">
@@ -51,13 +51,15 @@ function TutorialModal({
                   src={`/art/${currentScreen.image}`}
                   alt="Tutorial image"
                   className="h-auto w-full"
+                  draggable="false"
                 />
               )}
               {!currentScreen?.image && currentScreen?.entity && (
                 <img
                   src={`/icons/${currentScreen.entity.image}`}
                   alt="Entity image"
                   className="h-auto w-full"
+                  draggable="false"
                 />
               )}
             </div>
@@ -83,28 +85,27 @@ const Tutorial = () => {
   const [screenIndex, setScreenIndex] = useState<number>(0);
 
   useEffect(() => {
-    const setTutorial = () => {
+    const setTutorial = async () => {
       const playerData = getState().player.playerData;
       if (playerData.activeTutorials.length > 0) {
         if (playerData.activeTutorials[0]) {
           const tutorialStep = tutorialSteps.find(
             (step) => step.name === playerData.activeTutorials[0]
           );
-          setCurrentTutorial((prev) => {
-            if (prev != tutorialStep) {
+          if (currentTutorial !== tutorialStep) {
+            setCurrentTutorial(() => {
               setScreenIndex(0);
               return tutorialStep;
-            }
-          });
+            });
+          }
         }
       }
     };
-
     document.addEventListener("activeTutorial", setTutorial);
     return () => {
       document.removeEventListener("activeTutorial", setTutorial);
     };
-  }, []);
+  }, [currentTutorial]);
 
   return (
     <>
@@ -114,6 +115,9 @@ const Tutorial = () => {
           screenIndex={screenIndex}
           onNext={() => {
             if (screenIndex + 1 > currentTutorial.screens.length - 1) {
+              if (currentTutorial.onExitScreens) {
+                currentTutorial.onExitScreens();
+              }
               completeTutorial(currentTutorial.name);
               setScreenIndex(screenIndex + 1);
             } else {

packages/client/src/game/data/tutorial.ts

@@ -9,6 +9,7 @@ export type TutorialStep = {
   screens: TutorialScreen[];
   completedCondition: (player: PlayerData) => boolean;
   startCondition: (player: PlayerData) => boolean;
+  onExitScreens?: () => boolean;
 };
 
 export type TutorialScreen = {
@@ -45,10 +46,6 @@ export const evaluateTutorials = async () => {
         !activeTutorials.includes(t.name)
       ) {
         activeTutorials.push(availabletutorial.name);
-        if (activeTutorials.length > 0) {
-          const event = new Event("activeTutorial");
-          document.dispatchEvent(event);
-        }
       }
     }
   }
@@ -57,6 +54,10 @@ export const evaluateTutorials = async () => {
     activeTutorials,
     finishedTutorials,
   });
+  if (activeTutorials.length > 0) {
+    const event = new Event("activeTutorial");
+    document.dispatchEvent(event);
+  }
 };
 
 export const completeTutorial = async (tutorialName: string) => {
@@ -145,7 +146,7 @@ export const tutorialSteps = [
       EntityData.facilities.scaffold,
     ],
     completedCondition: (player: PlayerData) => {
-      return hasFacility(player, EntityData.facilities.residence.entityTypeId);
+      return hasWallet(player);
     },
     startCondition: (player: PlayerData) => {
       return hasFacility(player, EntityData.facilities.dynamo.entityTypeId);
@@ -170,17 +171,30 @@ export const tutorialSteps = [
       EntityData.facilities.scaffold,
     ],
     completedCondition: (player: PlayerData) => {
-      return hasFacility(player, EntityData.facilities.residence.entityTypeId);
+      return hasWallet(player);
     },
     startCondition: (player: PlayerData) => {
       return hasFacility(player, EntityData.facilities.residence.entityTypeId);
     },
+    onExitScreens: () => {
+      console.log("woop woop");
+    },
     screens: [
       {
         name: "Making money",
         text: `In the symphony of the skies, where gravity dances and dynamos sing, it's the heartbeat of the population that brings true prosperity. As the denizens of your floating city find their homes, they don't just live—they thrive, they dream, and they contribute. With every beat of life, with every shared story, the magic of LAPU starts to accumulate.<br/><br/>It's not just currency; it's a manifestation of hope, hard work, and harmony. Embrace this rhythm, for in this celestial economy, the wealth isn't just in coins but in the vibrant life that generates it.<br/><br/>`,
         image: `friends.webp`,
       },
+      {
+        name: "Keep it safe",
+        text: `Now that you're generating income, let's make sure we store it in a safe place for you.<br/><br/>`,
+        image: `vault2.webp`,
+      },
     ],
   },
 ] as TutorialStep[];
+
+const hasWallet = (player: PlayerData) => {
+  console.log(player);
+  return false;
+};

packages/client/src/game/gameRoot.tsx

@@ -10,6 +10,7 @@ import { useMemo, useState } from "react";
 import { useMUD } from "@/useMUD";
 import { initializePlayer } from "./data/player";
 import { getState } from "./store";
+import { evaluateTutorials } from "./data/tutorial";
 
 function GameRoot() {
   const [showFps, setShowFps] = useState(false);
@@ -22,6 +23,8 @@ function GameRoot() {
   useMemo(() => {
     const player = initializePlayer({ address: account.address });
     getState().player.setPlayerData(player);
+
+    Object.assign(window, { startTutorial: evaluateTutorials });
   }, [account]);
 
   useMemo(() => {

packages/client/src/game/systems/gameLoop.tsx

@@ -136,8 +136,8 @@ function GameLoop() {
 
   useMemo(() => {
     // Debug for hiding the loading screen on new world
-    // const event = new Event("gameLoaded");
-    // document.dispatchEvent(event);
+    const event = new Event("gameLoaded");
+    document.dispatchEvent(event);
 
     // we're going to check which entities don't exist yet and build new ones:
     // TODO: GameLoaded logic breaks when the map has zero entities [bug]
@@ -173,9 +173,8 @@ function GameLoop() {
     const interval = setInterval(() => {
       savePlayer(getState().player.playerData);
       if (
-        loaded &&
         getState().player.playerData.finishedTutorials.length <
-          tutorialSteps.length
+        tutorialSteps.length
       ) {
         evaluateTutorials();
       }

packages/client/src/styles/index.css

@@ -27,3 +27,11 @@ body {
 .gravity-ui {
   @apply text-xs text-center pointer-events-none select-none;
 }
+
+img {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}