Refactor start

This commit is contained in:
MeowcaTheoRange 2024-06-04 17:54:40 -05:00
parent d28fc26374
commit a0f1f8b33e
10 changed files with 439 additions and 252 deletions

View file

@ -5,6 +5,7 @@ export class EventManager {
floormanager; floormanager;
events = new Map([]); events = new Map([]);
#currentEvent = "";
constructor(map, ui, gameobj) { constructor(map, ui, gameobj) {
this.map = map; this.map = map;
@ -13,23 +14,31 @@ export class EventManager {
this.gameobj = gameobj; this.gameobj = gameobj;
} }
async getFloorEvents() { async getEvents(lang, floor) {
let floorEventsReqSend = fetch( let allEventsReqSend = fetch(`/data/${lang}/events/${floor}`);
`/data/${this.floormanager.lang}/events/${this.floormanager.currentFloor}`
);
this.ui.setLoading(true); this.ui.setLoading(true);
let floorEventsReq = await floorEventsReqSend; let allEventsReq = await allEventsReqSend;
let floorEvents; let allEvents;
if (floorEventsReq.ok) floorEvents = await floorEventsReq.json(); if (allEventsReq.ok) allEvents = await allEventsReq.json();
this.events.clear(); 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); 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;
}
}

View file

@ -3,58 +3,23 @@ export class FloorManager {
ui; ui;
gameobj; gameobj;
events; events;
lang;
floors = new Map([]); floors = new Map([]);
rooms = new Map([]); rooms = new Map([]);
#currentFloor = ""; #currentFloor = "";
#currentRoom = ""; #currentRoom = "";
constructor(map, ui, gameobj, events, lang) { constructor(map, ui, gameobj, events) {
this.map = map; this.map = map;
this.ui = ui; this.ui = ui;
this.ui.floormanager = this; this.ui.floormanager = this;
this.gameobj = gameobj; this.gameobj = gameobj;
this.gameobj.floormanager = this;
this.events = events; this.events = events;
this.events.floormanager = this; this.events.floormanager = this;
this.lang = lang;
} }
set currentFloor(floor) { async getFloors(lang) {
this.#currentFloor = floor; let allFloorsReqSend = fetch(`/data/${lang}/map`);
}
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`);
this.ui.setLoading(true); this.ui.setLoading(true);
@ -64,19 +29,15 @@ export class FloorManager {
allFloors.forEach((floor) => this.floors.set(floor.id, floor)); allFloors.forEach((floor) => this.floors.set(floor.id, floor));
this.changeFloor(allFloors[0].id);
this.ui.setLoading(false); this.ui.setLoading(false);
return this.floors;
} }
async getRooms(id) { async getRooms(lang, floor) {
const curRoom = this.rooms.get(id); const curRoom = this.rooms.get(id);
if (curRoom != null) return curRoom; if (curRoom != null) return curRoom;
let allRoomsReqSend = fetch(`/data/${this.lang}/map/${id}`); let allRoomsReqSend = fetch(`/data/${lang}/map/${floor}`);
this.ui.setLoading(true); this.ui.setLoading(true);
@ -87,36 +48,29 @@ export class FloorManager {
const roomMap = new Map([]); const roomMap = new Map([]);
allRooms.forEach((room) => roomMap.set(room.id, room)); allRooms.forEach((room) => roomMap.set(room.id, room));
this.rooms.set(id, roomMap); this.rooms.set(floor, roomMap);
this.ui.setLoading(false); this.ui.setLoading(false);
return this.rooms;
} }
async changeFloor(id) { setCurrentFloor(id) {
const floor = this.floors.get(id); const floor = this.floors.get(id);
if (floor != null) this.#currentFloor = id; if (floor != null) this.#currentFloor = id;
}
if (this.ui.floorsEmpty) this.ui.__updateFloorsHard(); get currentFloor() {
else this.ui.__updateFloorsSoft(); 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(); get currentRoom() {
return this.#currentRoom;
await this.getRooms(id);
this.gameobj.generateRooms();
await this.events.getFloorEvents();
this.ui.__updateEvents();
this.setCurrentRoom("", false);
this.ui.setLoading(false);
return floor;
} }
} }

View file

@ -4,7 +4,6 @@ export class GameObjManager {
roomMinZoom: 2, roomMinZoom: 2,
}; };
map; map;
floormanager;
floorObject; floorObject;
roomObjects = new Map([]); roomObjects = new Map([]);
@ -20,9 +19,9 @@ export class GameObjManager {
}; };
if (this.floorObject) this.floorObject.destroy(); if (this.floorObject) this.floorObject.destroy();
const currentFloor = this.floormanager.floors.get( // const currentFloor = this.floormanager.floors.get(
this.floormanager.currentFloor // this.floormanager.currentFloor
); // );
const polygon = new this.map.kp.Polygon( const polygon = new this.map.kp.Polygon(
currentFloor.poly.map(([x, y]) => this.map.kp.vec2(x, y)) currentFloor.poly.map(([x, y]) => this.map.kp.vec2(x, y))
@ -92,9 +91,9 @@ export class GameObjManager {
this.roomObjects.clear(); this.roomObjects.clear();
} }
const currentRooms = this.floormanager.rooms.get( // const currentRooms = this.floormanager.rooms.get(
this.floormanager.currentFloor // this.floormanager.currentFloor
); // );
currentRooms.forEach((room) => { currentRooms.forEach((room) => {
const polygon = new this.map.kp.Polygon( const polygon = new this.map.kp.Polygon(
@ -139,7 +138,7 @@ export class GameObjManager {
obj.startClickPosition && obj.startClickPosition &&
obj.startClickPosition.dist(endClickPosition) < obj.clickForgiveness obj.startClickPosition.dist(endClickPosition) < obj.clickForgiveness
) { ) {
this.floormanager.setCurrentRoom(room.id); // this.floormanager.setCurrentRoom(room.id);
} }
obj.color = this.map.kp.Color.fromHex("505050"); obj.color = this.map.kp.Color.fromHex("505050");
this.map.clearMouseMode(); this.map.clearMouseMode();

View file

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

View file

@ -1,41 +1,26 @@
export default new Map([ export default new Map([
[ [
"en_US", "en-US",
{ {
floors_header: "Floors",
date_starting: "Starting", date_starting: "Starting",
date_started: "Started", date_started: "Started",
floors_header: "Floors",
date_summary: (prefix, time) => `${prefix} ${time}`, date_summary: (prefix, time) => `${prefix} ${time}`,
parenthesis: (content) => `(${content})`, parenthesis: (content) => `(${content})`,
separator: (p1, p2) => `${p1} - ${p2}`,
hours_long: (hours) => hours_long: (hours) =>
hours == 1 ? `${hours} hour long` : `${hours} hours long`, hours == 1 ? `${hours} hour long` : `${hours} hours long`,
minutes_long: (hours) => minutes_long: (hours) =>
hours == 1 ? `${hours} minute long` : `${hours} minutes long`, hours == 1 ? `${hours} minute long` : `${hours} minutes long`,
events_in: (name) => `Events (${name})`, events_in: (name) => `Events (${name})`,
event_in: (location) => `In ${location}`,
view_events_in: (name) => `Return to events in ${name}`, view_events_in: (name) => `Return to events in ${name}`,
minimize: "Hide events panel", minimize: "Hide events panel",
maximize: "Show events panel", maximize: "Show events panel",
}, event_inspector_header: (name) => `Event ${name}`,
], event_inspector_back: "Return to events panel",
[ event_inspector_minimize: "Hide event inspector",
// Used Google Translate, pls fix event_inspector_maximize: "Show event inspector",
"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",
}, },
], ],
]); ]);

View file

@ -1,8 +1,8 @@
import { import {
DatetoLocaleDynamicString,
getMinutesDifference, getMinutesDifference,
getRelativeTime, getRelativeTime,
} from "../modules/relative_time.js"; } from "../modules/relative_time.js";
import localization from "./localization.js";
export class UIManager { export class UIManager {
ui; ui;
@ -18,6 +18,24 @@ export class UIManager {
this.ui = ui; this.ui = ui;
this.map = map; 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 // Zoom
this.uiElements.zoomButtons = this.ui.querySelector("#zoom"); this.uiElements.zoomButtons = this.ui.querySelector("#zoom");
this.uiElements.zoomIn = this.uiElements.zoomIn =
@ -53,19 +71,42 @@ export class UIManager {
this.uiElements.eventsMinimizedBackButton = this.uiElements.eventsMinimizedBackButton =
this.uiElements.eventsMinimized.querySelector("#back"); 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( this.uiElements.minimizeButton = this.uiElements.events.querySelector(
"#footer #footer-buttons #minimize" "#footer #footer-buttons #minimize"
); );
this.uiElements.maximizeButton = this.uiElements.maximizeButton =
this.uiElements.eventsMinimized.querySelector("#maximize"); 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 // Loading
this.uiElements.loading = this.ui.querySelector("#loading"); this.uiElements.loading = this.ui.querySelector("#loading");
// Zoom buttons
this.__initZoom();
this.__initEvents();
} }
__initZoom() { __initZoom() {
@ -89,29 +130,142 @@ export class UIManager {
}); });
} }
toggleEventsMinimized() { __initInspector() {
this.uiElements.eventsContainer.classList.toggle("minimized"); 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() { __updateInspector() {
this.uiElements.eventsContainer.classList.add("minimized"); 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() { // const currentEvent = this.eventmanager.currentEventItem;
this.uiElements.eventsContainer.classList.remove("minimized"); if (currentEvent != null) {
} this.uiElements.eventsContainer.classList.add("inspector");
} else {
this.uiElements.eventsContainer.classList.remove("inspector");
return;
}
__updateAll() { // const eventFloor = this.floormanager.currentFloorRooms.get(
this.__updateEvents(); // currentEvent.where
this.__updateFloorsHard(); // );
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() { __initEvents() {
this.uiElements.eventsBackButton.addEventListener("click", () => { this.uiElements.eventsBackButton.addEventListener("click", () => {
this.floormanager.setCurrentRoom(""); // this.floormanager.setCurrentRoom("");
}); });
this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => { this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => {
this.floormanager.setCurrentRoom("", false); // this.floormanager.setCurrentRoom("", false);
}); });
this.uiElements.minimizeButton.addEventListener("click", () => { this.uiElements.minimizeButton.addEventListener("click", () => {
@ -123,61 +277,59 @@ export class UIManager {
} }
__updateEvents() { __updateEvents() {
const currentLocalization = localization.get(this.floormanager.lang);
let currentEvents; let currentEvents;
if (this.floormanager.currentRoom != "") { // if (this.floormanager.currentRoom != "") {
const filterThing = Array.from(this.eventmanager.events.entries()); // const filterThing = Array.from(this.eventmanager.events.entries());
currentEvents = new Map( // currentEvents = new Map(
filterThing.filter( // filterThing.filter(
([key, value]) => value.where == this.floormanager.currentRoom // ([key, value]) => value.where == this.floormanager.currentRoom
) // )
); // );
} else { // } else {
currentEvents = this.eventmanager.events; // currentEvents = this.eventmanager.events;
} // }
this.uiElements.minimizeButton.title = currentLocalization.minimize; this.uiElements.minimizeButton.title = currentLocalization.minimize;
this.uiElements.maximizeButton.title = currentLocalization.maximize; this.uiElements.maximizeButton.title = currentLocalization.maximize;
// Figure out header // Figure out header
if (this.floormanager.currentRoomItem != null) { // if (this.floormanager.currentRoomItem != null) {
if (currentEvents.size < 1) { // if (currentEvents.size < 1) {
this.uiElements.eventsRoomName.textContent = // this.uiElements.eventsRoomName.textContent =
this.floormanager.currentRoomItem.name; // this.floormanager.currentRoomItem.name;
} else { // } else {
this.uiElements.eventsRoomName.textContent = // this.uiElements.eventsRoomName.textContent =
currentLocalization.events_in(this.floormanager.currentRoomItem.name); // currentLocalization.events_in(this.floormanager.currentRoomItem.name);
} // }
this.uiElements.eventsRoomDescription.textContent = // this.uiElements.eventsRoomDescription.textContent =
this.floormanager.currentRoomItem.description; // this.floormanager.currentRoomItem.description;
this.uiElements.eventsBackButton.disabled = false; // this.uiElements.eventsBackButton.disabled = false;
this.uiElements.eventsBackButton.title = // this.uiElements.eventsBackButton.title =
currentLocalization.view_events_in( // currentLocalization.view_events_in(
this.floormanager.currentFloorItem.name // this.floormanager.currentFloorItem.name
); // );
this.uiElements.eventsMinimizedBackButton.disabled = false; // this.uiElements.eventsMinimizedBackButton.disabled = false;
this.uiElements.eventsMinimizedBackButton.title = // this.uiElements.eventsMinimizedBackButton.title =
currentLocalization.view_events_in( // currentLocalization.view_events_in(
this.floormanager.currentFloorItem.name // this.floormanager.currentFloorItem.name
); // );
} else { // } else {
if (currentEvents.size < 1) { // if (currentEvents.size < 1) {
this.uiElements.eventsRoomName.textContent = // this.uiElements.eventsRoomName.textContent =
this.floormanager.currentFloorItem.name; // this.floormanager.currentFloorItem.name;
} else { // } else {
this.uiElements.eventsRoomName.textContent = // this.uiElements.eventsRoomName.textContent =
currentLocalization.events_in( // currentLocalization.events_in(
this.floormanager.currentFloorItem.name // this.floormanager.currentFloorItem.name
); // );
} // }
this.uiElements.eventsRoomDescription.textContent = // this.uiElements.eventsRoomDescription.textContent =
this.floormanager.currentFloorItem.description; // this.floormanager.currentFloorItem.description;
this.uiElements.eventsBackButton.disabled = true; // this.uiElements.eventsBackButton.disabled = true;
this.uiElements.eventsBackButton.title = ""; // this.uiElements.eventsBackButton.title = "";
this.uiElements.eventsMinimizedBackButton.disabled = true; // this.uiElements.eventsMinimizedBackButton.disabled = true;
this.uiElements.eventsMinimizedBackButton.title = ""; // this.uiElements.eventsMinimizedBackButton.title = "";
} // }
// Remove all children // Remove all children
this.uiElements.eventList.replaceChildren(); this.uiElements.eventList.replaceChildren();
@ -186,7 +338,7 @@ export class UIManager {
const currentDate = new Date(); const currentDate = new Date();
currentEvents.forEach((event, id) => { 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 eventDateStart = new Date(event.when.start);
const eventDateEnd = new Date(event.when.end); const eventDateEnd = new Date(event.when.end);
@ -209,24 +361,29 @@ export class UIManager {
const eventListContainerSummary = document.createElement("p"); 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; eventListContainerSummaryName.textContent = event.name;
eventListContainerSummary.appendChild(eventListContainerSummaryName); eventListContainerSummary.appendChild(eventListContainerSummaryName);
eventListContainerSummary.appendChild(document.createTextNode(" ")); eventListContainerSummary.appendChild(document.createTextNode(" "));
if (this.floormanager.currentRoomItem == null) { // if (this.floormanager.currentRoomItem == null) {
const eventListContainerSummaryRoom = document.createElement("button"); // const eventListContainerSummaryRoom = document.createElement("button");
eventListContainerSummaryRoom.classList.add("link"); // eventListContainerSummaryRoom.classList.add("link");
eventListContainerSummaryRoom.addEventListener("click", () => { // eventListContainerSummaryRoom.addEventListener("click", () => {
this.floormanager.setCurrentRoom(eventFloor.id); // this.floormanager.setCurrentRoom(eventFloor.id);
}); // });
eventListContainerSummaryRoom.textContent = // eventListContainerSummaryRoom.textContent =
currentLocalization.parenthesis(eventFloor.name); // currentLocalization.parenthesis(eventFloor.name);
eventListContainerSummary.appendChild(eventListContainerSummaryRoom); // eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
} // }
eventListContainerSummary.appendChild(document.createElement("br")); eventListContainerSummary.appendChild(document.createElement("br"));
@ -235,15 +392,19 @@ export class UIManager {
const eventListContainerSummaryTime = document.createElement("span"); const eventListContainerSummaryTime = document.createElement("span");
eventListContainerSummaryTime.classList.add("clarification"); eventListContainerSummaryTime.classList.add("clarification");
eventListContainerSummaryTime.title = eventDateStart.toLocaleString( eventListContainerSummaryTime.title = eventDateStart.toLocaleString(
this.floormanager.lang.replace(/_/g, "-") // this.floormanager.lang.replace(/_/g, "-"),
{
dateStyle: "short",
timeStyle: "short",
}
); );
eventListContainerSummaryTime.textContent = eventListContainerSummaryTime.textContent =
currentLocalization.date_summary( currentLocalization.date_summary(
datePrefix, datePrefix,
getRelativeTime( getRelativeTime(
eventDateStart, eventDateStart,
currentDate, currentDate
this.floormanager.lang.replace(/_/g, "-") // 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() { __updateFloorsHard() {
const currentLocalization = localization.get(this.floormanager.lang);
// Remove all children // Remove all children
this.uiElements.floorButtons.replaceChildren(); this.uiElements.floorButtons.replaceChildren();
this.uiElements.floorsHeading.textContent = this.uiElements.floorsHeading.textContent =
currentLocalization.floors_header; currentLocalization.floors_header;
// Put them back // Put them back
this.floormanager.floors.forEach(({ name }, id) => { // this.floormanager.floors.forEach(({ name }, id) => {
const floorButton = document.createElement("button"); // const floorButton = document.createElement("button");
floorButton.textContent = name; // floorButton.textContent = name;
floorButton.classList.add("floor-button"); // floorButton.classList.add("floor-button");
floorButton.id = "floor-" + id; // floorButton.id = "floor-" + id;
if (id === this.floormanager.currentFloor) // if (id === this.floormanager.currentFloor)
floorButton.classList.add("selected"); // floorButton.classList.add("selected");
floorButton.addEventListener("click", () => // floorButton.addEventListener("click", () =>
this.floormanager.changeFloor(id) // this.floormanager.changeFloor(id)
); // );
this.uiElements.floorButtons.appendChild(floorButton); // this.uiElements.floorButtons.appendChild(floorButton);
}); // });
if (this.floormanager.floors.size < 1) { // if (this.floormanager.floors.size < 1) {
this.uiElements.floors.classList.add("empty"); // this.uiElements.floors.classList.add("empty");
this.floorsEmpty = true; // this.floorsEmpty = true;
} else { // } else {
this.uiElements.floors.classList.remove("empty"); // this.uiElements.floors.classList.remove("empty");
this.floorsEmpty = false; // this.floorsEmpty = false;
} // }
} }
__updateFloorsSoft() { __updateFloorsSoft() {
const currentLocalization = localization.get(this.floormanager.lang);
this.uiElements.floorsHeading.textContent = this.uiElements.floorsHeading.textContent =
currentLocalization.floors_header; currentLocalization.floors_header;
this.floormanager.floors.forEach(({ name }, id) => { // this.floormanager.floors.forEach(({ name }, id) => {
const child = this.uiElements.floorButtons.querySelector("#floor-" + id); // const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
if (id === this.floormanager.currentFloor) // if (id === this.floormanager.currentFloor)
child.classList.add("selected"); // child.classList.add("selected");
else child.classList.remove("selected"); // else child.classList.remove("selected");
}); // });
} }
} }

View file

@ -24,3 +24,18 @@ export function getRelativeTime(d1, d2, locale) {
export function getMinutesDifference(d1, d2) { export function getMinutesDifference(d1, d2) {
return (d2.getTime() - d1.getTime()) / units.minute; 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",
});
}

View file

@ -4,6 +4,7 @@ import { FloorManager } from "./KaplayMap/floors.js";
import { UIManager } from "./KaplayMap/ui.js"; import { UIManager } from "./KaplayMap/ui.js";
import { GameObjManager } from "./KaplayMap/gameobj.js"; import { GameObjManager } from "./KaplayMap/gameobj.js";
import { EventManager } from "./KaplayMap/events.js"; import { EventManager } from "./KaplayMap/events.js";
import { LangManager } from "./KaplayMap/lang.js";
const map = document.querySelector("#map"); const map = document.querySelector("#map");
const mapUi = document.querySelector("#map-ui"); const mapUi = document.querySelector("#map-ui");
@ -23,10 +24,7 @@ const kp = kaplay({
const kaplaymap = new KaplayMap(kp, {}); const kaplaymap = new KaplayMap(kp, {});
kaplaymap.initGrid(); const langmanager = new LangManager("en-US");
// addZoomButtons(kaplaymap);
const uimanager = new UIManager(mapUi, kaplaymap); const uimanager = new UIManager(mapUi, kaplaymap);
const gameobjmanager = new GameObjManager(kaplaymap); const gameobjmanager = new GameObjManager(kaplaymap);
const eventmanager = new EventManager(kaplaymap, uimanager, gameobjmanager); const eventmanager = new EventManager(kaplaymap, uimanager, gameobjmanager);
@ -34,8 +32,11 @@ const floormanager = new FloorManager(
kaplaymap, kaplaymap,
uimanager, uimanager,
gameobjmanager, gameobjmanager,
eventmanager, eventmanager
"en_US"
); );
floormanager.getFloors(); async function main() {
kaplaymap.initGrid();
}
main();

View file

@ -29,6 +29,10 @@ p.widget-description {
padding-bottom: 2px; */ padding-bottom: 2px; */
} }
p.subtitle {
opacity: 0.75;
}
button:not(.link) { button:not(.link) {
background-color: transparent; background-color: transparent;
border: none; border: none;
@ -54,6 +58,7 @@ button:not(.link):disabled {
} }
button.link { button.link {
display: inline;
background: none !important; background: none !important;
border: none; border: none;
padding: 0; padding: 0;
@ -63,6 +68,10 @@ button.link {
cursor: pointer; cursor: pointer;
} }
a {
color: currentColor;
}
.clarification { .clarification {
text-decoration: dotted underline; text-decoration: dotted underline;
} }
@ -147,7 +156,9 @@ button.link {
} }
#map-ui #events-container #events, #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; pointer-events: all;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
@ -155,41 +166,56 @@ button.link {
padding: 8px; padding: 8px;
bottom: 16px; bottom: 16px;
border-radius: 4px; border-radius: 4px;
left: -100%;
background-color: #202020; background-color: #202020;
color: #fff; color: #fff;
box-shadow: 0 0 8px 0 #0008; box-shadow: 0 0 8px 0 #0008;
transition: left 0.5s; transition: left 0.5s;
} }
#map-ui #events-container #events { #map-ui #events-container #events,
left: 16px; #map-ui #events-container #events-inspector {
width: 400px; width: 400px;
max-width: calc(100% - 32px); max-width: calc(100% - 32px);
} }
#map-ui #events-container.minimized #events { #map-ui #events-container:not(.inspector):not(.minimized) #events {
left: -100%;
}
#map-ui #events-container #events-minimized {
left: -100%;
}
#map-ui #events-container.minimized #events-minimized {
left: 16px; 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; display: flex;
align-items: center; align-items: center;
gap: 8px; 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; 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; display: grid;
grid-template-columns: 36px auto; grid-template-columns: 36px auto;
gap: 8px; gap: 8px;
@ -222,9 +248,19 @@ button.link {
margin: 0; 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 #events #events-header button,
#map-ui #events-container #footer #footer-buttons 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; width: 36px;
} }

View file

@ -27,7 +27,7 @@
<div id="events-container" class="empty"> <div id="events-container" class="empty">
<div id="events"> <div id="events">
<div id="events-header"> <div id="events-header">
<button id="back" disabled></button> <button id="back" disabled></button>
<div> <div>
<h1 class="widget-heading" id="room-name"></h1> <h1 class="widget-heading" id="room-name"></h1>
<p class="widget-description" id="room-description"></p> <p class="widget-description" id="room-description"></p>
@ -44,7 +44,28 @@
</div> </div>
<div id="events-minimized"> <div id="events-minimized">
<button id="maximize"></button> <button id="maximize"></button>
<button id="back" disabled></button> <button id="back" disabled></button>
</div>
<div id="events-inspector">
<div id="events-header">
<button id="back"></button>
<div>
<h1 class="widget-heading" id="room-name"></h1>
<p class="widget-description subtitle" id="event-length"></p>
</div>
</div>
<p class="widget-description" id="room-time"></p>
<div id="event-body">
</div>
<div id="footer">
<div id="footer-buttons">
<button id="minimize">_</button>
</div>
</div>
</div>
<div id="events-inspector-minimized">
<button id="maximize"></button>
<button id="back"></button>
</div> </div>
</div> </div>
<div id="loading"> <div id="loading">