various things, add es_US (google translate + contributors)

assets/scripts/KaplayMap/gameobj.js

@@ -1,4 +1,8 @@
 export class GameObjManager {
+  opts = {
+    floorMinZoom: 1,
+    roomMinZoom: 2,
+  };
   map;
   floormanager;
 
@@ -9,7 +13,11 @@ export class GameObjManager {
     this.map = map;
   }
 
-  generateFloor() {
+  generateFloor(opts) {
+    this.opts = {
+      ...this.opts,
+      opts,
+    };
     if (this.floorObject) this.floorObject.destroy();
 
     const currentFloor = this.floormanager.floors.get(
@@ -51,13 +59,19 @@ export class GameObjManager {
 
     this.map.kp.add(this.floorObject);
 
-    this.map.zoomToAbs(this.map.opts.minZoomLevel, bounds.center());
+    this.map.zoomToAbs(
+      this.map.opts.minZoomLevel + this.opts.floorMinZoom,
+      bounds.center()
+    );
   }
 
   zoomToFloor() {
     const objectBounds = this.floorObject.renderArea().bbox();
 
-    this.map.zoomToAbs(this.map.opts.minZoomLevel, objectBounds.center());
+    this.map.zoomToAbs(
+      this.map.opts.minZoomLevel + this.opts.floorMinZoom,
+      objectBounds.center()
+    );
   }
 
   zoomToRoom(id) {
@@ -66,7 +80,10 @@ export class GameObjManager {
 
     const objectBounds = selectedObject.renderArea().bbox();
 
-    this.map.zoomToAbs(this.map.opts.minZoomLevel + 1, objectBounds.center());
+    this.map.zoomToAbs(
+      this.map.opts.minZoomLevel + this.opts.roomMinZoom,
+      objectBounds.center()
+    );
   }
 
   generateRooms() {
@@ -133,9 +150,11 @@ export class GameObjManager {
         const camScale = 1 / this.map.kp.camScale().y;
         this.map.kp.drawText({
           text: room.name,
+          width: polygon.bbox().width,
           size: 24 * camScale,
           pos: polygon.bbox().center(),
           color: this.map.kp.WHITE,
+          align: "center",
           anchor: "center",
         });
       });

assets/scripts/KaplayMap/index.js

@@ -1,7 +1,7 @@
 export class KaplayMap {
   kp;
   opts = {
-    minZoomLevel: 2,
+    minZoomLevel: 1,
     maxZoomLevel: 5,
     dblClickDuration: 0.2, // s
     dblClickForgiveness: 100, // px

assets/scripts/KaplayMap/localization.js

@@ -17,4 +17,25 @@ export default new Map([
       maximize: "Show events panel",
     },
   ],
+  [
+    // Used Google Translate, pls fix
+    "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

@@ -125,13 +125,30 @@ export class UIManager {
   __updateEvents() {
     const currentLocalization = localization.get(this.floormanager.lang);
 
+    let currentEvents;
+    if (this.floormanager.currentRoom != "") {
+      const filterThing = Array.from(this.eventmanager.events.entries());
+      currentEvents = new Map(
+        filterThing.filter(
+          ([key, value]) => value.where == this.floormanager.currentRoom
+        )
+      );
+    } else {
+      currentEvents = this.eventmanager.events;
+    }
+
     this.uiElements.minimizeButton.title = currentLocalization.minimize;
     this.uiElements.maximizeButton.title = currentLocalization.maximize;
     // Figure out header
 
     if (this.floormanager.currentRoomItem != null) {
-      this.uiElements.eventsRoomName.textContent =
+      if (currentEvents.size < 1) {
-        currentLocalization.events_in(this.floormanager.currentRoomItem.name);
+        this.uiElements.eventsRoomName.textContent =
+          this.floormanager.currentRoomItem.name;
+      } else {
+        this.uiElements.eventsRoomName.textContent =
+          currentLocalization.events_in(this.floormanager.currentRoomItem.name);
+      }
       this.uiElements.eventsRoomDescription.textContent =
         this.floormanager.currentRoomItem.description;
       this.uiElements.eventsBackButton.disabled = false;
@@ -145,8 +162,15 @@ export class UIManager {
           this.floormanager.currentFloorItem.name
         );
     } else {
-      this.uiElements.eventsRoomName.textContent =
+      if (currentEvents.size < 1) {
-        currentLocalization.events_in(this.floormanager.currentFloorItem.name);
+        this.uiElements.eventsRoomName.textContent =
+          this.floormanager.currentFloorItem.name;
+      } else {
+        this.uiElements.eventsRoomName.textContent =
+          currentLocalization.events_in(
+            this.floormanager.currentFloorItem.name
+          );
+      }
       this.uiElements.eventsRoomDescription.textContent =
         this.floormanager.currentFloorItem.description;
       this.uiElements.eventsBackButton.disabled = true;
@@ -161,13 +185,7 @@ export class UIManager {
     // Put them back
 
     const currentDate = new Date();
-    this.eventmanager.events.forEach((event, id) => {
+    currentEvents.forEach((event, id) => {
-      if (
-        this.floormanager.currentRoomItem &&
-        event.where != this.floormanager.currentRoom
-      )
-        return; // Don't display this event
-
       const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
       const eventDateStart = new Date(event.when.start);
       const eventDateEnd = new Date(event.when.end);
@@ -185,11 +203,11 @@ export class UIManager {
         datePrefix = currentLocalization.date_starting;
       }
 
-      const eventListContainer = document.createElement("details");
+      const eventListContainer = document.createElement("div");
       eventListContainer.classList.add("event-list-container");
       eventListContainer.id = "event-" + id;
 
-      const eventListContainerSummary = document.createElement("summary");
+      const eventListContainerSummary = document.createElement("p");
 
       const eventListContainerSummaryName = document.createElement("b");
       eventListContainerSummaryName.textContent = event.name;
@@ -249,19 +267,14 @@ export class UIManager {
 
       eventListContainer.appendChild(eventListContainerSummary);
 
-      const eventListContainerDescription = document.createElement("p");
-      eventListContainerDescription.textContent = event.description;
-
-      eventListContainer.appendChild(eventListContainerDescription);
-
       this.uiElements.eventList.appendChild(eventListContainer);
     });
 
-    if (this.eventmanager.events.size < 1) {
+    if (currentEvents.size < 1) {
-      this.uiElements.eventList.classList.add("empty");
+      this.uiElements.eventsContainer.classList.add("empty");
       this.eventsEmpty = true;
     } else {
-      this.uiElements.eventList.classList.remove("empty");
+      this.uiElements.eventsContainer.classList.remove("empty");
       this.eventsEmpty = false;
     }
   }

assets/styles/style.css

@@ -24,6 +24,7 @@ h1.widget-heading {
 p.widget-description {
   margin: 0;
   margin-bottom: 8px;
+  white-space: pre-line;
   /* border-bottom: 1px solid currentColor;
   padding-bottom: 2px; */
 }
@@ -163,6 +164,7 @@ button.link {
 #map-ui #events-container #events {
   left: 16px;
   width: 400px;
+  max-width: calc(100% - 32px);
 }
 
 #map-ui #events-container.minimized #events {
@@ -192,11 +194,11 @@ button.link {
   grid-template-columns: 36px auto;
   gap: 8px;
   margin-bottom: 8px;
-  align-items: center;
+  /* align-items: center; */
 }
 
 #map-ui #events-container #events #event-list {
-  min-height: 200px;
+  /* min-height: 100px; */
   max-height: calc(50% - 16px);
   margin: 8px 0;
   padding: 8px;
@@ -204,11 +206,20 @@ button.link {
   display: flex;
   flex-direction: column;
   gap: 4px;
+  /* transition: height 0.25s, 
+    min-height 0.25s,
+    padding 0.25s,
+    margin 0.25s; */
+}
+
+#map-ui #events-container.empty #events #event-list {
+  min-height: 0;
+  padding: 0 8px;
+  margin: 0;
 }
 
 #map-ui #events-container #events #event-list .event-list-container p {
-  margin: 2px 0;
+  margin: 0;
-  white-space: pre-line;
 }
 
 #map-ui #events-container #events #events-header button,

pages/index.html

@@ -19,18 +19,18 @@
         <button class="zoom-button" id="zoom-out">-</button>
       </div>
       <div id="floors" class="empty">
-        <h1 class="widget-heading">Floors</h1>
+        <h1 class="widget-heading"></h1>
         <div id="floor-buttons">
 
         </div>
       </div>
-      <div id="events-container">
+      <div id="events-container" class="empty">
         <div id="events">
           <div id="events-header">
             <button id="back" disabled>←</button>
             <div>
-              <h1 class="widget-heading" id="room-name">Events</h1>
+              <h1 class="widget-heading" id="room-name"></h1>
-              <p class="widget-description" id="room-description">Lorem ipsum dolor sit amet.</p>
+              <p class="widget-description" id="room-description"></p>
             </div>
           </div>
           <div id="event-list">
@@ -43,7 +43,7 @@
           </div>
         </div>
         <div id="events-minimized">
-          <button id="maximize">+</button>
+          <button id="maximize">‾</button>
           <button id="back" disabled>←</button>
         </div>
       </div>