Merge branch 'rc-1' into feat(controller)/trophies-on-client

client/src/dojo/modelManager/ArmyMovementManager.ts

@@ -104,10 +104,10 @@ export class ArmyMovementManager {
     const exploreFoodCosts = computeExploreFoodCosts(entityArmy?.troops);
     const { wheat, fish } = this.getFood(currentDefaultTick);
 
-    if (fish < exploreFoodCosts.fishPayAmount) {
+    if (fish < multiplyByPrecision(exploreFoodCosts.fishPayAmount)) {
       return false;
     }
-    if (wheat < exploreFoodCosts.wheatPayAmount) {
+    if (wheat < multiplyByPrecision(exploreFoodCosts.wheatPayAmount)) {
       return false;
     }
 

client/src/dojo/modelManager/TileManager.ts

@@ -56,7 +56,7 @@ export class TileManager {
   }
 
   getRealmLevel = (): RealmLevels => {
-    const realmEntityId = this._getOwnerEntityId() || 0;
+    const realmEntityId = useUIStore.getState().structureEntityId;
     const realm = getComponentValue(this.setup.components.Realm, getEntityIdFromKeys([BigInt(realmEntityId)]));
     return (realm?.level || RealmLevels.Settlement) as RealmLevels;
   };

client/src/hooks/helpers/useGuilds.tsx

@@ -39,8 +39,12 @@ const formatGuilds = (
       const name = getEntityName(guild.entity_id);
 
       const createGuildEvent = getComponentValue(CreateGuild, getEntityIdFromKeys([BigInt(guild.entity_id)]));
-      const guildCreationTimestamp = createGuildEvent?.timestamp ?? 0;
-      const timeSinceCreation = formatTime((nextBlockTimestamp || 0) - guildCreationTimestamp, undefined, true);
+
+      let timeSinceCreation = "";
+      if (createGuildEvent) {
+        const guildCreationTimestamp = createGuildEvent?.timestamp ?? 0;
+        timeSinceCreation = formatTime((nextBlockTimestamp || 0) - guildCreationTimestamp, undefined, true);
+      }
 
       const index = guildsByRank.findIndex(([guildEntityId, _]) => guildEntityId === guild.entity_id);
 
@@ -92,8 +96,12 @@ const formatGuildMembers = (
         JoinGuild,
         getEntityIdFromKeys([BigInt(guildMember.guild_entity_id), ContractAddress(guildMember.address)]),
       );
-      const joinGuildTimestamp = joinGuildEvent?.timestamp ?? 0;
-      const timeSinceJoined = formatTime((nextBlockTimestamp || 0) - joinGuildTimestamp, undefined, true);
+
+      let timeSinceJoined = "";
+      if (joinGuildEvent) {
+        const joinGuildTimestamp = joinGuildEvent?.timestamp ?? 0;
+        timeSinceJoined = formatTime((nextBlockTimestamp || 0) - joinGuildTimestamp, undefined, true);
+      }
 
       const index = playersByRank.findIndex(([address, _]) => address === guildMember.address);
 

client/src/hooks/helpers/useStructures.tsx

@@ -19,6 +19,7 @@ export type Structure = ComponentValue<ClientComponents["Structure"]["schema"]>
   isMine: boolean;
   isMercenary: boolean;
   name: string;
+  ownerName?: string;
   protector: ArmyInfo | undefined;
   owner: ComponentValue<ClientComponents["Owner"]["schema"]>;
   entityOwner: ComponentValue<ClientComponents["EntityOwner"]["schema"]>;
@@ -28,7 +29,7 @@ export const useStructureAtPosition = ({ x, y }: Position): Structure | undefine
   const {
     account: { account },
     setup: {
-      components: { Position, Structure, EntityOwner, Owner, Protector },
+      components: { Position, Structure, EntityOwner, Owner, Protector, AddressName },
     },
   } = useDojo();
 
@@ -53,11 +54,15 @@ export const useStructureAtPosition = ({ x, y }: Position): Structure | undefine
 
     const name = getEntityName(structure.entity_id);
 
+    const addressName = getComponentValue(AddressName, getEntityIdFromKeys([owner?.address]));
+    const ownerName = addressName ? shortString.decodeShortString(addressName!.name.toString()) : "Bandits";
+
     return {
       ...structure,
       entityOwner,
       owner,
       name,
+      ownerName,
       protector,
       isMine: ContractAddress(owner?.address || 0n) === ContractAddress(account.address),
       isMercenary: owner.address === 0n,

client/src/three/components/ArmyModel.ts

@@ -1,7 +1,7 @@
 import { IS_LOW_GRAPHICS_ENABLED } from "@/ui/config";
 import * as THREE from "three";
 import { AnimationClip, AnimationMixer } from "three";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { gltfLoader } from "../helpers/utils";
 
 const MAX_INSTANCES = 1000;
 const ANIMATION_STATE_IDLE = 0;
@@ -36,10 +36,10 @@ export class ArmyModel {
   }
 
   private async loadModel(): Promise<void> {
-    const loader = new GLTFLoader();
+    const loader = gltfLoader;
     return new Promise((resolve, reject) => {
       loader.load(
-        "models/knight.glb",
+        "models/knight-opt.glb",
         (gltf) => {
           this.armyMesh = gltf.scene.children[0];
           const geometry = (this.armyMesh as THREE.Mesh).geometry;

client/src/three/components/BattleModel.tsx

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { AnimationClip, AnimationMixer } from "three";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { gltfLoader } from "../helpers/utils";
 
 const MAX_INSTANCES = 1000;
 
@@ -27,7 +27,7 @@ export class BattleModel {
   }
 
   private async loadModel(): Promise<void> {
-    const loader = new GLTFLoader();
+    const loader = gltfLoader;
     return new Promise((resolve, reject) => {
       loader.load(
         "models/battle.glb",

client/src/three/components/BuildingPreview.ts

@@ -3,7 +3,7 @@ import { ResourceMiningTypes } from "@/types";
 import { ResourceIdToMiningType } from "@/ui/utils/utils";
 import { BuildingType, ResourcesIds } from "@bibliothecadao/eternum";
 import * as THREE from "three";
-import { GLTFLoader } from "three-stdlib";
+import { gltfLoader } from "../helpers/utils";
 import { buildingModelPaths, PREVIEW_BUILD_COLOR_VALID } from "../scenes/constants";
 import { HoverSound } from "../sound/HoverSound";
 
@@ -20,7 +20,7 @@ export class BuildingPreview {
   }
 
   private loadBuildingModels() {
-    const loader = new GLTFLoader();
+    const loader = gltfLoader;
     for (const [building, path] of Object.entries(buildingModelPaths)) {
       const loadPromise = new Promise<void>((resolve, reject) => {
         loader.load(

client/src/three/components/Minimap.ts

@@ -70,6 +70,7 @@ class Minimap {
   };
   private scaleX!: number;
   private scaleY!: number;
+  private dragSpeed: number = 1;
   private isDragging: boolean = false;
   private biomeCache!: Map<string, string>;
   private scaledCoords!: Map<string, { scaledCol: number; scaledRow: number }>;
@@ -166,6 +167,7 @@ class Minimap {
       }
     }
 
+    this.dragSpeed = this.mapSize.width / MINIMAP_CONFIG.MAX_ZOOM_RANGE;
     // Precompute sizes
     this.structureSize = {
       width: MINIMAP_CONFIG.SIZES.STRUCTURE * this.scaleX,
@@ -354,9 +356,8 @@ class Minimap {
 
   private handleMouseMove = (event: MouseEvent) => {
     if (this.isDragging && this.lastMousePosition) {
-      const colShift = Math.round((event.clientX - this.lastMousePosition.x) / this.scaleX);
-      const rowShift = Math.round((event.clientY - this.lastMousePosition.y) / this.scaleY);
-
+      const colShift = Math.round(event.clientX - this.lastMousePosition.x);
+      const rowShift = Math.round(event.clientY - this.lastMousePosition.y);
       this.mapCenter.col -= colShift;
       this.mapCenter.row -= rowShift;
 
@@ -391,9 +392,7 @@ class Minimap {
 
   private zoom(zoomOut: boolean, event?: MouseEvent) {
     const currentRange = this.mapSize.width;
-    console.log(
-      `Zooming ${zoomOut ? "out" : "in"} from ${currentRange}, mapCenter: ${this.mapCenter.col}, ${this.mapCenter.row}`,
-    );
+
     if (!zoomOut && currentRange < MINIMAP_CONFIG.MIN_ZOOM_RANGE) {
       return;
     }

client/src/three/components/Navigator.ts

@@ -4,7 +4,7 @@ import { throttle } from "lodash";
 import * as THREE from "three";
 import { CSS2DObject } from "three-stdlib";
 import { MapControls } from "three/examples/jsm/controls/MapControls";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { gltfLoader } from "../helpers/utils";
 
 const dummyObject = new THREE.Object3D();
 const arrowOffset = new THREE.Vector3(0, 3, 0);
@@ -34,7 +34,7 @@ export class Navigator {
   }
 
   private loadArrowModel() {
-    const loader = new GLTFLoader();
+    const loader = gltfLoader;
     loader.load("/models/arrow.glb", (gltf) => {
       this.arrowModel = gltf.scene;
       this.arrowModel.scale.set(0.5, 0.5, 0.5);

client/src/three/components/StructureManager.ts

@@ -2,7 +2,7 @@ import { FELT_CENTER } from "@/ui/config";
 import { getWorldPositionForHex } from "@/ui/utils/utils";
 import { ID, StructureType } from "@bibliothecadao/eternum";
 import * as THREE from "three";
-import { GLTFLoader } from "three-stdlib";
+import { gltfLoader } from "../helpers/utils";
 import { StructureLabelPaths, StructureModelPaths } from "../scenes/constants";
 import { StructureSystemUpdate } from "../systems/types";
 import InstancedModel from "./InstancedModel";
@@ -35,7 +35,7 @@ export class StructureManager {
   }
 
   public async loadModels() {
-    const loader = new GLTFLoader();
+    const loader = gltfLoader;
 
     for (const [key, modelPaths] of Object.entries(StructureModelPaths)) {
       const structureType = parseInt(key) as StructureType;

client/src/three/components/StructurePreview.ts

@@ -1,6 +1,7 @@
-import { StructureType, ResourcesIds } from "@bibliothecadao/eternum";
+import { ResourcesIds, StructureType } from "@bibliothecadao/eternum";
 import * as THREE from "three";
 import { GLTFLoader } from "three-stdlib";
+import { gltfLoader } from "../helpers/utils";
 import { PREVIEW_BUILD_COLOR_VALID, StructureModelPaths } from "../scenes/constants";
 
 export class StructurePreview {
@@ -13,7 +14,7 @@ export class StructurePreview {
   }
 
   private loadStructureModels() {
-    const loader = new GLTFLoader();
+    const loader = gltfLoader;
 
     for (const [building, paths] of Object.entries(StructureModelPaths)) {
       const loadPromises = paths.map((path) => {

client/src/three/helpers/utils.ts

@@ -1,6 +1,15 @@
+import { DRACOLoader, GLTFLoader, MeshoptDecoder } from "three-stdlib";
 export function createPausedLabel() {
   const div = document.createElement("div");
   div.classList.add("rounded-md", "bg-brown/50", "text-gold", "p-1", "-translate-x-1/2", "text-xs");
   div.textContent = `⚠️ Production paused`;
   return div;
 }
+
+const dracoLoader = new DRACOLoader();
+dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
+dracoLoader.preload();
+
+export const gltfLoader = new GLTFLoader();
+gltfLoader.setDRACOLoader(dracoLoader);
+gltfLoader.setMeshoptDecoder(MeshoptDecoder());

client/src/three/scenes/HexagonScene.ts

@@ -15,9 +15,9 @@ import { LeftView } from "@/ui/modules/navigation/LeftNavigationModule";
 import { RightView } from "@/ui/modules/navigation/RightNavigationModule";
 import { getWorldPositionForHex } from "@/ui/utils/utils";
 import _, { throttle } from "lodash";
-import { DRACOLoader, GLTFLoader } from "three-stdlib";
 import { BiomeType } from "../components/Biome";
 import InstancedBiome from "../components/InstancedBiome";
+import { gltfLoader } from "../helpers/utils";
 import { SystemManager } from "../systems/SystemManager";
 import { HEX_SIZE, biomeModelPaths } from "./constants";
 
@@ -347,11 +347,7 @@ export abstract class HexagonScene {
   }
 
   loadBiomeModels(maxInstances: number) {
-    const loader = new GLTFLoader();
-    const dracoLoader = new DRACOLoader();
-    dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.5/");
-    dracoLoader.preload();
-    loader.setDRACOLoader(dracoLoader);
+    const loader = gltfLoader;
 
     for (const [biome, path] of Object.entries(biomeModelPaths)) {
       const loadPromise = new Promise<void>((resolve, reject) => {

client/src/three/scenes/Hexception.tsx

@@ -18,13 +18,12 @@ import { getComponentValue } from "@dojoengine/recs";
 import clsx from "clsx";
 import { CSS2DObject } from "three-stdlib";
 import { MapControls } from "three/examples/jsm/controls/MapControls";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
 import { SceneManager } from "../SceneManager";
 import { BIOME_COLORS, Biome, BiomeType } from "../components/Biome";
 import { BuildingPreview } from "../components/BuildingPreview";
 import { SMALL_DETAILS_NAME } from "../components/InstancedModel";
 import { createHexagonShape } from "../geometry/HexagonGeometry";
-import { createPausedLabel } from "../helpers/utils";
+import { createPausedLabel, gltfLoader } from "../helpers/utils";
 import { playBuildingSound } from "../sound/utils";
 import { BuildingSystemUpdate, RealmSystemUpdate } from "../systems/types";
 import { HexagonScene } from "./HexagonScene";
@@ -37,7 +36,7 @@ import {
   structureTypeToBuildingType,
 } from "./constants";
 
-const loader = new GLTFLoader();
+const loader = gltfLoader;
 
 const generateHexPositions = (center: HexPosition, radius: number) => {
   const color = new THREE.Color("gray");