Merge pull request #22 from Cygnusfear/alex/feat-mud-construction

feat: construction on mud

Dockerfile

@@ -17,6 +17,7 @@ RUN pnpm install --frozen-lockfile
 # RUN ls -ls
 # RUN foundryup
 ENV SKIP_FOUNDRY=true
+ENV VITE_CHAIN_ID=4242
 RUN pnpm run build
 
 

packages/client/.env

@@ -1 +1 @@
-VITE_CHAIN_ID=31337
+VITE_CHAIN_ID=4242

packages/client/package.json

@@ -28,6 +28,7 @@
     "@react-three/drei": "^9.86.3",
     "@react-three/fiber": "^8.14.5",
     "@react-three/postprocessing": "^2.15.1",
+    "@tanem/react-nprogress": "^5.0.51",
     "@types/three": "^0.156.0",
     "clsx": "^2.0.0",
     "contracts": "workspace:*",

packages/client/src/components/loadingScreen/loadingScreen.css

@@ -4,19 +4,37 @@
 
 .loading-background {
   @apply fixed left-0 top-0 flex h-screen w-screen items-center justify-center overflow-hidden text-clip bg-[#76ADAB] bg-clip-border flex-col;
-  transition: opacity 1s ease-in-out;
+  transition: all 1s ease-in-out;
 }
 
 .game-title {
   @apply relative mx-auto text-6xl pt-4;
   font-family: "Anton", sans;
   animation: pulseShadow 5s infinite alternate;
-  transition: opacity 1s ease-in-out;
+  transition: all 1s ease-in-out;
+}
+
+.loading-container {
+  @apply relative h-60 w-60 overflow-hidden text-clip rounded-full bg-gradient-to-t from-white to-transparent to-90%;
+  transition: all 1.3s ease-in-out;
+}
+
+.synthwave-lines {
+  @apply relative top-0 left-0 w-full h-full bg-clip-border opacity-50 animate-pulse;
+  background: repeating-linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 0),
+    rgba(255, 255, 255, 0.2) 20px,
+    rgba(255, 255, 255, 0) 20px,
+    rgba(255, 255, 255, 0.2) 20px
+  );
+  animation: moveLines 5s linear infinite;
 }
 
 .fade-out {
   opacity: 0;
   pointer-events: none;
+  /* display: none; */
 }
 
 .wrapper-animate {
@@ -50,3 +68,21 @@
     text-shadow: 0px 5px 40px rgba(255, 255, 255, 0.3);
   }
 }
+
+@keyframes moveLines {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100px);
+  }
+}
+
+@keyframes textPulse {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100px);
+  }
+}

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

@@ -1,16 +1,27 @@
 import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
+import { useNProgress } from "@tanem/react-nprogress";
 
 import "./loadingScreen.css";
 
 function LoadingScreen() {
+  const [hide, setHide] = useState(false);
   const [loading, setLoading] = useState(true);
-
-  const fadeOut = () => {
-    setLoading(false);
-  };
+  const { progress } = useNProgress({
+    isAnimating: loading,
+    animationDuration: 300,
+    incrementDuration: 200,
+    minimum: 0.1,
+  });
 
   useEffect(() => {
+    const fadeOut = () => {
+      setLoading(false);
+      setTimeout(() => {
+        setHide(true);
+      }, 5000);
+    };
+
     document.addEventListener("gameLoaded", () => {
       fadeOut();
     });
@@ -20,10 +31,25 @@ function LoadingScreen() {
     };
   }, []);
 
+  if (hide) return null;
   return (
     <div className={cn("loading-wrapper", !loading && "wrapper-animate")}>
       <div className={cn("loading-background", !loading && "fade-out")} />
-      <div className={cn("game-title", !loading && "fade-out")}>LAPUTA</div>
+      <div className={cn("loading-container", !loading && "fade-out")}>
+        <div className="synthwave-lines" />
+      </div>
+      <div
+        className={cn(
+          "game-title font-anton fade-in tracking-wide",
+          !loading && "fade-out"
+        )}
+      >
+        LAPUTA
+        <div
+          className="loading-bar mx-auto mt-0.5 block h-2.5 bg-white"
+          style={{ width: `${progress * 100}%` }}
+        />
+      </div>
     </div>
   );
 }

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

@@ -10,7 +10,7 @@ import {
   useTransition,
   type SpringValue,
 } from "@react-spring/web";
