150 lines
8.2 KiB
JavaScript
150 lines
8.2 KiB
JavaScript
"use strict";
|
|
|
|
const OptionsView = (function(){
|
|
|
|
const OptionsView = function(xgravity){
|
|
|
|
const self = this;
|
|
let view_element = null,
|
|
listening_key = false;
|
|
|
|
this.close = () => {
|
|
if(view_element && view_element.parentNode){
|
|
view_element.parentNode.removeChild(view_element);
|
|
view_element = null;
|
|
}
|
|
};
|
|
|
|
this.go = () => {
|
|
self.close();
|
|
|
|
let current_quality = xgravity.settings.get("canvas_quality", null, 100);
|
|
let current_action_key = xgravity.settings.get("action_key", null, "Space");
|
|
let current_bg_mode = xgravity.settings.get("background_mode", null, "stars");
|
|
let current_diff = xgravity.settings.get("current_difficulty", null, "average");
|
|
|
|
const nodes = xgravity.html(xgravity.item_self, [
|
|
"div", { class : "xg-view xg-options" }, [
|
|
["h2", { class : "xg-subtitle", "data-i18n" : "opt_title" }],
|
|
["div", { class : "xg-panel" }, [
|
|
// Mostrar / Ocultar FPS
|
|
["div", { class : "xg-field-row" }, [
|
|
["span", { "data-i18n" : "opt_show_fps" }],
|
|
["input", {
|
|
type : "checkbox",
|
|
class : "xg-checkbox",
|
|
...(xgravity.settings.get("show_fps", null, false) ? { checked : "checked" } : {}),
|
|
"data-i18n-without" : "true",
|
|
onchange : (input) => {
|
|
const enabled = input.checked;
|
|
xgravity.settings.add({ show_fps : enabled });
|
|
|
|
// Si se desactiva, lo cerramos inmediatamente
|
|
if(!enabled && xgravity.views.fps){
|
|
xgravity.views.fps.close();
|
|
}
|
|
}
|
|
}]
|
|
]],
|
|
// Selector de Dificultad
|
|
["div", { class : "xg-field-row" }, [
|
|
["span", { "data-i18n" : "opt_difficulty" }],
|
|
["select", {
|
|
class : "xg-select",
|
|
"data-i18n-without" : "true",
|
|
onchange : (select) => {
|
|
xgravity.settings.add({ current_difficulty : select.value });
|
|
}
|
|
}, [
|
|
["option", { value : "training", ...(current_diff === "training" ? { selected : "selected" } : {}), "data-i18n" : "diff_training" }],
|
|
["option", { value : "newbie", ...(current_diff === "newbie" ? { selected : "selected" } : {}), "data-i18n" : "diff_newbie" }],
|
|
["option", { value : "lazy", ...(current_diff === "lazy" ? { selected : "selected" } : {}), "data-i18n" : "diff_lazy" }],
|
|
["option", { value : "average", ...(current_diff === "average" ? { selected : "selected" } : {}), "data-i18n" : "diff_average" }],
|
|
["option", { value : "hard", ...(current_diff === "hard" ? { selected : "selected" } : {}), "data-i18n" : "diff_hard" }],
|
|
["option", { value : "berserk", ...(current_diff === "berserk" ? { selected : "selected" } : {}), "data-i18n" : "diff_berserk" }],
|
|
["option", { value : "insane", ...(current_diff === "insane" ? { selected : "selected" } : {}), "data-i18n" : "diff_insane" }]
|
|
]]
|
|
]],
|
|
// Calidad de Canvas
|
|
["div", { class : "xg-field-row" }, [
|
|
["label", {
|
|
id : "xg_lbl_quality",
|
|
"data-i18n" : "opt_canvas_quality"
|
|
}, xgravity.i18n.get("opt_canvas_quality", { quality : current_quality })],
|
|
["input", {
|
|
type : "range",
|
|
class : "xg-range",
|
|
min : "3.125",
|
|
max : "100",
|
|
step : "3.125",
|
|
value : current_quality,
|
|
"data-i18n-without" : "true",
|
|
oninput : (input) => {
|
|
const value = parseFloat(input.value);
|
|
xgravity.settings.add({ canvas_quality : value });
|
|
const lbl = document.getElementById("xg_lbl_quality");
|
|
if(lbl)
|
|
lbl.textContent = xgravity.i18n.get("opt_canvas_quality", { quality : value });
|
|
}
|
|
}]
|
|
]],
|
|
// Modo de Fondo
|
|
["div", { class : "xg-field-row" }, [
|
|
["span", { "data-i18n" : "opt_background" }],
|
|
["select", {
|
|
class : "xg-select",
|
|
"data-i18n-without" : "true",
|
|
onchange : (select) => {
|
|
xgravity.settings.add({ background_mode : select.value });
|
|
}
|
|
}, [
|
|
["option", { value : "image", ...(current_bg_mode === "image" ? { selected : "selected" } : {}), "data-i18n" : "opt_bg_image" }],
|
|
["option", { value : "stars", ...(current_bg_mode === "stars" ? { selected : "selected" } : {}), "data-i18n" : "opt_bg_stars" }],
|
|
["option", { value : "procedural", ...(current_bg_mode === "procedural" ? { selected : "selected" } : {}), "data-i18n" : "opt_bg_procedural" }]
|
|
]]
|
|
]],
|
|
// Tecla de Acción
|
|
["div", { class : "xg-field-row" }, [
|
|
["span", { "data-i18n" : "opt_action_key" }],
|
|
["button", {
|
|
id : "xg_btn_key",
|
|
class : "xg-btn",
|
|
"data-i18n-without" : "true",
|
|
onclick : (btn) => {
|
|
if(listening_key) return;
|
|
listening_key = true;
|
|
btn.textContent = xgravity.i18n.get("btn_press_key");
|
|
|
|
const on_keydown = (e) => {
|
|
window.removeEventListener("keydown", on_keydown);
|
|
const chosen = e.code === "Space" ? "Space" : (e.key.length === 1 ? e.key.toUpperCase() : e.code);
|
|
xgravity.settings.add({ action_key : chosen });
|
|
btn.textContent = chosen;
|
|
listening_key = false;
|
|
};
|
|
window.addEventListener("keydown", on_keydown);
|
|
}
|
|
}, current_action_key]
|
|
]],
|
|
// Botón Volver con auto-limpieza
|
|
["button", {
|
|
class : "xg-btn",
|
|
"data-i18n" : "btn_back",
|
|
onclick : () => {
|
|
self.close();
|
|
if(xgravity.views.main_menu)
|
|
xgravity.views.main_menu.go();
|
|
}
|
|
}]
|
|
]]
|
|
]
|
|
]);
|
|
|
|
view_element = nodes[0];
|
|
xgravity.i18n.update();
|
|
};
|
|
|
|
};
|
|
|
|
return OptionsView;
|
|
})(); |