BibliothecaDAO · ponderingdemocritus · Oct 7, 2024 · Sep 24, 2024 · Sep 24, 2024 · Sep 24, 2024
diff --git a/client/index.html b/client/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -81,6 +81,12 @@
   </head>
   <body>
     <div id="root"></div>
+    <canvas
+      id="minimap"
+      width="200"
+      height="112"
+      style="position: absolute; top: 10px; right: 10px; border: 1px solid rgba(0, 0, 0, 0.3);background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; z-index: 1000; display: none;"
+    ></canvas>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/client/src/three/GameRenderer.ts b/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();
     });

diff --git a/client/src/three/SceneManager.ts b/client/src/three/SceneManager.ts
@@ -5,7 +5,7 @@ import { HexagonScene } from "./scenes/HexagonScene";
 export class SceneManager {
   private currentScene: SceneName | undefined = undefined;
   private scenes = new Map<SceneName, HexagonScene>();
-  constructor(private transitionManager: TransitionManager) {}
+  constructor(private transitionManager: TransitionManager) { }
 
   getCurrentScene() {
     return this.currentScene;
@@ -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) {

diff --git a/client/src/three/components/ArmyManager.ts b/client/src/three/components/ArmyManager.ts
@@ -345,6 +345,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

diff --git a/client/src/three/components/Minimap.ts b/client/src/three/components/Minimap.ts
@@ -0,0 +1,278 @@
+import { FELT_CENTER } from "@/ui/config";
+import { getHexForWorldPosition } from "@/ui/utils/utils";
+import { throttle } from "lodash";
+import * as THREE from "three";
+import WorldmapScene from "../scenes/Worldmap";
+import { ArmyManager } from "./ArmyManager";
+import { Biome, BIOME_COLORS } from "./Biome";
+import { StructureManager } from "./StructureManager";
+
+const MINIMAP_CONFIG = {
+  MAP_COLS_WIDTH: 200,
+  MAP_ROWS_HEIGHT: 100,
+  COLORS: {
+    ARMY: "#0000FF",
+    STRUCTURE: "#FF0000",
+    CAMERA: "#FFFFFF",
+  },
+  SIZES: {
+    STRUCTURE: 3,
+    ARMY: 3,
+    CAMERA: {
+      TOP_SIDE_WIDTH_FACTOR: 105,
+      BOTTOM_SIDE_WIDTH_FACTOR: 170,
+      HEIGHT_FACTOR: 13,
+    },
+  },
+  BORDER_WIDTH_PERCENT: 0.10,
+};
+
+class Minimap {
+  private worldmapScene: WorldmapScene;
+  private canvas: HTMLCanvasElement;
+  private context: CanvasRenderingContext2D;
+  private camera: THREE.PerspectiveCamera;
+  private exploredTiles: Map<number, Set<number>>;
+  private structureManager: StructureManager;
+  private armyManager: ArmyManager;
+  private biome: Biome;
+  private displayRange: any = {
+    minCol: 150,
+    maxCol: 350,
+    minRow: 100,
+    maxRow: 200,
+  };
+  private scaleX: number;
+  private scaleY: number;
+  private isDragging: boolean = false;
+  private biomeCache: Map<string, string>;
+  private scaledCoords: Map<string, { scaledCol: number, scaledRow: number }>;
+  private BORDER_WIDTH_PERCENT = MINIMAP_CONFIG.BORDER_WIDTH_PERCENT;
+
+  constructor(
+    worldmapScene: WorldmapScene,
+    exploredTiles: Map<number, Set<number>>,
+    camera: THREE.PerspectiveCamera,
+    structureManager: StructureManager,
+    armyManager: ArmyManager,
+    biome: Biome,
+  ) {
+    this.worldmapScene = worldmapScene;
+    this.canvas = document.getElementById("minimap") as HTMLCanvasElement;
+    this.context = this.canvas.getContext("2d")!;
+    this.structureManager = structureManager;
+    this.exploredTiles = exploredTiles;
+    this.armyManager = armyManager;
+    this.biome = biome;
+    this.camera = camera;
+    this.scaleX = this.canvas.width / (this.displayRange.maxCol - this.displayRange.minCol);
+    this.scaleY = this.canvas.height / (this.displayRange.maxRow - this.displayRange.minRow);
+    this.biomeCache = new Map();
+    this.scaledCoords = new Map();
+    this.computeScaledCoords();
+
+    this.draw = throttle(this.draw, 1000 / 30);
+
+    this.canvas.addEventListener("click", this.handleClick);
+    this.canvas.addEventListener("mousedown", this.handleMouseDown);
+    this.canvas.addEventListener("mousemove", this.handleMouseMove);
+    this.canvas.addEventListener("mouseup", this.handleMouseUp);
+  }
+
+  private computeScaledCoords() {
+    this.scaledCoords.clear();
+    for (let col = this.displayRange.minCol; col <= this.displayRange.maxCol; col++) {
+      for (let row = this.displayRange.minRow; row <= this.displayRange.maxRow; row++) {
+        const scaledCol = (col - this.displayRange.minCol) * this.scaleX;
+        const scaledRow = (row - this.displayRange.minRow) * this.scaleY;
+        this.scaledCoords.set(`${col},${row}`, { scaledCol, scaledRow });
+      }
+    }
+  }
+
+  private getMousePosition(event: MouseEvent) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    const col = Math.floor(x / this.scaleX) + this.displayRange.minCol;
+    const row = Math.floor(y / this.scaleY) + this.displayRange.minRow;
+    return { col, row, x, y };
+  }
+
+  draw() {
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.drawExploredTiles();
+    this.drawStructures();
+    this.drawArmies();
+    this.drawCamera();
+  }
+
+  private drawExploredTiles() {
+    this.exploredTiles.forEach((rows, col) => {
+      rows.forEach((row) => {
+        const cacheKey = `${col},${row}`;
+        let biomeColor;
+
+        if (this.biomeCache.has(cacheKey)) {
+          biomeColor = this.biomeCache.get(cacheKey)!;
+        } else {
+          const biome = this.biome.getBiome(col + FELT_CENTER, row + FELT_CENTER);
+          biomeColor = BIOME_COLORS[biome].getStyle();
+          this.biomeCache.set(cacheKey, biomeColor);
+        }
+        if (this.scaledCoords.has(cacheKey)) {
+          const { scaledCol, scaledRow } = this.scaledCoords.get(cacheKey)!;
+          this.context.fillStyle = biomeColor;
+          this.context.fillRect(scaledCol, scaledRow, this.scaleX, this.scaleY);
+        }
+      });
+    });
+  }
+
+  private drawStructures() {
+    const allStructures = this.structureManager.structures.getStructures();
+
+    for (const [structureType, structures] of allStructures) {
+      structures.forEach((structure) => {
+        const { col, row } = structure.hexCoords;
+        const cacheKey = `${col},${row}`;
+        if (this.scaledCoords.has(cacheKey)) {
+          const { scaledCol, scaledRow } = this.scaledCoords.get(cacheKey)!;
+          this.context.fillStyle = MINIMAP_CONFIG.COLORS.STRUCTURE;
+          this.context.fillRect(scaledCol, scaledRow, MINIMAP_CONFIG.SIZES.STRUCTURE, MINIMAP_CONFIG.SIZES.STRUCTURE);
+        }
+      });
+    }
+  }
+
+  private drawArmies() {
+    const allArmies = this.armyManager.getArmies();
+
+    allArmies.forEach((army) => {
+      const { x: col, y: row } = army.hexCoords.getNormalized();
+      const cacheKey = `${col},${row}`;
+      if (this.scaledCoords.has(cacheKey)) {
+        const { scaledCol, scaledRow } = this.scaledCoords.get(cacheKey)!;
+        this.context.fillStyle = MINIMAP_CONFIG.COLORS.ARMY;
+        this.context.fillRect(scaledCol, scaledRow, MINIMAP_CONFIG.SIZES.ARMY, MINIMAP_CONFIG.SIZES.ARMY);
+      }
+    });
+  }
+
+  drawCamera() {
+    const cameraPosition = this.camera.position;
+    const { col, row } = getHexForWorldPosition(cameraPosition);
+    const cacheKey = `${col},${row}`;
+    if (this.scaledCoords.has(cacheKey)) {
+      const { scaledCol, scaledRow } = this.scaledCoords.get(cacheKey)!;
+
+      this.context.strokeStyle = MINIMAP_CONFIG.COLORS.CAMERA;
+      this.context.beginPath();
+      const topSideWidth = (window.innerWidth / MINIMAP_CONFIG.SIZES.CAMERA.TOP_SIDE_WIDTH_FACTOR) * this.scaleX;
+      const bottomSideWidth = (window.innerWidth / MINIMAP_CONFIG.SIZES.CAMERA.BOTTOM_SIDE_WIDTH_FACTOR) * this.scaleX;
+      const height = MINIMAP_CONFIG.SIZES.CAMERA.HEIGHT_FACTOR * this.scaleY;
+      this.context.moveTo(scaledCol - topSideWidth / 2, scaledRow - height);
+      this.context.lineTo(scaledCol + topSideWidth / 2, scaledRow - height);
+      this.context.lineTo(scaledCol + bottomSideWidth / 2, scaledRow);
+      this.context.lineTo(scaledCol - bottomSideWidth / 2, scaledRow);
+      this.context.lineTo(scaledCol - topSideWidth / 2, scaledRow - height);
+      this.context.closePath();
+      this.context.lineWidth = 1;
+      this.context.stroke();
+    }
+  }
+
+  hideMinimap() {
+    this.canvas.style.display = "none";
+  }
+
+  showMinimap() {
+    this.canvas.style.display = "block";
+  }
+
+  moveMinimapCenterToUrlLocation() {
+    const url = new URL(window.location.href);
+    const col = parseInt(url.searchParams.get("col") || "0");
+    const row = parseInt(url.searchParams.get("row") || "0");
-    const col = parseInt(url.searchParams.get("col") || "0");
-    const row = parseInt(url.searchParams.get("row") || "0");
+    let col, row;
+    try {
+      col = parseInt(url.searchParams.get("col") || "0");
+      row = parseInt(url.searchParams.get("row") || "0");
+      if (isNaN(col) || isNaN(row)) {
+        throw new Error("Invalid URL parameters");
+      }
+    } catch (error) {
+      console.error("Error parsing URL parameters:", error);
+      col = 0;
+      row = 0;
+    }
-    const col = parseInt(url.searchParams.get("col") || "0");
-    const row = parseInt(url.searchParams.get("row") || "0");
+    let col, row;
+    try {
+      col = parseInt(url.searchParams.get("col") || "0");
+      row = parseInt(url.searchParams.get("row") || "0");
+      if (isNaN(col) || isNaN(row)) {
+        throw new Error("Invalid URL parameters");
+      }
+    } catch (error) {
+      console.error("Error parsing URL parameters:", error);
+      col = 0;
+      row = 0;
+    }
+    this.displayRange.minCol = col - MINIMAP_CONFIG.MAP_COLS_WIDTH / 2;
+    this.displayRange.maxCol = col + MINIMAP_CONFIG.MAP_COLS_WIDTH / 2;
+    this.displayRange.minRow = row - MINIMAP_CONFIG.MAP_ROWS_HEIGHT / 2;
+    this.displayRange.maxRow = row + MINIMAP_CONFIG.MAP_ROWS_HEIGHT / 2;
+    this.computeScaledCoords();
+  }
+
+  update() {
+    this.draw();
+  }
+
+  private handleMouseDown = (event: MouseEvent) => {
+    this.isDragging = true;
+    this.moveCamera(event);
+  }
+
+  private handleMouseMove = (event: MouseEvent) => {
+    if (this.isDragging) {
+      this.moveCamera(event);
+    }
+  }
+
+  private handleMouseUp = () => {
+    this.isDragging = false;
+  }
+
+  private moveCamera(event: MouseEvent) {
+    const { col, row } = this.getMousePosition(event);
+    this.worldmapScene.moveCameraToColRow(col, row, 0);
+  }
+
+  private moveMapRange(direction: string) {
+    const colShift = (this.displayRange.maxCol - this.displayRange.minCol) / 4;
+    const rowShift = (this.displayRange.maxRow - this.displayRange.minRow) / 4;
+
+    switch (direction) {
+      case 'left':
+        this.displayRange.minCol -= colShift;
+        this.displayRange.maxCol -= colShift;
+        break;
+      case 'right':
+        this.displayRange.minCol += colShift;
+        this.displayRange.maxCol += colShift;
+        break;
+      case 'top':
+        this.displayRange.minRow -= rowShift;
+        this.displayRange.maxRow -= rowShift;
+        break;
+      case 'bottom':
+        this.displayRange.minRow += rowShift;
+        this.displayRange.maxRow += rowShift;
+        break;
+      default:
+        return;
+    }
+
+    this.scaleX = this.canvas.width / (this.displayRange.maxCol - this.displayRange.minCol);
+    this.scaleY = this.canvas.height / (this.displayRange.maxRow - this.displayRange.minRow);
+    this.computeScaledCoords();
+  }
+
+  handleClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    const { col, row, x, y } = this.getMousePosition(event);
+
+    const borderWidthX = this.canvas.width * this.BORDER_WIDTH_PERCENT;
+    const borderWidthY = this.canvas.height * this.BORDER_WIDTH_PERCENT;
+
+    if (x < borderWidthX) {
+      this.moveMapRange('left');
+    } else if (x > this.canvas.width - borderWidthX) {
+      this.moveMapRange('right');
+    } else if (y < borderWidthY) {
+      this.moveMapRange('top');
+    } else if (y > this.canvas.height - borderWidthY) {
+      this.moveMapRange('bottom');
+    }
+    this.worldmapScene.moveCameraToColRow(col, row, 0);
+  }
+}
+
+export default Minimap;
diff --git a/client/src/three/scenes/HexagonScene.ts b/client/src/three/scenes/HexagonScene.ts
@@ -389,7 +389,7 @@ export abstract class HexagonScene {
     mesh.position.set(x, -0.05, z);
     mesh.receiveShadow = true;
     // disable raycast
-    mesh.raycast = () => {};
+    mesh.raycast = () => { };
 
     this.scene.add(mesh);
   }
