fix: inventory, hasresources, optimistic lapu

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

@@ -3,7 +3,7 @@ import "./inventory.css";
 import { getState, useStore } from "@/game/store";
 import { ResourceIcons, ResourceType } from "@/game/data/resources";
 import { cn } from "@/lib/utils";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   animated,
   config,
@@ -86,9 +86,15 @@ function InventoryItem(
   const { name, blurb, image, produces, costs, style } = props;
   const {
     input: { building },
+    player: {
+      playerData: { resources, LAPUtoBeConsolidated },
+    },
   } = useStore();
+  const [tooExpensive, setTooExpensive] = useState(!canAffordBuilding(props));
 
-  const tooExpensive = useMemo(() => !canAffordBuilding(props), [props]);
+  useEffect(() => {
+    setTooExpensive(!canAffordBuilding(props));
+  }, [props, resources, LAPUtoBeConsolidated]);
 
   const hideCursor = () => {
     getState().input.cursor.setCursor({ cursorState: "hidden" });

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

@@ -85,7 +85,9 @@ function ResourcePanel() {
         </div>
       )}
       {Object.entries(playerData.resources)
-        .filter(([type]) => type !== "water" && type !== "food")
+        .filter(
+          ([type]) => type !== "water" && type !== "food" && type !== "crystal"
+        )
         .map(([type, amount], idx) => {
           const calcAmount = type === "LAPU" ? amount + LAPUtemp : amount;
           return (
@@ -96,7 +98,7 @@ function ResourcePanel() {
             />
           );
         })}
-      <ResourceItem resourceType="LAPU" amount={LAPUtemp} />
+      {/* <ResourceItem resourceType="LAPU" amount={LAPUtemp} /> */}
     </div>
   );
 }

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

@@ -43,7 +43,7 @@ const EntityData = {
       image: "gravity.webp",
       costs: [
         ["LAPU", 400],
-        ["crystal", 1],
+        // ["crystal", 1],
       ],
       produces: [["gravity", 10, 1]],
       variants: ModelData.well,

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

@@ -117,6 +117,10 @@ export const doOptimisticLapuDelta = async (
         getState().player.setPlayerData({
           ...getState().player.playerData,
           LAPUtoBeConsolidated: consolidatePrev - amount,
+          resources: {
+            ...getState().player.playerData.resources,
+            LAPU: getState().player.playerData.resources.LAPU + amount,
+          },
         });
       })
       .catch((e: unknown) => {
@@ -126,6 +130,10 @@ export const doOptimisticLapuDelta = async (
         getState().player.setPlayerData({
           ...getState().player.playerData,
           LAPUtoBeConsolidated: consolidatePrev - amount,
+          resources: {
+            ...getState().player.playerData.resources,
+            LAPU: getState().player.playerData.resources.LAPU + amount,
+          },
         });
       });
   });

packages/client/src/game/store.ts

@@ -98,7 +98,11 @@ const useStore = create<IState>((set, get) => ({
       resources: { resource: ResourceType; amount: number }[]
     ): boolean => {
       return resources.every(({ resource, amount }) => {
-        return get().player.playerData.resources[resource] >= amount;
+        let consolidated = get().player.playerData.resources[resource];
+        if (resource === "LAPU") {
+          consolidated += get().player.playerData.LAPUtoBeConsolidated || 0;
+        }
+        return consolidated >= amount;
       });
     },
     spendResouces: (

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

@@ -8,7 +8,6 @@ import { floodFill } from "../utils/floodFill";
 import { FacilityDataType } from "../data/entities";
 import { doOptimisticLapuDelta } from "../data/player";
 import { getMUD } from "@/mud/setup";
-import { queueAsyncCall } from "../utils/asyncQueue";
 
 // TODO: Extract build conditions, can't build 1 tile below gravity well, only gravity well can build at y==1, etc
 const canBuildAtPosition = (position: Vector3) => {
@@ -135,11 +134,8 @@ const buildFacility = async ({
       variant,
       owner,
     ];
-    queueAsyncCall(async () => {
-      console.trace("buildFacility hook", position, build);
-      await doOptimisticLapuDelta(-LAPUCost, async () => {
-        await mudBuildFacility(...build);
-      });
+    doOptimisticLapuDelta(-LAPUCost, async () => {
+      await mudBuildFacility(...build);
     });
   }
   addEntity(newFacility);

packages/client/src/lib/utils.ts

@@ -71,3 +71,13 @@ export const faceDirections: Vector3[] = [
 export const degreesToRadians = (degrees: number) => {
   return degrees * (Math.PI / 180);
 };
+
+export function getTimestamp(): string {
+  const date = new Date();
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const seconds = date.getSeconds().toString().padStart(2, "0");
+  const milliseconds = date.getMilliseconds().toString().padStart(3, "0");
+
+  return `${hours}:${minutes}:${seconds}:${milliseconds}`;
+}

packages/client/src/mudExample.tsx

@@ -5,6 +5,7 @@ import { useMUD } from "./useMUD";
 
 import { getState } from "./game/store";
 import { useState, useEffect } from "react";
+import { getTimestamp } from "./lib/utils";
 
 export const MudExample = () => {
   const {
@@ -55,7 +56,11 @@ export const MudExample = () => {
         getState().player?.playerData?.address
       )) as number;
       setPlayerLapuBalance(playerLapuBalance_);
-      console.log("[contractRes] LAPU -> ", playerLapuBalance_);
+      console.log(
+        getTimestamp() + " [contractRes] LAPU -> ",
+        playerLapuBalance_
+      );
+      console.log(getTimestamp() + " [playerRes] LAPU -> ", playerLapuBalance_);
       getState().player?.setPlayerData({
         ...getState().player?.playerData,
         resources: {