From f549c7e2fc520fff17ddfe868267c28ef91bf822 Mon Sep 17 00:00:00 2001
From: sanine <sanine.not@pm.me>
Date: Sun, 7 Jul 2024 11:59:23 -0500
Subject: add sound controls and fullscreen

---
 main.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 82 insertions(+), 9 deletions(-)

(limited to 'main.js')

diff --git a/main.js b/main.js
index 44a0fe3..94c3f31 100644
--- a/main.js
+++ b/main.js
@@ -27,6 +27,16 @@ window.onload = () => setTimeout(() => {
   start.type = 'button';
   start.value = 'connect to AMH';
   start.onclick = () => {
+    // set up fullscreen
+    document.documentElement.requestFullscreen();
+    document.getElementById('fullscreen-toggle').onclick = () => {
+      if (document.fullscreenElement === null) {
+        document.documentElement.requestFullscreen();
+      } else {
+        document.exitFullscreen();
+      }
+    }
+
     root.classList.remove('center');
     root.innerText = '';
     const audio = new AudioContext();
@@ -55,21 +65,22 @@ window.onload = () => setTimeout(() => {
     musicList[0].element.play();
 
     const sfx = {};
+    const sfxGain = audio.createGain();
     sfx.buttonEnterAudio = document.getElementById('sfx-buttonenter');
     sfx.buttonClickAudio = document.getElementById('sfx-buttonclick');
     sfx.listAppearAudio = document.getElementById('sfx-listappear');
-    audio.createMediaElementSource(sfx.buttonEnterAudio).connect(audio.destination);
-    audio.createMediaElementSource(sfx.buttonClickAudio).connect(audio.destination);
-    audio.createMediaElementSource(sfx.listAppearAudio).connect(audio.destination);
+    audio.createMediaElementSource(sfx.buttonEnterAudio).connect(sfxGain).connect(audio.destination);
+    audio.createMediaElementSource(sfx.buttonClickAudio).connect(sfxGain).connect(audio.destination);
+    audio.createMediaElementSource(sfx.listAppearAudio).connect(sfxGain).connect(audio.destination);
 
     sfx.resourceAudio = document.getElementById('sfx-resource');
-    audio.createMediaElementSource(sfx.resourceAudio).connect(audio.destination);
+    audio.createMediaElementSource(sfx.resourceAudio).connect(sfxGain).connect(audio.destination);
   
     sfx.doneAudio = document.getElementById('sfx-done');
-    audio.createMediaElementSource(sfx.doneAudio).connect(audio.destination);
+    audio.createMediaElementSource(sfx.doneAudio).connect(sfxGain).connect(audio.destination);
   
     sfx.wrongAudio = document.getElementById('sfx-wrong');
-    audio.createMediaElementSource(sfx.wrongAudio).connect(audio.destination);
+    audio.createMediaElementSource(sfx.wrongAudio).connect(sfxGain).connect(audio.destination);
 
     // const level = setupLevel([[2, 2], [3,3]], [7, 7]);
     // const ui = setupLevelUi(level, root, audio);
@@ -77,9 +88,71 @@ window.onload = () => setTimeout(() => {
     Promise.all([...Object.values(sfx)].map(x => new Promise(resolve => {
       x.load();
       x.addEventListener('canplaythrough', resolve, false);
-    }))).then(
-      () => setupLevelSelectUi(root, sfx)
-    );
+    }))).then(() => {
+      sfx.gain = sfxGain;
+      document.getElementById('sound-controls').onclick = () => showSoundControls(root, sfx, musicGain);
+      setupLevelSelectUi(root, sfx)
+    });
   };
   root.appendChild(start);
 }, 200);
+
+
+function showSoundControls(root, sfx, musicGain) {
+  const div = document.createElement('div');
+  div.classList.add('center-screen-container');
+  const div2 = document.createElement('div');
+  div2.classList.add('center-screen');
+  div.appendChild(div2);
+  const p = document.createElement('p');
+  p.classList.add('alert-box');
+  p.innerText = 'sound settings';
+  div2.appendChild(p);
+  root.appendChild(div);
+
+  const musicLabel = document.createElement('label');
+  musicLabel.innerText = 'music:';
+  const musicRange = document.createElement('input');
+  musicRange.type = 'range';
+  musicRange.min = 0;
+  musicRange.max = 1;
+  musicRange.step = 0.1;
+  musicRange.value = 2*musicGain.gain.value;
+  musicRange.onchange = e => {
+    musicGain.gain.value = 0.5*e.target.value;
+  }
+  p.appendChild(document.createElement('br'));
+  p.appendChild(musicLabel);
+  p.appendChild(musicRange);
+
+  const sfxLabel = document.createElement('label');
+  sfxLabel.innerText = 'sfx:';
+  const sfxRange = document.createElement('input');
+  sfxRange.type = 'range';
+  sfxRange.min = 0;
+  sfxRange.max = 1;
+  sfxRange.step = 0.1;
+  sfxRange.value = sfx.gain.gain.value;
+  sfxRange.onchange = e => {
+    sfx.gain.gain.value = e.target.value;
+  }
+  p.appendChild(document.createElement('br'));
+  p.appendChild(sfxLabel);
+  p.appendChild(sfxRange);
+
+
+  const button = document.createElement('input');
+  button.type = 'button';
+  button.value = 'OK';
+  button.onmouseenter = () => {
+    sfx.buttonEnterAudio.currentTime = 0;
+    sfx.buttonEnterAudio.play();
+  }
+  button.onclick = () => {
+    sfx.buttonClickAudio.currentTime = 0;
+    sfx.buttonClickAudio.play();
+    root.removeChild(div);
+  }
+  p.appendChild(document.createElement('br'));
+  p.appendChild(button);
+}
-- 
cgit v1.2.1