@@ -428,4 +428,5 @@ export abstract class HexagonScene {
   protected abstract onHexagonRightClick(hexCoords: HexPosition): void;
   public abstract setup(): void;
   public abstract moveCameraToURLLocation(): void;
+  public abstract onSwitchOff(): void;
 }
diff --git a/client/src/three/scenes/Hexception.ts b/client/src/three/scenes/Hexception.ts
@@ -178,7 +178,7 @@ export default class HexceptionScene extends HexagonScene {
       this.modelLoadPromises.push(loadPromise);
     }
 
-    Promise.all(this.modelLoadPromises).then(() => {});
+    Promise.all(this.modelLoadPromises).then(() => { });
   }
 
   setup() {
@@ -218,6 +218,8 @@ export default class HexceptionScene extends HexagonScene {
     this.moveCameraToURLLocation();
   }
 
+  onSwitchOff() { }
+
   protected onHexagonClick(hexCoords: HexPosition | null): void {
     if (hexCoords === null) return;
     const normalizedCoords = { col: hexCoords.col, row: hexCoords.row };
@@ -269,8 +271,8 @@ export default class HexceptionScene extends HexagonScene {
       this.buildingPreview?.resetBuildingColor();
     }
   }
-  protected onHexagonRightClick(): void {}
-  protected onHexagonDoubleClick(): void {}
+  protected onHexagonRightClick(): void { }
+  protected onHexagonDoubleClick(): void { }
 
   public moveCameraToURLLocation() {
     this.moveCameraToColRow(10, 10, 0);