Merge pull request #9 from mstop4/chocolate-bnuuy

2.0.0 - Add support for multiple worlds

Author: mstop4

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "mc-3d-path-map",
   "private": true,
-  "version": "1.1.1",
+  "version": "2.0.0",
   "type": "module",
   "scripts": {
     "prepare": "husky install",
@@ -13,24 +13,24 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/colorbrewer": "^1.0.30",
-    "@types/dat.gui": "^0.7.10",
-    "@types/three": "^0.156.0",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.51.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "@types/colorbrewer": "^1.0.32",
+    "@types/dat.gui": "^0.7.13",
+    "@types/three": "^0.166.0",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3"
   },
   "dependencies": {
-    "colorbrewer": "^1.5.3",
+    "colorbrewer": "^1.5.6",
     "dat.gui": "^0.7.9",
     "simplify-3d": "^1.0.0",
-    "three": "^0.157.0"
+    "three": "^0.164.1"
   }
 }

package.json

@@ -1,3 +1,10 @@
+import dataManifest from '../../data/manifest.json';
+
+export const allWorldKeys: Record<string, string> = {};
+for (const world of dataManifest) {
+  allWorldKeys[world.id] = world.name;
+}
+
 export const allColourModeKeys: Record<string, string> = {
   default: 'Full',
   cbf: 'Colourblind-friendly',

src/components/objects/gui.config.ts

@@ -1,8 +1,9 @@
 import { type Line2 } from 'three/addons/lines/Line2.js';
 import { type CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
 import { GUI } from 'dat.gui';
-import { getMapObjects, toggleDeprecatedDoors } from '../objects/mapObjects';
+import { toggleDeprecatedDoors } from '../objects/mapObjects';
 import { cameraControls, loadCameraState } from '../setup/camera';
+import { getCurrentWorld, getWorld, setCurrentWorld } from '../setup/mapScene';
 import { hideLegend, showLegend, switchLegend } from './legend';
 import {
   allColourModeKeys,
@@ -12,23 +13,34 @@ import {
   allLabelFilters,
   activeLabelFilters,
   labelFiltersAvailable,
+  allWorldKeys,
 } from './gui.config';
+import { startingWorldKey } from '../../config/urlParamsHelper';
+import { WorldData } from '../setup/mapScene.types';
 
 let gui: GUI;
+const sceneSwitchDelay = 1000 / 60;
 
 const options = {
   visible: {
     labelVisibility: true,
     deprecatedPaths: true,
     legend: true,
   },
+  currentWorld: allWorldKeys[startingWorldKey],
   colourMode: activeColourModes[colourModesAvailable[0]],
   cameraPosition: allCameraPositionsKeys.isometric,
   labelFilter: activeLabelFilters[labelFiltersAvailable[0]],
 };
 
 export function setupGUI() {
   gui = new GUI();
+
+  gui
+    .add(options, 'currentWorld', Object.values(allWorldKeys))
+    .name('World')
+    .onChange(changeWorld);
+
   gui
     .add(options, 'colourMode', Object.values(activeColourModes))
     .name('Colour Mode')
@@ -60,35 +72,43 @@ export function setupGUI() {
     .onChange(toggleLegend);
 }
 
-function _toggleLabelVisibility(labels: CSS2DObject[]) {
+function _toggleLabelVisibility(labels: CSS2DObject[], visibility: boolean) {
   for (const label of labels) {
-    label.visible = options.visible.labelVisibility;
+    label.visible = visibility;
   }
 }
 
+function _toggleWorldLabelVisibility(world: WorldData, visibility: boolean) {
+  const { roomLabels, pathLabels, portalLabels, doorLabels } = world;
+
+  _toggleLabelVisibility(roomLabels, visibility);
+  _toggleLabelVisibility(pathLabels, visibility);
+  _toggleLabelVisibility(portalLabels, visibility);
+  _toggleLabelVisibility(doorLabels, visibility);
+}
+
 function toggleAllLabelVisibility() {
-  const { roomLabels, pathLabels, portalLabels, doorLabels } = getMapObjects();
+  const world = getCurrentWorld();
+  const { labelVisibility } = options.visible;
 
-  _toggleLabelVisibility(roomLabels);
-  _toggleLabelVisibility(pathLabels);
-  _toggleLabelVisibility(portalLabels);
-  _toggleLabelVisibility(doorLabels);
+  _toggleWorldLabelVisibility(world, labelVisibility);
 }
 
 function toggleDeprecatedPaths() {
-  const { pathObjects } = getMapObjects();
+  const world = getCurrentWorld();
+  const { pathObjects } = world;
 
   for (const path of pathObjects) {
     if (path.userData.deprecated) {
       path.visible = options.visible.deprecatedPaths;
     }
   }
 
-  toggleDeprecatedDoors(options.visible.deprecatedPaths);
+  toggleDeprecatedDoors(world, options.visible.deprecatedPaths);
 }
 
 function changeColourMode() {
-  const { pathObjects } = getMapObjects();
+  const { pathObjects } = getCurrentWorld();
   let materialKey;
 
   switch (options.colourMode) {
@@ -126,7 +146,7 @@ function changeColourMode() {
 }
 
 function changeLabelFilter() {
-  const { portalLabels, roomLabels } = getMapObjects();
+  const { portalLabels, roomLabels } = getCurrentWorld();
 
   for (const label of portalLabels) {
     label.element.className = 'portalLabel';
@@ -189,6 +209,34 @@ function changeCameraPosition() {
   }
 }
 
+function changeWorld() {
+  // Hide labels from current world
+  const currentWorld = getCurrentWorld();
+  _toggleWorldLabelVisibility(currentWorld, false);
+
+  const worldId = Object.keys(allWorldKeys).find(
+    id => allWorldKeys[id] === options.currentWorld,
+  );
+  if (worldId !== undefined) {
+    // Can't hide labels from previous world on the same frame as switching to new world
+    // Delay switching to new world slightly to prevent labels from previous world appearing in new world
+    setTimeout(() => {
+      setCurrentWorld(worldId);
+
+      // Update state of labels of new world
+      const { labelVisibility } = options.visible;
+      const newWorld = getWorld(worldId);
+      _toggleWorldLabelVisibility(newWorld, labelVisibility);
+
+      // Update new world according to GUI settings
+      changeColourMode();
+      changeCameraPosition();
+      changeLabelFilter();
+      toggleDeprecatedPaths();
+    }, sceneSwitchDelay);
+  }
+}
+
 function toggleLegend() {
   if (options.visible.legend) {
     showLegend();
@@ -198,6 +246,7 @@ function toggleLegend() {
 }
 
 function toggleCameraPostion(index: number, autoRotate: boolean) {
-  loadCameraState(index);
+  const world = getCurrentWorld();
+  loadCameraState(world, index);
   cameraControls.autoRotate = autoRotate;
 }