Merge pull request #47 from Cygnusfear/alex/cometh-merge

Alex/cometh merge
Cygnusfear · Oct 22, 2023 · 940a93e · 940a93e
2 parents 31fb99f + 9916ee1
commit 940a93e
Show file tree

Hide file tree

Showing 26 changed files with 3,772 additions and 443 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@latticexyz/cli": "2.0.0-next.11",
+    "@latticexyz/cli": "2.0.0-main-71264b9e",
     "@typescript-eslint/eslint-plugin": "^6.7.3",
     "@typescript-eslint/parser": "^6.7.3",
     "concurrently": "^8.0.1",

diff --git a/packages/client/.env b/packages/client/.env
@@ -1 +1,2 @@
 VITE_CHAIN_ID=4242
+VITE_COMETH_API=7cd8f855-7a63-4230-988a-d4d842a5bab1
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -2,14 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/x+icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Laputa</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Anton&display=block" rel="stylesheet">
+    <link rel="preload" as="image" href="/art/scroll.webp">
+    <link rel="preload" as="image" href="/art/turbine3.webp">
+    <link rel="preload" as="image" href="/art/house.webp">
+    <link rel="preload" as="image" href="/art/vault.webp">
+    <link rel="preload" as="image" href="/art/friends.webp">
+    <link rel="preload" as="image" href="/art/vault2.webp">
+    <link rel="preload" as="image" href="/art/power.webp">
   </head>
