Refactor start
This commit is contained in:
parent
d28fc26374
commit
a0f1f8b33e
10 changed files with 439 additions and 252 deletions
|
|
@ -5,6 +5,7 @@ export class EventManager {
|
|||
floormanager;
|
||||
|
||||
events = new Map([]);
|
||||
#currentEvent = "";
|
||||
|
||||
constructor(map, ui, gameobj) {
|
||||
this.map = map;
|
||||
|
|
@ -13,23 +14,31 @@ export class EventManager {
|
|||
this.gameobj = gameobj;
|
||||
}
|
||||
|
||||
async getFloorEvents() {
|
||||
let floorEventsReqSend = fetch(
|
||||
`/data/${this.floormanager.lang}/events/${this.floormanager.currentFloor}`
|
||||
);
|
||||
async getEvents(lang, floor) {
|
||||
let allEventsReqSend = fetch(`/data/${lang}/events/${floor}`);
|
||||
|
||||
this.ui.setLoading(true);
|
||||
|
||||
let floorEventsReq = await floorEventsReqSend;
|
||||
let floorEvents;
|
||||
if (floorEventsReq.ok) floorEvents = await floorEventsReq.json();
|
||||
let allEventsReq = await allEventsReqSend;
|
||||
let allEvents;
|
||||
if (allEventsReq.ok) allEvents = await allEventsReq.json();
|
||||
|
||||
this.events.clear();
|
||||
|
||||
floorEvents.forEach((event) => this.events.set(event.id, event));
|
||||
allEvents.forEach((event) => this.events.set(event.id, event));
|
||||
|
||||
this.ui.setLoading(false);
|
||||
|
||||
return this.events;
|
||||
}
|
||||
}
|
||||
|
||||
setCurrentEvent(id) {
|
||||
if (id == null) this.#currentEvent = id;
|
||||
else {
|
||||
const event = this.events.get(id);
|
||||
if (event != null) this.#currentEvent = event;
|
||||
}
|
||||
}
|
||||
|
||||
get currentEvent() {
|
||||
return this.#currentEvent;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,58 +3,23 @@ export class FloorManager {
|
|||
ui;
|
||||
gameobj;
|
||||
events;
|
||||
lang;
|
||||
|
||||
floors = new Map([]);
|
||||
rooms = new Map([]);
|
||||
#currentFloor = "";
|
||||
#currentRoom = "";
|
||||
|
||||
constructor(map, ui, gameobj, events, lang) {
|
||||
constructor(map, ui, gameobj, events) {
|
||||
this.map = map;
|
||||
this.ui = ui;
|
||||
this.ui.floormanager = this;
|
||||
this.gameobj = gameobj;
|
||||
this.gameobj.floormanager = this;
|
||||
this.events = events;
|
||||
this.events.floormanager = this;
|
||||
this.lang = lang;
|
||||
}
|
||||
|
||||
set currentFloor(floor) {
|
||||
this.#currentFloor = floor;
|
||||
}
|
||||
|
||||
get currentFloor() {
|
||||
return this.#currentFloor;
|
||||
}
|
||||
|
||||
get currentFloorItem() {
|
||||
return this.floors.get(this.#currentFloor);
|
||||
}
|
||||
|
||||
setCurrentRoom(room, maximize = true) {
|
||||
this.#currentRoom = room;
|
||||
this.ui.__updateEvents();
|
||||
if (maximize) this.ui.eventsMaximize();
|
||||
if (room == "") this.gameobj.zoomToFloor();
|
||||
else this.gameobj.zoomToRoom(room);
|
||||
}
|
||||
|
||||
get currentRoom() {
|
||||
return this.#currentRoom;
|
||||
}
|
||||
|
||||
get currentRoomItem() {
|
||||
return this.currentFloorRooms.get(this.#currentRoom);
|
||||
}
|
||||
|
||||
get currentFloorRooms() {
|
||||
return this.rooms.get(this.#currentFloor);
|
||||
}
|
||||
|
||||
async getFloors() {
|
||||
let allFloorsReqSend = fetch(`/data/${this.lang}/map`);
|
||||
async getFloors(lang) {
|
||||
let allFloorsReqSend = fetch(`/data/${lang}/map`);
|
||||
|
||||
this.ui.setLoading(true);
|
||||
|
||||
|
|
@ -64,19 +29,15 @@ export class FloorManager {
|
|||
|
||||
allFloors.forEach((floor) => this.floors.set(floor.id, floor));
|
||||
|
||||
this.changeFloor(allFloors[0].id);
|
||||
|
||||
this.ui.setLoading(false);
|
||||
|
||||
return this.floors;
|
||||
}
|
||||
|
||||
async getRooms(id) {
|
||||
async getRooms(lang, floor) {
|
||||
const curRoom = this.rooms.get(id);
|
||||
|
||||
if (curRoom != null) return curRoom;
|
||||
|
||||
let allRoomsReqSend = fetch(`/data/${this.lang}/map/${id}`);
|
||||
let allRoomsReqSend = fetch(`/data/${lang}/map/${floor}`);
|
||||
|
||||
this.ui.setLoading(true);
|
||||
|
||||
|
|
@ -87,36 +48,29 @@ export class FloorManager {
|
|||
const roomMap = new Map([]);
|
||||
allRooms.forEach((room) => roomMap.set(room.id, room));
|
||||
|
||||
this.rooms.set(id, roomMap);
|
||||
this.rooms.set(floor, roomMap);
|
||||
|
||||
this.ui.setLoading(false);
|
||||
|
||||
return this.rooms;
|
||||
}
|
||||
|
||||
async changeFloor(id) {
|
||||
setCurrentFloor(id) {
|
||||
const floor = this.floors.get(id);
|
||||
if (floor != null) this.#currentFloor = id;
|
||||
}
|
||||
|
||||
if (this.ui.floorsEmpty) this.ui.__updateFloorsHard();
|
||||
else this.ui.__updateFloorsSoft();
|
||||
get currentFloor() {
|
||||
return this.#currentFloor;
|
||||
}
|
||||
|
||||
this.ui.setLoading(true);
|
||||
setCurrentRoom(id) {
|
||||
if (id == null) this.#currentRoom = id;
|
||||
else {
|
||||
const room = this.rooms.get(this.#currentFloor).get(room);
|
||||
if (room != null) this.#currentRoom = id;
|
||||
}
|
||||
}
|
||||
|
||||
this.gameobj.generateFloor();
|
||||
|
||||
await this.getRooms(id);
|
||||
|
||||
this.gameobj.generateRooms();
|
||||
|
||||
await this.events.getFloorEvents();
|
||||
|
||||
this.ui.__updateEvents();
|
||||
|
||||
this.setCurrentRoom("", false);
|
||||
|
||||
this.ui.setLoading(false);
|
||||
|
||||
return floor;
|
||||
get currentRoom() {
|
||||
return this.#currentRoom;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ export class GameObjManager {
|
|||
roomMinZoom: 2,
|
||||
};
|
||||
map;
|
||||
floormanager;
|
||||
|
||||
floorObject;
|
||||
roomObjects = new Map([]);
|
||||
|
|
@ -20,9 +19,9 @@ export class GameObjManager {
|
|||
};
|
||||
if (this.floorObject) this.floorObject.destroy();
|
||||
|
||||
const currentFloor = this.floormanager.floors.get(
|
||||
this.floormanager.currentFloor
|
||||
);
|
||||
// const currentFloor = this.floormanager.floors.get(
|
||||
// this.floormanager.currentFloor
|
||||
// );
|
||||
|
||||
const polygon = new this.map.kp.Polygon(
|
||||
currentFloor.poly.map(([x, y]) => this.map.kp.vec2(x, y))
|
||||
|
|
@ -92,9 +91,9 @@ export class GameObjManager {
|
|||
this.roomObjects.clear();
|
||||
}
|
||||
|
||||
const currentRooms = this.floormanager.rooms.get(
|
||||
this.floormanager.currentFloor
|
||||
);
|
||||
// const currentRooms = this.floormanager.rooms.get(
|
||||
// this.floormanager.currentFloor
|
||||
// );
|
||||
|
||||
currentRooms.forEach((room) => {
|
||||
const polygon = new this.map.kp.Polygon(
|
||||
|
|
@ -139,7 +138,7 @@ export class GameObjManager {
|
|||
obj.startClickPosition &&
|
||||
obj.startClickPosition.dist(endClickPosition) < obj.clickForgiveness
|
||||
) {
|
||||
this.floormanager.setCurrentRoom(room.id);
|
||||
// this.floormanager.setCurrentRoom(room.id);
|
||||
}
|
||||
obj.color = this.map.kp.Color.fromHex("505050");
|
||||
this.map.clearMouseMode();
|
||||
|
|
|
|||
17
assets/scripts/KaplayMap/lang.js
Normal file
17
assets/scripts/KaplayMap/lang.js
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +1,26 @@
|
|||
export default new Map([
|
||||
[
|
||||
"en_US",
|
||||
"en-US",
|
||||
{
|
||||
floors_header: "Floors",
|
||||
date_starting: "Starting",
|
||||
date_started: "Started",
|
||||
floors_header: "Floors",
|
||||
date_summary: (prefix, time) => `${prefix} ${time}`,
|
||||
parenthesis: (content) => `(${content})`,
|
||||
separator: (p1, p2) => `${p1} - ${p2}`,
|
||||
hours_long: (hours) =>
|
||||
hours == 1 ? `${hours} hour long` : `${hours} hours long`,
|
||||
minutes_long: (hours) =>
|
||||
hours == 1 ? `${hours} minute long` : `${hours} minutes long`,
|
||||
events_in: (name) => `Events (${name})`,
|
||||
event_in: (location) => `In ${location}`,
|
||||
view_events_in: (name) => `Return to events in ${name}`,
|
||||
minimize: "Hide events panel",
|
||||
maximize: "Show events panel",
|
||||
},
|
||||
],
|
||||
[
|
||||
// Used Google Translate, pls fix
|
||||
"es_US",
|
||||
{
|
||||
date_starting: "Comenzando",
|
||||
date_started: "Comenzó",
|
||||
floors_header: "Pisos",
|
||||
date_summary: (prefix, time) => `${prefix} ${time}`,
|
||||
parenthesis: (content) => `(${content})`,
|
||||
hours_long: (hours) =>
|
||||
hours == 1 ? `${hours} hora de duración` : `${hours} horas de duración`,
|
||||
minutes_long: (hours) =>
|
||||
hours == 1
|
||||
? `${hours} minuto de duración`
|
||||
: `${hours} minutos de duración`,
|
||||
events_in: (name) => `Eventos (${name})`,
|
||||
view_events_in: (name) => `Volver a eventos en ${name}`,
|
||||
minimize: "Ocultar panel de eventos",
|
||||
maximize: "Mostrar panel de eventos",
|
||||
event_inspector_header: (name) => `Event ${name}`,
|
||||
event_inspector_back: "Return to events panel",
|
||||
event_inspector_minimize: "Hide event inspector",
|
||||
event_inspector_maximize: "Show event inspector",
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import {
|
||||
DatetoLocaleDynamicString,
|
||||
getMinutesDifference,
|
||||
getRelativeTime,
|
||||
} from "../modules/relative_time.js";
|
||||
import localization from "./localization.js";
|
||||
|
||||
export class UIManager {
|
||||
ui;
|
||||
|
|
@ -18,6 +18,24 @@ export class UIManager {
|
|||
this.ui = ui;
|
||||
this.map = map;
|
||||
|
||||
this.__initUIElements();
|
||||
|
||||
this.__initZoom();
|
||||
|
||||
this.__initEvents();
|
||||
|
||||
this.__initInspector();
|
||||
}
|
||||
|
||||
setLoading(state) {
|
||||
if (state) {
|
||||
this.ui.classList.add("loading");
|
||||
} else {
|
||||
this.ui.classList.remove("loading");
|
||||
}
|
||||
}
|
||||
|
||||
__initUIElements() {
|
||||
// Zoom
|
||||
this.uiElements.zoomButtons = this.ui.querySelector("#zoom");
|
||||
this.uiElements.zoomIn =
|
||||
|
|
@ -53,19 +71,42 @@ export class UIManager {
|
|||
this.uiElements.eventsMinimizedBackButton =
|
||||
this.uiElements.eventsMinimized.querySelector("#back");
|
||||
|
||||
this.uiElements.eventsInspector =
|
||||
this.uiElements.eventsContainer.querySelector("#events-inspector");
|
||||
this.uiElements.eventsInspectorHeader =
|
||||
this.uiElements.eventsInspector.querySelector("#events-header");
|
||||
this.uiElements.eventsInspectorRoomName =
|
||||
this.uiElements.eventsInspectorHeader.querySelector("#room-name");
|
||||
this.uiElements.eventsInspectorEventLength =
|
||||
this.uiElements.eventsInspectorHeader.querySelector("#event-length");
|
||||
this.uiElements.eventsInspectorRoomTime =
|
||||
this.uiElements.eventsInspector.querySelector("#room-time");
|
||||
this.uiElements.eventsInspectorMinimized =
|
||||
this.uiElements.eventsContainer.querySelector(
|
||||
"#events-inspector-minimized"
|
||||
);
|
||||
this.uiElements.eventsInspectorBackButton =
|
||||
this.uiElements.eventsInspector.querySelector("#back");
|
||||
this.uiElements.eventsInspectorBody =
|
||||
this.uiElements.eventsInspector.querySelector("#event-body");
|
||||
this.uiElements.eventsInspectorMinimizedBackButton =
|
||||
this.uiElements.eventsInspectorMinimized.querySelector("#back");
|
||||
|
||||
this.uiElements.minimizeButton = this.uiElements.events.querySelector(
|
||||
"#footer #footer-buttons #minimize"
|
||||
);
|
||||
this.uiElements.maximizeButton =
|
||||
this.uiElements.eventsMinimized.querySelector("#maximize");
|
||||
|
||||
this.uiElements.eventsInspectorMinimizeButton =
|
||||
this.uiElements.eventsInspector.querySelector(
|
||||
"#footer #footer-buttons #minimize"
|
||||
);
|
||||
this.uiElements.eventsInspectorMaximizeButton =
|
||||
this.uiElements.eventsInspectorMinimized.querySelector("#maximize");
|
||||
|
||||
// Loading
|
||||
this.uiElements.loading = this.ui.querySelector("#loading");
|
||||
|
||||
// Zoom buttons
|
||||
this.__initZoom();
|
||||
|
||||
this.__initEvents();
|
||||
}
|
||||
|
||||
__initZoom() {
|
||||
|
|
@ -89,29 +130,142 @@ export class UIManager {
|
|||
});
|
||||
}
|
||||
|
||||
toggleEventsMinimized() {
|
||||
this.uiElements.eventsContainer.classList.toggle("minimized");
|
||||
__initInspector() {
|
||||
this.uiElements.eventsInspectorMinimizeButton.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
this.uiElements.eventsContainer.classList.add("minimized");
|
||||
}
|
||||
);
|
||||
this.uiElements.eventsInspectorMaximizeButton.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
this.uiElements.eventsContainer.classList.remove("minimized");
|
||||
}
|
||||
);
|
||||
this.uiElements.eventsInspectorBackButton.addEventListener("click", () => {
|
||||
// this.eventmanager.setCurrentEvent("");
|
||||
});
|
||||
this.uiElements.eventsInspectorMinimizedBackButton.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
// this.eventmanager.setCurrentEvent("");
|
||||
this.eventsMaximize(true);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
eventsMinimize() {
|
||||
this.uiElements.eventsContainer.classList.add("minimized");
|
||||
}
|
||||
__updateInspector() {
|
||||
this.uiElements.eventsInspectorBackButton.title =
|
||||
currentLocalization.event_inspector_back;
|
||||
this.uiElements.eventsInspectorMinimizedBackButton.title =
|
||||
currentLocalization.event_inspector_back;
|
||||
this.uiElements.eventsInspectorMinimizeButton.title =
|
||||
currentLocalization.event_inspector_minimize;
|
||||
this.uiElements.eventsInspectorMaximizeButton.title =
|
||||
currentLocalization.event_inspector_maximize;
|
||||
|
||||
eventsMaximize() {
|
||||
this.uiElements.eventsContainer.classList.remove("minimized");
|
||||
}
|
||||
// const currentEvent = this.eventmanager.currentEventItem;
|
||||
if (currentEvent != null) {
|
||||
this.uiElements.eventsContainer.classList.add("inspector");
|
||||
} else {
|
||||
this.uiElements.eventsContainer.classList.remove("inspector");
|
||||
return;
|
||||
}
|
||||
|
||||
__updateAll() {
|
||||
this.__updateEvents();
|
||||
this.__updateFloorsHard();
|
||||
// const eventFloor = this.floormanager.currentFloorRooms.get(
|
||||
// currentEvent.where
|
||||
// );
|
||||
|
||||
const currentDate = new Date();
|
||||
const eventDateStart = new Date(currentEvent.when.start);
|
||||
const eventDateEnd = new Date(currentEvent.when.end);
|
||||
|
||||
const eventStarted = currentDate > eventDateStart;
|
||||
const eventEnded = currentDate > eventDateEnd;
|
||||
|
||||
let datePrefix;
|
||||
|
||||
if (eventEnded) {
|
||||
return; // Don't display this event
|
||||
} else if (eventStarted) {
|
||||
datePrefix = currentLocalization.date_started;
|
||||
} else {
|
||||
datePrefix = currentLocalization.date_starting;
|
||||
}
|
||||
|
||||
this.uiElements.eventsInspectorRoomName.textContent =
|
||||
currentLocalization.event_inspector_header(currentEvent.name);
|
||||
this.uiElements.eventsInspectorRoomTime.textContent =
|
||||
currentLocalization.date_summary(
|
||||
datePrefix,
|
||||
getRelativeTime(
|
||||
eventDateStart,
|
||||
currentDate
|
||||
// this.floormanager.lang.replace(/_/g, "-")
|
||||
)
|
||||
) +
|
||||
" " +
|
||||
currentLocalization.parenthesis(
|
||||
DatetoLocaleDynamicString(
|
||||
eventDateStart,
|
||||
currentDate
|
||||
// this.floormanager.lang.replace(/_/g, "-")
|
||||
)
|
||||
);
|
||||
this.uiElements.eventsInspectorEventLength.textContent =
|
||||
currentLocalization.separator(
|
||||
currentLocalization.minutes_long(
|
||||
getMinutesDifference(eventDateStart, eventDateEnd)
|
||||
),
|
||||
""
|
||||
);
|
||||
|
||||
const eventWhere = document.createElement("button");
|
||||
eventWhere.classList.add("link");
|
||||
eventWhere.addEventListener("click", () => {
|
||||
// this.floormanager.setCurrentRoom(eventFloor.id);
|
||||
});
|
||||
eventWhere.textContent = eventFloor.name;
|
||||
|
||||
this.uiElements.eventsInspectorEventLength.appendChild(eventWhere);
|
||||
|
||||
// Remove all children
|
||||
|
||||
this.uiElements.eventsInspectorBody.replaceChildren();
|
||||
|
||||
if (currentEvent.url) {
|
||||
const eventLink = document.createElement("p");
|
||||
eventLink.classList.add("widget-description");
|
||||
const eventAnchor = document.createElement("a");
|
||||
const eventURL = new URL(currentEvent.url);
|
||||
|
||||
eventAnchor.href = eventURL;
|
||||
eventAnchor.textContent = eventURL.toString();
|
||||
|
||||
eventLink.appendChild(eventAnchor);
|
||||
|
||||
this.uiElements.eventsInspectorBody.appendChild(eventLink);
|
||||
}
|
||||
|
||||
this.uiElements.eventsInspectorBody.appendChild(
|
||||
document.createElement("hr")
|
||||
);
|
||||
|
||||
const eventDescription = document.createElement("p");
|
||||
eventDescription.classList.add("widget-description");
|
||||
|
||||
eventDescription.textContent = currentEvent.description;
|
||||
|
||||
this.uiElements.eventsInspectorBody.appendChild(eventDescription);
|
||||
}
|
||||
|
||||
__initEvents() {
|
||||
this.uiElements.eventsBackButton.addEventListener("click", () => {
|
||||
this.floormanager.setCurrentRoom("");
|
||||
// this.floormanager.setCurrentRoom("");
|
||||
});
|
||||
this.uiElements.eventsMinimizedBackButton.addEventListener("click", () => {
|
||||
this.floormanager.setCurrentRoom("", false);
|
||||
// this.floormanager.setCurrentRoom("", false);
|
||||
});
|
||||
|
||||
this.uiElements.minimizeButton.addEventListener("click", () => {
|
||||
|
|
@ -123,61 +277,59 @@ export class UIManager {
|
|||
}
|
||||
|
||||
__updateEvents() {
|
||||
const currentLocalization = localization.get(this.floormanager.lang);
|
||||
|
||||
let currentEvents;
|
||||
if (this.floormanager.currentRoom != "") {
|
||||
const filterThing = Array.from(this.eventmanager.events.entries());
|
||||
currentEvents = new Map(
|
||||
filterThing.filter(
|
||||
([key, value]) => value.where == this.floormanager.currentRoom
|
||||
)
|
||||
);
|
||||
} else {
|
||||
currentEvents = this.eventmanager.events;
|
||||
}
|
||||
// if (this.floormanager.currentRoom != "") {
|
||||
// const filterThing = Array.from(this.eventmanager.events.entries());
|
||||
// currentEvents = new Map(
|
||||
// filterThing.filter(
|
||||
// ([key, value]) => value.where == this.floormanager.currentRoom
|
||||
// )
|
||||
// );
|
||||
// } else {
|
||||
// currentEvents = this.eventmanager.events;
|
||||
// }
|
||||
|
||||
this.uiElements.minimizeButton.title = currentLocalization.minimize;
|
||||
this.uiElements.maximizeButton.title = currentLocalization.maximize;
|
||||
// Figure out header
|
||||
|
||||
if (this.floormanager.currentRoomItem != null) {
|
||||
if (currentEvents.size < 1) {
|
||||
this.uiElements.eventsRoomName.textContent =
|
||||
this.floormanager.currentRoomItem.name;
|
||||
} else {
|
||||
this.uiElements.eventsRoomName.textContent =
|
||||
currentLocalization.events_in(this.floormanager.currentRoomItem.name);
|
||||
}
|
||||
this.uiElements.eventsRoomDescription.textContent =
|
||||
this.floormanager.currentRoomItem.description;
|
||||
this.uiElements.eventsBackButton.disabled = false;
|
||||
this.uiElements.eventsBackButton.title =
|
||||
currentLocalization.view_events_in(
|
||||
this.floormanager.currentFloorItem.name
|
||||
);
|
||||
this.uiElements.eventsMinimizedBackButton.disabled = false;
|
||||
this.uiElements.eventsMinimizedBackButton.title =
|
||||
currentLocalization.view_events_in(
|
||||
this.floormanager.currentFloorItem.name
|
||||
);
|
||||
} else {
|
||||
if (currentEvents.size < 1) {
|
||||
this.uiElements.eventsRoomName.textContent =
|
||||
this.floormanager.currentFloorItem.name;
|
||||
} else {
|
||||
this.uiElements.eventsRoomName.textContent =
|
||||
currentLocalization.events_in(
|
||||
this.floormanager.currentFloorItem.name
|
||||
);
|
||||
}
|
||||
this.uiElements.eventsRoomDescription.textContent =
|
||||
this.floormanager.currentFloorItem.description;
|
||||
this.uiElements.eventsBackButton.disabled = true;
|
||||
this.uiElements.eventsBackButton.title = "";
|
||||
this.uiElements.eventsMinimizedBackButton.disabled = true;
|
||||
this.uiElements.eventsMinimizedBackButton.title = "";
|
||||
}
|
||||
// if (this.floormanager.currentRoomItem != null) {
|
||||
// if (currentEvents.size < 1) {
|
||||
// this.uiElements.eventsRoomName.textContent =
|
||||
// this.floormanager.currentRoomItem.name;
|
||||
// } else {
|
||||
// this.uiElements.eventsRoomName.textContent =
|
||||
// currentLocalization.events_in(this.floormanager.currentRoomItem.name);
|
||||
// }
|
||||
// this.uiElements.eventsRoomDescription.textContent =
|
||||
// this.floormanager.currentRoomItem.description;
|
||||
// this.uiElements.eventsBackButton.disabled = false;
|
||||
// this.uiElements.eventsBackButton.title =
|
||||
// currentLocalization.view_events_in(
|
||||
// this.floormanager.currentFloorItem.name
|
||||
// );
|
||||
// this.uiElements.eventsMinimizedBackButton.disabled = false;
|
||||
// this.uiElements.eventsMinimizedBackButton.title =
|
||||
// currentLocalization.view_events_in(
|
||||
// this.floormanager.currentFloorItem.name
|
||||
// );
|
||||
// } else {
|
||||
// if (currentEvents.size < 1) {
|
||||
// this.uiElements.eventsRoomName.textContent =
|
||||
// this.floormanager.currentFloorItem.name;
|
||||
// } else {
|
||||
// this.uiElements.eventsRoomName.textContent =
|
||||
// currentLocalization.events_in(
|
||||
// this.floormanager.currentFloorItem.name
|
||||
// );
|
||||
// }
|
||||
// this.uiElements.eventsRoomDescription.textContent =
|
||||
// this.floormanager.currentFloorItem.description;
|
||||
// this.uiElements.eventsBackButton.disabled = true;
|
||||
// this.uiElements.eventsBackButton.title = "";
|
||||
// this.uiElements.eventsMinimizedBackButton.disabled = true;
|
||||
// this.uiElements.eventsMinimizedBackButton.title = "";
|
||||
// }
|
||||
|
||||
// Remove all children
|
||||
this.uiElements.eventList.replaceChildren();
|
||||
|
|
@ -186,7 +338,7 @@ export class UIManager {
|
|||
|
||||
const currentDate = new Date();
|
||||
currentEvents.forEach((event, id) => {
|
||||
const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
|
||||
// const eventFloor = this.floormanager.currentFloorRooms.get(event.where);
|
||||
const eventDateStart = new Date(event.when.start);
|
||||
const eventDateEnd = new Date(event.when.end);
|
||||
|
||||
|
|
@ -209,24 +361,29 @@ export class UIManager {
|
|||
|
||||
const eventListContainerSummary = document.createElement("p");
|
||||
|
||||
const eventListContainerSummaryName = document.createElement("b");
|
||||
const eventListContainerSummaryName = document.createElement("button");
|
||||
eventListContainerSummaryName.classList.add("link");
|
||||
eventListContainerSummaryName.addEventListener("click", () => {
|
||||
// this.floormanager.setCurrentRoom(eventFloor.id, true, true);
|
||||
// this.eventmanager.setCurrentEvent(id);
|
||||
});
|
||||
eventListContainerSummaryName.textContent = event.name;
|
||||
|
||||
eventListContainerSummary.appendChild(eventListContainerSummaryName);
|
||||
|
||||
eventListContainerSummary.appendChild(document.createTextNode(" "));
|
||||
|
||||
if (this.floormanager.currentRoomItem == null) {
|
||||
const eventListContainerSummaryRoom = document.createElement("button");
|
||||
eventListContainerSummaryRoom.classList.add("link");
|
||||
eventListContainerSummaryRoom.addEventListener("click", () => {
|
||||
this.floormanager.setCurrentRoom(eventFloor.id);
|
||||
});
|
||||
eventListContainerSummaryRoom.textContent =
|
||||
currentLocalization.parenthesis(eventFloor.name);
|
||||
// if (this.floormanager.currentRoomItem == null) {
|
||||
// const eventListContainerSummaryRoom = document.createElement("button");
|
||||
// eventListContainerSummaryRoom.classList.add("link");
|
||||
// eventListContainerSummaryRoom.addEventListener("click", () => {
|
||||
// this.floormanager.setCurrentRoom(eventFloor.id);
|
||||
// });
|
||||
// eventListContainerSummaryRoom.textContent =
|
||||
// currentLocalization.parenthesis(eventFloor.name);
|
||||
|
||||
eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
|
||||
}
|
||||
// eventListContainerSummary.appendChild(eventListContainerSummaryRoom);
|
||||
// }
|
||||
|
||||
eventListContainerSummary.appendChild(document.createElement("br"));
|
||||
|
||||
|
|
@ -235,15 +392,19 @@ export class UIManager {
|
|||
const eventListContainerSummaryTime = document.createElement("span");
|
||||
eventListContainerSummaryTime.classList.add("clarification");
|
||||
eventListContainerSummaryTime.title = eventDateStart.toLocaleString(
|
||||
this.floormanager.lang.replace(/_/g, "-")
|
||||
// this.floormanager.lang.replace(/_/g, "-"),
|
||||
{
|
||||
dateStyle: "short",
|
||||
timeStyle: "short",
|
||||
}
|
||||
);
|
||||
eventListContainerSummaryTime.textContent =
|
||||
currentLocalization.date_summary(
|
||||
datePrefix,
|
||||
getRelativeTime(
|
||||
eventDateStart,
|
||||
currentDate,
|
||||
this.floormanager.lang.replace(/_/g, "-")
|
||||
currentDate
|
||||
// this.floormanager.lang.replace(/_/g, "-")
|
||||
)
|
||||
);
|
||||
|
||||
|
|
@ -279,56 +440,45 @@ export class UIManager {
|
|||
}
|
||||
}
|
||||
|
||||
setLoading(state) {
|
||||
if (state) {
|
||||
this.ui.classList.add("loading");
|
||||
} else {
|
||||
this.ui.classList.remove("loading");
|
||||
}
|
||||
}
|
||||
|
||||
__updateFloorsHard() {
|
||||
const currentLocalization = localization.get(this.floormanager.lang);
|
||||
// Remove all children
|
||||
this.uiElements.floorButtons.replaceChildren();
|
||||
this.uiElements.floorsHeading.textContent =
|
||||
currentLocalization.floors_header;
|
||||
|
||||
// Put them back
|
||||
this.floormanager.floors.forEach(({ name }, id) => {
|
||||
const floorButton = document.createElement("button");
|
||||
floorButton.textContent = name;
|
||||
floorButton.classList.add("floor-button");
|
||||
floorButton.id = "floor-" + id;
|
||||
if (id === this.floormanager.currentFloor)
|
||||
floorButton.classList.add("selected");
|
||||
floorButton.addEventListener("click", () =>
|
||||
this.floormanager.changeFloor(id)
|
||||
);
|
||||
// this.floormanager.floors.forEach(({ name }, id) => {
|
||||
// const floorButton = document.createElement("button");
|
||||
// floorButton.textContent = name;
|
||||
// floorButton.classList.add("floor-button");
|
||||
// floorButton.id = "floor-" + id;
|
||||
// if (id === this.floormanager.currentFloor)
|
||||
// floorButton.classList.add("selected");
|
||||
// floorButton.addEventListener("click", () =>
|
||||
// this.floormanager.changeFloor(id)
|
||||
// );
|
||||
|
||||
this.uiElements.floorButtons.appendChild(floorButton);
|
||||
});
|
||||
// this.uiElements.floorButtons.appendChild(floorButton);
|
||||
// });
|
||||
|
||||
if (this.floormanager.floors.size < 1) {
|
||||
this.uiElements.floors.classList.add("empty");
|
||||
this.floorsEmpty = true;
|
||||
} else {
|
||||
this.uiElements.floors.classList.remove("empty");
|
||||
this.floorsEmpty = false;
|
||||
}
|
||||
// if (this.floormanager.floors.size < 1) {
|
||||
// this.uiElements.floors.classList.add("empty");
|
||||
// this.floorsEmpty = true;
|
||||
// } else {
|
||||
// this.uiElements.floors.classList.remove("empty");
|
||||
// this.floorsEmpty = false;
|
||||
// }
|
||||
}
|
||||
|
||||
__updateFloorsSoft() {
|
||||
const currentLocalization = localization.get(this.floormanager.lang);
|
||||
|
||||
this.uiElements.floorsHeading.textContent =
|
||||
currentLocalization.floors_header;
|
||||
|
||||
this.floormanager.floors.forEach(({ name }, id) => {
|
||||
const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
|
||||
if (id === this.floormanager.currentFloor)
|
||||
child.classList.add("selected");
|
||||
else child.classList.remove("selected");
|
||||
});
|
||||
// this.floormanager.floors.forEach(({ name }, id) => {
|
||||
// const child = this.uiElements.floorButtons.querySelector("#floor-" + id);
|
||||
// if (id === this.floormanager.currentFloor)
|
||||
// child.classList.add("selected");
|
||||
// else child.classList.remove("selected");
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,3 +24,18 @@ export function getRelativeTime(d1, d2, locale) {
|
|||
export function getMinutesDifference(d1, d2) {
|
||||
return (d2.getTime() - d1.getTime()) / units.minute;
|
||||
}
|
||||
|
||||
export function sameDay(d1, d2) {
|
||||
return Math.abs(d2.getTime() - d1.getTime()) < units.day;
|
||||
}
|
||||
|
||||
export function DatetoLocaleDynamicString(d1, ref, lang) {
|
||||
if (sameDay(d1, ref))
|
||||
return d1.toLocaleTimeString(lang, {
|
||||
timeStyle: "short",
|
||||
});
|
||||
else
|
||||
return d1.toLocaleDateString(lang, {
|
||||
dateStyle: "short",
|
||||
});
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import { FloorManager } from "./KaplayMap/floors.js";
|
|||
import { UIManager } from "./KaplayMap/ui.js";
|
||||
import { GameObjManager } from "./KaplayMap/gameobj.js";
|
||||
import { EventManager } from "./KaplayMap/events.js";
|
||||
import { LangManager } from "./KaplayMap/lang.js";
|
||||
|
||||
const map = document.querySelector("#map");
|
||||
const mapUi = document.querySelector("#map-ui");
|
||||
|
|
@ -23,10 +24,7 @@ const kp = kaplay({
|
|||
|
||||
const kaplaymap = new KaplayMap(kp, {});
|
||||
|
||||
kaplaymap.initGrid();
|
||||
|
||||
// addZoomButtons(kaplaymap);
|
||||
|
||||
const langmanager = new LangManager("en-US");
|
||||
const uimanager = new UIManager(mapUi, kaplaymap);
|
||||
const gameobjmanager = new GameObjManager(kaplaymap);
|
||||
const eventmanager = new EventManager(kaplaymap, uimanager, gameobjmanager);
|
||||
|
|
@ -34,8 +32,11 @@ const floormanager = new FloorManager(
|
|||
kaplaymap,
|
||||
uimanager,
|
||||
gameobjmanager,
|
||||
eventmanager,
|
||||
"en_US"
|
||||
eventmanager
|
||||
);
|
||||
|
||||
floormanager.getFloors();
|
||||
async function main() {
|
||||
kaplaymap.initGrid();
|
||||
}
|
||||
|
||||
main();
|
||||
|
|
@ -29,6 +29,10 @@ p.widget-description {
|
|||
padding-bottom: 2px; */
|
||||
}
|
||||
|
||||
p.subtitle {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
button:not(.link) {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
|
@ -54,6 +58,7 @@ button:not(.link):disabled {
|
|||
}
|
||||
|
||||
button.link {
|
||||
display: inline;
|
||||
background: none !important;
|
||||
border: none;
|
||||
padding: 0;
|
||||
|
|
@ -63,6 +68,10 @@ button.link {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.clarification {
|
||||
text-decoration: dotted underline;
|
||||
}
|
||||
|
|
@ -147,7 +156,9 @@ button.link {
|
|||
}
|
||||
|
||||
#map-ui #events-container #events,
|
||||
#map-ui #events-container #events-minimized {
|
||||
#map-ui #events-container #events-minimized,
|
||||
#map-ui #events-container #events-inspector,
|
||||
#map-ui #events-container #events-inspector-minimized {
|
||||
pointer-events: all;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
|
|
@ -155,41 +166,56 @@ button.link {
|
|||
padding: 8px;
|
||||
bottom: 16px;
|
||||
border-radius: 4px;
|
||||
left: -100%;
|
||||
background-color: #202020;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 8px 0 #0008;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events {
|
||||
left: 16px;
|
||||
#map-ui #events-container #events,
|
||||
#map-ui #events-container #events-inspector {
|
||||
width: 400px;
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
#map-ui #events-container.minimized #events {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events-minimized {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
#map-ui #events-container.minimized #events-minimized {
|
||||
#map-ui #events-container:not(.inspector):not(.minimized) #events {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events #footer #footer-buttons {
|
||||
#map-ui #events-container:not(.inspector).minimized #events-minimized {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
#map-ui #events-container:not(.minimized).inspector #events-inspector {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
#map-ui #events-container.minimized.inspector #events-inspector-minimized {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
#map-ui #floors.empty ~ #events-container #events,
|
||||
#map-ui #floors.empty ~ #events-container #events-inspector,
|
||||
#map-ui #floors.empty ~ #events-container #events-minimized,
|
||||
#map-ui #floors.empty ~ #events-container #events-inspector-minimized {
|
||||
left: -100% !important;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events #footer #footer-buttons,
|
||||
#map-ui #events-container #events-inspector #footer #footer-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events #events-header p {
|
||||
#map-ui #events-container #events-inspector p,
|
||||
#map-ui #events-container #events p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events #events-header {
|
||||
#map-ui #events-container #events #events-header,
|
||||
#map-ui #events-container #events-inspector #events-header {
|
||||
display: grid;
|
||||
grid-template-columns: 36px auto;
|
||||
gap: 8px;
|
||||
|
|
@ -222,9 +248,19 @@ button.link {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events-inspector #event-body {
|
||||
/* min-height: 100px; */
|
||||
max-height: calc(50% - 16px);
|
||||
margin: 8px 0;
|
||||
padding: 8px;
|
||||
background-color: #0002;
|
||||
}
|
||||
|
||||
#map-ui #events-container #events #events-header button,
|
||||
#map-ui #events-container #footer #footer-buttons button,
|
||||
#map-ui #events-container #events-minimized button {
|
||||
#map-ui #events-container #events-inspector #events-header button:not(.link),
|
||||
#map-ui #events-container #events-minimized button,
|
||||
#map-ui #events-container #events-inspector-minimized button {
|
||||
width: 36px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div id="events-container" class="empty">
|
||||
<div id="events">
|
||||
<div id="events-header">
|
||||
<button id="back" disabled>←</button>
|
||||
<button id="back" disabled>↑</button>
|
||||
<div>
|
||||
<h1 class="widget-heading" id="room-name"></h1>
|
||||
<p class="widget-description" id="room-description"></p>
|
||||
|
|
@ -44,7 +44,28 @@
|
|||
</div>
|
||||
<div id="events-minimized">
|
||||
<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 id="loading">
|
||||
|
|
|
|||
Loading…
Reference in a new issue