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 {
opts = {
floorMinZoom: 1,
roomMinZoom: 2,
};
map;
floormanager;
@ -9,7 +13,11 @@ export class GameObjManager {
this.map = map;
}
generateFloor() {
generateFloor(opts) {
this.opts = {
...this.opts,
opts,
};
if (this.floorObject) this.floorObject.destroy();
const currentFloor = this.floormanager.floors.get(
@ -51,13 +59,19 @@ export class GameObjManager {
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() {
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) {
@ -66,7 +80,10 @@ export class GameObjManager {
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() {
@ -133,9 +150,11 @@ export class GameObjManager {
const camScale = 1 / this.map.kp.camScale().y;
this.map.kp.drawText({
text: room.name,
width: polygon.bbox().width,
size: 24 * camScale,
pos: polygon.bbox().center(),
color: this.map.kp.WHITE,
align: "center",
anchor: "center",
});
});

View file

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

View file

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

View file

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

View file

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