107 lines
3.2 KiB
JavaScript
107 lines
3.2 KiB
JavaScript
class PlayerConfigHandler {
|
|
async init() {
|
|
await template.loadArray([
|
|
'config/nav',
|
|
'config/content',
|
|
'config/visualitem'
|
|
]);
|
|
this.last = 'base';
|
|
$('.settings-icon').addEventListener('click', this.open.bind(this));
|
|
$('modal-content').addDelegatedEventListener('click', '.config-nav .item', this.navHandler.bind(this));
|
|
}
|
|
|
|
open() {
|
|
if (this.content === undefined) {
|
|
let content = template.parseTemplate('config/nav', {});
|
|
content += template.parseTemplate('config/content', {content: ""});
|
|
this.content = content;
|
|
}
|
|
gui.modal.renderModal('Settings', this.content, "by VersusTuneZ");
|
|
this.handleById();
|
|
gui.modal.showModal();
|
|
}
|
|
|
|
navHandler(e, el) {
|
|
this.last = el.dataset.id;
|
|
this.handleById();
|
|
}
|
|
|
|
handleById() {
|
|
let id = this.last;
|
|
new VisualConfig(id === 'visual', id === 'base');
|
|
let active = $('.config-nav .item.active'),
|
|
current = $('.config-nav .item[data-id="' + id + '"]');
|
|
if (active) {
|
|
active.removeClass('active');
|
|
}
|
|
if (current) {
|
|
current.addClass('active');
|
|
}
|
|
}
|
|
}
|
|
|
|
class VisualConfig {
|
|
static visualTemplates = {};
|
|
|
|
constructor(showVisual, renderBase) {
|
|
this.content = $('modal-content .config-content');
|
|
if (showVisual) {
|
|
this.renderVisualConfig(visual.c);
|
|
} else {
|
|
if (renderBase) {
|
|
this.renderBase();
|
|
} else {
|
|
this.renderVisuals();
|
|
}
|
|
}
|
|
}
|
|
|
|
renderVisuals() {
|
|
let keys = Object.keys(visual.visuals),
|
|
content = '<section class="visuals">';
|
|
for (let i = 0; i < keys.length; i++) {
|
|
content += template.parseTemplate('config/visualitem', {
|
|
title: visual.visuals[keys[i]].name,
|
|
id: keys[i],
|
|
active: keys[i] === visual.c ? 'active' : ''
|
|
})
|
|
}
|
|
content += '</div>';
|
|
this.content.innerHTML = content;
|
|
}
|
|
|
|
async renderBase() {
|
|
let data = await this.loadVisualConfig('base'),
|
|
div = create('section');
|
|
div.addClass('base');
|
|
div.innerHTML = GUIHelper.fromJSON(data, pConf);
|
|
this.content.innerHTML = div.outerHTML;
|
|
}
|
|
|
|
// the name loads the json and handle it!
|
|
async renderVisualConfig(name) {
|
|
let data = await this.loadVisualConfig(name, vConf),
|
|
div = create('section');
|
|
div.addClass('visual');
|
|
div.innerHTML = GUIHelper.fromJSON(data, vConf);
|
|
div.innerHTML += GUIHelper.createButton({
|
|
action: "resetVConf",
|
|
name: "Reset Visual Config"
|
|
});
|
|
div.innerHTML += GUIHelper.createButton({
|
|
action: "makeModalTransparent",
|
|
name: "toggle Modal Opacity"
|
|
})
|
|
this.content.innerHTML = div.outerHTML;
|
|
}
|
|
|
|
async loadVisualConfig(name) {
|
|
let tem = VisualConfig.visualTemplates;
|
|
if (!tem[name]) {
|
|
//load config and save it
|
|
tem[name] = await fetch('/out/gui/' + name + ".json").then((res) => res.json());
|
|
}
|
|
return tem[name];
|
|
}
|
|
}
|