From 7498f68148bd61172153949d84de02beade1125b Mon Sep 17 00:00:00 2001 From: Fen Dweller Date: Mon, 7 Jan 2019 09:53:08 -0500 Subject: [PATCH] Added a menu system --- audio.js | 16 ++++++++++++- satiate.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++-- satiate.html | 31 +++++++++++++++++------- satiate.js | 59 +++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 161 insertions(+), 13 deletions(-) diff --git a/audio.js b/audio.js index 4baccf3..7251d07 100644 --- a/audio.js +++ b/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 => { diff --git a/satiate.css b/satiate.css index c74a266..baed264 100644 --- a/satiate.css +++ b/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; diff --git a/satiate.html b/satiate.html index ff51b3c..c475bef 100644 --- a/satiate.html +++ b/satiate.html @@ -23,13 +23,13 @@

Welcome to Satiate

Discord Server -

+

Version:

This game contains 18+ content

Select a story:

@@ -37,8 +37,8 @@
-
- diff --git a/satiate.js b/satiate.js index 3efb4a0..6372259 100644 --- a/satiate.js +++ b/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);