[client] Add Minimap Component to Display Worldmap Overview

client/src/hooks/store/useUIStore.tsx

@@ -6,11 +6,11 @@ import React from "react";
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { BuildModeStore, createBuildModeStoreSlice } from "./_buildModeStore";
-import { createPopupsSlice, PopupsStore } from "./_popupsStore";
-import { createThreeStoreSlice, ThreeStore } from "./_threeStore";
+import { PopupsStore, createPopupsSlice } from "./_popupsStore";
+import { ThreeStore, createThreeStoreSlice } from "./_threeStore";
 import { BattleViewInfo } from "./types";
 import { BlockchainStore, createBlockchainStore } from "./useBlockchainStore";
-import { createRealmStoreSlice, RealmStore } from "./useRealmStore";
+import { RealmStore, createRealmStoreSlice } from "./useRealmStore";
 
 interface UIStore {
   theme: string;
@@ -53,6 +53,8 @@ interface UIStore {
   setLeftNavigationView: (view: LeftView) => void;
   rightNavigationView: RightView;
   setRightNavigationView: (view: RightView) => void;
+  showMinimap: boolean;
+  setShowMinimap: (show: boolean) => void;
   selectedPlayer: ContractAddress | null;
   setSelectedPlayer: (player: ContractAddress | null) => void;
   tabs: Tab[];
@@ -112,6 +114,8 @@ const useUIStore = create(
     setLeftNavigationView: (view: LeftView) => set({ leftNavigationView: view }),
     rightNavigationView: RightView.None,
     setRightNavigationView: (view: RightView) => set({ rightNavigationView: view }),
+    showMinimap: false,
+    setShowMinimap: (show: boolean) => set({ showMinimap: show }),
     selectedPlayer: null,
     setSelectedPlayer: (player: ContractAddress | null) => set({ selectedPlayer: player }),
     tabs: [],

client/src/index.css

@@ -208,7 +208,7 @@ h6 {
 
 #root {
   position: relative;
-  z-index: 2;
+  z-index: 3;
 }
 
 canvas {

client/src/three/GameRenderer.ts

@@ -214,7 +214,6 @@ export default class GameRenderer {
     this.hudScene = new HUDScene(this.sceneManager, this.controls);
 
     this.renderModels();
-
     // Init animation
     this.animate();
   }
@@ -321,6 +320,7 @@ export default class GameRenderer {
     this.renderer.render(this.hudScene.getScene(), this.hudScene.getCamera());
     this.labelRenderer.render(this.hudScene.getScene(), this.hudScene.getCamera());
 
+    // Update the minimap
     requestAnimationFrame(() => {
       this.animate();
     });

client/src/three/SceneManager.ts

@@ -26,6 +26,10 @@ export class SceneManager {
   switchScene(sceneName: SceneName) {
     const scene = this.scenes.get(sceneName);
     if (scene) {
+      const previousScene = this.scenes.get(this.currentScene!);
+      if (previousScene) {
+        previousScene.onSwitchOff();
+      }
       this.transitionManager.fadeOut(() => {
         this._updateCurrentScene(sceneName);
         if (scene.setup) {

client/src/three/components/ArmyManager.ts

@@ -347,6 +347,10 @@ export class ArmyManager {
     this.cachedChunks.clear();
   }
 
+  public getArmies() {
+    return Array.from(this.armies.values());
+  }
+
   update(deltaTime: number) {
     let needsBoundingUpdate = false;
     const movementSpeed = 1.25; // Constant movement speed