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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
/* Logic for all controls in the sidebar */
// Since we have gl context, initialise whatever needs it
function initMenu() {
initLevels();
debugChange.call(debugModeCB);
toggleRayMarching.call(disableRayMarching);
}
/* Level items */
const levelSelect = document.getElementById('level-select');
const levelDesc = document.getElementById('level-description');
// Add levels to dropdown box
function initLevels() {
for (var i = 0; i < levels.length; i++) {
var elem = document.createElement('option');
elem.value = i;
elem.innerText = levels[i].name;
levelSelect.appendChild(elem);
}
levelChange.call(levelSelect);
}
function levelChange() {
levelDesc.innerText = levels[this.value].description;
levels[this.value].load();
}
levelSelect.addEventListener('change', levelChange);
const animPause = document.getElementById('pause-movement');
function pauseMovement() {
pauseAnimations = this.checked;
}
pauseMovement.call(animPause);
animPause.addEventListener('change', pauseMovement);
/* Settings items */
const debugModeCB = document.getElementById('debug-mode');
function debugChange() {
if(this.checked) {
gl.uniform4f(uBlack, 1,0,0,1);
gl.uniform4f(uBHBlack, 0,1,0,1);
}
else {
gl.uniform4f(uBlack, 0,0,0,1);
gl.uniform4f(uBHBlack, 0,0,0,1);
}
}
debugModeCB.addEventListener('change', debugChange);
coordsElem = document.getElementById('coordinates');
const coordsCB = document.getElementById('coordinates-cb');
function coordscbChange() {
if (this.checked) coordsElem.classList.remove('hide');
else coordsElem.classList.add('hide');
}
coordscbChange.call(coordsCB);
coordsCB.addEventListener('change', coordscbChange);
fpsElem = document.getElementById('fps');
const fpsCB = document.getElementById('fps-cb');
function fpsCBChange() {
if (this.checked) fpsElem.classList.remove('hide');
else fpsElem.classList.add('hide');
}
fpsCBChange.call(fpsCB);
fpsCB.addEventListener('change', fpsCBChange);
const disableRayMarching = document.getElementById('disable-ray-marching');
function toggleRayMarching() {
gl.uniform1i(uDisableRayMarching, this.checked);
}
disableRayMarching.addEventListener('change', toggleRayMarching);
const onlyHorizontalCB = document.getElementById('only-horizontal');
function horChange() {
onlyHorizontal = this.checked;
}
horChange.call(onlyHorizontalCB);
onlyHorizontalCB.addEventListener('change', horChange);
const onlyVerticalCB = document.getElementById('only-vertical');
function verChange() {
onlyVertical = this.checked;
}
verChange.call(onlyVerticalCB);
onlyVerticalCB.addEventListener('change', verChange);
|
