Refactor start

assets/scripts/KaplayMap/events.js

@@ -5,6 +5,7 @@ export class EventManager {
   floormanager;
 
   events = new Map([]);
+  #currentEvent = "";
 
   constructor(map, ui, gameobj) {
     this.map = map;
@@ -13,23 +14,31 @@ export class EventManager {
     this.gameobj = gameobj;
   }
 
-  async getFloorEvents() {
+  async getEvents(lang, floor) {
-    let floorEventsReqSend = fetch(
+    let allEventsReqSend = fetch(`/data/${lang}/events/${floor}`);
-      `/data/${this.floormanager.lang}/events/${this.floormanager.currentFloor}`
-    );
 
     this.ui.setLoading(true);
 
-    let floorEventsReq = await floorEventsReqSend;
+    let allEventsReq = await allEventsReqSend;
-    let floorEvents;
+    let allEvents;
-    if (floorEventsReq.ok) floorEvents = await floorEventsReq.json();
+    if (allEventsReq.ok) allEvents = await allEventsReq.json();
 
     this.events.clear();
 
-    floorEvents.forEach((event) => this.events.set(event.id, event));
+    allEvents.forEach((event) => this.events.set(event.id, event));
 
     this.ui.setLoading(false);
-
-    return this.events;
   }
-}
+
+  setCurrentEvent(id) {
+    if (id == null) this.#currentEvent = id;
+    else {
+      const event = this.events.get(id);
+      if (event != null) this.#currentEvent = event;
+    }
+  }
+
+  get currentEvent() {
+    return this.#currentEvent;
+  }
+}

assets/scripts/KaplayMap/floors.js

@@ -3,58 +3,23 @@ export class FloorManager {
   ui;
   gameobj;
   events;
-  lang;
 
   floors = new Map([]);
   rooms = new Map([]);
   #currentFloor = "";
   #currentRoom = "";
 
-  constructor(map, ui, gameobj, events, lang) {
+  constructor(map, ui, gameobj, events) {
     this.map = map;
     this.ui = ui;
     this.ui.floormanager = this;
     this.gameobj = gameobj;
-    this.gameobj.floormanager = this;
     this.events = events;
     this.events.floormanager = this;
-    this.lang = lang;
   }
 
-  set currentFloor(floor) {
+  async getFloors(lang) {
-    this.#currentFloor = floor;
+    let allFloorsReqSend = fetch(`/data/${lang}/map`);
-  }
-
-  get currentFloor() {
-    return this.#currentFloor;
-  }
-
-  get currentFloorItem() {
-    return this.floors.get(this.#currentFloor);
-  }
-
-  setCurrentRoom(room, maximize = true) {
-    this.#currentRoom = room;
-    this.ui.__updateEvents();
-    if (maximize) this.ui.eventsMaximize();
-    if (room == "") this.gameobj.zoomToFloor();
-    else this.gameobj.zoomToRoom(room);
-  }
-
-  get currentRoom() {
-    return this.#currentRoom;
-  }
-
-  get currentRoomItem() {
-    return this.currentFloorRooms.get(this.#currentRoom);
-  }
-
-  get currentFloorRooms() {
-    return this.rooms.get(this.#currentFloor);
-  }
-
-  async getFloors() {
-    let allFloorsReqSend = fetch(`/data/${this.lang}/map`);
 
     this.ui.setLoading(true);
 
@@ -64,19 +29,15 @@ export class FloorManager {
 
     allFloors.forEach((floor) => this.floors.set(floor.id, floor));
 
-    this.changeFloor(allFloors[0].id);
-
     this.ui.setLoading(false);
-
-    return this.floors;
   }
 
-  async getRooms(id) {
+  async getRooms(lang, floor) {
     const curRoom = this.rooms.get(id);
 
     if (curRoom != null) return curRoom;
 
-    let allRoomsReqSend = fetch(`/data/${this.lang}/map/${id}`);
+    let allRoomsReqSend = fetch(`/data/${lang}/map/${floor}`);
 
     this.ui.setLoading(true);
 
@@ -87,36 +48,29 @@ export class FloorManager {
     const roomMap = new Map([]);
     allRooms.forEach((room) => roomMap.set(room.id, room));
 
-    this.rooms.set(id, roomMap);
+    this.rooms.set(floor, roomMap);
 
     this.ui.setLoading(false);
-
-    return this.rooms;
   }
 
-  async changeFloor(id) {
+  setCurrentFloor(id) {
     const floor = this.floors.get(id);
     if (floor != null) this.#currentFloor = id;
+  }
 
-    if (this.ui.floorsEmpty) this.ui.__updateFloorsHard();
+  get currentFloor() {
-    else this.ui.__updateFloorsSoft();
+    return this.#currentFloor;
+  }
 
-    this.ui.setLoading(true);
+  setCurrentRoom(id) {
+    if (id == null) this.#currentRoom = id;
+    else {
+      const room = this.rooms.get(this.#currentFloor).get(room);
+      if (room != null) this.#currentRoom = id;
+    }
+  }
 
-    this.gameobj.generateFloor();
+  get currentRoom() {
-
+    return this.#currentRoom;
-    await this.getRooms(id);
-
-    this.gameobj.generateRooms();
-
-    await this.events.getFloorEvents();
-
-    this.ui.__updateEvents();
-
-    this.setCurrentRoom("", false);
-
-    this.ui.setLoading(false);
-
-    return floor;
   }
 }

assets/scripts/KaplayMap/gameobj.js

@@ -4,7 +4,6 @@ export class GameObjManager {
     roomMinZoom: 2,
   };
   map;
-  floormanager;
 
   floorObject;
   roomObjects = new Map([]);
@@ -20,9 +19,9 @@ export class GameObjManager {
     };
     if (this.floorObject) this.floorObject.destroy();
 
-    const currentFloor = this.floormanager.floors.get(
+    // const currentFloor = this.floormanager.floors.get(
-      this.floormanager.currentFloor
+    //   this.floormanager.currentFloor
-    );
+    // );
 
     const polygon = new this.map.kp.Polygon(
       currentFloor.poly.map(([x, y]) => this.map.kp.vec2(x, y))
@@ -92,9 +91,9 @@ export class GameObjManager {
       this.roomObjects.clear();
     }
 
-    const currentRooms = this.floormanager.rooms.get(
+    // const currentRooms = this.floormanager.rooms.get(
-      this.floormanager.currentFloor
+    //   this.floormanager.currentFloor
-    );
+    // );
 
     currentRooms.forEach((room) => {
       const polygon = new this.map.kp.Polygon(
@@ -139,7 +138,7 @@ export class GameObjManager {
             obj.startClickPosition &&
             obj.startClickPosition.dist(endClickPosition) < obj.clickForgiveness
           ) {
-            this.floormanager.setCurrentRoom(room.id);
+            // this.floormanager.setCurrentRoom(room.id);
           }
           obj.color = this.map.kp.Color.fromHex("505050");
           this.map.clearMouseMode();

assets/scripts/KaplayMap/lang.js

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

assets/scripts/KaplayMap/localization.js

@@ -1,41 +1,26 @@
 export default new Map([
   [
-    "en_US",
+    "en-US",
     {
+      floors_header: "Floors",
       date_starting: "Starting",
       date_started: "Started",
-      floors_header: "Floors",
       date_summary: (prefix, time) => `${prefix} ${time}`,
       parenthesis: (content) => `(${content})`,
+      separator: (p1, p2) => `${p1} - ${p2}`,
       hours_long: (hours) =>
         hours == 1 ? `${hours} hour long` : `${hours} hours long`,
       minutes_long: (hours) =>
         hours == 1 ? `${hours} minute long` : `${hours} minutes long`,
       events_in: (name) => `Events (${name})`,
+      event_in: (location) => `In ${location}`,
       view_events_in: (name) => `Return to events in ${name}`,
       minimize: "Hide events panel",
       maximize: "Show events panel",
-    },
+      event_inspector_header: (name) => `Event ${name}`,
-  ],
+      event_inspector_back: "Return to events panel",
-  [
+      event_inspector_minimize: "Hide event inspector",
-    // Used Google Translate, pls fix
+      event_inspector_maximize: "Show event inspector",
-    "es_US",
-    {
-      date_starting: "Comenzando",
-      date_started: "Comenzó",
-      floors_header: "Pisos",
-      date_summary: (prefix, time) => `${prefix} ${time}`,
-      parenthesis: (content) => `(${content})`,
-      hours_long: (hours) =>
-        hours == 1 ? `${hours} hora de duración` : `${hours} horas de duración`,
-      minutes_long: (hours) =>
-        hours == 1
-          ? `${hours} minuto de duración`
-          : `${hours} minutos de duración`,
-      events_in: (name) => `Eventos (${name})`,
-      view_events_in: (name) => `Volver a eventos en ${name}`,
-      minimize: "Ocultar panel de eventos",
-      maximize: "Mostrar panel de eventos",
     },
   ],
 ]);

assets/scripts/KaplayMap/ui.js

@@ -1,8 +1,8 @@
 import {
+  DatetoLocaleDynamicString,
   getMinutesDifference,
   getRelativeTime,
 } from "../modules/relative_time.js";
-import localization from "./localization.js";
 
 export class UIManager {
   ui;
@@ -18,6 +18,24 @@ export class UIManager {
     this.ui = ui;
     this.map = map;
 
+    this.__initUIElements();
+
+    this.__initZoom();
+
+    this.__initEvents();
+
+    this.__initInspector();
+  }
+
+  setLoading(state) {
+    if (state) {
+      this.ui.classList.add("loading");
+    } else {
+      this.ui.classList.remove("loading");
+    }
+  }
+
+  __initUIElements() {
     // Zoom
     this.uiElements.zoomButtons = this.ui.querySelector("#zoom");
     this.uiElements.zoomIn =
@@ -53,19 +71,42 @@ export class UIManager {
     this.uiElements.eventsMinimizedBackButton =
       this.uiElements.eventsMinimized.querySelector("#back");
 
+    this.uiElements.eventsInspector =
+      this.uiElements.eventsContainer.querySelector("#events-inspector");
+    this.uiElements.eventsInspectorHeader =
+      this.uiElements.eventsInspector.querySelector("#events-header");
+    this.uiElements.eventsInspectorRoomName =
+      this.uiElements.eventsInspectorHeader.querySelector("#room-name");
+    this.uiElements.eventsInspectorEventLength =
+      this.uiElements.eventsInspectorHeader.querySelector("#event-length");
+    this.uiElements.eventsInspectorRoomTime =
+      this.uiElements.eventsInspector.querySelector("#room-time");
+    this.uiElements.eventsInspectorMinimized =
+      this.uiElements.eventsContainer.querySelector(
+        "#events-inspector-minimized"
+      );
+    this.uiElements.eventsInspectorBackButton =
+      this.uiElements.eventsInspector.querySelector("#back");
+    this.uiElements.eventsInspectorBody =
+      this.uiElements.eventsInspector.querySelector("#event-body");
+    this.uiElements.eventsInspectorMinimizedBackButton =
+      this.uiElements.eventsInspectorMinimized.querySelector("#back");
+
     this.uiElements.minimizeButton = this.uiElements.events.querySelector(
       "#footer #footer-buttons #minimize"
     );
     this.uiElements.maximizeButton =
       this.uiElements.eventsMinimized.querySelector("#maximize");
 
+    this.uiElements.eventsInspectorMinimizeButton =
+      this.uiElements.eventsInspector.querySelector(
+        "#footer #footer-buttons #minimize"
+      );
+    this.uiElements.eventsInspectorMaximizeButton =
+      this.uiElements.eventsInspectorMinimized.querySelector("#maximize");
+
     // Loading
     this.uiElements.loading = this.ui.querySelector("#loading");
-
-    // Zoom buttons
-    this.__initZoom();
-
-    this.__initEvents();
   }
 
   __initZoom() {
@@ -89,29 +130,142 @@ export class UIManager {
     });
   }
 
-  toggleEventsMinimized() {
+  __initInspector() {
-    this.uiElements.eventsContainer.classList.toggle("minimized");
+    this.uiElements.eventsInspectorMinimizeButton.addEventListener(
+      "click",
+      () => {
+        this.uiElements.eventsContainer.classList.add("minimized");
+      }
+    );
+    this.uiElements.eventsInspectorMaximizeButton.addEventListener(
+      "click",
+      () => {
+        this.uiElements.eventsContainer.classList.remove("minimized");
+      }
+    );
+    this.uiElements.eventsInspectorBackButton.addEventListener("click", () => {
+      // this.eventmanager.setCurrentEvent("");
+    });
+    this.uiElements.eventsInspectorMinimizedBackButton.addEventListener(
+      "click",
+      () => {
+        // this.eventmanager.setCurrentEvent("");
+        this.eventsMaximize(true);
+      }
+    );
   }
 
-  eventsMinimize() {
+  __updateInspector() {
-    this.uiElements.eventsContainer.classList.add("minimized");
+    this.uiElements.eventsInspectorBackButton.title =
-  }
+      currentLocalization.event_inspector_back;
+    this.uiElements.eventsInspectorMinimizedBackButton.title =
+      currentLocalization.event_inspector_back;
+    this.uiElements.eventsInspectorMinimizeButton.title =
+      currentLocalization.event_inspector_minimize;
+    this.uiElements.eventsInspectorMaximizeButton.title =
+      currentLocalization.event_inspector_maximize;
 
-  eventsMaximize() {
+    // const currentEvent = this.eventmanager.currentEventItem;
-    this.uiElements.eventsContainer.classList.remove("minimized");
+    if (currentEvent != null) {
-  }
+      this.uiElements.eventsContainer.classList.add("inspector");
+    } else {
+      this.uiElements.eventsContainer.classList.remove("inspector");
+      return;
+    }
 
-  __updateAll() {
+    // const eventFloor = this.floormanager.currentFloorRooms.get(
-    this.__updateEvents();
+    //   currentEvent.where
-    this.__updateFloorsHard();
+    // );
+
+    const currentDate = new Date();
+    const eventDateStart = new Date(currentEvent.when.start);
+    const eventDateEnd = new Date(currentEvent.when.end);
+
+    const eventStarted = currentDate > eventDateStart;
+    const eventEnded = currentDate > eventDateEnd;
+
+    let datePrefix;
+
+    if (eventEnded) {
+      return; // Don't display this event
+    } else if (eventStarted) {
+      datePrefix = currentLocalization.date_started;
+    } else {
+      datePrefix = currentLocalization.date_starting;
+    }
+
+    this.uiElements.eventsInspectorRoomName.textContent =
+      currentLocalization.event_inspector_header(currentEvent.name);
+    this.uiElements.eventsInspectorRoomTime.textContent =
+      currentLocalization.date_summary(
+        datePrefix,
+        getRelativeTime(
+          eventDateStart,
+          currentDate
+          // this.floormanager.lang.replace(/_/g, "-")
+        )
+      ) +
+      " " +
+      currentLocalization.parenthesis(
+        DatetoLocaleDynamicString(
+          eventDateStart,
+          currentDate
+          // this.floormanager.lang.replace(/_/g, "-")
+        )
+      );
+    this.uiElements.eventsInspectorEventLength.textContent =
+      currentLocalization.separator(
+        currentLocalization.minutes_long(
+          getMinutesDifference(eventDateStart, eventDateEnd)
+        ),
+        ""
+      );
+
+    const eventWhere = document.createElement("button");
+    eventWhere.classList.add("link");
+    eventWhere.addEventListener("click", () => {
+      // this.floormanager.setCurrentRoom(eventFloor.id);
+    });
+    eventWhere.textContent = eventFloor.name;
+
+    this.uiElements.eventsInspectorEventLength.appendChild(eventWhere);
+
+    // Remove all children
+
+    this.uiElements.eventsInspectorBody.replaceChildren();
+
+    if (currentEvent.url) {
+      const eventLink = document.createElement("p");
+      eventLink.classList.add("widget-description");
+      const eventAnchor = document.createElement("a");
+      const eventURL = new URL(currentEvent.url);
+
+      eventAnchor.href = eventURL;
+      eventAnchor.textContent = eventURL.toString();
+
+      eventLink.appendChild(eventAnchor);
+
+      this.uiElements.eventsInspectorBody.appendChild(eventLink);
+    }
+
+    this.uiElements.eventsInspectorBody.appendChild(
+      document.createElement("hr")
+    );
+
+    const eventDescription = document.createElement("p");
+    eventDescription.classList.add("widget-description");
+
+    eventDescription.textContent = currentEvent.description;
+
+    this.uiElements.eventsInspectorBody.appendChild(eventDescription);
   }
 
   __initEvents() {
     this.uiElements.eventsBackButton.addEventListener("click", () => {
-      this.floormanager.setCurrentRoom("");
+      // this.floormanager.setCurrentRoom("");
     });
     this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => {
-      this.floormanager.setCurrentRoom("", false);
+      // this.floormanager.setCurrentRoom("", false);
     });
 
     this.uiElements.minimizeButton.addEventListener("click", () => {
@@ -123,61 +277,59 @@ export class UIManager {
   }
 
   __updateEvents() {
-    const currentLocalization = localization.get(this.floormanager.lang);
-
     let currentEvents;
-    if (this.floormanager.currentRoom != "") {
+    // if (this.floormanager.currentRoom != "") {
-      const filterThing = Array.from(this.eventmanager.events.entries());
+    //   const filterThing = Array.from(this.eventmanager.events.entries());
-      currentEvents = new Map(
+    //   currentEvents = new Map(
-        filterThing.filter(
+    //     filterThing.filter(
-          ([key, value]) => value.where == this.floormanager.currentRoom
+    //       ([key, value]) => value.where == this.floormanager.currentRoom
-        )
+    //     )
-      );
+    //   );
-    } else {
+    // } else {
-      currentEvents = this.eventmanager.events;
+    //   currentEvents = this.eventmanager.events;
-    }
+    // }
 
     this.uiElements.minimizeButton.title = currentLocalization.minimize;
     this.uiElements.maximizeButton.title = currentLocalization.maximize;
     // Figure out header
 
-    if (this.floormanager.currentRoomItem != null) {
+    // if (this.floormanager.currentRoomItem != null) {
-      if (currentEvents.size < 1) {
+    //   if (currentEvents.size < 1) {
-        this.uiElements.eventsRoomName.textContent =
+    //     this.uiElements.eventsRoomName.textContent =
-          this.floormanager.currentRoomItem.name;
+    //       this.floormanager.currentRoomItem.name;
-      } else {
+    //   } else {
-        this.uiElements.eventsRoomName.textContent =
+    //     this.uiElements.eventsRoomName.textContent =
-          currentLocalization.events_in(this.floormanager.currentRoomItem.name);
+    //       currentLocalization.events_in(this.floormanager.currentRoomItem.name);
-      }
+    //   }
-      this.uiElements.eventsRoomDescription.textContent =
+    //   this.uiElements.eventsRoomDescription.textContent =
-        this.floormanager.currentRoomItem.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(
+    //     currentLocalization.view_events_in(
-          this.floormanager.currentFloorItem.name
+    //       this.floormanager.currentFloorItem.name
-        );
+    //     );
-      this.uiElements.eventsMinimizedBackButton.disabled = false;
+    //   this.uiElements.eventsMinimizedBackButton.disabled = false;
-      this.uiElements.eventsMinimizedBackButton.title =
+    //   this.uiElements.eventsMinimizedBackButton.title =
-        currentLocalization.view_events_in(
+    //     currentLocalization.view_events_in(
-          this.floormanager.currentFloorItem.name
+    //       this.floormanager.currentFloorItem.name
-        );
+    //     );
-    } else {
+    // } else {
-      if (currentEvents.size < 1) {
+    //   if (currentEvents.size < 1) {
-        this.uiElements.eventsRoomName.textContent =
+    //     this.uiElements.eventsRoomName.textContent =
-          this.floormanager.currentFloorItem.name;
+    //       this.floormanager.currentFloorItem.name;
-      } else {
+    //   } else {
-        this.uiElements.eventsRoomName.textContent =
+    //     this.uiElements.eventsRoomName.textContent =
-          currentLocalization.events_in(
+    //       currentLocalization.events_in(
-            this.floormanager.currentFloorItem.name
+    //         this.floormanager.currentFloorItem.name
-          );
+    //       );
-      }
+    //   }
-      this.uiElements.eventsRoomDescription.textContent =
+    //   this.uiElements.eventsRoomDescription.textContent =
-        this.floormanager.currentFloorItem.description;
+    //     this.floormanager.currentFloorItem.description;
-      this.uiElements.eventsBackButton.disabled = true;
+    //   this.uiElements.eventsBackButton.disabled = true;
-      this.uiElements.eventsBackButton.title = "";
+    //   this.uiElements.eventsBackButton.title = "";
-      this.uiElements.eventsMinimizedBackButton.disabled = true;
+    //   this.uiElements.eventsMinimizedBackButton.disabled = true;
-      this.uiElements.eventsMinimizedBackButton.title = "";
+    //   this.uiElements.eventsMinimizedBackButton.title = "";
-    }
+    // }
 
     // Remove all children
     this.uiElements.eventList.replaceChildren();
@@ -186,7 +338,7 @@ export class UIManager {
 
     const currentDate = new Date();
     currentEvents.forEach((event, id) => {
-      const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
+      // const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
       const eventDateStart = new Date(event.when.start);
       const eventDateEnd = new Date(event.when.end);
 
@@ -209,24 +361,29 @@ export class UIManager {
 
       const eventListContainerSummary = document.createElement("p");
 
-      const eventListContainerSummaryName = document.createElement("b");
+      const eventListContainerSummaryName = document.createElement("button");
+      eventListContainerSummaryName.classList.add("link");
+      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.floormanager.currentRoomItem == null) {
-        const eventListContainerSummaryRoom = document.createElement("button");
+      //   const eventListContainerSummaryRoom = document.createElement("button");
-        eventListContainerSummaryRoom.classList.add("link");
+      //   eventListContainerSummaryRoom.classList.add("link");
-        eventListContainerSummaryRoom.addEventListener("click", () => {
+      //   eventListContainerSummaryRoom.addEventListener("click", () => {
-          this.floormanager.setCurrentRoom(eventFloor.id);
+      //     this.floormanager.setCurrentRoom(eventFloor.id);
-        });
+      //   });
-        eventListContainerSummaryRoom.textContent =
+      //   eventListContainerSummaryRoom.textContent =
-          currentLocalization.parenthesis(eventFloor.name);
+      //     currentLocalization.parenthesis(eventFloor.name);
 
-        eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
+      //   eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
-      }
+      // }
 
       eventListContainerSummary.appendChild(document.createElement("br"));
 
@@ -235,15 +392,19 @@ export class UIManager {
       const eventListContainerSummaryTime = document.createElement("span");
       eventListContainerSummaryTime.classList.add("clarification");
       eventListContainerSummaryTime.title = eventDateStart.toLocaleString(
-        this.floormanager.lang.replace(/_/g, "-")
+        // this.floormanager.lang.replace(/_/g, "-"),
+        {
+          dateStyle: "short",
+          timeStyle: "short",
+        }
       );
       eventListContainerSummaryTime.textContent =
         currentLocalization.date_summary(
           datePrefix,
           getRelativeTime(
             eventDateStart,
-            currentDate,
+            currentDate
-            this.floormanager.lang.replace(/_/g, "-")
+            // this.floormanager.lang.replace(/_/g, "-")
           )
         );
 
@@ -279,56 +440,45 @@ export class UIManager {
     }
   }
 
-  setLoading(state) {
-    if (state) {
-      this.ui.classList.add("loading");
-    } else {
-      this.ui.classList.remove("loading");
-    }
-  }
-
   __updateFloorsHard() {
-    const currentLocalization = localization.get(this.floormanager.lang);
     // Remove all children
     this.uiElements.floorButtons.replaceChildren();
     this.uiElements.floorsHeading.textContent =
       currentLocalization.floors_header;
 
     // Put them back
-    this.floormanager.floors.forEach(({ name }, id) => {
+    // this.floormanager.floors.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 === this.floormanager.currentFloor)
-        floorButton.classList.add("selected");
+    //     floorButton.classList.add("selected");
-      floorButton.addEventListener("click", () =>
+    //   floorButton.addEventListener("click", () =>
-        this.floormanager.changeFloor(id)
+    //     this.floormanager.changeFloor(id)
-      );
+    //   );
 
-      this.uiElements.floorButtons.appendChild(floorButton);
+    //   this.uiElements.floorButtons.appendChild(floorButton);
-    });
+    // });
 
-    if (this.floormanager.floors.size < 1) {
+    // if (this.floormanager.floors.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 = localization.get(this.floormanager.lang);
-
     this.uiElements.floorsHeading.textContent =
       currentLocalization.floors_header;
 
-    this.floormanager.floors.forEach(({ name }, id) => {
+    // this.floormanager.floors.forEach(({ name }, id) => {
-      const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
+    //   const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
-      if (id === this.floormanager.currentFloor)
+    //   if (id === this.floormanager.currentFloor)
-        child.classList.add("selected");
+    //     child.classList.add("selected");
-      else child.classList.remove("selected");
+    //   else child.classList.remove("selected");
-    });
+    // });
   }
 }

assets/scripts/modules/relative_time.js

@@ -24,3 +24,18 @@ export function getRelativeTime(d1, d2, locale) {
 export function getMinutesDifference(d1, d2) {
   return (d2.getTime() - d1.getTime()) / units.minute;
 }
+
+export function sameDay(d1, d2) {
+  return Math.abs(d2.getTime() - d1.getTime()) < units.day;
+}
+
+export function DatetoLocaleDynamicString(d1, ref, lang) {
+  if (sameDay(d1, ref))
+    return d1.toLocaleTimeString(lang, {
+      timeStyle: "short",
+    });
+  else
+    return d1.toLocaleDateString(lang, {
+      dateStyle: "short",
+    });
+}

assets/scripts/script.js

@@ -4,6 +4,7 @@ import { FloorManager } from "./KaplayMap/floors.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,10 +24,7 @@ const kp = kaplay({
 
 const kaplaymap = new KaplayMap(kp, {});
 
-kaplaymap.initGrid();
+const langmanager = new LangManager("en-US");
-
-// addZoomButtons(kaplaymap);
-
 const uimanager = new UIManager(mapUi, kaplaymap);
 const gameobjmanager = new GameObjManager(kaplaymap);
 const eventmanager = new EventManager(kaplaymap, uimanager, gameobjmanager);
@@ -34,8 +32,11 @@ const floormanager = new FloorManager(
   kaplaymap,
   uimanager,
   gameobjmanager,
-  eventmanager,
+  eventmanager
-  "en_US"
 );
 
-floormanager.getFloors();
+async function main() {
+  kaplaymap.initGrid();
+}
+
+main();

assets/styles/style.css

@@ -29,6 +29,10 @@ p.widget-description {
   padding-bottom: 2px; */
 }
 
+p.subtitle {
+  opacity: 0.75;
+}
+
 button:not(.link) {
   background-color: transparent;
   border: none;
@@ -54,6 +58,7 @@ button:not(.link):disabled {
 }
 
 button.link {
+  display: inline;
   background: none !important;
   border: none;
   padding: 0;
@@ -63,6 +68,10 @@ button.link {
   cursor: pointer;
 }
 
+a {
+  color: currentColor;
+}
+
 .clarification {
   text-decoration: dotted underline;
 }
@@ -147,7 +156,9 @@ button.link {
 }
 
 #map-ui #events-container #events,
-#map-ui #events-container #events-minimized {
+#map-ui #events-container #events-minimized,
+#map-ui #events-container #events-inspector,
+#map-ui #events-container #events-inspector-minimized {
   pointer-events: all;
   box-sizing: border-box;
   display: inline-block;
@@ -155,41 +166,56 @@ button.link {
   padding: 8px;
   bottom: 16px;
   border-radius: 4px;
+  left: -100%;
   background-color: #202020;
   color: #fff;
   box-shadow: 0 0 8px 0 #0008;
   transition: left 0.5s;
 }
 
-#map-ui #events-container #events {
+#map-ui #events-container #events,
-  left: 16px;
+#map-ui #events-container #events-inspector {
   width: 400px;
   max-width: calc(100% - 32px);
 }
 
-#map-ui #events-container.minimized #events {
+#map-ui #events-container:not(.inspector):not(.minimized) #events {
-  left: -100%;
-}
-
-#map-ui #events-container #events-minimized {
-  left: -100%;
-}
-
-#map-ui #events-container.minimized #events-minimized {
   left: 16px;
 }
 
-#map-ui #events-container #events #footer #footer-buttons {
+#map-ui #events-container:not(.inspector).minimized #events-minimized {
+  left: 16px;
+}
+
+#map-ui #events-container:not(.minimized).inspector #events-inspector {
+  left: 16px;
+}
+
+#map-ui #events-container.minimized.inspector #events-inspector-minimized {
+  left: 16px;
+}
+
+#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 {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-#map-ui #events-container #events #events-header p {
+#map-ui #events-container #events-inspector p,
+#map-ui #events-container #events p {
   margin-bottom: 0;
 }
 
-#map-ui #events-container #events #events-header {
+#map-ui #events-container #events #events-header,
+#map-ui #events-container #events-inspector #events-header {
   display: grid;
   grid-template-columns: 36px auto;
   gap: 8px;
@@ -222,9 +248,19 @@ button.link {
   margin: 0;
 }
 
+#map-ui #events-container #events-inspector #event-body {
+  /* min-height: 100px; */
+  max-height: calc(50% - 16px);
+  margin: 8px 0;
+  padding: 8px;
+  background-color: #0002;
+}
+
 #map-ui #events-container #events #events-header button,
 #map-ui #events-container #footer #footer-buttons button,
-#map-ui #events-container #events-minimized button {
+#map-ui #events-container #events-inspector #events-header button:not(.link),
+#map-ui #events-container #events-minimized button,
+#map-ui #events-container #events-inspector-minimized button {
   width: 36px;
 }
 

pages/index.html

@@ -27,7 +27,7 @@
       <div id="events-container" class="empty">
         <div id="events">
           <div id="events-header">
-            <button id="back" disabled>←</button>
+            <button id="back" disabled>↑</button>
             <div>
               <h1 class="widget-heading" id="room-name"></h1>
               <p class="widget-description" id="room-description"></p>
@@ -44,7 +44,28 @@
         </div>
         <div id="events-minimized">
           <button id="maximize">‾</button>
-          <button id="back" disabled>←</button>
+          <button id="back" disabled>↑</button>
+        </div>
+        <div id="events-inspector">
+          <div id="events-header">
+            <button id="back">←</button>
+            <div>
+              <h1 class="widget-heading" id="room-name"></h1>
+              <p class="widget-description subtitle" id="event-length"></p>
+            </div>
+          </div>
+          <p class="widget-description" id="room-time"></p>
+          <div id="event-body">
+          </div>
+          <div id="footer">
+            <div id="footer-buttons">
+              <button id="minimize">_</button>
+            </div>
+          </div>
+        </div>
+        <div id="events-inspector-minimized">
+          <button id="maximize">‾</button>
+          <button id="back">←</button>
         </div>
       </div>
       <div id="loading">