various things, add es_US (google translate + contributors)

This commit is contained in:
MeowcaTheoRange 2024-06-03 14:35:45 -05:00
parent d652568628
commit d28fc26374
6 changed files with 99 additions and 35 deletions

View file

@ -1,4 +1,8 @@
export class GameObjManager { export class GameObjManager {
opts = {
floorMinZoom: 1,
roomMinZoom: 2,
};
map; map;
floormanager; floormanager;
@ -9,7 +13,11 @@ export class GameObjManager {
this.map = map; this.map = map;
} }
generateFloor() { generateFloor(opts) {
this.opts = {
...this.opts,
opts,
};
if (this.floorObject) this.floorObject.destroy(); if (this.floorObject) this.floorObject.destroy();
const currentFloor = this.floormanager.floors.get( const currentFloor = this.floormanager.floors.get(
@ -51,13 +59,19 @@ export class GameObjManager {
this.map.kp.add(this.floorObject); this.map.kp.add(this.floorObject);
this.map.zoomToAbs(this.map.opts.minZoomLevel, bounds.center()); this.map.zoomToAbs(
this.map.opts.minZoomLevel + this.opts.floorMinZoom,
bounds.center()
);
} }
zoomToFloor() { zoomToFloor() {
const objectBounds = this.floorObject.renderArea().bbox(); const objectBounds = this.floorObject.renderArea().bbox();
this.map.zoomToAbs(this.map.opts.minZoomLevel, objectBounds.center()); this.map.zoomToAbs(
this.map.opts.minZoomLevel + this.opts.floorMinZoom,
objectBounds.center()
);
} }
zoomToRoom(id) { zoomToRoom(id) {
@ -66,7 +80,10 @@ export class GameObjManager {
const objectBounds = selectedObject.renderArea().bbox(); const objectBounds = selectedObject.renderArea().bbox();
this.map.zoomToAbs(this.map.opts.minZoomLevel + 1, objectBounds.center()); this.map.zoomToAbs(
this.map.opts.minZoomLevel + this.opts.roomMinZoom,
objectBounds.center()
);
} }
generateRooms() { generateRooms() {
@ -133,9 +150,11 @@ export class GameObjManager {
const camScale = 1 / this.map.kp.camScale().y; const camScale = 1 / this.map.kp.camScale().y;
this.map.kp.drawText({ this.map.kp.drawText({
text: room.name, text: room.name,
width: polygon.bbox().width,
size: 24 * camScale, size: 24 * camScale,
pos: polygon.bbox().center(), pos: polygon.bbox().center(),
color: this.map.kp.WHITE, color: this.map.kp.WHITE,
align: "center",
anchor: "center", anchor: "center",
}); });
}); });

View file

@ -1,7 +1,7 @@
export class KaplayMap { export class KaplayMap {
kp; kp;
opts = { opts = {
minZoomLevel: 2, minZoomLevel: 1,
maxZoomLevel: 5, maxZoomLevel: 5,
dblClickDuration: 0.2, // s dblClickDuration: 0.2, // s
dblClickForgiveness: 100, // px dblClickForgiveness: 100, // px

View file

@ -17,4 +17,25 @@ export default new Map([
maximize: "Show 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",
},
],
]); ]);

View file

@ -125,13 +125,30 @@ export class UIManager {
__updateEvents() { __updateEvents() {
const currentLocalization = localization.get(this.floormanager.lang); 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;
}
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) {
this.uiElements.eventsRoomName.textContent = if (currentEvents.size < 1) {
currentLocalization.events_in(this.floormanager.currentRoomItem.name); 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.uiElements.eventsRoomDescription.textContent =
this.floormanager.currentRoomItem.description; this.floormanager.currentRoomItem.description;
this.uiElements.eventsBackButton.disabled = false; this.uiElements.eventsBackButton.disabled = false;
@ -145,8 +162,15 @@ export class UIManager {
this.floormanager.currentFloorItem.name this.floormanager.currentFloorItem.name
); );
} else { } else {
this.uiElements.eventsRoomName.textContent = if (currentEvents.size < 1) {
currentLocalization.events_in(this.floormanager.currentFloorItem.name); 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.uiElements.eventsRoomDescription.textContent =
this.floormanager.currentFloorItem.description; this.floormanager.currentFloorItem.description;
this.uiElements.eventsBackButton.disabled = true; this.uiElements.eventsBackButton.disabled = true;
@ -161,13 +185,7 @@ export class UIManager {
// Put them back // Put them back
const currentDate = new Date(); const currentDate = new Date();
this.eventmanager.events.forEach((event, id) => { currentEvents.forEach((event, id) => {
if (
this.floormanager.currentRoomItem &&
event.where != this.floormanager.currentRoom
)
return; // Don't display this event
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);
@ -185,11 +203,11 @@ export class UIManager {
datePrefix = currentLocalization.date_starting; datePrefix = currentLocalization.date_starting;
} }
const eventListContainer = document.createElement("details"); const eventListContainer = document.createElement("div");
eventListContainer.classList.add("event-list-container"); eventListContainer.classList.add("event-list-container");
eventListContainer.id = "event-" + id; eventListContainer.id = "event-" + id;
const eventListContainerSummary = document.createElement("summary"); const eventListContainerSummary = document.createElement("p");
const eventListContainerSummaryName = document.createElement("b"); const eventListContainerSummaryName = document.createElement("b");
eventListContainerSummaryName.textContent = event.name; eventListContainerSummaryName.textContent = event.name;
@ -249,19 +267,14 @@ export class UIManager {
eventListContainer.appendChild(eventListContainerSummary); eventListContainer.appendChild(eventListContainerSummary);
const eventListContainerDescription = document.createElement("p");
eventListContainerDescription.textContent = event.description;
eventListContainer.appendChild(eventListContainerDescription);
this.uiElements.eventList.appendChild(eventListContainer); this.uiElements.eventList.appendChild(eventListContainer);
}); });
if (this.eventmanager.events.size < 1) { if (currentEvents.size < 1) {
this.uiElements.eventList.classList.add("empty"); this.uiElements.eventsContainer.classList.add("empty");
this.eventsEmpty = true; this.eventsEmpty = true;
} else { } else {
this.uiElements.eventList.classList.remove("empty"); this.uiElements.eventsContainer.classList.remove("empty");
this.eventsEmpty = false; this.eventsEmpty = false;
} }
} }

View file

@ -24,6 +24,7 @@ h1.widget-heading {
p.widget-description { p.widget-description {
margin: 0; margin: 0;
margin-bottom: 8px; margin-bottom: 8px;
white-space: pre-line;
/* border-bottom: 1px solid currentColor; /* border-bottom: 1px solid currentColor;
padding-bottom: 2px; */ padding-bottom: 2px; */
} }
@ -163,6 +164,7 @@ button.link {
#map-ui #events-container #events { #map-ui #events-container #events {
left: 16px; left: 16px;
width: 400px; width: 400px;
max-width: calc(100% - 32px);
} }
#map-ui #events-container.minimized #events { #map-ui #events-container.minimized #events {
@ -192,11 +194,11 @@ button.link {
grid-template-columns: 36px auto; grid-template-columns: 36px auto;
gap: 8px; gap: 8px;
margin-bottom: 8px; margin-bottom: 8px;
align-items: center; /* align-items: center; */
} }
#map-ui #events-container #events #event-list { #map-ui #events-container #events #event-list {
min-height: 200px; /* min-height: 100px; */
max-height: calc(50% - 16px); max-height: calc(50% - 16px);
margin: 8px 0; margin: 8px 0;
padding: 8px; padding: 8px;
@ -204,11 +206,20 @@ button.link {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
/* transition: height 0.25s,
min-height 0.25s,
padding 0.25s,
margin 0.25s; */
}
#map-ui #events-container.empty #events #event-list {
min-height: 0;
padding: 0 8px;
margin: 0;
} }
#map-ui #events-container #events #event-list .event-list-container p { #map-ui #events-container #events #event-list .event-list-container p {
margin: 2px 0; margin: 0;
white-space: pre-line;
} }
#map-ui #events-container #events #events-header button, #map-ui #events-container #events #events-header button,

View file

@ -19,18 +19,18 @@
<button class="zoom-button" id="zoom-out">-</button> <button class="zoom-button" id="zoom-out">-</button>
</div> </div>
<div id="floors" class="empty"> <div id="floors" class="empty">
<h1 class="widget-heading">Floors</h1> <h1 class="widget-heading"></h1>
<div id="floor-buttons"> <div id="floor-buttons">
</div> </div>
</div> </div>
<div id="events-container"> <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">Events</h1> <h1 class="widget-heading" id="room-name"></h1>
<p class="widget-description" id="room-description">Lorem ipsum dolor sit amet.</p> <p class="widget-description" id="room-description"></p>
</div> </div>
</div> </div>
<div id="event-list"> <div id="event-list">
@ -43,7 +43,7 @@
</div> </div>
</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>
</div> </div>