diff --git a/assets/scripts/KaplayMap/events.js b/assets/scripts/KaplayMap/events.js index a30dbf4..877e8c0 100644 --- a/assets/scripts/KaplayMap/events.js +++ b/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() { - let floorEventsReqSend = fetch( - `/data/${this.floormanager.lang}/events/${this.floormanager.currentFloor}` - ); + async getEvents(lang, floor) { + let allEventsReqSend = fetch(`/data/${lang}/events/${floor}`); this.ui.setLoading(true); - let floorEventsReq = await floorEventsReqSend; - let floorEvents; - if (floorEventsReq.ok) floorEvents = await floorEventsReq.json(); + let allEventsReq = await allEventsReqSend; + let allEvents; + 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; + } +} \ No newline at end of file diff --git a/assets/scripts/KaplayMap/floors.js b/assets/scripts/KaplayMap/floors.js index 20b3c21..ac07257 100644 --- a/assets/scripts/KaplayMap/floors.js +++ b/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) { - this.#currentFloor = floor; - } - - 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`); + async getFloors(lang) { + let allFloorsReqSend = fetch(`/data/${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(); - else this.ui.__updateFloorsSoft(); + get currentFloor() { + 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(); - - await this.getRooms(id); - - this.gameobj.generateRooms(); - - await this.events.getFloorEvents(); - - this.ui.__updateEvents(); - - this.setCurrentRoom("", false); - - this.ui.setLoading(false); - - return floor; + get currentRoom() { + return this.#currentRoom; } } diff --git a/assets/scripts/KaplayMap/gameobj.js b/assets/scripts/KaplayMap/gameobj.js index c9c1858..894536d 100644 --- a/assets/scripts/KaplayMap/gameobj.js +++ b/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( - this.floormanager.currentFloor - ); + // const currentFloor = this.floormanager.floors.get( + // 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( - this.floormanager.currentFloor - ); + // const currentRooms = this.floormanager.rooms.get( + // 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(); diff --git a/assets/scripts/KaplayMap/lang.js b/assets/scripts/KaplayMap/lang.js new file mode 100644 index 0000000..73b8693 --- /dev/null +++ b/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; + } +} diff --git a/assets/scripts/KaplayMap/localization.js b/assets/scripts/KaplayMap/localization.js index 8a70d10..dbc7884 100644 --- a/assets/scripts/KaplayMap/localization.js +++ b/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", - }, - ], - [ - // 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", + event_inspector_header: (name) => `Event ${name}`, + event_inspector_back: "Return to events panel", + event_inspector_minimize: "Hide event inspector", + event_inspector_maximize: "Show event inspector", }, ], ]); diff --git a/assets/scripts/KaplayMap/ui.js b/assets/scripts/KaplayMap/ui.js index 480ebcd..87b9e3b 100644 --- a/assets/scripts/KaplayMap/ui.js +++ b/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() { - this.uiElements.eventsContainer.classList.toggle("minimized"); + __initInspector() { + 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() { - this.uiElements.eventsContainer.classList.add("minimized"); - } + __updateInspector() { + 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() { - this.uiElements.eventsContainer.classList.remove("minimized"); - } + // const currentEvent = this.eventmanager.currentEventItem; + if (currentEvent != null) { + this.uiElements.eventsContainer.classList.add("inspector"); + } else { + this.uiElements.eventsContainer.classList.remove("inspector"); + return; + } - __updateAll() { - this.__updateEvents(); - this.__updateFloorsHard(); + // 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); + + 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 != "") { - 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; - } + // 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) { - if (currentEvents.size < 1) { - 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; - this.uiElements.eventsBackButton.title = - currentLocalization.view_events_in( - this.floormanager.currentFloorItem.name - ); - this.uiElements.eventsMinimizedBackButton.disabled = false; - this.uiElements.eventsMinimizedBackButton.title = - currentLocalization.view_events_in( - this.floormanager.currentFloorItem.name - ); - } else { - if (currentEvents.size < 1) { - 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; - this.uiElements.eventsBackButton.title = ""; - this.uiElements.eventsMinimizedBackButton.disabled = true; - this.uiElements.eventsMinimizedBackButton.title = ""; - } + // if (this.floormanager.currentRoomItem != null) { + // if (currentEvents.size < 1) { + // 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; + // this.uiElements.eventsBackButton.title = + // currentLocalization.view_events_in( + // this.floormanager.currentFloorItem.name + // ); + // this.uiElements.eventsMinimizedBackButton.disabled = false; + // this.uiElements.eventsMinimizedBackButton.title = + // currentLocalization.view_events_in( + // this.floormanager.currentFloorItem.name + // ); + // } else { + // if (currentEvents.size < 1) { + // 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; + // this.uiElements.eventsBackButton.title = ""; + // this.uiElements.eventsMinimizedBackButton.disabled = true; + // 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) { - const eventListContainerSummaryRoom = document.createElement("button"); - eventListContainerSummaryRoom.classList.add("link"); - eventListContainerSummaryRoom.addEventListener("click", () => { - this.floormanager.setCurrentRoom(eventFloor.id); - }); - eventListContainerSummaryRoom.textContent = - currentLocalization.parenthesis(eventFloor.name); + // if (this.floormanager.currentRoomItem == null) { + // const eventListContainerSummaryRoom = document.createElement("button"); + // eventListContainerSummaryRoom.classList.add("link"); + // eventListContainerSummaryRoom.addEventListener("click", () => { + // this.floormanager.setCurrentRoom(eventFloor.id); + // }); + // eventListContainerSummaryRoom.textContent = + // 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, - this.floormanager.lang.replace(/_/g, "-") + currentDate + // 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) => { - const floorButton = document.createElement("button"); - floorButton.textContent = name; - floorButton.classList.add("floor-button"); - floorButton.id = "floor-" + id; - if (id === this.floormanager.currentFloor) - floorButton.classList.add("selected"); - floorButton.addEventListener("click", () => - this.floormanager.changeFloor(id) - ); + // this.floormanager.floors.forEach(({ name }, id) => { + // const floorButton = document.createElement("button"); + // floorButton.textContent = name; + // floorButton.classList.add("floor-button"); + // floorButton.id = "floor-" + id; + // if (id === this.floormanager.currentFloor) + // floorButton.classList.add("selected"); + // floorButton.addEventListener("click", () => + // this.floormanager.changeFloor(id) + // ); - this.uiElements.floorButtons.appendChild(floorButton); - }); + // this.uiElements.floorButtons.appendChild(floorButton); + // }); - if (this.floormanager.floors.size < 1) { - this.uiElements.floors.classList.add("empty"); - this.floorsEmpty = true; - } else { - this.uiElements.floors.classList.remove("empty"); - this.floorsEmpty = false; - } + // if (this.floormanager.floors.size < 1) { + // this.uiElements.floors.classList.add("empty"); + // this.floorsEmpty = true; + // } else { + // this.uiElements.floors.classList.remove("empty"); + // this.floorsEmpty = false; + // } } __updateFloorsSoft() { - const currentLocalization = localization.get(this.floormanager.lang); - this.uiElements.floorsHeading.textContent = currentLocalization.floors_header; - this.floormanager.floors.forEach(({ name }, id) => { - const child = this.uiElements.floorButtons.querySelector("#floor-" + id); - if (id === this.floormanager.currentFloor) - child.classList.add("selected"); - else child.classList.remove("selected"); - }); + // this.floormanager.floors.forEach(({ name }, id) => { + // const child = this.uiElements.floorButtons.querySelector("#floor-" + id); + // if (id === this.floormanager.currentFloor) + // child.classList.add("selected"); + // else child.classList.remove("selected"); + // }); } } diff --git a/assets/scripts/modules/relative_time.js b/assets/scripts/modules/relative_time.js index 5547e04..d61a668 100644 --- a/assets/scripts/modules/relative_time.js +++ b/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", + }); +} \ No newline at end of file diff --git a/assets/scripts/script.js b/assets/scripts/script.js index 126caf4..f97d78e 100644 --- a/assets/scripts/script.js +++ b/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(); - -// addZoomButtons(kaplaymap); - +const langmanager = new LangManager("en-US"); 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, - "en_US" + eventmanager ); -floormanager.getFloors(); \ No newline at end of file +async function main() { + kaplaymap.initGrid(); +} + +main(); \ No newline at end of file diff --git a/assets/styles/style.css b/assets/styles/style.css index 1d5cc58..450ea3b 100644 --- a/assets/styles/style.css +++ b/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 { - left: 16px; +#map-ui #events-container #events, +#map-ui #events-container #events-inspector { width: 400px; max-width: calc(100% - 32px); } -#map-ui #events-container.minimized #events { - left: -100%; -} - -#map-ui #events-container #events-minimized { - left: -100%; -} - -#map-ui #events-container.minimized #events-minimized { +#map-ui #events-container:not(.inspector):not(.minimized) #events { 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; } diff --git a/pages/index.html b/pages/index.html index d56488d..aa952fe 100644 --- a/pages/index.html +++ b/pages/index.html @@ -27,7 +27,7 @@
- +

@@ -44,7 +44,28 @@
- + +
+
+
+ +
+

+

+
+
+

+
+
+ +
+
+ +