Refactor finished

This commit is contained in:
MeowcaTheoRange 2024-06-05 02:30:05 -05:00
parent a0f1f8b33e
commit 2b9dff2983
11 changed files with 641 additions and 309 deletions

View file

@ -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 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;
}
get allEvents() {
return this.#events;
}
get currentEventId() {
return this.mainmanager.getCurrentFocus("event");
}
get currentEvent() {
return this.#currentEvent;
const currentEvent = this.#events.get(
this.mainmanager.getCurrentFocus("event")
);
return currentEvent;
}
}

View file

@ -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;
}
}

View file

@ -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();

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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];
}
}
}

View file

@ -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");
});
}
}

View file

@ -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();

View file

@ -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;

View file

@ -16,7 +16,7 @@
<div id="map-ui" class="loading">
<div id="zoom">
<button class="zoom-button" id="zoom-in">+</button>
<button class="zoom-button" id="zoom-out">-</button>
<button class="zoom-button" id="zoom-out" disabled>-</button>
</div>
<div id="floors" class="empty">
<h1 class="widget-heading"></h1>

View file

@ -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();