optimistic

client/package.json

@@ -47,12 +47,13 @@
     "lil-gui": "^0.19.2",
     "lodash": "^4.17.21",
     "lucide-react": "^0.365.0",
+    "next-themes": "^0.4.3",
     "postprocessing": "^6.36.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
-    "react-toastify": "^10.0.5",
     "rxjs": "^7.8.1",
+    "sonner": "^1.7.0",
     "tailwind-merge": "^2.2.2",
     "three": "^0.166.0",
     "three-csg": "^1.0.0",

client/src/App.tsx

@@ -1,12 +1,13 @@
-import { ToastContainer } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 import "./index.css";
+import { Toaster } from "./ui/components/Toaster";
+import { TransactionNotification } from "./ui/components/TxEmit";
 import { World } from "./ui/layouts/World";
 
 function App({ backgroundImage }: { backgroundImage: string }) {
   return (
     <>
-      <ToastContainer style={{ zIndex: 1100 }} />
+      <Toaster />
+      <TransactionNotification />
       <World backgroundImage={backgroundImage} />
     </>
   );

client/src/dojo/createClientComponents.ts

@@ -10,5 +10,10 @@ export function createClientComponents({ contractComponents }: SetupNetworkResul
     Position: overridableComponent(contractComponents.Position),
     Stamina: overridableComponent(contractComponents.Stamina),
     Tile: overridableComponent(contractComponents.Tile),
+    Population: overridableComponent(contractComponents.Population),
+    Resource: overridableComponent(contractComponents.Resource),
+    Weight: overridableComponent(contractComponents.Weight),
+    Army: overridableComponent(contractComponents.Army),
+    BuildingQuantityv2: overridableComponent(contractComponents.BuildingQuantityv2),
   };
 }

client/src/dojo/createSystemCalls.ts

@@ -1,5 +1,5 @@
 import type * as SystemProps from "@bibliothecadao/eternum";
-import { toast } from "react-toastify";
+import { toast } from "sonner";
 import { type SetupNetworkResult } from "./setupNetwork";
 
 class PromiseQueue {
@@ -39,26 +39,15 @@ class PromiseQueue {
   }
 }
 
