finish it off

assets/scripts/KaplayMap/localization.js

@@ -28,8 +28,17 @@ export default new Map([
       menu_search_button: "Search events",
       menu_language_button: "Change language",
       menu_about_button: "About EventMapper",
+      about_dialog_close_button: "Close about",
+      about_dialog_header_title: "About EventMapper",
+      about_dialog_credits: `EventMapper made by MeowcaTheoRange @ https://abtmtr.link/
+
+See https://git.gay/MeowcaTheoRange/EventMapper for more info
+
+Thanks to:
+- Joe 2DCon @ https://2dcon.gg/
+- KikiCraft @ https://kikicraft.com/
+- Captain Zach @ https://discord.gg/2dcon`,
       search_dialog_close_button: "Close search",
-      search_dialog_search_button: "Run search",
       search_dialog_header_title: "Search Events",
       search_dialog_search_tags: "Tags",
       search_dialog_search_by: "Search By",

assets/scripts/KaplayMap/mapper.js

@@ -45,12 +45,6 @@ export class EventMapperManager {
 
   // Init
 
-  __initFloor() {
-    const allFloors = Array.from(this.getAllFocusObject("floor").keys());
-
-    location.hash = allFloors[0];
-  }
-
   async load() {
     this.uimanager.setLoading(true);
 
@@ -68,14 +62,14 @@ export class EventMapperManager {
 
     this.uimanager.__updateSearchUI();
 
+    this.uimanager.__updateAboutUI();
+
     this.uimanager.setLoading(false);
 
     this.uimanager.setLoading(true);
 
     window.addEventListener("hashchange", () => this.hashchange());
 
-    this.__initFloor();
-
     await this.hashchange();
 
     this.uimanager.setLoading(false);
@@ -85,6 +79,13 @@ export class EventMapperManager {
     const prevID = this.#currentFocus;
 
     let hash = location.hash;
+
+    if (hash.length <= 1) {
+      const allFloors = Array.from(this.getAllFocusObject("floor").keys());
+
+      if (location.hash.length <= 1) location.hash = allFloors[0];
+    }
+
     if (hash.includes("#")) hash = hash.replace("#", "");
     else return;
 

assets/scripts/KaplayMap/ui.js

@@ -24,6 +24,8 @@ export class UIManager {
 
     this.__initSearchUI();
 
+    this.__initAboutUI();
+
     this.__initEvents();
 
     this.__initInspector();
@@ -85,6 +87,14 @@ export class UIManager {
     }
   }
 
+  setAboutDialogOpen(state) {
+    if (state) {
+      this.uiElements.aboutDialogScrim.classList.add("open");
+    } else {
+      this.uiElements.aboutDialogScrim.classList.remove("open");
+    }
+  }
+
   getEventsEmpty() {
     return this.uiElements.events.classList.contains("empty");
   }
@@ -174,6 +184,21 @@ export class UIManager {
     this.uiElements.searchDialogFilters =
       this.uiElements.searchDialog.querySelector("#search-dialog-filters");
 
+    // About Dialog
+    this.uiElements.aboutDialogScrim = this.ui.querySelector(
+      "#about-dialog-scrim"
+    );
+    this.uiElements.aboutDialog =
+      this.uiElements.aboutDialogScrim.querySelector("#about-dialog");
+    this.uiElements.aboutDialogHeader =
+      this.uiElements.aboutDialog.querySelector("#about-dialog-header");
+    this.uiElements.aboutDialogHeaderClose =
+      this.uiElements.aboutDialogHeader.querySelector("#close");
+    this.uiElements.aboutDialogHeaderTitle =
+      this.uiElements.aboutDialogHeader.querySelector("#about-dialog-title");
+    this.uiElements.aboutDialogBody =
+      this.uiElements.aboutDialog.querySelector("#about-body");
+
     // Loading
     this.uiElements.loading = this.ui.querySelector("#loading");
   }
@@ -205,6 +230,9 @@ export class UIManager {
     this.uiElements.menuBarSearch.addEventListener("click", () => {
       this.setSearchDialogOpen(true);
     });
+    this.uiElements.menuBarAbout.addEventListener("click", () => {
+      this.setAboutDialogOpen(true);
+    });
 
     this.__updateMenu();
   }
@@ -219,6 +247,35 @@ export class UIManager {
     this.uiElements.menuBarAbout.title = currentLocalization.menu_about_button;
   }
 
+  __initAboutUI() {
+    this.uiElements.aboutDialogHeaderClose.addEventListener("click", () => {
+      this.setAboutDialogOpen(false);
+    });
+    this.uiElements.aboutDialogScrim.addEventListener("click", () => {
+      this.setAboutDialogOpen(false);
+    });
+    this.uiElements.aboutDialog.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+  }
+
+  __updateAboutUI() {
+    const currentLocalization = this.mainmanager.getCurrentLocalization();
+
+    this.uiElements.aboutDialogHeaderClose.title =
+      currentLocalization.about_dialog_close_button;
+    this.uiElements.aboutDialogHeaderTitle.textContent =
+      currentLocalization.about_dialog_header_title;
+
+    this.uiElements.aboutDialogBody.replaceChildren();
+
+    const aboutDialogThanks = document.createElement("p");
+
+    aboutDialogThanks.textContent = currentLocalization.about_dialog_credits;
+
+    this.uiElements.aboutDialogBody.appendChild(aboutDialogThanks);
+  }
+
   __initSearchUI() {
     this.uiElements.searchDialogHeaderClose.addEventListener("click", () => {
       this.setSearchDialogOpen(false);

assets/styles/components.css

@@ -67,6 +67,7 @@
   display: inline-block;
   box-sizing: border-box;
   pointer-events: all;
+  user-select: text;
 
   padding: 8px;
 
@@ -100,6 +101,11 @@
   border-radius: 4px;
 }
 
+.style-inner p {
+  overflow: clip;
+  text-overflow: ellipsis;
+}
+
 .style-container {
   width: 100%;
   height: 100%;
@@ -138,6 +144,22 @@
   pointer-events: inherit;
 }
 
+.flag-material-icons {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 /* Display components */
 
 .display-flex-row {

assets/styles/elements.css

@@ -13,7 +13,7 @@ h2 {
 p {
   margin: 0;
   white-space: pre-wrap;
-  word-break: break-all;
+  /* word-break: break-all; */
 }
 
 hr {
@@ -30,7 +30,7 @@ button {
   border: none;
   color: white;
   font: inherit;
-  padding: 6px;
+  padding: 4px;
   border-radius: 4px;
   min-width: 36px;
   height: 36px;

assets/styles/style.css

@@ -5,6 +5,13 @@
   to { transform: rotate(1turn) }
 }
 
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 400;
+  src: url("/assets/fonts/MaterialIcons.woff2") format('woff2');
+}
+
 body, html {
   margin: 0;
   height: 100%;
@@ -25,6 +32,14 @@ body, html {
   user-select: none;
 }
 
+#map-ui #controls {
+  transition: right 0.25s;
+}
+
+#map-ui #controls.empty {
+  right: -100%;
+}
+
 #map-ui #loading {
   display: inline-block;
   position: absolute;
@@ -56,7 +71,8 @@ body, html {
   animation: load 0.5s linear infinite;
 }
 
-#search-dialog {
+#search-dialog,
+#about-dialog {
   width: calc(100% - 16px);
   max-width: 624px;
 }
@@ -113,7 +129,8 @@ body, html {
   opacity: 0;
 }
 
-#search-dialog div.size-fullwidth h1 {
+#search-dialog div.size-fullwidth h1,
+#about-dialog div.size-fullwidth h1 {
   line-height: 36px;
 }
 

pages/index.html

@@ -20,26 +20,26 @@
     <div id="map-ui" class="loading">
       <div id="controls" class="pos-topright pos-flush style-sidebar display-flex-column empty">
         <div id="zoom" class="style-box display-flex-column">
-          <button class="zoom-button" id="zoom-in">+</button>
-          <button class="zoom-button" id="zoom-out" disabled>-</button>
+          <button class="flag-material-icons zoom-button" id="zoom-in">add</button>
+          <button class="flag-material-icons zoom-button" id="zoom-out" disabled>remove</button>
         </div>
         <div id="floors" class="style-box display-flex-column">
         </div>
       </div>
       <div id="menu-bar" class="pos-topleft style-box display-flex-column">
-        <button class="menu-button" id="menu-search">Sc</button>
+        <button class="flag-material-icons menu-button" id="menu-search">search</button>
         <!-- <button class="menu-button" id="menu-lang">Ln</button> -->
-        <button class="menu-button" id="menu-about">(i)</button>
+        <button class="flag-material-icons menu-button" id="menu-about">info</button>
       </div>
       <div id="events-container" class="pos-botleft pos-flush style-container empty">
         <div id="events" class="pos-botleft style-box display-flex-column">
           <div id="events-header" class="display-flex-header">
-            <button id="back" disabled>↑</button>
+            <button id="back" class="flag-material-icons" disabled>arrow_upward</button>
             <div class="size-fullwidth">
               <h1 class="widget-heading" id="room-name"></h1>
               <p class="widget-description" id="room-description"></p>
             </div>
-            <button id="minimize">_</button>
+            <button id="minimize" class="flag-material-icons">minimize</button>
           </div>
           <div id="event-list" class="style-inner display-flex-column">
 
@@ -47,12 +47,12 @@
         </div>
         <div id="events-inspector" class="pos-botleft style-box display-flex-column">
           <div id="events-header" class="display-flex-header">
-            <button id="back">←</button>
+            <button id="back" class="flag-material-icons">arrow_back</button>
             <div class="size-fullwidth">
               <h1 class="widget-heading" id="room-name"></h1>
               <p class="widget-description subtitle" id="event-length"></p>
             </div>
-            <button id="minimize">_</button>
+            <button id="minimize" class="flag-material-icons">minimize</button>
           </div>
           <p class="widget-description" id="room-time"></p>
           <div id="event-body" class="style-inner display-flex-column">
@@ -65,7 +65,7 @@
             <div class="size-fullwidth">
               <h1 class="widget-heading" id="search-dialog-title"></h1>
             </div>
-            <button id="close">X</button>
+            <button id="close" class="flag-material-icons">close</button>
           </div>
           <div id="search-dialog-bar" class="size-fullwidth display-flex-header">
             <input type="text" id="search-dialog-input" />
@@ -81,12 +81,26 @@
           </div>
         </div>
       </div>
+      <div id="about-dialog-scrim" class="pos-topleft pos-flush style-container style-scrim display-flex-center">
+        <div id="about-dialog" class="style-box flag-no-pointer display-flex-column">
+          <div id="about-dialog-header" class="display-flex-header">
+            <div class="size-fullwidth">
+              <h1 class="widget-heading" id="about-dialog-title"></h1>
+            </div>
+            <button id="close" class="flag-material-icons">close</button>
+          </div>
+          <div id="about-body" class="style-inner">
+  
+          </div>
+        </div>
+      </div>
       <div id="loading">
         <div id="loading-circle">
           
         </div>
       </div>
     </div>
+  </div>
     <script src="/assets/scripts/script.js" type="module"></script>
     <script src="/files/scripts/script.js" type="module"></script>
   </body>