LUDO/setting.js at main · karl2561/LUDO · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class setting {
    constructor() {
        this._speedSettings = {
            'gameSpeed': 1000,
            'highlightFieldDuration': 2000
        },
        this.settings = document.getElementById('settings')
    }
    get speedSettings() {
        return this._speedSettings
    }
    toggleSettings() {
        if(!document.querySelector('.settings_menu')) {
            document.querySelector("body").
            appendChild(Object.assign(document.createElement('section'), { className: 'settings_menu' }));
            this.showSettings();
        } else {
            document.querySelector("body").removeChild(document.querySelector('.settings_menu'));
        }
    }
    showSettings() {
        const form = document.querySelector('.settings_menu').
        //appendChild(Object.assign(document.createElement('form'), {className: 'settings_form', method: 'POST'})).
        appendChild(Object.assign(document.createElement('table'), {className: 'settings_table'}));
        for(let key in this.speedSettings) {
        form.appendChild(Object.assign(document.createElement('tr'))).
        appendChild(Object.assign(document.createElement('td'))).
        appendChild(Object.assign(document.createElement('label'), {name: `${key}`, innerHTML: `Change ${key}`}));
        form.appendChild(Object.assign(document.createElement('tr'))).
        appendChild(Object.assign(document.createElement('td'))).
        appendChild(Object.assign(document.createElement('input'), {type: 'range', name: `${key}`, id: `${key}`, min: '50', max: '2000', step: '50', value: this.speedSettings[key]}));
        form.appendChild(Object.assign(document.createElement('tr'))).
        appendChild(Object.assign(document.createElement('td'))).
        appendChild(Object.assign(document.createElement('p'), {id: `pvalue${key}`, innerHTML: `Value: <output id="value${key}"></output>`}));
        const value = document.querySelector(`#value${key}`);
        const input = document.querySelector(`#${key}`);
        input.addEventListener("input", (event) => {
            value.textContent = event.target.value;
        });
        }
        form.appendChild(Object.assign(document.createElement('tr'))).
        appendChild(Object.assign(document.createElement('td'))).
        appendChild(Object.assign(document.createElement('input'), {type: 'button', value: 'Save', id: 'save'}));

    }
}