-import { IFacility } from "@/game/types/entities";
+import { useOnce } from "@/lib/useOnce";
 
 function Inventory() {
   const {
@@ -20,37 +20,29 @@ function Inventory() {
   const [cardsLoaded, setcardsLoaded] = useState(false);
   const [facilities, setFacilities] = useState<FacilityDataType[]>([]);
 
-  useEffect(() => {
+  useOnce(() => {
+    const f = Object.entries(EntityData.facilities)
+      .map(([, entityData]) => entityData)
+      .filter((entityData) => entityData.tags.includes("startingItem"));
+    setFacilities(f);
     document.addEventListener("gameLoaded", () => {
-      setFacilities([
-        Object.entries(EntityData.facilities).map(
-          ([, entityData]) => entityData
-        )[0],
-      ]);
       setLoaded(true);
     });
     return () => {
       document.removeEventListener("gameLoaded", () => {});
     };
-  }, []);
+  });
 
   useEffect(() => {
     // TODO: Remove hack to only show gravityhill at startup
-    if (
-      entities.find(
-        (entity) =>
-          entity.entityType === "facility" &&
-          (entity as IFacility).type.name === "Gravity Hill"
-      ) &&
-      !cardsLoaded
-    ) {
-      const f = Object.entries(EntityData.facilities)
-        .map(([, entityData]) => entityData)
-        .filter((entityData) => !facilities.includes(entityData));
-      setFacilities([...facilities, ...f]);
-      setcardsLoaded(true);
-    }
-  }, [cardsLoaded, entities, facilities]);
+    if (!loaded) return;
+    if (cardsLoaded) return;
+    const f = Object.entries(EntityData.facilities)
+      .map(([, entityData]) => entityData)
+      .filter((entityData) => !facilities.includes(entityData));
+    setFacilities([...facilities, ...f]);
+    setcardsLoaded(true);
+  }, [cardsLoaded, entities, facilities, loaded]);
 
   const listTransitions = useTransition(facilities, {
     config: config.gentle,

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

@@ -2,6 +2,7 @@ import ModelData, { ModelDataType } from "./models";
 import { ResourceType } from "./resources";
 
 export type DataType = {
+  entityTypeId: number;
   name: string;
   blurb: string;
   description: string;
@@ -24,22 +25,26 @@ export const entityTags = [
   "producesPower",
   "producesGravity",
   "producesPopulation",
+  "hasWires",
+  "startingItem",
 ] as const;
 export type EntityTag = (typeof entityTags)[number];
 
 const EntityData = {
   facilities: {
     gravityhill: {
+      entityTypeId: 1,
       name: "Gravity Hill",
       blurb: "Generates gravity",
       description: `The contraption works on the principle of "Harmonious Disarray." It contains a meticulously arranged collection of misaligned gears, perpetually confused springs, and bewilderingly coiled wires, all managed by a flock of diligent, tiny mechanical hummingbirds, named the "srIørk". These birds, with their flapping wings, create a subtle, chaotic energy that, quite accidentally, disrupts the gravitational pull beneath it.`,
       image: "gravity.webp",
       costs: [["lapu", 500]],
       produces: [["gravity", 7, 1]],
       variants: [ModelData.well00],
-      tags: ["groundLevel", "producesGravity"],
+      tags: ["groundLevel", "hasWires", "producesGravity", "startingItem"],
     },
     dynamo: {
+      entityTypeId: 102,
       name: "Whirly Dynamo",
       blurb: "Generates power",
       description:
@@ -48,9 +53,10 @@ const EntityData = {
       costs: [["lapu", 200]],
       produces: [["power", 25, 1]],
       variants: [ModelData.engine00],
-      tags: [],
+      tags: ["hasWires"],
     },
     residence: {
+      entityTypeId: 103,
       name: "Residence",
       blurb: "Common housing",
       description:
@@ -64,6 +70,7 @@ const EntityData = {
   } as { [key: string]: FacilityDataType },
   resources: {
     crystalFloat: {
+      entityTypeId: 701,
       name: "Floating Crystal",
       blurb: "A floating crystal",
       description:

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

@@ -15,19 +15,19 @@ export const importTextures = ["/textures/box01.webp"];
 const ModelData: { [key: string]: ModelDataType } = {
   block00: {
     name: "GenericBlock00",
-    nodes: ["BlockBase", "Block02"],
+    nodes: ["CubaBase", "Block02"],
     materials: ["Block.Material.001", "Block.Material.001"],
     colors: ["primary", "primary"],
   },
   block01: {
     name: "GenericBlock01",
-    nodes: ["BlockBase", "Block02"],
+    nodes: ["CubaBase", "Block02"],
     materials: ["Block.Material.001", "Block.Material.001"],
     colors: ["primary", "secondary"],
   },
   block02: {
     name: "GenericBlock02",
-    nodes: ["BlockBase", "Block01"],
+    nodes: ["CubaBase", "Block01"],
     materials: ["Block.Material.001", "Block.Material.001"],
     colors: ["primary", "primary"],
   },