-type SystemCallFunctions = ReturnType<typeof createSystemCalls>;
-type SystemCallFunction = (...args: any[]) => any;
-type WrappedSystemCalls = Record<string, SystemCallFunction>;
-
-const withErrorHandling =
-  (fn: any) =>
-  async (...args: any[]) => {
-    try {
-      return await fn(...args);
-    } catch (error: any) {
-      toast(error.message);
-    }
-  };
-
 export function createSystemCalls({ provider }: SetupNetworkResult) {
   const promiseQueue = new PromiseQueue();
 
   const withQueueing = <T extends (...args: any[]) => Promise<any>>(fn: T) => {
     return async (...args: Parameters<T>): Promise<ReturnType<T>> => {
-      return await promiseQueue.enqueue(async () => await fn(...args));
+      return await promiseQueue.enqueue(async () => {
+        const result = await fn(...args);
+        return result;
+      });
     };
   };
 

client/src/dojo/modelManager/ArmyManager.ts

@@ -1,18 +1,97 @@
 import { DojoResult } from "@/hooks/context/DojoContext";
-import { ID } from "@bibliothecadao/eternum";
+import { ID, ResourcesIds } from "@bibliothecadao/eternum";
+import { getComponentValue } from "@dojoengine/recs";
 import { getEntityIdFromKeys } from "@dojoengine/utils";
+import { uuid } from "@latticexyz/utils";
+import { ResourceManager } from "./ResourceManager";
+
+interface Troops {
+  [ResourcesIds.Paladin]: number;
+  [ResourcesIds.Crossbowman]: number;
+  [ResourcesIds.Knight]: number;
+}
 
 export class ArmyManager {
-  constructor(private dojo: DojoResult) {}
-
-  async deleteArmy(armyId: ID): Promise<void> {
-    await this.dojo.setup.systemCalls
-      .delete_army({
-        signer: this.dojo.account.account,
-        army_id: armyId,
-      })
-      .then(() => {
-        this.dojo.network.world.deleteEntity(getEntityIdFromKeys([BigInt(armyId)]));
-      });
+  private readonly realmEntityId: number;
+
+  constructor(
+    private readonly dojo: DojoResult,
+    private readonly armyEntityId: ID,
+  ) {
+    this.realmEntityId = this.getRealmEntityId();
+  }
+
+  private getRealmEntityId(): number {
+    return (
+      getComponentValue(this.dojo.setup.components.EntityOwner, getEntityIdFromKeys([BigInt(this.armyEntityId)]))
+        ?.entity_owner_id || 0
+    );
+  }
+
+  private _updateResourceBalances(overrideId: string, troops: Troops): void {
+    Object.entries(troops).forEach(([troopType, amount]) => {
+      const resourceManager = new ResourceManager(
+        this.dojo.setup,
+        this.realmEntityId,
+        Number(troopType) as ResourcesIds,
+      );
+      resourceManager.optimisticResourceUpdate(overrideId, -BigInt(amount));
+    });
+  }
+
+  private _updateArmyTroops(overrideId: string, army: any, troops: Troops): void {
+    this.dojo.setup.components.Army.addOverride(overrideId, {
+      entity: getEntityIdFromKeys([BigInt(this.armyEntityId)]),
+      value: {
+        ...army,
+        troops: {
+          knight_count: BigInt(army.troops.knight_count) + BigInt(troops[ResourcesIds.Knight]),
+          crossbowman_count: BigInt(army.troops.crossbowman_count) + BigInt(troops[ResourcesIds.Crossbowman]),
+          paladin_count: BigInt(army.troops.paladin_count) + BigInt(troops[ResourcesIds.Paladin]),
+        },
+      },
+    });
+  }
+
+  private _optimisticAddTroops(overrideId: string, troops: Troops): void {
+    const entity = getEntityIdFromKeys([BigInt(this.armyEntityId)]);
+    const army = getComponentValue(this.dojo.setup.components.Army, entity);
+
+    if (!army) return;
+
+    this._updateResourceBalances(overrideId, troops);
+    this._updateArmyTroops(overrideId, army, troops);
+  }
+
+  public addTroops(troops: Troops): void {
+    this.dojo.setup.systemCalls.army_buy_troops({
+      signer: this.dojo.account.account,
+      payer_id: this.realmEntityId,
+      army_id: this.armyEntityId,
+      troops: {
+        knight_count: BigInt(troops[ResourcesIds.Knight]),
+        crossbowman_count: BigInt(troops[ResourcesIds.Crossbowman]),
+        paladin_count: BigInt(troops[ResourcesIds.Paladin]),
+      },
+    });
+
+    this._optimisticAddTroops(uuid(), troops);
+  }
+
+  public createArmy(structureEntityId: bigint, isDefensive: boolean): void {
+    this.dojo.setup.systemCalls.create_army({
+      signer: this.dojo.account.account,
+      is_defensive_army: isDefensive,
+      army_owner_id: structureEntityId,
+    });
+  }
+
+  public async deleteArmy(armyId: ID): Promise<void> {
+    await this.dojo.setup.systemCalls.delete_army({
+      signer: this.dojo.account.account,
+      army_id: armyId,
+    });
+
+    this.dojo.network.world.deleteEntity(getEntityIdFromKeys([BigInt(armyId)]));
   }
 }

client/src/dojo/modelManager/ArmyMovementManager.ts

@@ -12,6 +12,7 @@ import {
   ContractAddress,
   ID,
   ResourcesIds,
+  TravelTypes,
   getDirectionBetweenAdjacentHexes,
   getNeighborHexes,
 } from "@bibliothecadao/eternum";
@@ -220,6 +221,18 @@ export class ArmyMovementManager {
     });
   };
 