-
   <body>
     <div id="react-root"></div>
     <script type="module" src="/src/index.tsx"></script>

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -14,15 +14,17 @@
     "fmt:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache"
   },
   "dependencies": {
-    "@latticexyz/common": "2.0.0-next.11",
-    "@latticexyz/dev-tools": "2.0.0-next.11",
-    "@latticexyz/react": "2.0.0-next.11",
-    "@latticexyz/recs": "2.0.0-next.11",
-    "@latticexyz/schema-type": "2.0.0-next.11",
-    "@latticexyz/services": "2.0.0-next.11",
-    "@latticexyz/store-sync": "2.0.0-next.11",
-    "@latticexyz/utils": "2.0.0-next.11",
-    "@latticexyz/world": "2.0.0-next.11",
+    "@cometh/connect-sdk": "^1.1.2",
+    "@ethersproject/hash": "^5.7.0",
+    "@latticexyz/common": "2.0.0-main-71264b9e",
+    "@latticexyz/dev-tools": "2.0.0-main-71264b9e",
+    "@latticexyz/react": "2.0.0-main-71264b9e",
+    "@latticexyz/recs": "2.0.0-main-71264b9e",
+    "@latticexyz/schema-type": "2.0.0-main-71264b9e",
+    "@latticexyz/services": "2.0.0-main-71264b9e",
+    "@latticexyz/store-sync": "2.0.0-main-71264b9e",
+    "@latticexyz/utils": "2.0.0-main-71264b9e",
+    "@latticexyz/world": "2.0.0-main-71264b9e",
     "@react-spring/three": "^9.7.3",
     "@react-spring/web": "^9.7.3",
     "@react-three/drei": "^9.86.3",

diff --git a/packages/client/public/art/vault.webp b/packages/client/public/art/vault.webp
diff --git a/packages/client/public/laputa.ico → packages/client/public/favicon.ico b/packages/client/public/laputa.ico → packages/client/public/favicon.ico
diff --git a/packages/client/public/textures/sunset.exr b/packages/client/public/textures/sunset.exr
diff --git a/packages/client/src/components/loadingScreen/loadingScreen.tsx b/packages/client/src/components/loadingScreen/loadingScreen.tsx
@@ -26,6 +26,7 @@ function LoadingScreen() {
   });
 
   useEffect(() => {
+    console.log(syncProgress.percentage);
     setProgress(syncProgress.percentage);
     if (syncProgress.percentage >= 100) {
       setHide(true);
@@ -44,12 +45,12 @@ function LoadingScreen() {
         <div className=" font-anton tracking-wide">LAPUTA</div>
         <div
           className="loading-bar mx-auto mt-0.5 block h-2.5 bg-white"
-          style={{ width: `${progress * 100}%` }}
+          style={{ width: `${progress}%` }}
         />
         <div className="loading-text mt-20 block text-center font-sans text-xs text-white">
           {syncProgress.message}{" "}
           {syncProgress.percentage > 0 && (
-            <>{(syncProgress.percentage * 100).toFixed(2) + "%"}</>
+            <>{syncProgress.percentage.toFixed(2) + "%"}</>
           )}
         </div>
       </div>

diff --git a/packages/client/src/components/ui/gameUI.css b/packages/client/src/components/ui/gameUI.css
@@ -0,0 +1,3 @@
+.interface {
+  @apply w-full h-full;
+}
diff --git a/packages/client/src/components/ui/gameUI.tsx b/packages/client/src/components/ui/gameUI.tsx
@@ -2,6 +2,8 @@ import { Inventory } from "./inventory";
 import { ResourcePanel } from "./resourcePanel";
 import { Tutorial } from "./tutorialModal";
 
+import "./gameUI.css";
+
 function GameUI() {
   return (
     <div className="interface">

diff --git a/packages/client/src/components/ui/inventory.css b/packages/client/src/components/ui/inventory.css
@@ -1,18 +1,18 @@
 .inventory-wrapper {
-  @apply absolute bottom-3 w-full items-center justify-center flex-col flex;
+  @apply absolute bottom-3 w-full items-center justify-center flex-col flex overflow-y-visible;
 }
 
 .inventory-bar {
-  @apply flex-row flex items-center justify-center w-full h-40 overflow-visible;
+  @apply flex-row flex items-center justify-center w-full h-40 overflow-visible overflow-x-scroll overflow-y-visible;
 }
 
 .card {
-  @apply relative flex flex-col items-center justify-end w-24 h-full m-2 text-white overflow-visible cursor-pointer select-none;
+  @apply relative flex flex-col items-center justify-end w-24 h-full m-2 text-white overflow-visible cursor-pointer select-none overflow-y-visible;
   transition: opacity 1s ease-in-out;
 }
 
 .card-wrapper {
-  @apply relative flex flex-col items-center justify-end w-24 h-full m-2 text-white overflow-clip cursor-pointer;
+  @apply relative flex flex-col items-center justify-end w-24 h-full m-2 text-white overflow-clip cursor-pointer overflow-y-visible;
 }
 
 .card:hover .card-wrapper {

diff --git a/packages/client/src/components/ui/resourcePanel.tsx b/packages/client/src/components/ui/resourcePanel.tsx
@@ -5,6 +5,7 @@ import { useStore } from "@/game/store";
 
 import "./resourcePanel.css";
 import { cn } from "@/lib/utils";
+import { FaFingerprint } from "react-icons/fa6";
 
 function ResourceItem({
   resourceType,
@@ -64,11 +65,19 @@ function ResourceItem({
 
 function ResourcePanel() {
   const {
-    player: { playerData },
+    player: {
+      playerData,
+      playerData: { hasComethWallet },
+    },
   } = useStore();
 
   return (
     <div className="resource-panel">
+      {hasComethWallet !== "" && (
+        <div className="mb-2 flex h-8 w-8 items-center rounded-[100%] border border-yellow-400 bg-slate-400">
+          <FaFingerprint className="m-auto flex text-xl text-yellow-400" />
+        </div>
+      )}
       {Object.entries(playerData.resources)
         .filter(([type]) => type !== "water" && type !== "food")
         .map(([type, amount], idx) => (

diff --git a/packages/client/src/components/ui/tutorialModal.tsx b/packages/client/src/components/ui/tutorialModal.tsx
@@ -1,5 +1,9 @@
 // Tutorial.tsx
-import { TutorialStep, tutorialSteps } from "@/game/data/tutorial";
+import {
+  TutorialStep,
+  // completeTutorial,
+  tutorialSteps,
+} from "@/game/data/tutorial";
 import { getState } from "@/game/store";
 import { useState, useEffect } from "react";
 import { useSpring, animated, config } from "@react-spring/web";
@@ -31,18 +35,23 @@ function TutorialModal({
   });
   return (
     <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">
+      <animated.div
+        className="flex max-h-full max-w-full flex-col 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">
           <h2 className="mb-4 text-2xl text-[#ffddbb]">
             {step.screens[screenIndex].name}
           </h2>
-          <div className="flex flex-row items-start justify-start gap-8">
-            <div
-              className="flex-1 grow place-content-start items-start justify-self-start"
-              dangerouslySetInnerHTML={{
-                __html: step.screens[screenIndex].text,
-              }}
-            ></div>
+          <div className="sm:text-md flex flex-col items-start justify-start gap-8 sm:flex-row">
+            {step.screens[screenIndex].text && (
+              <div
+                className="flex-1 grow place-content-start items-start justify-self-start"
+                dangerouslySetInnerHTML={{
+                  __html: step.screens[screenIndex].text || "",
+                }}
+              ></div>
+            )}
             <div className="flex-2 w-80">
               {currentScreen?.image && (
                 <img
@@ -63,13 +72,15 @@ function TutorialModal({
             </div>
           </div>
         </div>
-        <div className="mt-4 flex justify-end">
-          <button
-            onClick={() => onNext()}
-            className="cursor-pointer rounded border border-t-0 border-[#FDBF7F] bg-[#FDBF7Faa] px-4 py-2 text-white hover:bg-[#FDBF7Fee]"
-          >
-            Next
-          </button>
+        <div className="flex justify-end sm:mt-4">
+          {!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"
+            >
+              Next
+            </button>
+          )}
         </div>
       </animated.div>
     </div>
@@ -80,7 +91,7 @@ const Tutorial = () => {
   const {
     systemCalls: { mockLapuVaultFundPlayer },
   } = useMUD();
-  const playerAddress = getState().player?.playerData?.address;
+  // const playerAddress = getState().player?.playerData?.address;
 
   const [currentTutorial, setCurrentTutorial] = useState<
     TutorialStep | undefined
@@ -117,17 +128,19 @@ const Tutorial = () => {
           step={currentTutorial}
           screenIndex={screenIndex}
           onNext={() => {
-            if (screenIndex + 1 > currentTutorial.screens.length - 1) {
-              if (currentTutorial.onExitScreens) {
-                currentTutorial.onExitScreens();
-              }
-              // completeTutorial(currentTutorial.name);
-              setScreenIndex(screenIndex + 1);
-            } else {
-              setScreenIndex(screenIndex + 1);
+            if (currentTutorial.screens[screenIndex].onExitScreen) {
+              currentTutorial.screens[screenIndex]!.onExitScreen!();
             }
-
-            mockLapuVaultFundPlayer(playerAddress);
+            setScreenIndex(screenIndex + 1);
+            if (currentTutorial.screens[screenIndex].funds)
+              console.log(
+                "dofunds",
+                currentTutorial.screens[screenIndex].funds
+              );
+            mockLapuVaultFundPlayer(
+              getState().player.playerData.address,
+              currentTutorial.screens[screenIndex].funds
+            );
           }}
         />
       )}

diff --git a/packages/client/src/game/data/entities.ts b/packages/client/src/game/data/entities.ts
@@ -94,21 +94,21 @@ const EntityData = {
       variants: ModelData.scaffold,
       tags: [],
     },
-    miner: {
-      entityTypeId: 105,
-      name: "Crystal Miner",
-      blurb: "Needs to be placed next to a Crystal",
-      description: "",
-      image: "scaffold.webp",
-      costs: [
-        ["gravity", 1],
-        ["power", 2],
-        ["LAPU", 350],
-      ],
-      produces: [],
-      variants: ModelData.miner,
-      tags: [],
-    },
+    // miner: {
+    //   entityTypeId: 105,
+    //   name: "Crystal Miner",
+    //   blurb: "Needs to be placed next to a Crystal",
+    //   description: "",
+    //   image: "scaffold.webp",
+    //   costs: [
+    //     ["gravity", 1],
+    //     ["power", 2],
+    //     ["LAPU", 350],
+    //   ],
+    //   produces: [],
+    //   variants: ModelData.miner,
+    //   tags: [],
+    // },
   } as { [key: string]: FacilityDataType },
   resources: {
     crystalFloat: {

diff --git a/packages/client/src/game/data/player.ts b/packages/client/src/game/data/player.ts
@@ -9,6 +9,7 @@ export type PlayerData = {
   activeTutorials: string[];
   finishedTutorials: string[];
   address: string;
+  hasComethWallet: string;
 };
 
 export const createNewPlayerData = ({
@@ -33,6 +34,7 @@ export const createNewPlayerData = ({
     activeTutorials: [],
     finishedTutorials: [],
     address: address || "",
+    hasComethWallet: window.localStorage.getItem("comethWalletAddress") || "",
   };
 };
 
@@ -65,6 +67,7 @@ export const savePlayer = async (playerData: PlayerData, verbose = false) => {
     address: playerData.address,
     name: playerData.name,
     facilities: [],
+    hasComethWallet: window.localStorage.getItem("comethWalletAddress") || "",
   };
   setItem("playerData", JSON.stringify(cleanPlayer)).then(() => {
     if (verbose) console.log("saved", cleanPlayer);
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		VITE_CHAIN_ID=4242
		VITE_COMETH_API=7cd8f855-7a63-4230-988a-d4d842a5bab1