Refactor finished

assets/scripts/KaplayMap/events.js

@@ -1,44 +1,57 @@
 export class EventManager {
-  map;
+  mainmanager;
-  ui;
-  gameobj;
-  floormanager;
 
-  events = new Map([]);
+  #events = new Map([]);
-  #currentEvent = "";
 
-  constructor(map, ui, gameobj) {
+  constructor() {}
-    this.map = map;
-    this.ui = ui;
-    this.ui.eventmanager = this;
-    this.gameobj = gameobj;
-  }
 
-  async getEvents(lang, floor) {
+  async getEvents() {
-    let allEventsReqSend = fetch(`/data/${lang}/events/${floor}`);
+    const currentLocalization = this.mainmanager.getCurrentLangCode();
+    const currentFloor = this.mainmanager.getCurrentFocus("floor");
 
-    this.ui.setLoading(true);
+    let allEventsReqSend = fetch(
+      `/data/${currentLocalization}/events/${currentFloor}`
+    );
 
     let allEventsReq = await allEventsReqSend;
     let allEvents;
     if (allEventsReq.ok) allEvents = await allEventsReq.json();
 
-    this.events.clear();
+    this.#events.clear();
 
-    allEvents.forEach((event) => this.events.set(event.id, event));
+    allEvents.forEach((event) => this.#events.set(event.id, event));
-
-    this.ui.setLoading(false);
   }
 
   setCurrentEvent(id) {
-    if (id == null) this.#currentEvent = id;
+    if (id == null) this.mainmanager.setCurrentFocus("event", id);
     else {
-      const event = this.events.get(id);
+      const event = this.#events.get(id);
-      if (event != null) this.#currentEvent = event;
+      if (event != null) this.mainmanager.setCurrentFocus("event", id);
+      else throw "Event does not exist";
     }
   }
 
-  get currentEvent() {
+  get currentRoomEvents() {
-    return this.#currentEvent;
+    const currentFocus = this.mainmanager.getCurrentFocus("room");
+    let currentFloorRooms = new Map([]);
+    this.#events.forEach((v, k) => {
+      if (k.startsWith(currentFocus)) currentFloorRooms.set(k, v);
+    });
+    return currentFloorRooms;
   }
-}
+
+  get allEvents() {
+    return this.#events;
+  }
+
+  get currentEventId() {
+    return this.mainmanager.getCurrentFocus("event");
+  }
+
+  get currentEvent() {
+    const currentEvent = this.#events.get(
+      this.mainmanager.getCurrentFocus("event")
+    );
+    return currentEvent;
+  }
+}

assets/scripts/KaplayMap/floors.js

