103 lines
4.3 KiB
JavaScript
103 lines
4.3 KiB
JavaScript
"use strict";
|
|
|
|
const OptionsView = (function(){
|
|
|
|
const OptionsView = function(hollow_bond){
|
|
|
|
const self = this;
|
|
let root_element = null;
|
|
|
|
this.destroy = () => {
|
|
if(root_element && root_element.parentNode){
|
|
root_element.remove();
|
|
root_element = null;
|
|
};
|
|
};
|
|
|
|
this.go = () => {
|
|
self.destroy();
|
|
|
|
const current_scale = hollow_bond.render_scale,
|
|
current_fps = hollow_bond.show_fps;
|
|
|
|
root_element = hollow_bond.html(hollow_bond.item_self, ["div", {"class" : "options-modal"}, [
|
|
["div", {"class" : "options-box"}, [
|
|
["h2", {"data-i18n" : "options_title"}, hollow_bond.i18n.get("options_title", null, "Opciones")],
|
|
|
|
// Selector de calidad / Render Scale
|
|
["div", {"class" : "field-group"}, [
|
|
["label", {}, [
|
|
["span", {"data-i18n" : "render_scale_label"}, hollow_bond.i18n.get("render_scale_label", null, "Calidad del Canvas: ")],
|
|
["span", {"class" : "scale-value"}, String(current_scale)],
|
|
["span", {}, "%"]
|
|
]],
|
|
["input", {
|
|
"type" : "range",
|
|
"min" : "3.125",
|
|
"max" : "100",
|
|
"step" : "3.125",
|
|
"value" : String(current_scale),
|
|
"class" : "range-input",
|
|
"oninput" : input => {
|
|
input.closest(".field-group").querySelector(".scale-value").textContent = parseFloat(input.value).toFixed(3).replace(/\.?0+$/, "");
|
|
}
|
|
}]
|
|
]],
|
|
|
|
// Checkbox para ver FPS
|
|
["div", {"class" : "field-group-checkbox"}, [
|
|
["label", {}, [
|
|
["input", {
|
|
"type" : "checkbox",
|
|
"class" : "checkbox-input",
|
|
...(current_fps ? {"checked" : "checked"} : {})
|
|
}],
|
|
["span", {"data-i18n" : "show_fps_label"}, hollow_bond.i18n.get("show_fps_label", null, "Mostrar indicador de FPS")]
|
|
]]
|
|
]],
|
|
|
|
// Botonera de acciones
|
|
["div", {"class" : "modal-actions"}, [
|
|
["button", {
|
|
"class" : "menu-button",
|
|
"data-i18n" : "btn_save",
|
|
"onclick" : button => {
|
|
|
|
const box = button.closest(".options-box"),
|
|
new_scale = parseFloat(box.querySelector(".range-input").value) || 100,
|
|
new_fps = box.querySelector(".checkbox-input").checked || false;
|
|
|
|
// Guardamos en memoria y en settings
|
|
hollow_bond.render_scale = new_scale;
|
|
hollow_bond.show_fps = new_fps;
|
|
|
|
// Si DungeonManager ya está corriendo, refrescar resolución del canvas
|
|
hollow_bond.dungeon &&
|
|
hollow_bond.dungeon.update_canvas_resolution &&
|
|
hollow_bond.dungeon.update_canvas_resolution();
|
|
|
|
self.destroy();
|
|
hollow_bond.views.menu.go();
|
|
|
|
}
|
|
}, hollow_bond.i18n.get("btn_save", null, "Guardar")],
|
|
|
|
["button", {
|
|
"class" : "menu-button",
|
|
"data-i18n" : "btn_back",
|
|
"onclick" : () => {
|
|
self.destroy();
|
|
hollow_bond.views.menu.go();
|
|
}
|
|
}, hollow_bond.i18n.get("btn_back", null, "Atrás")]
|
|
]]
|
|
]]
|
|
]])[0];
|
|
|
|
return self;
|
|
};
|
|
|
|
};
|
|
|
|
return OptionsView;
|
|
})(); |