parent
c1d720ca52
commit
224bc6c7e5
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 38 KiB |
After Width: | Height: | Size: 825 B |
@ -0,0 +1,32 @@
|
||||
#ingame_HUD_SettingsMenu {
|
||||
.timePlayed {
|
||||
position: absolute;
|
||||
@include S(left, 30px);
|
||||
@include S(bottom, 30px);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
}
|
||||
|
||||
span {
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
@include S(grid-gap, 10px);
|
||||
background: rgba(0, 10, 20, 0.1);
|
||||
@include S(padding, 20px);
|
||||
@include S(border-radius, 2px);
|
||||
}
|
||||
}
|
@ -0,0 +1,430 @@
|
||||
/* typehints:start */
|
||||
import { Application } from "../application";
|
||||
/* typehints:end */
|
||||
|
||||
import { Signal, STOP_PROPAGATION } from "./signal";
|
||||
import { arrayDeleteValue, waitNextFrame } from "./utils";
|
||||
import { ClickDetector } from "./click_detector";
|
||||
import { SOUNDS } from "../platform/sound";
|
||||
import { InputReceiver } from "./input_receiver";
|
||||
import { FormElement } from "./modal_dialog_forms";
|
||||
import { globalConfig } from "./config";
|
||||
import { getStringForKeyCode } from "../game/key_action_mapper";
|
||||
import { createLogger } from "./logging";
|
||||
|
||||
const kbEnter = 13;
|
||||
const kbCancel = 27;
|
||||
|
||||
const logger = createLogger("dialogs");
|
||||
|
||||
/**
|
||||
* Basic text based dialog
|
||||
*/
|
||||
export class Dialog {
|
||||
/**
|
||||
*
|
||||
* Constructs a new dialog with the given options
|
||||
* @param {object} param0
|
||||
* @param {Application} param0.app
|
||||
* @param {string} param0.title Title of the dialog
|
||||
* @param {string} param0.contentHTML Inner dialog html
|
||||
* @param {Array<string>} param0.buttons
|
||||
* Button list, each button contains of up to 3 parts seperated by ':'.
|
||||
* Part 0: The id, one of the one defined in dialog_buttons.yaml
|
||||
* Part 1: The style, either good, bad or misc
|
||||
* Part 2 (optional): Additional parameters seperated by '/', available are:
|
||||
* timeout: This button is only available after some waiting time
|
||||
* kb_enter: This button is triggered by the enter key
|
||||
* kb_escape This button is triggered by the escape key
|
||||
* @param {string=} param0.type The dialog type, either "info" or "warn"
|
||||
* @param {boolean=} param0.closeButton Whether this dialog has a close button
|
||||
*/
|
||||
constructor({ app, title, contentHTML, buttons, type = "info", closeButton = false }) {
|
||||
this.app = app;
|
||||
this.title = title;
|
||||
this.contentHTML = contentHTML;
|
||||
this.type = type;
|
||||
this.buttonIds = buttons;
|
||||
this.closeButton = closeButton;
|
||||
|
||||
this.closeRequested = new Signal();
|
||||
this.buttonSignals = {};
|
||||
|
||||
for (let i = 0; i < buttons.length; ++i) {
|
||||
if (G_IS_DEV && globalConfig.debug.disableTimedButtons) {
|
||||
this.buttonIds[i] = this.buttonIds[i].replace(":timeout", "");
|
||||
}
|
||||
|
||||
const buttonId = this.buttonIds[i].split(":")[0];
|
||||
this.buttonSignals[buttonId] = new Signal();
|
||||
}
|
||||
|
||||
this.timeouts = [];
|
||||
this.clickDetectors = [];
|
||||
|
||||
this.inputReciever = new InputReceiver("dialog-" + this.title);
|
||||
|
||||
this.inputReciever.keydown.add(this.handleKeydown, this);
|
||||
|
||||
this.enterHandler = null;
|
||||
this.escapeHandler = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Internal keydown handler
|
||||
* @param {object} param0
|
||||
* @param {number} param0.keyCode
|
||||
* @param {boolean} param0.shift
|
||||
* @param {boolean} param0.alt
|
||||
*/
|
||||
handleKeydown({ keyCode, shift, alt }) {
|
||||
if (keyCode === kbEnter && this.enterHandler) {
|
||||
this.internalButtonHandler(this.enterHandler);
|
||||
return STOP_PROPAGATION;
|
||||
}
|
||||
|
||||
if (keyCode === kbCancel && this.escapeHandler) {
|
||||
this.internalButtonHandler(this.escapeHandler);
|
||||
return STOP_PROPAGATION;
|
||||
}
|
||||
}
|
||||
|
||||
internalButtonHandler(id, ...payload) {
|
||||
this.app.inputMgr.popReciever(this.inputReciever);
|
||||
|
||||
if (id !== "close-button") {
|
||||
this.buttonSignals[id].dispatch(...payload);
|
||||
}
|
||||
this.closeRequested.dispatch();
|
||||
}
|
||||
|
||||
createElement() {
|
||||
const elem = document.createElement("div");
|
||||
elem.classList.add("ingameDialog");
|
||||
|
||||
this.dialogElem = document.createElement("div");
|
||||
this.dialogElem.classList.add("dialogInner");
|
||||
|
||||
if (this.type) {
|
||||
this.dialogElem.classList.add(this.type);
|
||||
}
|
||||
elem.appendChild(this.dialogElem);
|
||||
|
||||
const title = document.createElement("h1");
|
||||
title.innerText = this.title;
|
||||
title.classList.add("title");
|
||||
this.dialogElem.appendChild(title);
|
||||
|
||||
if (this.closeButton) {
|
||||
this.dialogElem.classList.add("hasCloseButton");
|
||||
|
||||
const closeBtn = document.createElement("button");
|
||||
closeBtn.classList.add("closeButton");
|
||||
|
||||
this.trackClicks(closeBtn, () => this.internalButtonHandler("close-button"), {
|
||||
applyCssClass: "pressedSmallElement",
|
||||
});
|
||||
|
||||
title.appendChild(closeBtn);
|
||||
this.inputReciever.backButton.add(() => this.internalButtonHandler("close-button"));
|
||||
}
|
||||
|
||||
const content = document.createElement("div");
|
||||
content.classList.add("content");
|
||||
content.innerHTML = this.contentHTML;
|
||||
this.dialogElem.appendChild(content);
|
||||
|
||||
if (this.buttonIds.length > 0) {
|
||||
const buttons = document.createElement("div");
|
||||
buttons.classList.add("buttons");
|
||||
|
||||
// Create buttons
|
||||
for (let i = 0; i < this.buttonIds.length; ++i) {
|
||||
const [buttonId, buttonStyle, rawParams] = this.buttonIds[i].split(":");
|
||||
|
||||
const button = document.createElement("button");
|
||||
button.classList.add("button");
|
||||
button.classList.add("styledButton");
|
||||
button.classList.add(buttonStyle);
|
||||
// button.innerText = T.dialog_buttons[buttonId];
|
||||
button.innerText = buttonId;
|
||||
|
||||
const params = (rawParams || "").split("/");
|
||||
const useTimeout = params.indexOf("timeout") >= 0;
|
||||
|
||||
const isEnter = params.indexOf("enter") >= 0;
|
||||
const isEscape = params.indexOf("escape") >= 0;
|
||||
|
||||
if (isEscape && this.closeButton) {
|
||||
logger.warn("Showing dialog with close button, and additional cancel button");
|
||||
}
|
||||
|
||||
if (useTimeout) {
|
||||
button.classList.add("timedButton");
|
||||
const timeout = setTimeout(() => {
|
||||
button.classList.remove("timedButton");
|
||||
arrayDeleteValue(this.timeouts, timeout);
|
||||
}, 5000);
|
||||
this.timeouts.push(timeout);
|
||||
}
|
||||
if (isEnter || isEscape) {
|
||||
// if (this.app.settings.getShowKeyboardShortcuts()) {
|
||||
// Show keybinding
|
||||
const spacer = document.createElement("code");
|
||||
spacer.classList.add("keybinding");
|
||||
spacer.innerHTML = getStringForKeyCode(isEnter ? kbEnter : kbCancel);
|
||||
button.appendChild(spacer);
|
||||
// }
|
||||
|
||||
if (isEnter) {
|
||||
this.enterHandler = buttonId;
|
||||
}
|
||||
if (isEscape) {
|
||||
this.escapeHandler = buttonId;
|
||||
}
|
||||
}
|
||||
|
||||
this.trackClicks(button, () => this.internalButtonHandler(buttonId));
|
||||
buttons.appendChild(button);
|
||||
}
|
||||
|
||||
this.dialogElem.appendChild(buttons);
|
||||
} else {
|
||||
this.dialogElem.classList.add("buttonless");
|
||||
}
|
||||
|
||||
this.element = elem;
|
||||
this.app.inputMgr.pushReciever(this.inputReciever);
|
||||
|
||||
return this.element;
|
||||
}
|
||||
|
||||
setIndex(index) {
|
||||
this.element.style.zIndex = index;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (!this.element) {
|
||||
assert(false, "Tried to destroy dialog twice");
|
||||
return;
|
||||
}
|
||||
// We need to do this here, because if the backbutton event gets
|
||||
// dispatched to the modal dialogs, it will not call the internalButtonHandler,
|
||||
// and thus our receiver stays attached the whole time
|
||||
this.app.inputMgr.destroyReceiver(this.inputReciever);
|
||||
|
||||
for (let i = 0; i < this.clickDetectors.length; ++i) {
|
||||
this.clickDetectors[i].cleanup();
|
||||
}
|
||||
this.clickDetectors = [];
|
||||
|
||||
this.element.remove();
|
||||
this.element = null;
|
||||
|
||||
for (let i = 0; i < this.timeouts.length; ++i) {
|
||||
clearTimeout(this.timeouts[i]);
|
||||
}
|
||||
this.timeouts = [];
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.element.classList.remove("visible");
|
||||
}
|
||||
|
||||
show() {
|
||||
this.element.classList.add("visible");
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper method to track clicks on an element
|
||||
* @param {Element} elem
|
||||
* @param {function():void} handler
|
||||
* @param {import("./click_detector").ClickDetectorConstructorArgs=} args
|
||||
* @returns {ClickDetector}
|
||||
*/
|
||||
trackClicks(elem, handler, args = {}) {
|
||||
const detector = new ClickDetector(elem, args);
|
||||
detector.click.add(handler, this);
|
||||
this.clickDetectors.push(detector);
|
||||
return detector;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dialog which simply shows a loading spinner
|
||||
*/
|
||||
export class DialogLoading extends Dialog {
|
||||
constructor(app) {
|
||||
super({
|
||||
app,
|
||||
title: "",
|
||||
contentHTML: "",
|
||||
buttons: [],
|
||||
type: "loading",
|
||||
});
|
||||
|
||||
// Loading dialog can not get closed with back button
|
||||
this.inputReciever.backButton.removeAll();
|
||||
this.inputReciever.context = "dialog-loading";
|
||||
}
|
||||
|
||||
createElement() {
|
||||
const elem = document.createElement("div");
|
||||
elem.classList.add("ingameDialog");
|
||||
elem.classList.add("loadingDialog");
|
||||
this.element = elem;
|
||||
|
||||
const loader = document.createElement("div");
|
||||
loader.classList.add("prefab_LoadingTextWithAnim");
|
||||
loader.classList.add("loadingIndicator");
|
||||
loader.innerText = "Loading";
|
||||
elem.appendChild(loader);
|
||||
|
||||
this.app.inputMgr.pushReciever(this.inputReciever);
|
||||
|
||||
return elem;
|
||||
}
|
||||
}
|
||||
|
||||
export class DialogOptionChooser extends Dialog {
|
||||
constructor({ app, title, options }) {
|
||||
let html = "<div class='optionParent'>";
|
||||
|
||||
options.options.forEach(({ value, text, desc = null, iconPrefix = null }) => {
|
||||
const descHtml = desc ? `<span class="desc">${desc}</span>` : "";
|
||||
let iconHtml = iconPrefix ? `<span class="icon icon-${iconPrefix}-${value}"></span>` : "";
|
||||
html += `
|
||||
<div class='option ${value === options.active ? "active" : ""} ${
|
||||
iconPrefix ? "hasIcon" : ""
|
||||
}' data-optionvalue='${value}'>
|
||||
${iconHtml}
|
||||
<span class='title'>${text}</span>
|
||||
${descHtml}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += "</div>";
|
||||
super({
|
||||
app,
|
||||
title,
|
||||
contentHTML: html,
|
||||
buttons: [],
|
||||
type: "info",
|
||||
closeButton: true,
|
||||
});
|
||||
|
||||
this.options = options;
|
||||
this.initialOption = options.active;
|
||||
|
||||
this.buttonSignals.optionSelected = new Signal();
|
||||
}
|
||||
|
||||
createElement() {
|
||||
const div = super.createElement();
|
||||
this.dialogElem.classList.add("optionChooserDialog");
|
||||
|
||||
div.querySelectorAll("[data-optionvalue]").forEach(handle => {
|
||||
const value = handle.getAttribute("data-optionvalue");
|
||||
if (!handle) {
|
||||
logger.error("Failed to bind option value in dialog:", value);
|
||||
return;
|
||||
}
|
||||
// Need click detector here to forward elements, otherwise scrolling does not work
|
||||
const detector = new ClickDetector(handle, {
|
||||
consumeEvents: false,
|
||||
preventDefault: false,
|
||||
clickSound: null,
|
||||
applyCssClass: "pressedOption",
|
||||
targetOnly: true,
|
||||
});
|
||||
this.clickDetectors.push(detector);
|
||||
|
||||
if (value !== this.initialOption) {
|
||||
detector.click.add(() => {
|
||||
const selected = div.querySelector(".option.active");
|
||||
if (selected) {
|
||||
selected.classList.remove("active");
|
||||
} else {
|
||||
logger.warn("No selected option");
|
||||
}
|
||||
handle.classList.add("active");
|
||||
this.app.sound.playUiSound(SOUNDS.uiClick);
|
||||
this.internalButtonHandler("optionSelected", value);
|
||||
});
|
||||
}
|
||||
});
|
||||
return div;
|
||||
}
|
||||
}
|
||||
|
||||
export class DialogWithForm extends Dialog {
|
||||
/**
|
||||
*
|
||||
* @param {object} param0
|
||||
* @param {Application} param0.app
|
||||
* @param {string} param0.title
|
||||
* @param {string} param0.desc
|
||||
* @param {string=} param0.confirmButton
|
||||
* @param {Array<FormElement>} param0.formElements
|
||||
*/
|
||||
constructor({ app, title, desc, formElements, confirmButton = "ok:good" }) {
|
||||
let html = "";
|
||||
html += desc + "<br>";
|
||||
for (let i = 0; i < formElements.length; ++i) {
|
||||
html += formElements[i].getHtml();
|
||||
}
|
||||
|
||||
super({
|
||||
app,
|
||||
title: title,
|
||||
contentHTML: html,
|
||||
buttons: ["cancel:bad", confirmButton],
|
||||
type: "info",
|
||||
closeButton: true,
|
||||
});
|
||||
this.confirmButtonId = confirmButton.split(":")[0];
|
||||
this.formElements = formElements;
|
||||
}
|
||||
|
||||
internalButtonHandler(id, ...payload) {
|
||||
if (id === this.confirmButtonId) {
|
||||
if (this.hasAnyInvalid()) {
|
||||
this.dialogElem.classList.remove("errorShake");
|
||||
waitNextFrame().then(() => {
|
||||
if (this.dialogElem) {
|
||||
this.dialogElem.classList.add("errorShake");
|
||||
}
|
||||
});
|
||||
this.app.sound.playUiSound(SOUNDS.uiError);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
super.internalButtonHandler(id, payload);
|
||||
}
|
||||
|
||||
hasAnyInvalid() {
|
||||
for (let i = 0; i < this.formElements.length; ++i) {
|
||||
if (!this.formElements[i].isValid()) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
createElement() {
|
||||
const div = super.createElement();
|
||||
|
||||
for (let i = 0; i < this.formElements.length; ++i) {
|
||||
const elem = this.formElements[i];
|
||||
elem.bindEvents(div, this.clickDetectors);
|
||||
}
|
||||
|
||||
waitNextFrame().then(() => {
|
||||
this.formElements[0].focus();
|
||||
});
|
||||
|
||||
return div;
|
||||
}
|
||||
}
|
@ -0,0 +1,150 @@
|
||||
import { ClickDetector } from "./click_detector";
|
||||
|
||||
export class FormElement {
|
||||
constructor(id, label) {
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
}
|
||||
|
||||
getHtml() {
|
||||
abstract;
|
||||
return "";
|
||||
}
|
||||
|
||||
getFormElement(parent) {
|
||||
return parent.querySelector("[data-formId='" + this.id + "']");
|
||||
}
|
||||
|
||||
bindEvents(parent, clickTrackers) {
|
||||
abstract;
|
||||
}
|
||||
|
||||
focus(parent) {}
|
||||
|
||||
isValid() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/** @returns {any} */
|
||||
getValue() {
|
||||
abstract;
|
||||
}
|
||||
}
|
||||
|
||||
export class FormElementInput extends FormElement {
|
||||
constructor({ id, label = null, placeholder, defaultValue = "", inputType = "text", validator = null }) {
|
||||
super(id, label);
|
||||
this.placeholder = placeholder;
|
||||
this.defaultValue = defaultValue;
|
||||
this.inputType = inputType;
|
||||
this.validator = validator;
|
||||
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
getHtml() {
|
||||
let classes = [];
|
||||
let inputType = "text";
|
||||
let maxlength = 256;
|
||||
switch (this.inputType) {
|
||||
case "text": {
|
||||
classes.push("input-text");
|
||||
break;
|
||||
}
|
||||
|
||||
case "email": {
|
||||
classes.push("input-email");
|
||||
inputType = "email";
|
||||
break;
|
||||
}
|
||||
|
||||
case "token": {
|
||||
classes.push("input-token");
|
||||
inputType = "text";
|
||||
maxlength = 4;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="formElement input">
|
||||
${this.label ? `<label>${this.label}</label>` : ""}
|
||||
<input
|
||||
type="${inputType}"
|
||||
value="${this.defaultValue.replace(/["\\]+/gi, "")}"
|
||||
maxlength="${maxlength}"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
class="${classes.join(" ")}"
|
||||
placeholder="${this.placeholder.replace(/["\\]+/gi, "")}"
|
||||
data-formId="${this.id}">
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
bindEvents(parent, clickTrackers) {
|
||||
this.element = this.getFormElement(parent);
|
||||
this.element.addEventListener("input", event => this.updateErrorState());
|
||||
this.updateErrorState();
|
||||
}
|
||||
|
||||
updateErrorState() {
|
||||
this.element.classList.toggle("errored", !this.isValid());
|
||||
}
|
||||
|
||||
isValid() {
|
||||
return !this.validator || this.validator(this.element.value);
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.element.value;
|
||||
}
|
||||
|
||||
focus() {
|
||||
this.element.focus();
|
||||
}
|
||||
}
|
||||
|
||||
export class FormElementCheckbox extends FormElement {
|
||||
constructor({ id, label, defaultValue = true }) {
|
||||
super(id, label);
|
||||
this.defaultValue = defaultValue;
|
||||
this.value = this.defaultValue;
|
||||
|
||||
this.element = null;
|
||||
}
|
||||
|
||||
getHtml() {
|
||||
return `
|
||||
<div class="formElement checkBoxFormElem">
|
||||
${this.label ? `<label>${this.label}</label>` : ""}
|
||||
<div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
|
||||
<span class="knob"></span >
|
||||
</div >
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
bindEvents(parent, clickTrackers) {
|
||||
this.element = this.getFormElement(parent);
|
||||
const detector = new ClickDetector(this.element, {
|
||||
consumeEvents: false,
|
||||
preventDefault: false,
|
||||
});
|
||||
clickTrackers.push(detector);
|
||||
detector.click.add(this.toggle, this);
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.value = !this.value;
|
||||
this.element.classList.toggle("checked", this.value);
|
||||
}
|
||||
|
||||
focus(parent) {}
|
||||
}
|
@ -0,0 +1,188 @@
|
||||
/* typehints:start */
|
||||
import { Application } from "../../../application";
|
||||
/* typehints:end */
|
||||
|
||||
import { SOUNDS } from "../../../platform/sound";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import {
|
||||
Dialog,
|
||||
DialogLoading,
|
||||
DialogVideoTutorial,
|
||||
DialogOptionChooser,
|
||||
} from "../../../core/modal_dialog_elements";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
|
||||
export class HUDModalDialogs extends BaseHUDPart {
|
||||
constructor(root, app) {
|
||||
// Important: Root is not always available here! Its also used in the main menu
|
||||
super(root);
|
||||
|
||||
/** @type {Application} */
|
||||
this.app = app;
|
||||
|
||||
this.dialogParent = null;
|
||||
this.dialogStack = [];
|
||||
}
|
||||
|
||||
// For use inside of the game, implementation of base hud part
|
||||
initialize() {
|
||||
this.dialogParent = document.getElementById("rg_HUD_ModalDialogs");
|
||||
this.domWatcher = new DynamicDomAttach(this.root, this.dialogParent);
|
||||
}
|
||||
|
||||
shouldPauseRendering() {
|
||||
return this.dialogStack.length > 0;
|
||||
}
|
||||
|
||||
shouldPauseGame() {
|
||||
return this.shouldPauseRendering();
|
||||
}
|
||||
|
||||
createElements(parent) {
|
||||
return makeDiv(parent, "rg_HUD_ModalDialogs");
|
||||
}
|
||||
|
||||
// For use outside of the game
|
||||
initializeToElement(element) {
|
||||
assert(element, "No element for dialogs given");
|
||||
this.dialogParent = element;
|
||||
}
|
||||
|
||||
// Methods
|
||||
|
||||
showInfo(title, text, buttons = ["ok:good"]) {
|
||||
const dialog = new Dialog({
|
||||
app: this.app,
|
||||
title: title,
|
||||
contentHTML: text,
|
||||
buttons: buttons,
|
||||
type: "info",
|
||||
});
|
||||
this.internalShowDialog(dialog);
|
||||
|
||||
if (this.app) {
|
||||
this.app.sound.playUiSound(SOUNDS.dialogOk);
|
||||
}
|
||||
|
||||
return dialog.buttonSignals;
|
||||
}
|
||||
|
||||
showWarning(title, text, buttons = ["ok:good"]) {
|
||||
const dialog = new Dialog({
|
||||
app: this.app,
|
||||
title: title,
|
||||
contentHTML: text,
|
||||
buttons: buttons,
|
||||
type: "warning",
|
||||
});
|
||||
this.internalShowDialog(dialog);
|
||||
|
||||
if (this.app) {
|
||||
this.app.sound.playUiSound(SOUNDS.dialogError);
|
||||
}
|
||||
|
||||
return dialog.buttonSignals;
|
||||
}
|
||||
|
||||
showVideoTutorial(title, text, videoUrl) {
|
||||
const dialog = new DialogVideoTutorial({
|
||||
app: this.app,
|
||||
title: title,
|
||||
contentHTML: text,
|
||||
videoUrl,
|
||||
});
|
||||
this.internalShowDialog(dialog);
|
||||
|
||||
if (this.app) {
|
||||
this.app.sound.playUiSound(SOUNDS.dialogOk);
|
||||
}
|
||||
|
||||
return dialog.buttonSignals;
|
||||
}
|
||||
|
||||
showOptionChooser(title, options) {
|
||||
const dialog = new DialogOptionChooser({
|
||||
app: this.app,
|
||||
title,
|
||||
options,
|
||||
});
|
||||
this.internalShowDialog(dialog);
|
||||
return dialog.buttonSignals;
|
||||
}
|
||||
|
||||
// Returns method to be called when laoding finishd
|
||||
showLoadingDialog() {
|
||||
const dialog = new DialogLoading(this.app);
|
||||
this.internalShowDialog(dialog);
|
||||
return this.closeDialog.bind(this, dialog);
|
||||
}
|
||||
|
||||
internalShowDialog(dialog) {
|
||||
const elem = dialog.createElement();
|
||||
dialog.setIndex(this.dialogStack.length);
|
||||
|
||||
// Hide last dialog in queue
|
||||
if (this.dialogStack.length > 0) {
|
||||
this.dialogStack[this.dialogStack.length - 1].hide();
|
||||
}
|
||||
|
||||
this.dialogStack.push(dialog);
|
||||
|
||||
// Append dialog
|
||||
dialog.show();
|
||||
dialog.closeRequested.add(this.closeDialog.bind(this, dialog));
|
||||
|
||||
// Append to HTML
|
||||
this.dialogParent.appendChild(elem);
|
||||
|
||||
document.body.classList.toggle("modalDialogActive", this.dialogStack.length > 0);
|
||||
|
||||
// IMPORTANT: Attach element directly, otherwise double submit is possible
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this.domWatcher) {
|
||||
this.domWatcher.update(this.dialogStack.length > 0);
|
||||
}
|
||||
}
|
||||
|
||||
closeDialog(dialog) {
|
||||
dialog.destroy();
|
||||
|
||||
let index = -1;
|
||||
for (let i = 0; i < this.dialogStack.length; ++i) {
|
||||
if (this.dialogStack[i] === dialog) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
assert(index >= 0, "Dialog not in dialog stack");
|
||||
this.dialogStack.splice(index, 1);
|
||||
|
||||
if (this.dialogStack.length > 0) {
|
||||
// Show the dialog which was previously open
|
||||
this.dialogStack[this.dialogStack.length - 1].show();
|
||||
}
|
||||
|
||||
document.body.classList.toggle("modalDialogActive", this.dialogStack.length > 0);
|
||||
}
|
||||
|
||||
close() {
|
||||
for (let i = 0; i < this.dialogStack.length; ++i) {
|
||||
const dialog = this.dialogStack[i];
|
||||
dialog.destroy();
|
||||
}
|
||||
this.dialogStack = [];
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
super.cleanup();
|
||||
for (let i = 0; i < this.dialogStack.length; ++i) {
|
||||
this.dialogStack[i].destroy();
|
||||
}
|
||||
this.dialogStack = [];
|
||||
this.dialogParent = null;
|
||||
}
|
||||
}
|
@ -0,0 +1,97 @@
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv } from "../../../core/utils";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { KeyActionMapper } from "../../key_action_mapper";
|
||||
|
||||
export class HUDSettingsMenu extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]);
|
||||
|
||||
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
|
||||
|
||||
this.timePlayed = makeDiv(
|
||||
this.background,
|
||||
null,
|
||||
["timePlayed"],
|
||||
`<strong>Playtime</strong><span class="playtime"></span>`
|
||||
);
|
||||
|
||||
this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
title: "Continue",
|
||||
action: () => this.close(),
|
||||
},
|
||||
{
|
||||
title: "Return to menu",
|
||||
action: () => this.returnToMenu(),
|
||||
},
|
||||
];
|
||||
|
||||
for (let i = 0; i < buttons.length; ++i) {
|
||||
const { title, action } = buttons[i];
|
||||
|
||||
const element = document.createElement("button");
|
||||
element.classList.add("styledButton");
|
||||
element.innerText = title;
|
||||
this.buttonContainer.appendChild(element);
|
||||
|
||||
this.trackClicks(element, action);
|
||||
}
|
||||
}
|
||||
|
||||
returnToMenu() {
|
||||
this.root.gameState.goBackToMenu();
|
||||
}
|
||||
|
||||
shouldPauseGame() {
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
shouldPauseRendering() {
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.root.gameState.keyActionMapper.getBinding("back").add(this.show, this);
|
||||
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.background, {
|
||||
attachClass: "visible",
|
||||
});
|
||||
|
||||
this.inputReciever = new InputReceiver("settingsmenu");
|
||||
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
|
||||
|
||||
this.keyActionMapper.getBinding("back").add(this.close, this);
|
||||
|
||||
this.close();
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
}
|
||||
|
||||
show() {
|
||||
this.visible = true;
|
||||
document.body.classList.add("ingameDialogOpen");
|
||||
// this.background.classList.add("visible");
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
|
||||
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60.0);
|
||||
const playtimeString = totalMinutesPlayed === 1 ? "1 minute" : totalMinutesPlayed + " minutes";
|
||||
this.timePlayed.querySelector(".playtime").innerText = playtimeString;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.visible = false;
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.domAttach.update(this.visible);
|
||||
}
|
||||
}
|
@ -0,0 +1,155 @@
|
||||
import { FILE_NOT_FOUND, StorageInterface } from "../storage";
|
||||
import { createLogger } from "../../core/logging";
|
||||
|
||||
const logger = createLogger("storage/browserIDB");
|
||||
|
||||
const LOCAL_STORAGE_UNAVAILABLE = "local-storage-unavailable";
|
||||
const LOCAL_STORAGE_NO_WRITE_PERMISSION = "local-storage-no-write-permission";
|
||||
|
||||
let randomDelay = () => 0;
|
||||
|
||||
if (G_IS_DEV) {
|
||||
// Random delay for testing
|
||||
// randomDelay = () => 500;
|
||||
}
|
||||
|
||||
export class StorageImplBrowserIndexedDB extends StorageInterface {
|
||||
constructor(app) {
|
||||
super(app);
|
||||
this.currentBusyFilename = false;
|
||||
|
||||
/** @type {IDBDatabase} */
|
||||
this.database = null;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
logger.log("Using indexed DB storage");
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = window.indexedDB.open("app_storage", 10);
|
||||
request.onerror = event => {
|
||||
logger.error("IDB error:", event);
|
||||
reject("Indexed DB access error");
|
||||
};
|
||||
|
||||
request.onsuccess = event => resolve(event.target.result);
|
||||
|
||||
request.onupgradeneeded = /** @type {IDBVersionChangeEvent} */ event => {
|
||||
/** @type {IDBDatabase} */
|
||||
const database = event.target.result;
|
||||
|
||||
const objectStore = database.createObjectStore("files", {
|
||||
keyPath: "filename",
|
||||
});
|
||||
|
||||
objectStore.createIndex("filename", "filename", { unique: true });
|
||||
|
||||
objectStore.transaction.onerror = event => {
|
||||
logger.error("IDB transaction error:", event);
|
||||
reject("Indexed DB transaction error during migration, check console output.");
|
||||
};
|
||||
|
||||
objectStore.transaction.oncomplete = event => {
|
||||
logger.log("Object store completely initialized");
|
||||
resolve(database);
|
||||
};
|
||||
};
|
||||
}).then(database => {
|
||||
this.database = database;
|
||||
});
|
||||
}
|
||||
|
||||
writeFileAsync(filename, contents) {
|
||||
if (this.currentBusyFilename === filename) {
|
||||
logger.warn("Attempt to write", filename, "while write process is not finished!");
|
||||
}
|
||||
if (!this.database) {
|
||||
return Promise.reject("Storage not ready");
|
||||
}
|
||||
|
||||
this.currentBusyFilename = filename;
|
||||
const transaction = this.database.transaction(["files"], "readwrite");
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
transaction.oncomplete = () => {
|
||||
this.currentBusyFilename = null;
|
||||
resolve();
|
||||
};
|
||||
|
||||
transaction.onerror = error => {
|
||||
this.currentBusyFilename = null;
|
||||
logger.error("Error while writing", filename, ":", error);
|
||||
reject(error);
|
||||
};
|
||||
|
||||
const store = transaction.objectStore("files");
|
||||
store.put({
|
||||
filename,
|
||||
contents,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
writeFileSyncIfSupported(filename, contents) {
|
||||
// Not supported
|
||||
this.writeFileAsync(filename, contents);
|
||||
return true;
|
||||
}
|
||||
|
||||
readFileAsync(filename) {
|
||||
if (!this.database) {
|
||||
return Promise.reject("Storage not ready");
|
||||
}
|
||||
|
||||
this.currentBusyFilename = filename;
|
||||
const transaction = this.database.transaction(["files"], "readonly");
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const store = transaction.objectStore("files");
|
||||
const request = store.get(filename);
|
||||
|
||||
request.onsuccess = event => {
|
||||
this.currentBusyFilename = null;
|
||||
if (!request.result) {
|
||||
reject(FILE_NOT_FOUND);
|
||||
return;
|
||||
}
|
||||
resolve(request.result.contents);
|
||||
};
|
||||
|
||||
request.onerror = error => {
|
||||
this.currentBusyFilename = null;
|
||||
logger.error("Error while reading", filename, ":", error);
|
||||
reject(error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
deleteFileAsync(filename) {
|
||||
if (this.currentBusyFilename === filename) {
|
||||
logger.warn("Attempt to delete", filename, "while write progres on it is ongoing!");
|
||||
}
|
||||
|
||||
if (!this.database) {
|
||||
return Promise.reject("Storage not ready");
|
||||
}
|
||||
|
||||
this.currentBusyFilename = filename;
|
||||
const transaction = this.database.transaction(["files"], "readwrite");
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
transaction.oncomplete = () => {
|
||||
this.currentBusyFilename = null;
|
||||
resolve();
|
||||
};
|
||||
|
||||
transaction.onerror = error => {
|
||||
this.currentBusyFilename = null;
|
||||
logger.error("Error while deleting", filename, ":", error);
|
||||
reject(error);
|
||||
};
|
||||
|
||||
const store = transaction.objectStore("files");
|
||||
store.delete(filename);
|
||||
});
|
||||
}
|
||||
}
|
Loading…
Reference in new issue