diff --git a/assets/scripts/KaplayMap/events.js b/assets/scripts/KaplayMap/events.js index 877e8c0..0ae7bcc 100644 --- a/assets/scripts/KaplayMap/events.js +++ b/assets/scripts/KaplayMap/events.js @@ -1,44 +1,57 @@ export class EventManager { - map; - ui; - gameobj; - floormanager; + mainmanager; - events = new Map([]); - #currentEvent = ""; + #events = new Map([]); - constructor(map, ui, gameobj) { - this.map = map; - this.ui = ui; - this.ui.eventmanager = this; - this.gameobj = gameobj; - } + constructor() {} - async getEvents(lang, floor) { - let allEventsReqSend = fetch(`/data/${lang}/events/${floor}`); + async getEvents() { + const currentLocalization = this.mainmanager.getCurrentLangCode(); + const currentFloor = this.mainmanager.getCurrentFocus("floor"); - this.ui.setLoading(true); + let allEventsReqSend = fetch( + `/data/${currentLocalization}/events/${currentFloor}` + ); let allEventsReq = await allEventsReqSend; let allEvents; if (allEventsReq.ok) allEvents = await allEventsReq.json(); - this.events.clear(); + this.#events.clear(); - allEvents.forEach((event) => this.events.set(event.id, event)); - - this.ui.setLoading(false); + allEvents.forEach((event) => this.#events.set(event.id, event)); } setCurrentEvent(id) { - if (id == null) this.#currentEvent = id; + if (id == null) this.mainmanager.setCurrentFocus("event", id); else { - const event = this.events.get(id); - if (event != null) this.#currentEvent = event; + const event = this.#events.get(id); + if (event != null) this.mainmanager.setCurrentFocus("event", id); + else throw "Event does not exist"; } } - get currentEvent() { - return this.#currentEvent; + get currentRoomEvents() { + const currentFocus = this.mainmanager.getCurrentFocus("room"); + let currentFloorRooms = new Map([]); + this.#events.forEach((v, k) => { + if (k.startsWith(currentFocus)) currentFloorRooms.set(k, v); + }); + return currentFloorRooms; } -} \ No newline at end of file + + get allEvents() { + return this.#events; + } + + get currentEventId() { + return this.mainmanager.getCurrentFocus("event"); + } + + get currentEvent() { + const currentEvent = this.#events.get( + this.mainmanager.getCurrentFocus("event") + ); + return currentEvent; + } +} diff --git a/assets/scripts/KaplayMap/floors.js b/assets/scripts/KaplayMap/floors.js index ac07257..832715b 100644 --- a/assets/scripts/KaplayMap/floors.js +++ b/assets/scripts/KaplayMap/floors.js @@ -1,45 +1,34 @@ export class FloorManager { - map; - ui; - gameobj; - events; + mainmanager; - floors = new Map([]); - rooms = new Map([]); - #currentFloor = ""; - #currentRoom = ""; + #floors = new Map([]); + #rooms = new Map([]); - constructor(map, ui, gameobj, events) { - this.map = map; - this.ui = ui; - this.ui.floormanager = this; - this.gameobj = gameobj; - this.events = events; - this.events.floormanager = this; - } + constructor() {} - async getFloors(lang) { - let allFloorsReqSend = fetch(`/data/${lang}/map`); + async getFloors() { + const currentLocalization = this.mainmanager.getCurrentLangCode(); - this.ui.setLoading(true); + let allFloorsReqSend = fetch(`/data/${currentLocalization}/floors`); let allFloorsReq = await allFloorsReqSend; let allFloors; if (allFloorsReq.ok) allFloors = await allFloorsReq.json(); - allFloors.forEach((floor) => this.floors.set(floor.id, floor)); - - this.ui.setLoading(false); + allFloors.forEach((floor) => this.#floors.set(floor.id, floor)); } - async getRooms(lang, floor) { - const curRoom = this.rooms.get(id); + async getRooms() { + const currentLocalization = this.mainmanager.getCurrentLangCode(); + const currentFloor = this.mainmanager.getCurrentFocus("floor"); + + const curRoom = this.#rooms.get(currentFloor); if (curRoom != null) return curRoom; - let allRoomsReqSend = fetch(`/data/${lang}/map/${floor}`); - - this.ui.setLoading(true); + let allRoomsReqSend = fetch( + `/data/${currentLocalization}/rooms/${currentFloor}` + ); let allRoomsReq = await allRoomsReqSend; let allRooms; @@ -48,29 +37,58 @@ export class FloorManager { const roomMap = new Map([]); allRooms.forEach((room) => roomMap.set(room.id, room)); - this.rooms.set(floor, roomMap); - - this.ui.setLoading(false); + this.#rooms.set(currentFloor, roomMap); } setCurrentFloor(id) { - const floor = this.floors.get(id); - if (floor != null) this.#currentFloor = id; + const floor = this.#floors.get(id); + if (floor != null) this.mainmanager.setCurrentFocus("floor", id); + else throw "Floor does not exist"; + } + + get allFloors() { + return this.#floors; + } + + get currentFloorId() { + return this.mainmanager.getCurrentFocus("floor"); } get currentFloor() { - return this.#currentFloor; + const currentFloor = this.#floors.get( + this.mainmanager.getCurrentFocus("floor") + ); + return currentFloor; + } + + get currentFloorRooms() { + const currentFloorRooms = this.#rooms.get( + this.mainmanager.getCurrentFocus("floor") + ); + return currentFloorRooms; } setCurrentRoom(id) { - if (id == null) this.#currentRoom = id; + if (id == null) this.mainmanager.setCurrentFocus("room", id); else { - const room = this.rooms.get(this.#currentFloor).get(room); - if (room != null) this.#currentRoom = id; + const room = this.currentFloorRooms.get(id); + if (room != null) this.mainmanager.setCurrentFocus("room", id); + else throw "Room does not exist"; } } + get allRooms() { + return this.#rooms; + } + + get currentRoomId() { + return this.mainmanager.getCurrentFocus("room"); + } + get currentRoom() { - return this.#currentRoom; + const currentFloor = this.currentFloorRooms.get( + this.mainmanager.getCurrentFocus("room") + ); + return currentFloor; } } diff --git a/assets/scripts/KaplayMap/gameobj.js b/assets/scripts/KaplayMap/gameobj.js index 894536d..a31316c 100644 --- a/assets/scripts/KaplayMap/gameobj.js +++ b/assets/scripts/KaplayMap/gameobj.js @@ -5,23 +5,23 @@ export class GameObjManager { }; map; + mainmanager; + floorObject; roomObjects = new Map([]); - constructor(map) { + constructor(map, opts) { this.map = map; - } - - generateFloor(opts) { this.opts = { ...this.opts, opts, }; + } + + generateFloor() { if (this.floorObject) this.floorObject.destroy(); - // const currentFloor = this.floormanager.floors.get( - // this.floormanager.currentFloor - // ); + const currentFloor = this.mainmanager.getCurrentFocusObject("floor"); const polygon = new this.map.kp.Polygon( currentFloor.poly.map(([x, y]) => this.map.kp.vec2(x, y)) @@ -31,7 +31,6 @@ export class GameObjManager { this.map.kp.polygon(polygon.pts), this.map.kp.outline(1, this.map.kp.BLACK), this.map.kp.color(this.map.kp.Color.fromHex("303030")), - // this.map.kp.area(), this.map.kp.pos(), this.map.kp.z(5), ]); @@ -57,11 +56,6 @@ export class GameObjManager { }); this.map.kp.add(this.floorObject); - - this.map.zoomToAbs( - this.map.opts.minZoomLevel + this.opts.floorMinZoom, - bounds.center() - ); } zoomToFloor() { @@ -91,9 +85,7 @@ export class GameObjManager { this.roomObjects.clear(); } - // const currentRooms = this.floormanager.rooms.get( - // this.floormanager.currentFloor - // ); + const currentRooms = this.mainmanager.getAllFocusObject("room"); currentRooms.forEach((room) => { const polygon = new this.map.kp.Polygon( @@ -138,7 +130,7 @@ export class GameObjManager { obj.startClickPosition && obj.startClickPosition.dist(endClickPosition) < obj.clickForgiveness ) { - // this.floormanager.setCurrentRoom(room.id); + window.location.hash = 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 index 73b8693..1694a18 100644 --- a/assets/scripts/KaplayMap/lang.js +++ b/assets/scripts/KaplayMap/lang.js @@ -1,17 +1,17 @@ import localization from "./localization.js"; export class LangManager { - lang; + #lang; constructor(lang) { - this.lang = lang; + this.#lang = lang; } - getCurrentLocalization() { - return localization.get(this.lang); + get currentLocalization() { + return localization.get(this.#lang); } - getLangCode() { - return this.lang; + get langCode() { + return this.#lang; } } diff --git a/assets/scripts/KaplayMap/index.js b/assets/scripts/KaplayMap/map.js similarity index 90% rename from assets/scripts/KaplayMap/index.js rename to assets/scripts/KaplayMap/map.js index b7983e0..f690cdc 100644 --- a/assets/scripts/KaplayMap/index.js +++ b/assets/scripts/KaplayMap/map.js @@ -33,6 +33,9 @@ export class KaplayMap { startFingerCenterPos = null; startFingerZoomLevel = null; + // Map event listener + events; + constructor(kp, opts) { this.kp = kp; this.opts = { @@ -40,8 +43,11 @@ export class KaplayMap { ...opts, }; + this.events = new EventTarget(); + this.zoomLevel_NoTween = this.opts.minZoomLevel; this.kp.camPos(0); + this.camBounds = new this.kp.Rect(this.kp.vec2(-1), 2, 2); this.kp.onScroll((delta) => { const scrollDist = -delta.y / 120; @@ -198,6 +204,12 @@ export class KaplayMap { }); } + dispatchEvent(eventName, data) { + const event = new CustomEvent(eventName, { detail: data }); + + this.events.dispatchEvent(event); + } + initGrid() { const grid = this.kp.loadSprite(null, "/assets/images/grid.png"); @@ -210,7 +222,7 @@ export class KaplayMap { height: this.kp.height() + 200, anchor: "center", pos: this.kp.vec2( - Math.floor(this.kp.camPos().x / 100) * 100 + 50.5, + Math.floor(this.kp.camPos().x / 100) * 100 + 0.5, Math.floor(this.kp.camPos().y / 100) * 100 + 0.5 ), }); @@ -268,13 +280,28 @@ export class KaplayMap { return this.#zoomLevel; } + zoomIn() { + this.zoomLevel += 1; + } + + zoomOut() { + this.zoomLevel -= 1; + } + set zoomLevel(newZoom) { const cameraZoom = this.kp.camScale().y; let addLinear = newZoom; - if (addLinear < this.opts.minZoomLevel) addLinear = this.opts.minZoomLevel; - if (addLinear > this.opts.maxZoomLevel) addLinear = this.opts.maxZoomLevel; + if (addLinear <= this.opts.minZoomLevel) { + addLinear = this.opts.minZoomLevel; + this.dispatchEvent("zoomMin"); + } else if (addLinear >= this.opts.maxZoomLevel) { + addLinear = this.opts.maxZoomLevel; + this.dispatchEvent("zoomMax"); + } else { + this.dispatchEvent("zoom"); + } let linearToLog = Math.pow(2, addLinear); this.#zoomLevel = addLinear; @@ -298,8 +325,15 @@ export class KaplayMap { set zoomLevel_NoTween(newZoom) { let addLinear = newZoom; - if (addLinear < this.opts.minZoomLevel) addLinear = this.opts.minZoomLevel; - if (addLinear > this.opts.maxZoomLevel) addLinear = this.opts.maxZoomLevel; + if (addLinear <= this.opts.minZoomLevel) { + addLinear = this.opts.minZoomLevel; + this.dispatchEvent("zoomMin"); + } else if (addLinear >= this.opts.maxZoomLevel) { + addLinear = this.opts.maxZoomLevel; + this.dispatchEvent("zoomMax"); + } else { + this.dispatchEvent("zoom"); + } let linearToLog = Math.pow(2, addLinear); this.#zoomLevel = addLinear; diff --git a/assets/scripts/KaplayMap/mapper.js b/assets/scripts/KaplayMap/mapper.js new file mode 100644 index 0000000..4bd9bb0 --- /dev/null +++ b/assets/scripts/KaplayMap/mapper.js @@ -0,0 +1,307 @@ +import { EventManager } from "./events.js"; +import { FloorManager } from "./floors.js"; +import { GameObjManager } from "./gameobj.js"; +import { LangManager } from "./lang.js"; +import { UIManager } from "./ui.js"; + +export class EventMapperManager { + #currentFocus = [null, null, null]; + + map; + langmanager; + eventmanager; + floormanager; + uimanager; + gameobjmanager; + + constructor(map, mapUi) { + this.map = map; + + this.langmanager = new LangManager("en-US"); + this.langmanager.mainmanager = this; + + this.eventmanager = new EventManager(); + this.eventmanager.mainmanager = this; + + this.floormanager = new FloorManager(); + this.floormanager.mainmanager = this; + + this.uimanager = new UIManager(mapUi); + this.uimanager.mainmanager = this; + + this.gameobjmanager = new GameObjManager(this.map, {}); + this.gameobjmanager.mainmanager = this; + } + + // Init + + async load() { + this.uimanager.setLoading(true); + + await this.floormanager.getFloors(); + + this.uimanager.mainmanagerInit(); + + this.uimanager.__updateFloorsHard(); + + this.uimanager.setLoading(false); + + this.uimanager.setLoading(true); + + window.addEventListener("hashchange", () => this.hashchange()); + + await this.hashchange(); + + this.uimanager.setLoading(false); + } + + async hashchange() { + const prevID = this.#currentFocus; + + let hash = location.hash; + if (hash.includes("#")) hash = hash.replace("#", ""); + + const floorFocus = this.convertIdFocus(hash, "floor"); + const roomFocus = this.convertIdFocus(hash, "room"); + const eventFocus = this.convertIdFocus(hash, "event"); + + if (floorFocus != this.convertFocus(prevID, "floor")) + await this.selectFloor(floorFocus); + if (roomFocus != this.convertFocus(prevID, "room")) + await this.selectRoom(roomFocus); + if (eventFocus != this.convertFocus(prevID, "event")) + await this.selectEvent(eventFocus); + } + + async selectFloor(id) { + this.floormanager.setCurrentFloor(id); + + this.uimanager.__updateFloorsSoft(); + + this.uimanager.__updateEventsSoft(); + + this.gameobjmanager.generateFloor(); + + this.gameobjmanager.zoomToFloor(); + + this.uimanager.setLoading(true); + + await this.floormanager.getRooms(); + + this.gameobjmanager.generateRooms(); + + this.uimanager.setLoading(false); + + this.uimanager.setLoading(true); + + await this.eventmanager.getEvents(); + + this.uimanager.updateEvents(); + + if (!this.uimanager.getEventsEmpty()) + this.uimanager.setEventsMinimized(false); + + this.uimanager.setLoading(false); + } + + async selectRoom(id) { + this.floormanager.setCurrentRoom(id); + + if (id == null) this.gameobjmanager.zoomToFloor(); + else this.gameobjmanager.zoomToRoom(id); + + this.uimanager.updateEvents(); + + if (!this.uimanager.getEventsEmpty()) + this.uimanager.setEventsMinimized(false); + this.uimanager.setEventsInspector(false); + } + + async selectEvent(id) { + this.eventmanager.setCurrentEvent(id); + + if (id != null) { + this.gameobjmanager.zoomToRoom(this.convertIdFocus(id, "room")); + + this.uimanager.updateInspector(); + } + + this.uimanager.setEventsInspector(id != null); + } + + // Focus + + convertFocus(id, focus) { + let res; + switch (focus) { + case "floor": + return id.slice(0, 1).toString(); + case "room": + res = id.slice(0, 2); + if (res.length < 2) return null; + return res.filter(Boolean).join("_"); + case "event": + res = id.slice(0, 3); + if (res.length < 3) return null; + return res.join("_"); + } + } + + convertIdFocus(id, focus) { + const focusFromId = id.split("_"); + let res; + switch (focus) { + case "floor": + return focusFromId.slice(0, 1).toString(); + case "room": + res = focusFromId.slice(0, 2); + if (res.length < 2) return null; + return res.filter(Boolean).join("_"); + case "event": + res = focusFromId.slice(0, 3); + if (res.length < 3) return null; + return res.join("_"); + } + } + + splitIdFocus(id, focus) { + const focusFromId = id.split("_"); + switch (focus) { + case "floor": + return focusFromId.slice(0, 1); + case "room": + return focusFromId.slice(0, 2); + case "event": + return focusFromId; + } + } + + setCurrentFocus(focus, id) { + if (id == null) { + switch (focus) { + case "floor": + this.#currentFocus[0] = id; + break; + case "room": + this.#currentFocus[1] = id; + break; + case "event": + this.#currentFocus[2] = id; + break; + } + } else this.#currentFocus = this.splitIdFocus(id, focus); + } + + getCurrentFocus(focus) { + switch (focus) { + case "floor": + return this.#currentFocus.slice(0, 1).toString(); + case "room": + return this.#currentFocus.slice(0, 2).filter(Boolean).join("_"); + case "event": + return this.currentFocusId; + } + } + + getIsFocused(focus) { + switch (focus) { + case "floor": + return this.#currentFocus[0] != null; + case "room": + return this.#currentFocus[1] != null; + case "event": + return this.#currentFocus[2] != null; + } + } + + set currentFocusId(id) { + this.#currentFocus = id.split("_"); + } + + get currentFocusId() { + return this.#currentFocus.filter(Boolean).join("_"); + } + + // IMC shorthand (focus) + + getAllFocusObject(focus) { + switch (focus) { + case "floor": + return this.floormanager.allFloors; + case "room": + return this.floormanager.currentFloorRooms; + case "event": + return this.eventmanager.currentRoomEvents; + } + } + + getCurrentFocusObject(focus) { + switch (focus) { + case "floor": + return this.floormanager.currentFloor; + case "room": + return this.floormanager.currentRoom; + case "event": + return this.eventmanager.currentEvent; + } + } + + getCurrentLocalization() { + return this.langmanager.currentLocalization; + } + + getCurrentLangCode() { + return this.langmanager.langCode; + } + + // Inter-manager comms + + // I don't know if this is Horrible or Fine + addManagerEventListener(manager, event, callback) { + switch (manager) { + case "map": + return this.map.events.addEventListener(event, callback); + } + } + + removeManagerEventListener(manager, event, callback) { + switch (manager) { + case "map": + return this.map.events.removeEventListener(event, callback); + } + } + + callManagerFunction(manager, func, ...args) { + switch (manager) { + case "map": + return this.map[func](...args); + case "lang": + return this.langmanager[func](...args); + case "event": + return this.eventmanager[func](...args); + case "floor": + return this.floormanager[func](...args); + case "ui": + return this.uimanager[func](...args); + case "gameobj": + return this.gameobjmanager[func](...args); + } + } + + getManagerVariable(manager, variable) { + switch (manager) { + case "map": + return this.map[variable]; + case "lang": + return this.langmanager[variable]; + case "event": + return this.eventmanager[variable]; + case "floor": + return this.floormanager[variable]; + case "ui": + return this.uimanager[variable]; + case "gameobj": + return this.gameobjmanager[variable]; + } + } +} diff --git a/assets/scripts/KaplayMap/ui.js b/assets/scripts/KaplayMap/ui.js index 87b9e3b..0351382 100644 --- a/assets/scripts/KaplayMap/ui.js +++ b/assets/scripts/KaplayMap/ui.js @@ -6,18 +6,16 @@ import { export class UIManager { ui; - map; - floormanager; - eventmanager; + mainmanager; uiElements = {}; floorsEmpty = true; - eventsEmpty = true; - constructor(ui, map) { + constructor(ui) { this.ui = ui; - this.map = map; + } + mainmanagerInit() { this.__initUIElements(); this.__initZoom(); @@ -27,6 +25,8 @@ export class UIManager { this.__initInspector(); } + // State + setLoading(state) { if (state) { this.ui.classList.add("loading"); @@ -35,6 +35,42 @@ export class UIManager { } } + setZoomDisabled(state = 0) { + if (state > 0) { + this.uiElements.zoomIn.disabled = true; + this.uiElements.zoomOut.disabled = false; + } else if (state < 0) { + this.uiElements.zoomIn.disabled = false; + this.uiElements.zoomOut.disabled = true; + } else { + this.uiElements.zoomIn.disabled = false; + this.uiElements.zoomOut.disabled = false; + } + } + + setEventsMinimized(state) { + if (state) { + this.uiElements.eventsContainer.classList.add("minimized"); + } else { + this.uiElements.eventsContainer.classList.remove("minimized"); + } + } + + setEventsInspector(state) { + this.setEventsMinimized(false); + if (state) { + this.uiElements.eventsContainer.classList.add("inspector"); + } else { + this.uiElements.eventsContainer.classList.remove("inspector"); + } + } + + getEventsEmpty() { + return this.uiElements.events.classList.contains("empty"); + } + + // Init + __initUIElements() { // Zoom this.uiElements.zoomButtons = this.ui.querySelector("#zoom"); @@ -110,52 +146,49 @@ export class UIManager { } __initZoom() { - this.uiElements.zoomIn.addEventListener("click", () => { - this.map.zoomLevel += 1; + this.uiElements.zoomIn.addEventListener("click", () => + this.mainmanager.callManagerFunction("map", "zoomIn") + ); + this.uiElements.zoomOut.addEventListener("click", () => + this.mainmanager.callManagerFunction("map", "zoomOut") + ); + this.mainmanager.addManagerEventListener("map", "zoomMin", () => { + this.setZoomDisabled(-1); }); - this.uiElements.zoomOut.addEventListener("click", () => { - this.map.zoomLevel -= 1; + this.mainmanager.addManagerEventListener("map", "zoomMax", () => { + this.setZoomDisabled(1); }); - this.map.kp.onUpdate(() => { - if (this.map.zoomLevelLimit > 0) { - this.uiElements.zoomIn.disabled = true; - this.uiElements.zoomOut.disabled = false; - } else if (this.map.zoomLevelLimit < 0) { - this.uiElements.zoomIn.disabled = false; - this.uiElements.zoomOut.disabled = true; - } else { - this.uiElements.zoomIn.disabled = false; - this.uiElements.zoomOut.disabled = false; - } + this.mainmanager.addManagerEventListener("map", "zoom", () => { + this.setZoomDisabled(0); }); } __initInspector() { this.uiElements.eventsInspectorMinimizeButton.addEventListener( "click", - () => { - this.uiElements.eventsContainer.classList.add("minimized"); - } + () => this.setEventsMinimized(true) ); this.uiElements.eventsInspectorMaximizeButton.addEventListener( "click", - () => { - this.uiElements.eventsContainer.classList.remove("minimized"); - } + () => this.setEventsMinimized(false) ); this.uiElements.eventsInspectorBackButton.addEventListener("click", () => { - // this.eventmanager.setCurrentEvent(""); + window.location.hash = this.mainmanager.getCurrentFocus("room"); }); this.uiElements.eventsInspectorMinimizedBackButton.addEventListener( "click", () => { - // this.eventmanager.setCurrentEvent(""); - this.eventsMaximize(true); + window.location.hash = this.mainmanager.getCurrentFocus("room"); } ); } - __updateInspector() { + updateInspector() { + const currentLocalization = this.mainmanager.getCurrentLocalization(); + + const currentEvent = this.mainmanager.getCurrentFocusObject("event"); + const eventRoom = this.mainmanager.getCurrentFocusObject("room"); + this.uiElements.eventsInspectorBackButton.title = currentLocalization.event_inspector_back; this.uiElements.eventsInspectorMinimizedBackButton.title = @@ -165,18 +198,6 @@ export class UIManager { this.uiElements.eventsInspectorMaximizeButton.title = currentLocalization.event_inspector_maximize; - // const currentEvent = this.eventmanager.currentEventItem; - if (currentEvent != null) { - this.uiElements.eventsContainer.classList.add("inspector"); - } else { - this.uiElements.eventsContainer.classList.remove("inspector"); - return; - } - - // 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); @@ -201,16 +222,16 @@ export class UIManager { datePrefix, getRelativeTime( eventDateStart, - currentDate - // this.floormanager.lang.replace(/_/g, "-") + currentDate, + this.mainmanager.getCurrentLangCode() ) ) + " " + currentLocalization.parenthesis( DatetoLocaleDynamicString( eventDateStart, - currentDate - // this.floormanager.lang.replace(/_/g, "-") + currentDate, + this.mainmanager.getCurrentLangCode() ) ); this.uiElements.eventsInspectorEventLength.textContent = @@ -221,12 +242,9 @@ export class UIManager { "" ); - const eventWhere = document.createElement("button"); - eventWhere.classList.add("link"); - eventWhere.addEventListener("click", () => { - // this.floormanager.setCurrentRoom(eventFloor.id); - }); - eventWhere.textContent = eventFloor.name; + const eventWhere = document.createElement("a"); + eventWhere.href = "#" + eventRoom.id; + eventWhere.textContent = eventRoom.name; this.uiElements.eventsInspectorEventLength.appendChild(eventWhere); @@ -241,6 +259,7 @@ export class UIManager { const eventURL = new URL(currentEvent.url); eventAnchor.href = eventURL; + eventAnchor.target = "_blank"; eventAnchor.textContent = eventURL.toString(); eventLink.appendChild(eventAnchor); @@ -262,10 +281,10 @@ export class UIManager { __initEvents() { this.uiElements.eventsBackButton.addEventListener("click", () => { - // this.floormanager.setCurrentRoom(""); + window.location.hash = this.mainmanager.getCurrentFocus("floor"); }); this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => { - // this.floormanager.setCurrentRoom("", false); + window.location.hash = this.mainmanager.getCurrentFocus("floor"); }); this.uiElements.minimizeButton.addEventListener("click", () => { @@ -276,60 +295,57 @@ export class UIManager { }); } - __updateEvents() { - 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; - // } + __updateEventsSoft() { + const focusedFloor = this.mainmanager.getCurrentFocusObject("floor"); + + if (focusedFloor == null) { + this.uiElements.eventsContainer.classList.add("empty"); + } else { + this.uiElements.eventsContainer.classList.remove("empty"); + } + } + + updateEvents() { + const currentLocalization = this.mainmanager.getCurrentLocalization(); + + const currentEvents = this.mainmanager.getAllFocusObject("event"); + + const focusedFloor = this.mainmanager.getCurrentFocusObject("floor"); + const focusedRoom = this.mainmanager.getCurrentFocusObject("room"); 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.mainmanager.getIsFocused("room")) { + if (currentEvents.size < 1) { + this.uiElements.eventsRoomName.textContent = focusedRoom.name; + } else { + this.uiElements.eventsRoomName.textContent = + currentLocalization.events_in(focusedRoom.name); + } + this.uiElements.eventsRoomDescription.textContent = + focusedRoom.description; + this.uiElements.eventsBackButton.disabled = false; + this.uiElements.eventsBackButton.title = + currentLocalization.view_events_in(focusedFloor.name); + this.uiElements.eventsMinimizedBackButton.disabled = false; + this.uiElements.eventsMinimizedBackButton.title = + currentLocalization.view_events_in(focusedFloor.name); + } else { + if (currentEvents.size < 1) { + this.uiElements.eventsRoomName.textContent = focusedFloor.name; + } else { + this.uiElements.eventsRoomName.textContent = + currentLocalization.events_in(focusedFloor.name); + } + this.uiElements.eventsRoomDescription.textContent = + focusedFloor.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(); @@ -338,7 +354,9 @@ export class UIManager { const currentDate = new Date(); currentEvents.forEach((event, id) => { - // const eventFloor = this.floormanager.currentFloorRooms.get(event.where); + const eventRoom = this.mainmanager + .getAllFocusObject("room") + .get(this.mainmanager.convertIdFocus(event.id, "room")); const eventDateStart = new Date(event.when.start); const eventDateEnd = new Date(event.when.end); @@ -361,29 +379,22 @@ export class UIManager { const eventListContainerSummary = document.createElement("p"); - const eventListContainerSummaryName = document.createElement("button"); - eventListContainerSummaryName.classList.add("link"); - eventListContainerSummaryName.addEventListener("click", () => { - // this.floormanager.setCurrentRoom(eventFloor.id, true, true); - // this.eventmanager.setCurrentEvent(id); - }); + const eventListContainerSummaryName = document.createElement("a"); + eventListContainerSummaryName.href = "#" + 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.mainmanager.getIsFocused("room")) { + const eventListContainerSummaryRoom = document.createElement("a"); + eventListContainerSummaryRoom.href = "#" + eventRoom.id; + eventListContainerSummaryRoom.textContent = + currentLocalization.parenthesis(eventRoom.name); - // eventListContainerSummary.appendChild(eventListContainerSummaryRoom); - // } + eventListContainerSummary.appendChild(eventListContainerSummaryRoom); + } eventListContainerSummary.appendChild(document.createElement("br")); @@ -392,7 +403,7 @@ export class UIManager { const eventListContainerSummaryTime = document.createElement("span"); eventListContainerSummaryTime.classList.add("clarification"); eventListContainerSummaryTime.title = eventDateStart.toLocaleString( - // this.floormanager.lang.replace(/_/g, "-"), + this.mainmanager.getCurrentLangCode(), { dateStyle: "short", timeStyle: "short", @@ -403,8 +414,8 @@ export class UIManager { datePrefix, getRelativeTime( eventDateStart, - currentDate - // this.floormanager.lang.replace(/_/g, "-") + currentDate, + this.mainmanager.getCurrentLangCode() ) ); @@ -432,53 +443,56 @@ export class UIManager { }); if (currentEvents.size < 1) { - this.uiElements.eventsContainer.classList.add("empty"); - this.eventsEmpty = true; + this.uiElements.events.classList.add("empty"); } else { - this.uiElements.eventsContainer.classList.remove("empty"); - this.eventsEmpty = false; + this.uiElements.events.classList.remove("empty"); } } __updateFloorsHard() { + const currentLocalization = this.mainmanager.getCurrentLocalization(); + const currentFloors = this.mainmanager.getAllFocusObject("floor"); + const mainFocus = this.mainmanager.getCurrentFocus("floor"); // 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) - // ); + currentFloors.forEach(({ name }, id) => { + const floorButton = document.createElement("button"); + floorButton.textContent = name; + floorButton.classList.add("floor-button"); + floorButton.id = "floor-" + id; + if (id === mainFocus) floorButton.classList.add("selected"); + floorButton.addEventListener("click", () => { + window.location.hash = 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 (currentFloors.size < 1) { + this.uiElements.floors.classList.add("empty"); + this.floorsEmpty = true; + } else { + this.uiElements.floors.classList.remove("empty"); + this.floorsEmpty = false; + } } __updateFloorsSoft() { + const currentLocalization = this.mainmanager.getCurrentLocalization(); + const currentFloors = this.mainmanager.getAllFocusObject("floor"); + const mainFocus = this.mainmanager.getCurrentFocus("floor"); + 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"); - // }); + currentFloors.forEach((_, id) => { + const child = this.uiElements.floorButtons.querySelector("#floor-" + id); + if (id === mainFocus) child.classList.add("selected"); + else child.classList.remove("selected"); + }); } } diff --git a/assets/scripts/script.js b/assets/scripts/script.js index f97d78e..71d4c1a 100644 --- a/assets/scripts/script.js +++ b/assets/scripts/script.js @@ -1,10 +1,6 @@ import kaplay from "./modules/kaplay.js"; -import { KaplayMap } from "./KaplayMap/index.js"; -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"; +import { KaplayMap } from "./KaplayMap/map.js"; +import { EventMapperManager } from "./KaplayMap/mapper.js"; const map = document.querySelector("#map"); const mapUi = document.querySelector("#map-ui"); @@ -23,20 +19,12 @@ const kp = kaplay({ }); const kaplaymap = new KaplayMap(kp, {}); - -const langmanager = new LangManager("en-US"); -const uimanager = new UIManager(mapUi, kaplaymap); -const gameobjmanager = new GameObjManager(kaplaymap); -const eventmanager = new EventManager(kaplaymap, uimanager, gameobjmanager); -const floormanager = new FloorManager( - kaplaymap, - uimanager, - gameobjmanager, - eventmanager -); +const eventmappermanager = new EventMapperManager(kaplaymap, mapUi); async function main() { kaplaymap.initGrid(); + + await eventmappermanager.load(); } -main(); \ No newline at end of file +main(); diff --git a/assets/styles/style.css b/assets/styles/style.css index 450ea3b..8891047 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -179,28 +179,28 @@ a { max-width: calc(100% - 32px); } -#map-ui #events-container:not(.inspector):not(.minimized) #events { +#map-ui #events-container:not(.empty):not(.inspector):not(.minimized) #events { left: 16px; } -#map-ui #events-container:not(.inspector).minimized #events-minimized { +#map-ui #events-container:not(.empty):not(.inspector).minimized #events-minimized { left: 16px; } -#map-ui #events-container:not(.minimized).inspector #events-inspector { +#map-ui #events-container:not(.empty):not(.minimized).inspector #events-inspector { left: 16px; } -#map-ui #events-container.minimized.inspector #events-inspector-minimized { +#map-ui #events-container:not(.empty).minimized.inspector #events-inspector-minimized { left: 16px; } -#map-ui #floors.empty ~ #events-container #events, +/* #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 { @@ -238,7 +238,7 @@ a { margin 0.25s; */ } -#map-ui #events-container.empty #events #event-list { +#map-ui #events-container #events.empty #event-list { min-height: 0; padding: 0 8px; margin: 0; diff --git a/pages/index.html b/pages/index.html index aa952fe..57b8f91 100644 --- a/pages/index.html +++ b/pages/index.html @@ -16,7 +16,7 @@
- +

diff --git a/scripts/server.js b/scripts/server.js index 37a0606..71fda2c 100644 --- a/scripts/server.js +++ b/scripts/server.js @@ -10,9 +10,9 @@ app.use("/", express.static('pages')); app.use("/dataServer", express.static('data')); // Example data file-server -app.get('/data/:lang/events', async (req, res) => { +app.get('/data/:lang/events/:floor', async (req, res) => { // Get events - let eventsReq = await fetch(new URL("events/events.json", config.data_url)); + let eventsReq = await fetch(new URL(`events/${req.params.floor}.json`, config.data_url)); let events; if (eventsReq.ok) events = await eventsReq.json(); @@ -39,43 +39,9 @@ app.get('/data/:lang/events', async (req, res) => { return res.send(merged); }) -app.get('/data/:lang/events/:layer', async (req, res) => { - // Get events - let eventsReq = await fetch(new URL("events/events.json", config.data_url)); - let events; - if (eventsReq.ok) - events = await eventsReq.json(); - else - return res.status(400).send("Bad Request"); - - // Get localization - let l10nReq = await fetch(new URL(`localization/${req.params.lang}.json`, config.data_url)); - let l10n; - if (l10nReq.ok) - l10n = await l10nReq.json(); - else - return res.status(404).send("Localization not found!"); - - const clippedEvents = events.filter((event) => event.where.layer == req.params.layer).map((event) => { - event.where = event.where.room; - return event; - }); - - // Merge events and localization - const merged = clippedEvents.map(event => { - const localizationKey = l10n.__events[event.id]; - return { - ...event, - ...localizationKey - }; - }); - - return res.send(merged); -}) - -app.get('/data/:lang/map', async (req, res) => { +app.get('/data/:lang/floors', async (req, res) => { // Get layers - let layersReq = await fetch(new URL("map/layers.json", config.data_url)); + let layersReq = await fetch(new URL("floors.json", config.data_url)); let layers; if (layersReq.ok) layers = await layersReq.json(); @@ -102,9 +68,9 @@ app.get('/data/:lang/map', async (req, res) => { return res.send(merged); }) -app.get('/data/:lang/map/:layer', async (req, res) => { +app.get('/data/:lang/rooms/:floor', async (req, res) => { // Get rooms - let roomsReq = await fetch(new URL(`map/${req.params.layer}.json`, config.data_url)); + let roomsReq = await fetch(new URL(`rooms/${req.params.floor}.json`, config.data_url)); let rooms; if (roomsReq.ok) rooms = await roomsReq.json();