+  private readonly _optimisticCapacityUpdate = (overrideId: string, capacity: number) => {
+    const currentWeight = getComponentValue(this.setup.components.Weight, this.entity);
+
+    this.setup.components.Weight.addOverride(overrideId, {
+      entity: this.entity,
+      value: {
+        entity_id: this.entityId,
+        value: (currentWeight?.value || 0n) + BigInt(capacity),
+      },
+    });
+  };
+
   private readonly _optimisticTileUpdate = (overrideId: string, col: number, row: number) => {
     const entity = getEntityIdFromKeys([BigInt(col), BigInt(row)]);
 
@@ -252,6 +265,12 @@ export class ArmyMovementManager {
     this._optimisticStaminaUpdate(overrideId, configManager.getExploreStaminaCost(), currentArmiesTick);
     this._optimisticTileUpdate(overrideId, col, row);
     this._optimisticPositionUpdate(overrideId, col, row);
+    this._optimisticCapacityUpdate(
+      overrideId,
+      // all resources you can find have the same weight as wood
+      configManager.getExploreReward() * configManager.getResourceWeight(ResourcesIds.Wood),
+    );
+    this._optimisticFoodCosts(overrideId, TravelTypes.Explore);
 
     return overrideId;
   };
@@ -277,18 +296,21 @@ export class ArmyMovementManager {
         signer: useAccountStore.getState().account!,
       })
       .catch((e) => {
-        this.setup.components.Position.removeOverride(overrideId);
-        this.setup.components.Tile.removeOverride(overrideId);
+        // remove all visual overrides only when the action fails
+        this._removeVisualOverride(overrideId);
+        this._removeNonVisualOverrides(overrideId);
       })
       .then(() => {
-        this.setup.components.Stamina.removeOverride(overrideId);
+        // remove all non visual overrides
+        this._removeNonVisualOverrides(overrideId);
       });
   };
 
   private readonly _optimisticTravelHex = (col: number, row: number, pathLength: number, currentArmiesTick: number) => {
     const overrideId = uuid();
 
     this._optimisticStaminaUpdate(overrideId, configManager.getTravelStaminaCost() * pathLength, currentArmiesTick);
+    this._optimisticFoodCosts(overrideId, TravelTypes.Travel);
 
     this.setup.components.Position.addOverride(overrideId, {
       entity: this.entity,
@@ -301,6 +323,32 @@ export class ArmyMovementManager {
     return overrideId;
   };
 
+  // only remove visual overrides (linked to models on world map) when the action fails
+  private readonly _removeVisualOverride = (overrideId: string) => {
+    this.setup.components.Tile.removeOverride(overrideId);
+    this.setup.components.Position.removeOverride(overrideId);
+  };
+
+  // you can remove all non visual overrides when the action fails or succeeds
+  private readonly _removeNonVisualOverrides = (overrideId: string) => {
+    this.setup.components.Stamina.removeOverride(overrideId);
+    this.setup.components.Resource.removeOverride(overrideId);
+    this.setup.components.Weight.removeOverride(overrideId);
+  };
+
+  private readonly _optimisticFoodCosts = (overrideId: string, travelType: TravelTypes) => {
+    const entityArmy = getComponentValue(this.setup.components.Army, this.entity);
+    let costs = { wheatPayAmount: 0, fishPayAmount: 0 };
+    if (travelType === TravelTypes.Explore) {
+      costs = computeExploreFoodCosts(entityArmy?.troops);
+    } else {
+      costs = computeTravelFoodCosts(entityArmy?.troops);
+    }
+
+    this.wheatManager.optimisticResourceUpdate(overrideId, -BigInt(multiplyByPrecision(costs.wheatPayAmount)));
+    this.fishManager.optimisticResourceUpdate(overrideId, -BigInt(multiplyByPrecision(costs.fishPayAmount)));
+  };
+
   private readonly _travelToHex = async (path: HexPosition[], currentArmiesTick: number) => {
     const overrideId = this._optimisticTravelHex(
       path[path.length - 1].col,
@@ -326,10 +374,11 @@ export class ArmyMovementManager {
         directions,
       })
       .catch(() => {
-        this.setup.components.Position.removeOverride(overrideId);
+        this._removeVisualOverride(overrideId);
+        this._removeNonVisualOverrides(overrideId);
       })
       .then(() => {
-        this.setup.components.Stamina.removeOverride(overrideId);
+        this._removeNonVisualOverrides(overrideId);
       });
   };
 

client/src/dojo/modelManager/ResourceManager.ts

@@ -54,6 +54,18 @@ export class ResourceManager {
     return finishTick > currentTick ? finishTick - currentTick : 0;
   }
 
+  public optimisticResourceUpdate = (overrideId: string, change: bigint) => {
+    const entity = getEntityIdFromKeys([BigInt(this.entityId), BigInt(this.resourceId)]);
+    const currentBalance = getComponentValue(this.setup.components.Resource, entity)?.balance || 0n;
+    this.setup.components.Resource.addOverride(overrideId, {
+      entity,
+      value: {
+        resource_type: this.resourceId,
+        balance: currentBalance + change,
+      },
+    });
+  };
+
   public timeUntilValueReached(currentTick: number, value: number): number {
     const production = this._getProduction(this.resourceId);
     const resource = this._getResource(this.resourceId);