Added a menu system

audio.js

@@ -1,10 +1,17 @@
 let playing = [];
 let looping = {};
 
+let audioContext;
+let gainControl;
+
 const audioBaseUrl = "./media/audio/";
 
 let audioDict = {};
 
+function setVolume(vol) {
+  gainControl.gain.value = vol;
+}
+
 // play some sound
 
 function playSfx(name) {
@@ -15,7 +22,7 @@ function playSfx(name) {
 
   let src = audioContext.createBufferSource();
   src.buffer = audioDict[name];
-  src.connect(audioContext.destination);
+  src.connect(gainControl);
 
   playing.push(src);
 
@@ -173,6 +180,13 @@ function initAudio(story, state) {
   if (!audioContext)
     audioContext = new (window.AudioContext || window.webkitAudioContext)();
 
+  if (!gainControl) {
+    gainControl = audioContext.createGain();
+    gainControl.gain.value = 0.5;
+    gainControl.connect(audioContext.destination);
+  }
+
+
   createCache();
 
   story.sounds.forEach(sound => {

satiate.css

@@ -10,6 +10,10 @@ html, body, .scene {
   display: none;
 }
 
+.hidden-modal {
+  display: none;
+}
+
 a {
   color: #8888FF;
   text-decoration: none;
@@ -55,6 +59,7 @@ a:hover {
   font-size: 48px;
   color: #eee;
 }
+
 .modal {
   position: fixed;
   z-index: 1;
@@ -63,10 +68,59 @@ a:hover {
   left: 0;
   top: 0;
   background-color: rgba(0,0,0,0.5);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
 }
 
 .modal-content {
-  margin: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  position: relative;
+  flex-wrap: nowrap;
+  text-align: center;
+  width: 300px;
+  padding: 100px;
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.menu-header {
+  width: 100%;
+  height: 75px;
+  font-size: 48px;
+}
+
+.menu-button {
+  width: 100%;
+  height: 50px;
+  background-color: #111;
+  border: 1px solid #333;
+  font-size: 24px;
+  color: #eee;
+}
+
+.menu-button:active {
+  background-color: #222;
+}
+
+.menu-button:focus {
+  outline: 0px;
+}
+
+.menu-slider {
+  background: #555;
+  width: 100%;
+  height: 50px;
+}
+
+.menu-label {
+  width: 100%;
+  height: 25px;
+  font-size: 36px;
 }
 
 #info-area {
@@ -93,12 +147,22 @@ a:hover {
   font-size: 24px;
 }
 
-#menu {
+#game-menu {
   margin: 10px;
   background: #222;
   flex: 2;
 }
 
+.game-menu-button {
+  height: 100%;
+  width: 50%;
+  user-select: none;
+  background-color: #111;
+  border: 1px solid #333;
+  font-size: 48px;
+  color: #eee;
+}
+
 #world-info {
   margin: 10px;
   background: #222;

satiate.html

@@ -23,13 +23,13 @@
       <div id="pick-blurb">
         <p>Welcome to Satiate</p>
         <a href="https://discord.gg/dSwNN8T">Discord Server</a>
-        <p class="version"></p>
+        <p class="version">Version: </p>
         <p><b>This game contains 18+ content</b></p>
         <p>Select a story:</p>
       </div>
       <div>
         <select id="game-select">
-
+          <option hidden value="didnt-pick-a-story-lol">Pick a story</option>
         </select>
       </div>
       <button id="start-button">Start</button>
@@ -37,8 +37,8 @@
     <div class="hidden-scene" id="game">
       <div id="info-area">
         <div class="sidebar">
-          <div id="menu">
-            this is the menu, eventually
+          <div id="game-menu">
+            <button class="game-menu-button" id="game-menu-button">Menu</button>
           </div>
           <div id="world-info">
             <div class="info-header" id="world-info-header">World</div>
@@ -68,12 +68,27 @@
         </div>
       </div>
     </div>
-    <!--
-    <div class="modal" id="settings">
+    <div class="hidden-modal" id="menu">
+      <div class="modal-content">
+        <button class="menu-button" id="menu-button-settings">Settings</button>
+        <button class="menu-button" id="menu-button-quit">Quit</button>
+        <button class="menu-button" id="menu-button-resume">Resume</button>
+      </div>
+    </div>
+    <div class="hidden-modal" id="settings">
+      <div class="modal-content">
+        <div class="menu-header">Settings</div>
+        <label class="menu-label" for="volume">Volume</label>
+        <input class="menu-slider" type="range" id="menu-slider-volume" name="volume" min="0" max="1" step="0.05">
+        <button class="menu-button" id="menu-button-settings-close">Close</button>
+      </div>
+    </div>
+    <div class="hidden-modal" id="quit">
       <div class="modal-content">
-        <button>butt</button>
+        <div class="menu-header">Quit?</div>
+        <button class="menu-button" id="menu-button-quit-yes">Yes</button>
+        <button class="menu-button" id="menu-button-quit-no">No</button>
       </div>
     </div>
-    -->
   </body>
 </html>

satiate.js

@@ -1,6 +1,6 @@
 "use strict"
 
-let audioContext;
+let activeModal = null;
 
 const version = "pre-alpha";
 
@@ -36,6 +36,32 @@ function refresh() {
   updatePlayerInfo(state);
 }
 
+function switchModal(to) {
+  closeModal(activeModal);
+  openModal(to);
+}
+
+function closeModal(modal) {
+  const div = document.querySelector("#" + modal);
+  div.classList.remove("modal");
+  div.classList.add("hidden-modal");
+}
+
+function openModal(modal) {
+  const div = document.querySelector("#" + modal);
+  div.classList.remove("hidden-modal");
+  div.classList.add("modal");
+
+  activeModal = modal;
+}
+
+function returnToStart() {
+  document.querySelector("#game").classList.remove("scene");
+  document.querySelector("#game").classList.add("hidden-scene");
+  document.querySelector("#pick").classList.remove("hidden-scene");
+  document.querySelector("#pick").classList.add("scene");
+}
+
 // set up the game
 
 function init(story) {
@@ -56,7 +82,7 @@ function initStart() {
   versionFields.forEach(field => {
     field.textContent = "Version: " + version;
   });
-  
+
   stories.forEach(story => {
     const option = document.createElement("option");
     option.value = story.id;
@@ -74,6 +100,35 @@ function initStart() {
     document.querySelector("#game").classList.remove("hidden-scene");
     document.querySelector("#game").classList.add("scene");
   });
+
+  const gameMenuButton = document.querySelector("#game-menu-button");
+
+  const menuSettings = document.querySelector("#menu-button-settings");
+  const menuQuit = document.querySelector("#menu-button-quit");
+  const menuResume = document.querySelector("#menu-button-resume");
+
+  const menuSettingsVolume = document.querySelector("#menu-slider-volume");
+  const menuSettingsClose = document.querySelector("#menu-button-settings-close");
+
+  const menuQuitYes = document.querySelector("#menu-button-quit-yes");
+  const menuQuitNo = document.querySelector("#menu-button-quit-no");
+
+  gameMenuButton.addEventListener("click", () => openModal("menu"));
+
+  menuSettings.addEventListener("click", () => switchModal("settings"));
+  menuQuit.addEventListener("click", () => switchModal("quit"));
+  menuResume.addEventListener("click", () => closeModal("menu"));
+
+  menuSettingsVolume.addEventListener("input", () => {
+    setVolume(parseFloat(menuSettingsVolume.value));
+  })
+  menuSettingsClose.addEventListener("click", () => switchModal("menu"));
+
+  menuQuitYes.addEventListener("click", () => {
+    closeModal("quit");
+    returnToStart();
+  });
+  menuQuitNo.addEventListener("click", () => switchModal("menu"));
 }
 
 window.addEventListener("load", initStart);