feat: tweaks, mobile fixes

packages/client/src/App.tsx

@@ -12,7 +12,7 @@ export const App = () => {
   return (
     <RootLayout>
       <GameRoot />
-      <MudExample />
+      <MudExample display={false} />
       <LoadingScreen />
     </RootLayout>
   );

packages/client/src/components/loadingScreen/loadingScreen.tsx

@@ -26,7 +26,6 @@ function LoadingScreen() {
   });
 
   useEffect(() => {
-    console.log(syncProgress.percentage);
     setProgress(syncProgress.percentage);
     if (syncProgress.percentage >= 100) {
       setHide(true);

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

@@ -4,10 +4,17 @@ import { ColorResult, hexToHsva } from "@uiw/color-convert";
 import { getState } from "@/game/store";
 import { getRandom } from "@/lib/utils";
 import { palette } from "@/game/utils/palette";
+import { animated, type SpringValue } from "@react-spring/web";
 
 const randomColor = getRandom(palette.buildingSecondary);
 
-function ColorWheel() {
+function ColorWheel(props: {
+  style: {
+    opacity: SpringValue<number>;
+    transform: SpringValue<string>;
+  };
+}) {
+  const { style } = props;
   const [hsva, setHsva] = useState(hexToHsva(randomColor));
   const [hex, setHex] = useState(randomColor);
 
@@ -18,8 +25,8 @@ function ColorWheel() {
   };
 
   return (
-    <div className="card m-2">
-      <div className=" card-wrapper">
+    <animated.div className="card m-2" style={style}>
+      <div className="card-wrapper">
         <div
           className="card-wheel flex items-center"
           style={{ backgroundColor: hex }}
@@ -35,7 +42,7 @@ function ColorWheel() {
           </div>
         </div>
       </div>
-    </div>
+    </animated.div>
   );
 }
 

packages/client/src/components/ui/gameUI.css

@@ -1,3 +1,3 @@
 .interface {
-  @apply w-full h-full;
+  @apply w-full h-full fixed top-0 pointer-events-none overflow-hidden;
 }

packages/client/src/components/ui/inventory.css

@@ -1,9 +1,11 @@
 .inventory-wrapper {
-  @apply absolute bottom-3 w-full items-center justify-center flex-col flex overflow-y-visible;
+  @apply absolute bottom-0 flex-col flex overflow-y-visible w-screen pointer-events-auto;
 }
 
 .inventory-bar {
-  @apply flex-row flex items-center justify-center w-full h-44 overflow-visible overflow-x-scroll overflow-y-visible z-50;
+  @apply flex-row flex justify-start sm:justify-center w-full h-44 overflow-x-scroll overflow-y-clip z-50 max-w-full px-3;
+  scroll-snap-type: x mandatory; /* Enable vertical snap scrolling */
+  scrollbar-width: none;
 }
 
 .card {

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

@@ -14,6 +14,7 @@ import { useOnce } from "@/lib/useOnce";
 import { canAffordBuilding } from "@/game/systems/constructionSystem";
 import ColorWheel from "./colorWheel";
 import { RotateUI } from "./rotateUI";
+import { getActiveTutorial } from "@/game/data/tutorial";
 
 function Inventory() {
   const {
@@ -38,17 +39,21 @@ function Inventory() {
   });
 
   useEffect(() => {
-    // TODO: Remove hack to only show gravityhill at startup
     if (!loaded) return;
     if (cardsLoaded) return;
+    const activeTutorial = getActiveTutorial(getState().player.playerData);
     const f = Object.entries(EntityData.facilities)
       .map(([, entityData]) => entityData)
-      .filter((entityData) => !facilities.includes(entityData));
+      .filter((entityData) =>
+        activeTutorial
+          ? activeTutorial.inventory && !facilities.includes(entityData)
+          : !facilities.includes(entityData)
+      );
     setFacilities([...facilities, ...f]);
     setcardsLoaded(true);
   }, [cardsLoaded, entities, facilities, loaded]);
 
-  const listTransitions = useTransition(facilities, {
+  const listTransitions = useTransition(["colorWheel", ...facilities], {
     config: config.gentle,
     from: { opacity: 1, transform: "translateX(250px) translateY(-5px)" },
     enter: () => [
@@ -58,18 +63,25 @@ function Inventory() {
       },
     ],
     leave: { opacity: 0, height: 0, transform: "translateX(-250px)" },
-    keys: facilities.map((_, index) => index),
+    keys: ["colorWheel", ...facilities].map((_, index) => index),
   });
 
   return (
     <div className="inventory-wrapper">
       {building && <RotateUI building={building} />}
       <div className="inventory-bar">
-        <ColorWheel />
         {loaded &&
-          listTransitions((styles, entityData) => (
-            <InventoryItem {...entityData} style={styles} />
-          ))}
+          listTransitions((styles, entityData) => {
+            if (entityData === "colorWheel")
+              return <ColorWheel style={styles} />;
+            else
+              return (
+                <InventoryItem
+                  {...(entityData as FacilityDataType)}
+                  style={styles}
+                />
+              );
+          })}
       </div>
     </div>
   );

packages/client/src/components/ui/resourcePanel.css

@@ -1,5 +1,5 @@
 .resource-panel {
-  @apply fixed left-5 top-5 flex flex-col text-xs select-none;
+  @apply fixed left-5 top-5 flex flex-col text-xs select-none pointer-events-auto;
 }
 
 .resource-item-wrapper {

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

@@ -34,12 +34,12 @@ function TutorialModal({
     },
   });
   return (
-    <div className="fixed left-0 top-0 flex h-full w-full select-none items-center justify-center bg-black/50">
+    <div className="pointer-events-auto fixed left-0 top-0 z-50 flex h-full w-full select-none items-center justify-center gap-0 bg-black/50">
       <animated.div
-        className="flex max-h-full max-w-full flex-col md:max-w-[50rem]"
+        className="flex max-h-full max-w-full flex-col gap-0 md:max-w-[50rem]"
         style={props}
       >
-        <div className="flex-1 overflow-scroll border-b border-[#FDBF7F33] bg-[#2B3840] p-6 pb-10 text-white shadow-lg sm:rounded-lg">
+        <div className="flex-1 overflow-scroll border-b border-[#FDBF7F33] bg-[#2B3840] p-6 pb-10 text-white sm:rounded-lg sm:shadow-lg">
           <h2 className="mb-4 text-2xl text-[#ffddbb]">
             {step.screens[screenIndex].name}
           </h2>
@@ -76,7 +76,7 @@ function TutorialModal({
           {!step.screens[screenIndex].hideNext && (
             <button
               onClick={() => onNext()}
-              className="w-full cursor-pointer rounded border border-t-0 border-[#FDBF7F] bg-[#FDBF7Faa] px-4 py-2 text-white hover:bg-[#FDBF7Fee] sm:w-auto"
+              className="w-full cursor-pointer border border-t-0 border-[#FDBF7F] bg-[#FDBF7F] px-4 py-2 text-white hover:bg-[#FDBF7Fee] sm:w-auto sm:rounded sm:bg-[#FDBF7Faa]"
             >
               Next
             </button>

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

@@ -51,7 +51,7 @@ const EntityData = {
     },
     dynamo: {
       entityTypeId: 102,
-      name: "Whirly Dynamo",
+      name: "Dynamo",
       blurb: "Generates power",
       description:
         "The Whirly Dynamo is an awe-inspiring, spiraled contraption, eternally spinning, twirling, and cascading in the breezy stratosphere. It contains an enormous, spiraled windmill, capturing the gentlest of breezes and the mightiest of gales.",

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

@@ -87,6 +87,13 @@ export const completeTutorial = async (tutorialName: string) => {
   });
 };
 
+export const defaultInventory = [
+  EntityData.facilities.gravityhill,
+  EntityData.facilities.dynamo,
+  EntityData.facilities.residence,
+  EntityData.facilities.scaffold,
+];
+
 export const tutorialSteps = [
   {
     name: "intro",
@@ -150,12 +157,7 @@ export const tutorialSteps = [
   {
     name: "living",
     text: "Make it a life worth living",
-    inventory: [
-      EntityData.facilities.gravityhill,
-      EntityData.facilities.dynamo,
-      EntityData.facilities.residence,
-      EntityData.facilities.scaffold,
-    ],
+    inventory: defaultInventory,
     completedCondition: (player: PlayerData) => {
       return hasFacility(player, EntityData.facilities.residence.entityTypeId);
     },
@@ -175,12 +177,7 @@ export const tutorialSteps = [
   {
     name: "making money",
     text: "Make it a life worth living",
-    inventory: [
-      EntityData.facilities.gravityhill,
-      EntityData.facilities.dynamo,
-      EntityData.facilities.residence,
-      EntityData.facilities.scaffold,
-    ],
+    inventory: defaultInventory,
     completedCondition: () => {
       return hasWallet();
     },
@@ -215,12 +212,7 @@ export const tutorialSteps = [
   {
     name: "keepitsafe",
     text: "Make it a life worth living",
-    inventory: [
-      EntityData.facilities.gravityhill,
-      EntityData.facilities.dynamo,
-      EntityData.facilities.residence,
-      EntityData.facilities.scaffold,
-    ],
+    inventory: defaultInventory,
     completedCondition: () => {
       return tutorialFlags.hasHadWalletExplainer;
     },
@@ -241,6 +233,14 @@ export const tutorialSteps = [
   },
 ] as TutorialStep[];
 
+export const getTutorialByName = (name: string) => {
+  return tutorialSteps.find((t) => t.name === name);
+};
+
+export const getActiveTutorial = (playerData: PlayerData) => {
+  return tutorialSteps.find((t) => t.name === playerData.activeTutorials[0]);
+};
+
 const hasWallet = () => {
   const comethWallet = window.localStorage.getItem("comethWalletAddress");
   return comethWallet && comethWallet !== "";

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

@@ -162,12 +162,6 @@ function GameLoop() {
   });
 
   useMemo(() => {
-    // Debug for hiding the loading screen on new world
-    // 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]
     for (const facility of facilities) {
       const { entity, typeId, position, yaw, color, variant, owner } = facility;
       if (!getState().world.getEntityByPosition(position)) {

packages/client/src/mud/wallet.ts

@@ -102,6 +102,7 @@ export async function createComethWallet() {
   const walletAdaptor = new ConnectAdaptor({
     chainId: SupportedNetworks.MUMBAI,
     apiKey,
+    userName: "LAPUTA Vault",
   });
   const instance = new ComethWallet({
     authAdapter: walletAdaptor,

packages/client/src/mudExample.tsx

@@ -7,7 +7,7 @@ import { getState } from "./game/store";
 import { useState, useEffect } from "react";
 import { getTimestamp } from "./lib/utils";
 
-export const MudExample = () => {
+export const MudExample = ({ display = false }: { display: boolean }) => {
   const {
     components: { Counter, GameSetting },
     systemCalls: {
@@ -118,7 +118,7 @@ export const MudExample = () => {
   const delay = async (ms) => {
     return new Promise((resolve) => setTimeout(resolve, ms));
   };
-
+  if (!display) return null;
   return (
     <div>
       <div>

packages/client/src/styles/index.css

@@ -4,7 +4,7 @@
 
 html,
 body {
-  @apply bg-[#76ADAB] text-black;
+  @apply bg-[#76ADAB] text-black h-screen max-h-screen;
 }
 
 #mud-dev-tools button.peer::before {
@@ -35,3 +35,12 @@ img {
   -o-user-select: none;
   user-select: none;
 }
+
+::-webkit-scrollbar {
+  width: 0;
+}
+
+/* Hide horizontal scrollbar */
+::-webkit-scrollbar-thumb {
+  background: transparent;
+}