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

View file

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

View file

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

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([
[
"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",
},
],
]);

View file

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

View file

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

View file

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

View file

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

View file

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