diff --git a/assets/fonts/MaterialIcons.woff2 b/assets/fonts/MaterialIcons.woff2 new file mode 100644 index 0000000..e014638 Binary files /dev/null and b/assets/fonts/MaterialIcons.woff2 differ diff --git a/assets/scripts/KaplayMap/localization.js b/assets/scripts/KaplayMap/localization.js index 7119a5b..b48d6d4 100644 --- a/assets/scripts/KaplayMap/localization.js +++ b/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", diff --git a/assets/scripts/KaplayMap/mapper.js b/assets/scripts/KaplayMap/mapper.js index 605174b..8c23a65 100644 --- a/assets/scripts/KaplayMap/mapper.js +++ b/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; diff --git a/assets/scripts/KaplayMap/ui.js b/assets/scripts/KaplayMap/ui.js index fe7d19c..ac7adc0 100644 --- a/assets/scripts/KaplayMap/ui.js +++ b/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); diff --git a/assets/styles/components.css b/assets/styles/components.css index e8754d0..34c7abb 100644 --- a/assets/styles/components.css +++ b/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 { diff --git a/assets/styles/elements.css b/assets/styles/elements.css index 61024f7..ff940b2 100644 --- a/assets/styles/elements.css +++ b/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; diff --git a/assets/styles/style.css b/assets/styles/style.css index be20c35..e9718a4 100644 --- a/assets/styles/style.css +++ b/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; } diff --git a/pages/index.html b/pages/index.html index 9262358..1064e64 100644 --- a/pages/index.html +++ b/pages/index.html @@ -20,26 +20,26 @@
- - + +
- +

- +
@@ -47,12 +47,12 @@
- +

- +

@@ -65,7 +65,7 @@

- +
@@ -81,12 +81,26 @@
+
+
+
+
+

+
+ +
+
+ +
+
+
+