@@ -1,45 +1,34 @@
 export class FloorManager {
-  map;
+  mainmanager;
-  ui;
-  gameobj;
-  events;
 
-  floors = new Map([]);
+  #floors = new Map([]);
-  rooms = new Map([]);
+  #rooms = new Map([]);
-  #currentFloor = "";
-  #currentRoom = "";
 
-  constructor(map, ui, gameobj, events) {
+  constructor() {}
-    this.map = map;
-    this.ui = ui;
-    this.ui.floormanager = this;
-    this.gameobj = gameobj;
-    this.events = events;
-    this.events.floormanager = this;
-  }
 
-  async getFloors(lang) {
+  async getFloors() {
-    let allFloorsReqSend = fetch(`/data/${lang}/map`);
+    const currentLocalization = this.mainmanager.getCurrentLangCode();
 
-    this.ui.setLoading(true);
+    let allFloorsReqSend = fetch(`/data/${currentLocalization}/floors`);
 
     let allFloorsReq = await allFloorsReqSend;
     let allFloors;
     if (allFloorsReq.ok) allFloors = await allFloorsReq.json();
 
-    allFloors.forEach((floor) => this.floors.set(floor.id, floor));
+    allFloors.forEach((floor) => this.#floors.set(floor.id, floor));
-
-    this.ui.setLoading(false);
   }
 
-  async getRooms(lang, floor) {
+  async getRooms() {
-    const curRoom = this.rooms.get(id);
+    const currentLocalization = this.mainmanager.getCurrentLangCode();
+    const currentFloor = this.mainmanager.getCurrentFocus("floor");
+
+    const curRoom = this.#rooms.get(currentFloor);
 
     if (curRoom != null) return curRoom;
 
-    let allRoomsReqSend = fetch(`/data/${lang}/map/${floor}`);
+    let allRoomsReqSend = fetch(
-
+      `/data/${currentLocalization}/rooms/${currentFloor}`
-    this.ui.setLoading(true);
+    );
 
     let allRoomsReq = await allRoomsReqSend;
     let allRooms;
@@ -48,29 +37,58 @@ export class FloorManager {
     const roomMap = new Map([]);
     allRooms.forEach((room) => roomMap.set(room.id, room));
 
-    this.rooms.set(floor, roomMap);
+    this.#rooms.set(currentFloor, roomMap);
-
-    this.ui.setLoading(false);
   }
 
   setCurrentFloor(id) {
-    const floor = this.floors.get(id);
+    const floor = this.#floors.get(id);
-    if (floor != null) this.#currentFloor = id;
+    if (floor != null) this.mainmanager.setCurrentFocus("floor", id);
+    else throw "Floor does not exist";
+  }
+
+  get allFloors() {
+    return this.#floors;
+  }
+
+  get currentFloorId() {
+    return this.mainmanager.getCurrentFocus("floor");
   }
 
   get currentFloor() {
-    return this.#currentFloor;
+    const currentFloor = this.#floors.get(
+      this.mainmanager.getCurrentFocus("floor")
+    );
+    return currentFloor;
+  }
+
+  get currentFloorRooms() {
+    const currentFloorRooms = this.#rooms.get(
+      this.mainmanager.getCurrentFocus("floor")
+    );
+    return currentFloorRooms;
   }
 
   setCurrentRoom(id) {
-    if (id == null) this.#currentRoom = id;
+    if (id == null) this.mainmanager.setCurrentFocus("room", id);
     else {
-      const room = this.rooms.get(this.#currentFloor).get(room);
+      const room = this.currentFloorRooms.get(id);
-      if (room != null) this.#currentRoom = id;
+      if (room != null) this.mainmanager.setCurrentFocus("room", id);
+      else throw "Room does not exist";
     }
   }
 
+  get allRooms() {
+    return this.#rooms;
+  }
+
+  get currentRoomId() {
+    return this.mainmanager.getCurrentFocus("room");
+  }
+
   get currentRoom() {
-    return this.#currentRoom;
+    const currentFloor = this.currentFloorRooms.get(
+      this.mainmanager.getCurrentFocus("room")
+    );
+    return currentFloor;
   }
 }

assets/scripts/KaplayMap/gameobj.js

@@ -5,23 +5,23 @@ export class GameObjManager {
   };
   map;
 
+  mainmanager;
+
   floorObject;
   roomObjects = new Map([]);
 
-  constructor(map) {
+  constructor(map, opts) {
     this.map = map;
-  }
-
-  generateFloor(opts) {
     this.opts = {
       ...this.opts,
       opts,
     };
+  }
+
+  generateFloor() {
     if (this.floorObject) this.floorObject.destroy();
 
-    // const currentFloor = this.floormanager.floors.get(
+    const currentFloor = this.mainmanager.getCurrentFocusObject("floor");
-    //   this.floormanager.currentFloor
-    // );
 
     const polygon = new this.map.kp.Polygon(
       currentFloor.poly.map(([x, y]) => this.map.kp.vec2(x, y))
@@ -31,7 +31,6 @@ export class GameObjManager {
       this.map.kp.polygon(polygon.pts),
       this.map.kp.outline(1, this.map.kp.BLACK),
       this.map.kp.color(this.map.kp.Color.fromHex("303030")),
-      // this.map.kp.area(),
       this.map.kp.pos(),
       this.map.kp.z(5),
     ]);
@@ -57,11 +56,6 @@ export class GameObjManager {
     });
 
     this.map.kp.add(this.floorObject);
-
-    this.map.zoomToAbs(
-      this.map.opts.minZoomLevel + this.opts.floorMinZoom,
-      bounds.center()
-    );
   }
 
   zoomToFloor() {
@@ -91,9 +85,7 @@ export class GameObjManager {
       this.roomObjects.clear();
     }
 
-    // const currentRooms = this.floormanager.rooms.get(
+    const currentRooms = this.mainmanager.getAllFocusObject("room");
-    //   this.floormanager.currentFloor
-    // );
 
     currentRooms.forEach((room) => {
       const polygon = new this.map.kp.Polygon(
@@ -138,7 +130,7 @@ export class GameObjManager {
             obj.startClickPosition &&
             obj.startClickPosition.dist(endClickPosition) < obj.clickForgiveness
           ) {
-            // this.floormanager.setCurrentRoom(room.id);
+            window.location.hash = room.id;
           }
           obj.color = this.map.kp.Color.fromHex("505050");
           this.map.clearMouseMode();

assets/scripts/KaplayMap/lang.js

@@ -1,17 +1,17 @@
 import localization from "./localization.js";
 
 export class LangManager {
-  lang;
+  #lang;
 
   constructor(lang) {
-    this.lang = lang;
+    this.#lang = lang;
   }
 
-  getCurrentLocalization() {
+  get currentLocalization() {
-    return localization.get(this.lang);
+    return localization.get(this.#lang);
   }
 
-  getLangCode() {
+  get langCode() {
-    return this.lang;
+    return this.#lang;
   }
 }

assets/scripts/KaplayMap/map.js

@@ -33,6 +33,9 @@ export class KaplayMap {
   startFingerCenterPos = null;
   startFingerZoomLevel = null;
 
+  // Map event listener
+  events;
+
   constructor(kp, opts) {
     this.kp = kp;
     this.opts = {
@@ -40,8 +43,11 @@ export class KaplayMap {
       ...opts,
     };
 
+    this.events = new EventTarget();
+
     this.zoomLevel_NoTween = this.opts.minZoomLevel;
     this.kp.camPos(0);
+    this.camBounds = new this.kp.Rect(this.kp.vec2(-1), 2, 2);
 
     this.kp.onScroll((delta) => {
       const scrollDist = -delta.y / 120;
@@ -198,6 +204,12 @@ export class KaplayMap {
     });
   }
 
+  dispatchEvent(eventName, data) {
+    const event = new CustomEvent(eventName, { detail: data });
+
+    this.events.dispatchEvent(event);
+  }
+
   initGrid() {
     const grid = this.kp.loadSprite(null, "/assets/images/grid.png");
 
@@ -210,7 +222,7 @@ export class KaplayMap {
         height: this.kp.height() + 200,
         anchor: "center",
         pos: this.kp.vec2(
-          Math.floor(this.kp.camPos().x / 100) * 100 + 50.5,
+          Math.floor(this.kp.camPos().x / 100) * 100 + 0.5,
           Math.floor(this.kp.camPos().y / 100) * 100 + 0.5
         ),
       });
@@ -268,13 +280,28 @@ export class KaplayMap {
     return this.#zoomLevel;
   }
 
+  zoomIn() {
+    this.zoomLevel += 1;
+  }
+
+  zoomOut() {
+    this.zoomLevel -= 1;
+  }
+
   set zoomLevel(newZoom) {
     const cameraZoom = this.kp.camScale().y;
 
     let addLinear = newZoom;
 
-    if (addLinear < this.opts.minZoomLevel) addLinear = this.opts.minZoomLevel;
+    if (addLinear <= this.opts.minZoomLevel) {
-    if (addLinear > this.opts.maxZoomLevel) addLinear = this.opts.maxZoomLevel;
+      addLinear = this.opts.minZoomLevel;
+      this.dispatchEvent("zoomMin");
+    } else if (addLinear >= this.opts.maxZoomLevel) {
+      addLinear = this.opts.maxZoomLevel;
+      this.dispatchEvent("zoomMax");
+    } else {
+      this.dispatchEvent("zoom");
+    }
 
     let linearToLog = Math.pow(2, addLinear);
     this.#zoomLevel = addLinear;
@@ -298,8 +325,15 @@ export class KaplayMap {
   set zoomLevel_NoTween(newZoom) {
     let addLinear = newZoom;
 
-    if (addLinear < this.opts.minZoomLevel) addLinear = this.opts.minZoomLevel;
+    if (addLinear <= this.opts.minZoomLevel) {
-    if (addLinear > this.opts.maxZoomLevel) addLinear = this.opts.maxZoomLevel;
+      addLinear = this.opts.minZoomLevel;
+      this.dispatchEvent("zoomMin");
+    } else if (addLinear >= this.opts.maxZoomLevel) {
+      addLinear = this.opts.maxZoomLevel;
+      this.dispatchEvent("zoomMax");
+    } else {
+      this.dispatchEvent("zoom");
+    }
 
     let linearToLog = Math.pow(2, addLinear);
     this.#zoomLevel = addLinear;

assets/scripts/KaplayMap/mapper.js

@@ -0,0 +1,307 @@
+import { EventManager } from "./events.js";
+import { FloorManager } from "./floors.js";
+import { GameObjManager } from "./gameobj.js";
+import { LangManager } from "./lang.js";
+import { UIManager } from "./ui.js";
+
+export class EventMapperManager {
+  #currentFocus = [null, null, null];
+
+  map;
+  langmanager;
+  eventmanager;
+  floormanager;
+  uimanager;
+  gameobjmanager;
+
+  constructor(map, mapUi) {
+    this.map = map;
+
+    this.langmanager = new LangManager("en-US");
+    this.langmanager.mainmanager = this;
+
+    this.eventmanager = new EventManager();
+    this.eventmanager.mainmanager = this;
+
+    this.floormanager = new FloorManager();
+    this.floormanager.mainmanager = this;
+
+    this.uimanager = new UIManager(mapUi);
+    this.uimanager.mainmanager = this;
+
+    this.gameobjmanager = new GameObjManager(this.map, {});
+    this.gameobjmanager.mainmanager = this;
+  }
+
+  // Init
+
+  async load() {
+    this.uimanager.setLoading(true);
+
+    await this.floormanager.getFloors();
+
+    this.uimanager.mainmanagerInit();
+
+    this.uimanager.__updateFloorsHard();
+
+    this.uimanager.setLoading(false);
+
+    this.uimanager.setLoading(true);
+
+    window.addEventListener("hashchange", () => this.hashchange());
+
+    await this.hashchange();
+
+    this.uimanager.setLoading(false);
+  }
+
+  async hashchange() {
+    const prevID = this.#currentFocus;
+
+    let hash = location.hash;
+    if (hash.includes("#")) hash = hash.replace("#", "");
+
+    const floorFocus = this.convertIdFocus(hash, "floor");
+    const roomFocus = this.convertIdFocus(hash, "room");
+    const eventFocus = this.convertIdFocus(hash, "event");
+
+    if (floorFocus != this.convertFocus(prevID, "floor"))
+      await this.selectFloor(floorFocus);
+    if (roomFocus != this.convertFocus(prevID, "room"))
+      await this.selectRoom(roomFocus);
+    if (eventFocus != this.convertFocus(prevID, "event"))
+      await this.selectEvent(eventFocus);
+  }
+
+  async selectFloor(id) {
+    this.floormanager.setCurrentFloor(id);
+
+    this.uimanager.__updateFloorsSoft();
+
+    this.uimanager.__updateEventsSoft();
+
+    this.gameobjmanager.generateFloor();
+
+    this.gameobjmanager.zoomToFloor();
+
+    this.uimanager.setLoading(true);
+
+    await this.floormanager.getRooms();
+
+    this.gameobjmanager.generateRooms();
+
+    this.uimanager.setLoading(false);
+
+    this.uimanager.setLoading(true);
+
+    await this.eventmanager.getEvents();
+
+    this.uimanager.updateEvents();
+
+    if (!this.uimanager.getEventsEmpty())
+      this.uimanager.setEventsMinimized(false);
+
+    this.uimanager.setLoading(false);
+  }
+
+  async selectRoom(id) {
+    this.floormanager.setCurrentRoom(id);
+
+    if (id == null) this.gameobjmanager.zoomToFloor();
+    else this.gameobjmanager.zoomToRoom(id);
+
+    this.uimanager.updateEvents();
+
+    if (!this.uimanager.getEventsEmpty())
+      this.uimanager.setEventsMinimized(false);
+    this.uimanager.setEventsInspector(false);
+  }
+
+  async selectEvent(id) {
+    this.eventmanager.setCurrentEvent(id);
+
+    if (id != null) {
+      this.gameobjmanager.zoomToRoom(this.convertIdFocus(id, "room"));
+
+      this.uimanager.updateInspector();
+    }
+
+    this.uimanager.setEventsInspector(id != null);
+  }
+
+  // Focus
+
+  convertFocus(id, focus) {
+    let res;
+    switch (focus) {
+      case "floor":
+        return id.slice(0, 1).toString();
+      case "room":
+        res = id.slice(0, 2);
+        if (res.length < 2) return null;
+        return res.filter(Boolean).join("_");
+      case "event":
+        res = id.slice(0, 3);
+        if (res.length < 3) return null;
+        return res.join("_");
+    }
+  }
+
+  convertIdFocus(id, focus) {
+    const focusFromId = id.split("_");
+    let res;
+    switch (focus) {
+      case "floor":
+        return focusFromId.slice(0, 1).toString();
+      case "room":
+        res = focusFromId.slice(0, 2);
+        if (res.length < 2) return null;
+        return res.filter(Boolean).join("_");
+      case "event":
+        res = focusFromId.slice(0, 3);
+        if (res.length < 3) return null;
+        return res.join("_");
+    }
+  }
+
+  splitIdFocus(id, focus) {
+    const focusFromId = id.split("_");
+    switch (focus) {
+      case "floor":
+        return focusFromId.slice(0, 1);
+      case "room":
+        return focusFromId.slice(0, 2);
+      case "event":
+        return focusFromId;
+    }
+  }
+
+  setCurrentFocus(focus, id) {
+    if (id == null) {
+      switch (focus) {
+        case "floor":
+          this.#currentFocus[0] = id;
+          break;
+        case "room":
+          this.#currentFocus[1] = id;
+          break;
+        case "event":
+          this.#currentFocus[2] = id;
+          break;
+      }
+    } else this.#currentFocus = this.splitIdFocus(id, focus);
+  }
+
+  getCurrentFocus(focus) {
+    switch (focus) {
+      case "floor":
+        return this.#currentFocus.slice(0, 1).toString();
+      case "room":
+        return this.#currentFocus.slice(0, 2).filter(Boolean).join("_");
+      case "event":
+        return this.currentFocusId;
+    }
+  }
+
+  getIsFocused(focus) {
+    switch (focus) {
+      case "floor":
+        return this.#currentFocus[0] != null;
+      case "room":
+        return this.#currentFocus[1] != null;
+      case "event":
+        return this.#currentFocus[2] != null;
+    }
+  }
+
+  set currentFocusId(id) {
+    this.#currentFocus = id.split("_");
+  }
+
+  get currentFocusId() {
+    return this.#currentFocus.filter(Boolean).join("_");
+  }
+
+  // IMC shorthand (focus)
+
+  getAllFocusObject(focus) {
+    switch (focus) {
+      case "floor":
+        return this.floormanager.allFloors;
+      case "room":
+        return this.floormanager.currentFloorRooms;
+      case "event":
+        return this.eventmanager.currentRoomEvents;
+    }
+  }
+
+  getCurrentFocusObject(focus) {
+    switch (focus) {
+      case "floor":
+        return this.floormanager.currentFloor;
+      case "room":
+        return this.floormanager.currentRoom;
+      case "event":
+        return this.eventmanager.currentEvent;
+    }
+  }
+
+  getCurrentLocalization() {
+    return this.langmanager.currentLocalization;
+  }
+
+  getCurrentLangCode() {
+    return this.langmanager.langCode;
+  }
+
+  // Inter-manager comms
+
+  // I don't know if this is Horrible or Fine
+  addManagerEventListener(manager, event, callback) {
+    switch (manager) {
+      case "map":
+        return this.map.events.addEventListener(event, callback);
+    }
+  }
+
+  removeManagerEventListener(manager, event, callback) {
+    switch (manager) {
+      case "map":
+        return this.map.events.removeEventListener(event, callback);
+    }
+  }
+
+  callManagerFunction(manager, func, ...args) {
+    switch (manager) {
+      case "map":
+        return this.map[func](...args);
+      case "lang":
+        return this.langmanager[func](...args);
+      case "event":
+        return this.eventmanager[func](...args);
+      case "floor":
+        return this.floormanager[func](...args);
+      case "ui":
+        return this.uimanager[func](...args);
+      case "gameobj":
+        return this.gameobjmanager[func](...args);
+    }
+  }
+
+  getManagerVariable(manager, variable) {
+    switch (manager) {
+      case "map":
+        return this.map[variable];
+      case "lang":
+        return this.langmanager[variable];
+      case "event":
+        return this.eventmanager[variable];
+      case "floor":
+        return this.floormanager[variable];
+      case "ui":
+        return this.uimanager[variable];
+      case "gameobj":
+        return this.gameobjmanager[variable];
+    }
+  }
+}

assets/scripts/KaplayMap/ui.js

@@ -6,18 +6,16 @@ import {
 
 export class UIManager {
   ui;
-  map;
+  mainmanager;
-  floormanager;
-  eventmanager;
 
   uiElements = {};
   floorsEmpty = true;
-  eventsEmpty = true;
 
-  constructor(ui, map) {
+  constructor(ui) {
     this.ui = ui;
-    this.map = map;
+  }
 
+  mainmanagerInit() {
     this.__initUIElements();
 
     this.__initZoom();
@@ -27,6 +25,8 @@ export class UIManager {
     this.__initInspector();
   }
 
+  // State
+
   setLoading(state) {
     if (state) {
       this.ui.classList.add("loading");
@@ -35,6 +35,42 @@ export class UIManager {
     }
   }
 
+  setZoomDisabled(state = 0) {
+    if (state > 0) {
+      this.uiElements.zoomIn.disabled = true;
+      this.uiElements.zoomOut.disabled = false;
+    } else if (state < 0) {
+      this.uiElements.zoomIn.disabled = false;
+      this.uiElements.zoomOut.disabled = true;
+    } else {
+      this.uiElements.zoomIn.disabled = false;
+      this.uiElements.zoomOut.disabled = false;
+    }
+  }
+
+  setEventsMinimized(state) {
+    if (state) {
+      this.uiElements.eventsContainer.classList.add("minimized");
+    } else {
+      this.uiElements.eventsContainer.classList.remove("minimized");
+    }
+  }
+
+  setEventsInspector(state) {
+    this.setEventsMinimized(false);
+    if (state) {
+      this.uiElements.eventsContainer.classList.add("inspector");
+    } else {
+      this.uiElements.eventsContainer.classList.remove("inspector");
+    }
+  }
+
+  getEventsEmpty() {
+    return this.uiElements.events.classList.contains("empty");
+  }
+
+  // Init
+
   __initUIElements() {
     // Zoom
     this.uiElements.zoomButtons = this.ui.querySelector("#zoom");
@@ -110,52 +146,49 @@ export class UIManager {
   }
 
   __initZoom() {
-    this.uiElements.zoomIn.addEventListener("click", () => {
+    this.uiElements.zoomIn.addEventListener("click", () =>
-      this.map.zoomLevel += 1;
+      this.mainmanager.callManagerFunction("map", "zoomIn")
+    );
+    this.uiElements.zoomOut.addEventListener("click", () =>
+      this.mainmanager.callManagerFunction("map", "zoomOut")
+    );
+    this.mainmanager.addManagerEventListener("map", "zoomMin", () => {
+      this.setZoomDisabled(-1);
     });
-    this.uiElements.zoomOut.addEventListener("click", () => {
+    this.mainmanager.addManagerEventListener("map", "zoomMax", () => {
-      this.map.zoomLevel -= 1;
+      this.setZoomDisabled(1);
     });
-    this.map.kp.onUpdate(() => {
+    this.mainmanager.addManagerEventListener("map", "zoom", () => {
-      if (this.map.zoomLevelLimit > 0) {
+      this.setZoomDisabled(0);
-        this.uiElements.zoomIn.disabled = true;
-        this.uiElements.zoomOut.disabled = false;
-      } else if (this.map.zoomLevelLimit < 0) {
-        this.uiElements.zoomIn.disabled = false;
-        this.uiElements.zoomOut.disabled = true;
-      } else {
-        this.uiElements.zoomIn.disabled = false;
-        this.uiElements.zoomOut.disabled = false;
-      }
     });
   }
 
   __initInspector() {
     this.uiElements.eventsInspectorMinimizeButton.addEventListener(
       "click",
-      () => {
+      () => this.setEventsMinimized(true)
-        this.uiElements.eventsContainer.classList.add("minimized");
-      }
     );
     this.uiElements.eventsInspectorMaximizeButton.addEventListener(
       "click",
-      () => {
+      () => this.setEventsMinimized(false)
-        this.uiElements.eventsContainer.classList.remove("minimized");
-      }
     );
     this.uiElements.eventsInspectorBackButton.addEventListener("click", () => {
-      // this.eventmanager.setCurrentEvent("");
+      window.location.hash = this.mainmanager.getCurrentFocus("room");
     });
     this.uiElements.eventsInspectorMinimizedBackButton.addEventListener(
       "click",
       () => {
-        // this.eventmanager.setCurrentEvent("");
+        window.location.hash = this.mainmanager.getCurrentFocus("room");
-        this.eventsMaximize(true);
       }
     );
   }
 
-  __updateInspector() {
+  updateInspector() {
+    const currentLocalization = this.mainmanager.getCurrentLocalization();
+
+    const currentEvent = this.mainmanager.getCurrentFocusObject("event");
+    const eventRoom = this.mainmanager.getCurrentFocusObject("room");
+
     this.uiElements.eventsInspectorBackButton.title =
       currentLocalization.event_inspector_back;
     this.uiElements.eventsInspectorMinimizedBackButton.title =
@@ -165,18 +198,6 @@ export class UIManager {
     this.uiElements.eventsInspectorMaximizeButton.title =
       currentLocalization.event_inspector_maximize;
 
-    // const currentEvent = this.eventmanager.currentEventItem;
-    if (currentEvent != null) {
-      this.uiElements.eventsContainer.classList.add("inspector");
-    } else {
-      this.uiElements.eventsContainer.classList.remove("inspector");
-      return;
-    }
-
-    // const eventFloor = this.floormanager.currentFloorRooms.get(
-    //   currentEvent.where
-    // );
-
     const currentDate = new Date();
     const eventDateStart = new Date(currentEvent.when.start);
     const eventDateEnd = new Date(currentEvent.when.end);
@@ -201,16 +222,16 @@ export class UIManager {
         datePrefix,
         getRelativeTime(
           eventDateStart,
-          currentDate
+          currentDate,
-          // this.floormanager.lang.replace(/_/g, "-")
+          this.mainmanager.getCurrentLangCode()
         )
       ) +
       " " +
       currentLocalization.parenthesis(
         DatetoLocaleDynamicString(
           eventDateStart,
-          currentDate
+          currentDate,
-          // this.floormanager.lang.replace(/_/g, "-")
+          this.mainmanager.getCurrentLangCode()
         )
       );
     this.uiElements.eventsInspectorEventLength.textContent =
@@ -221,12 +242,9 @@ export class UIManager {
         ""
       );
 
-    const eventWhere = document.createElement("button");
+    const eventWhere = document.createElement("a");
-    eventWhere.classList.add("link");
+    eventWhere.href = "#" + eventRoom.id;
-    eventWhere.addEventListener("click", () => {
+    eventWhere.textContent = eventRoom.name;
-      // this.floormanager.setCurrentRoom(eventFloor.id);
-    });
-    eventWhere.textContent = eventFloor.name;
 
     this.uiElements.eventsInspectorEventLength.appendChild(eventWhere);
 
@@ -241,6 +259,7 @@ export class UIManager {
       const eventURL = new URL(currentEvent.url);
 
       eventAnchor.href = eventURL;
+      eventAnchor.target = "_blank";
       eventAnchor.textContent = eventURL.toString();
 
       eventLink.appendChild(eventAnchor);
@@ -262,10 +281,10 @@ export class UIManager {
 
   __initEvents() {
     this.uiElements.eventsBackButton.addEventListener("click", () => {
-      // this.floormanager.setCurrentRoom("");
+      window.location.hash = this.mainmanager.getCurrentFocus("floor");
     });
     this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => {
-      // this.floormanager.setCurrentRoom("", false);
+      window.location.hash = this.mainmanager.getCurrentFocus("floor");
     });
 
     this.uiElements.minimizeButton.addEventListener("click", () => {
@@ -276,60 +295,57 @@ export class UIManager {
     });
   }
 
-  __updateEvents() {
+  __updateEventsSoft() {
-    let currentEvents;
+    const focusedFloor = this.mainmanager.getCurrentFocusObject("floor");
-    // if (this.floormanager.currentRoom != "") {
+
-    //   const filterThing = Array.from(this.eventmanager.events.entries());
+    if (focusedFloor == null) {
-    //   currentEvents = new Map(
+      this.uiElements.eventsContainer.classList.add("empty");
-    //     filterThing.filter(
+    } else {
-    //       ([key, value]) => value.where == this.floormanager.currentRoom
+      this.uiElements.eventsContainer.classList.remove("empty");
-    //     )
+    }
-    //   );
+  }
-    // } else {
+
-    //   currentEvents = this.eventmanager.events;
+  updateEvents() {
-    // }
+    const currentLocalization = this.mainmanager.getCurrentLocalization();
+
+    const currentEvents = this.mainmanager.getAllFocusObject("event");
+
+    const focusedFloor = this.mainmanager.getCurrentFocusObject("floor");
+    const focusedRoom = this.mainmanager.getCurrentFocusObject("room");
 
     this.uiElements.minimizeButton.title = currentLocalization.minimize;
     this.uiElements.maximizeButton.title = currentLocalization.maximize;
     // Figure out header
 
-    // if (this.floormanager.currentRoomItem != null) {
+    if (this.mainmanager.getIsFocused("room")) {
-    //   if (currentEvents.size < 1) {
+      if (currentEvents.size < 1) {
-    //     this.uiElements.eventsRoomName.textContent =
+        this.uiElements.eventsRoomName.textContent = focusedRoom.name;
-    //       this.floormanager.currentRoomItem.name;
+      } else {
-    //   } else {
+        this.uiElements.eventsRoomName.textContent =
-    //     this.uiElements.eventsRoomName.textContent =
+          currentLocalization.events_in(focusedRoom.name);
-    //       currentLocalization.events_in(this.floormanager.currentRoomItem.name);
+      }
-    //   }
+      this.uiElements.eventsRoomDescription.textContent =
-    //   this.uiElements.eventsRoomDescription.textContent =
+        focusedRoom.description;
-    //     this.floormanager.currentRoomItem.description;
+      this.uiElements.eventsBackButton.disabled = false;
-    //   this.uiElements.eventsBackButton.disabled = false;
+      this.uiElements.eventsBackButton.title =
-    //   this.uiElements.eventsBackButton.title =
+        currentLocalization.view_events_in(focusedFloor.name);
-    //     currentLocalization.view_events_in(
+      this.uiElements.eventsMinimizedBackButton.disabled = false;
-    //       this.floormanager.currentFloorItem.name
+      this.uiElements.eventsMinimizedBackButton.title =
-    //     );
+        currentLocalization.view_events_in(focusedFloor.name);
-    //   this.uiElements.eventsMinimizedBackButton.disabled = false;
+    } else {
-    //   this.uiElements.eventsMinimizedBackButton.title =
+      if (currentEvents.size < 1) {
-    //     currentLocalization.view_events_in(
+        this.uiElements.eventsRoomName.textContent = focusedFloor.name;
-    //       this.floormanager.currentFloorItem.name
+      } else {
-    //     );
+        this.uiElements.eventsRoomName.textContent =
-    // } else {
+          currentLocalization.events_in(focusedFloor.name);
-    //   if (currentEvents.size < 1) {
+      }
-    //     this.uiElements.eventsRoomName.textContent =
+      this.uiElements.eventsRoomDescription.textContent =
-    //       this.floormanager.currentFloorItem.name;
+        focusedFloor.description;
-    //   } else {
+      this.uiElements.eventsBackButton.disabled = true;
-    //     this.uiElements.eventsRoomName.textContent =
+      this.uiElements.eventsBackButton.title = "";
-    //       currentLocalization.events_in(
+      this.uiElements.eventsMinimizedBackButton.disabled = true;
-    //         this.floormanager.currentFloorItem.name
+      this.uiElements.eventsMinimizedBackButton.title = "";
-    //       );
+    }
-    //   }
-    //   this.uiElements.eventsRoomDescription.textContent =
-    //     this.floormanager.currentFloorItem.description;
-    //   this.uiElements.eventsBackButton.disabled = true;
-    //   this.uiElements.eventsBackButton.title = "";
-    //   this.uiElements.eventsMinimizedBackButton.disabled = true;
-    //   this.uiElements.eventsMinimizedBackButton.title = "";
-    // }
 
     // Remove all children
     this.uiElements.eventList.replaceChildren();
@@ -338,7 +354,9 @@ export class UIManager {
 
     const currentDate = new Date();
     currentEvents.forEach((event, id) => {
-      // const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
+      const eventRoom = this.mainmanager
+        .getAllFocusObject("room")
+        .get(this.mainmanager.convertIdFocus(event.id, "room"));
       const eventDateStart = new Date(event.when.start);
       const eventDateEnd = new Date(event.when.end);
 
@@ -361,29 +379,22 @@ export class UIManager {
 
       const eventListContainerSummary = document.createElement("p");
 
-      const eventListContainerSummaryName = document.createElement("button");
+      const eventListContainerSummaryName = document.createElement("a");
-      eventListContainerSummaryName.classList.add("link");
+      eventListContainerSummaryName.href = "#" + id;
-      eventListContainerSummaryName.addEventListener("click", () => {
-        // this.floormanager.setCurrentRoom(eventFloor.id, true, true);
-        // this.eventmanager.setCurrentEvent(id);
-      });
       eventListContainerSummaryName.textContent = event.name;
 
       eventListContainerSummary.appendChild(eventListContainerSummaryName);
 
       eventListContainerSummary.appendChild(document.createTextNode(" "));
 
-      // if (this.floormanager.currentRoomItem == null) {
+      if (!this.mainmanager.getIsFocused("room")) {
-      //   const eventListContainerSummaryRoom = document.createElement("button");
+        const eventListContainerSummaryRoom = document.createElement("a");
-      //   eventListContainerSummaryRoom.classList.add("link");
+        eventListContainerSummaryRoom.href = "#" + eventRoom.id;
-      //   eventListContainerSummaryRoom.addEventListener("click", () => {
+        eventListContainerSummaryRoom.textContent =
-      //     this.floormanager.setCurrentRoom(eventFloor.id);
+          currentLocalization.parenthesis(eventRoom.name);
-      //   });
-      //   eventListContainerSummaryRoom.textContent =
-      //     currentLocalization.parenthesis(eventFloor.name);
 
-      //   eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
+        eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
-      // }
+      }
 
       eventListContainerSummary.appendChild(document.createElement("br"));
 
@@ -392,7 +403,7 @@ export class UIManager {
       const eventListContainerSummaryTime = document.createElement("span");
       eventListContainerSummaryTime.classList.add("clarification");
       eventListContainerSummaryTime.title = eventDateStart.toLocaleString(
-        // this.floormanager.lang.replace(/_/g, "-"),
+        this.mainmanager.getCurrentLangCode(),
         {
           dateStyle: "short",
           timeStyle: "short",
@@ -403,8 +414,8 @@ export class UIManager {
           datePrefix,
           getRelativeTime(
             eventDateStart,
-            currentDate
+            currentDate,
-            // this.floormanager.lang.replace(/_/g, "-")
+            this.mainmanager.getCurrentLangCode()
           )
         );
 
@@ -432,53 +443,56 @@ export class UIManager {
     });
 
     if (currentEvents.size < 1) {
-      this.uiElements.eventsContainer.classList.add("empty");
+      this.uiElements.events.classList.add("empty");
-      this.eventsEmpty = true;
     } else {
-      this.uiElements.eventsContainer.classList.remove("empty");
+      this.uiElements.events.classList.remove("empty");
-      this.eventsEmpty = false;
     }
   }
 
   __updateFloorsHard() {
+    const currentLocalization = this.mainmanager.getCurrentLocalization();
+    const currentFloors = this.mainmanager.getAllFocusObject("floor");
+    const mainFocus = this.mainmanager.getCurrentFocus("floor");
     // Remove all children
     this.uiElements.floorButtons.replaceChildren();
     this.uiElements.floorsHeading.textContent =
       currentLocalization.floors_header;
 
     // Put them back
-    // this.floormanager.floors.forEach(({ name }, id) => {
+    currentFloors.forEach(({ name }, id) => {
-    //   const floorButton = document.createElement("button");
+      const floorButton = document.createElement("button");
-    //   floorButton.textContent = name;
+      floorButton.textContent = name;
-    //   floorButton.classList.add("floor-button");
+      floorButton.classList.add("floor-button");
-    //   floorButton.id = "floor-" + id;
+      floorButton.id = "floor-" + id;
-    //   if (id === this.floormanager.currentFloor)
+      if (id === mainFocus) floorButton.classList.add("selected");
-    //     floorButton.classList.add("selected");
+      floorButton.addEventListener("click", () => {
-    //   floorButton.addEventListener("click", () =>
+        window.location.hash = id;
-    //     this.floormanager.changeFloor(id)
+      });
-    //   );
 
-    //   this.uiElements.floorButtons.appendChild(floorButton);
+      this.uiElements.floorButtons.appendChild(floorButton);
-    // });
+    });
 
-    // if (this.floormanager.floors.size < 1) {
+    if (currentFloors.size < 1) {
-    //   this.uiElements.floors.classList.add("empty");
+      this.uiElements.floors.classList.add("empty");
-    //   this.floorsEmpty = true;
+      this.floorsEmpty = true;
-    // } else {
+    } else {
-    //   this.uiElements.floors.classList.remove("empty");
+      this.uiElements.floors.classList.remove("empty");
-    //   this.floorsEmpty = false;
+      this.floorsEmpty = false;
-    // }
+    }
   }
 
   __updateFloorsSoft() {
+    const currentLocalization = this.mainmanager.getCurrentLocalization();
+    const currentFloors = this.mainmanager.getAllFocusObject("floor");
+    const mainFocus = this.mainmanager.getCurrentFocus("floor");
+
     this.uiElements.floorsHeading.textContent =
       currentLocalization.floors_header;
 
-    // this.floormanager.floors.forEach(({ name }, id) => {
+    currentFloors.forEach((_, id) => {
-    //   const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
+      const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
-    //   if (id === this.floormanager.currentFloor)
+      if (id === mainFocus) child.classList.add("selected");
-    //     child.classList.add("selected");
+      else child.classList.remove("selected");
-    //   else child.classList.remove("selected");
+    });
-    // });
   }
 }

assets/scripts/script.js

@@ -1,10 +1,6 @@
 import kaplay from "./modules/kaplay.js";
-import { KaplayMap } from "./KaplayMap/index.js";
+import { KaplayMap } from "./KaplayMap/map.js";
-import { FloorManager } from "./KaplayMap/floors.js";
+import { EventMapperManager } from "./KaplayMap/mapper.js";
-import { UIManager } from "./KaplayMap/ui.js";
-import { GameObjManager } from "./KaplayMap/gameobj.js";
-import { EventManager } from "./KaplayMap/events.js";
-import { LangManager } from "./KaplayMap/lang.js";
 
 const map = document.querySelector("#map");
 const mapUi = document.querySelector("#map-ui");
@@ -23,20 +19,12 @@ const kp = kaplay({
 });
 
 const kaplaymap = new KaplayMap(kp, {});
-
+const eventmappermanager = new EventMapperManager(kaplaymap, mapUi);
-const langmanager = new LangManager("en-US");
-const uimanager = new UIManager(mapUi, kaplaymap);
-const gameobjmanager = new GameObjManager(kaplaymap);
-const eventmanager = new EventManager(kaplaymap, uimanager, gameobjmanager);
-const floormanager = new FloorManager(
-  kaplaymap,
-  uimanager,
-  gameobjmanager,
-  eventmanager
-);
 
 async function main() {
   kaplaymap.initGrid();
+
+  await eventmappermanager.load();
 }
 
-main();
+main();

assets/styles/style.css

@@ -179,28 +179,28 @@ a {
   max-width: calc(100% - 32px);
 }
 
-#map-ui #events-container:not(.inspector):not(.minimized) #events {
+#map-ui #events-container:not(.empty):not(.inspector):not(.minimized) #events {
   left: 16px;
 }
 
-#map-ui #events-container:not(.inspector).minimized #events-minimized {
+#map-ui #events-container:not(.empty):not(.inspector).minimized #events-minimized {
   left: 16px;
 }
 
-#map-ui #events-container:not(.minimized).inspector #events-inspector {
+#map-ui #events-container:not(.empty):not(.minimized).inspector #events-inspector {
   left: 16px;
 }
 
-#map-ui #events-container.minimized.inspector #events-inspector-minimized {
+#map-ui #events-container:not(.empty).minimized.inspector #events-inspector-minimized {
   left: 16px;
 }
 
-#map-ui #floors.empty ~ #events-container #events,
+/* #map-ui #floors.empty ~ #events-container #events,
 #map-ui #floors.empty ~ #events-container #events-inspector,
 #map-ui #floors.empty ~ #events-container #events-minimized,
 #map-ui #floors.empty ~ #events-container #events-inspector-minimized {
   left: -100% !important;
-}
+} */
 
 #map-ui #events-container #events #footer #footer-buttons,
 #map-ui #events-container #events-inspector #footer #footer-buttons {
@@ -238,7 +238,7 @@ a {
     margin 0.25s; */
 }
 
-#map-ui #events-container.empty #events #event-list {
+#map-ui #events-container #events.empty #event-list {
   min-height: 0;
   padding: 0 8px;
   margin: 0;

pages/index.html

@@ -16,7 +16,7 @@
     <div id="map-ui" class="loading">
       <div id="zoom">
         <button class="zoom-button" id="zoom-in">+</button>
-        <button class="zoom-button" id="zoom-out">-</button>
+        <button class="zoom-button" id="zoom-out" disabled>-</button>
       </div>
       <div id="floors" class="empty">
         <h1 class="widget-heading"></h1>

scripts/server.js

@@ -10,9 +10,9 @@ app.use("/", express.static('pages'));
 
 app.use("/dataServer", express.static('data')); // Example data file-server
 
-app.get('/data/:lang/events', async (req, res) => {
+app.get('/data/:lang/events/:floor', async (req, res) => {
   // Get events
-  let eventsReq = await fetch(new URL("events/events.json", config.data_url));
+  let eventsReq = await fetch(new URL(`events/${req.params.floor}.json`, config.data_url));
   let events;
   if (eventsReq.ok)
     events = await eventsReq.json();
@@ -39,43 +39,9 @@ app.get('/data/:lang/events', async (req, res) => {
   return res.send(merged);
 })
 
-app.get('/data/:lang/events/:layer', async (req, res) => {
+app.get('/data/:lang/floors', async (req, res) => {
-  // Get events
-  let eventsReq = await fetch(new URL("events/events.json", config.data_url));
-  let events;
-  if (eventsReq.ok)
-    events = await eventsReq.json();
-  else
-    return res.status(400).send("Bad Request");
-
-  // Get localization
-  let l10nReq = await fetch(new URL(`localization/${req.params.lang}.json`, config.data_url));
-  let l10n;
-  if (l10nReq.ok)
-    l10n = await l10nReq.json();
-  else
-    return res.status(404).send("Localization not found!");
-
-  const clippedEvents = events.filter((event) => event.where.layer == req.params.layer).map((event) => {
-    event.where = event.where.room;
-    return event;
-  });
-
-  // Merge events and localization
-  const merged = clippedEvents.map(event => {
-    const localizationKey = l10n.__events[event.id];
-    return {
-      ...event,
-      ...localizationKey
-    };
-  });
-
-  return res.send(merged);
-})
-
-app.get('/data/:lang/map', async (req, res) => {
   // Get layers
-  let layersReq = await fetch(new URL("map/layers.json", config.data_url));
+  let layersReq = await fetch(new URL("floors.json", config.data_url));
   let layers;
   if (layersReq.ok)
     layers = await layersReq.json();
@@ -102,9 +68,9 @@ app.get('/data/:lang/map', async (req, res) => {
   return res.send(merged);
 })
 
-app.get('/data/:lang/map/:layer', async (req, res) => {
+app.get('/data/:lang/rooms/:floor', async (req, res) => {
   // Get rooms
-  let roomsReq = await fetch(new URL(`map/${req.params.layer}.json`, config.data_url));
+  let roomsReq = await fetch(new URL(`rooms/${req.params.floor}.json`, config.data_url));
   let rooms;
   if (roomsReq.ok)
     rooms = await roomsReq.json();