diff --git a/audio/538551__sjonas88__3-select-3.mp3 b/audio/538551__sjonas88__3-select-3.mp3 new file mode 100644 index 0000000..e207525 Binary files /dev/null and b/audio/538551__sjonas88__3-select-3.mp3 differ diff --git a/audio/538551__sjonas88__3-select-cancel.mp3 b/audio/538551__sjonas88__3-select-cancel.mp3 new file mode 100644 index 0000000..e55e1fc Binary files /dev/null and b/audio/538551__sjonas88__3-select-cancel.mp3 differ diff --git a/audio/538551__sjonas88__3-select-chime.mp3 b/audio/538551__sjonas88__3-select-chime.mp3 new file mode 100644 index 0000000..1f8f6cc Binary files /dev/null and b/audio/538551__sjonas88__3-select-chime.mp3 differ diff --git a/audio/538551__sjonas88__3-select-ok.mp3 b/audio/538551__sjonas88__3-select-ok.mp3 new file mode 100644 index 0000000..2052197 Binary files /dev/null and b/audio/538551__sjonas88__3-select-ok.mp3 differ diff --git a/audio/687905__tehclaw__ambient_piano__bpm62.mp3 b/audio/687905__tehclaw__ambient_piano__bpm62.mp3 new file mode 100644 index 0000000..71e766f Binary files /dev/null and b/audio/687905__tehclaw__ambient_piano__bpm62.mp3 differ diff --git a/controllers/bg-audio-page.js b/controllers/bg-audio-page.js index aa41691..8152be8 100644 --- a/controllers/bg-audio-page.js +++ b/controllers/bg-audio-page.js @@ -85,4 +85,19 @@ export default class BgAudioManager { }) } } + + /** + * Play a non-looping sound (if not muted) + * @param {Element | string} element element to handle events for. + */ + playOnce (element) { + if (typeof element === 'string') + element = document.querySelector(element) + + // make noise + if (!this.muted && element instanceof HTMLAudioElement) { + element.currentTime = 0 + element.play() + } + } } diff --git a/controllers/home-console.js b/controllers/home-console.js index 85aca9b..88154de 100644 --- a/controllers/home-console.js +++ b/controllers/home-console.js @@ -41,7 +41,38 @@ export default class HomeConsolePageController { */ rowLastFocus = new Map() + /** + * Audio that plays when an item is selected (focused) + * @type {HTMLAudioElement} + */ + selectAudio + + /** + * Audio that plays when an item is clicked (or equivalent) + * @type {HTMLAudioElement} + */ + okAudio + + /** + * Audio that plays when cancel button is pushed + * @type {HTMLAudioElement} + */ + cancelAudio + + /** + * Audio that plays when menu button is pushed + * @type {HTMLAudioElement} + */ + chimeAudio + constructor () { + // Cache audio references + this.selectAudio = document.querySelector('audio#select-audio') + this.cancelAudio = document.querySelector('audio#cancel-audio') + this.okAudio = document.querySelector('audio#ok-audio') + this.chimeAudio = document.querySelector('audio#chime-audio') + + // Get system info const browserNameEls = document.getElementsByClassName('browser-name') for (const el of browserNameEls) el.textContent = DetectedBrowser @@ -61,9 +92,13 @@ export default class HomeConsolePageController { for (let j = 0; j < els.length; j++) { els[j].addEventListener('focus', () => this.focusChanged(i, j)) + if (els[j].getAttribute('narrate') === 'select') { + els[j].addEventListener('click', () => this.narrate(els[j].textContent)) + } } } + // Wire up events window.addEventListener('keydown', (e) => { if (e.key.startsWith('Arrow')) { this.navigate(e.key.replace('Arrow', '').toLowerCase()) @@ -95,6 +130,7 @@ export default class HomeConsolePageController { // document.body.classList.add('backgrounded') }, { passive: true, capture: false }) + // Wire up gamepad events this.gameInput .onReinitialize(() => { // TODO show player symbols @@ -181,7 +217,9 @@ export default class HomeConsolePageController { this.currentFocus.column = column this.rowLastFocus.set(row, column) - // TODO: make noise + + // make noise + this.audioManager.playOnce(this.selectAudio) const el = this.focusableElements[row][column] if (!el) @@ -253,6 +291,10 @@ export default class HomeConsolePageController { if (!document.hasFocus()) return + if (!document.body.classList.contains('paused')) + this.audioManager.playOnce(this.chimeAudio) + else + this.audioManager.playOnce(this.cancelAudio) document.body.classList.toggle('paused') } @@ -268,7 +310,8 @@ export default class HomeConsolePageController { document.body.classList.remove('paused') - // TODO: make noise + // make noise + this.audioManager.playOnce(this.okAudio) const currentEl = this.focusableElements[this.currentFocus.row][this.currentFocus.column] if (currentEl && 'click' in currentEl) { @@ -287,9 +330,16 @@ export default class HomeConsolePageController { document.body.classList.remove('paused') - // TODO: make noise + // make noise + this.audioManager.playOnce(this.cancelAudio) + console.debug('cancel/exit') } + + narrate (text) { + speechSynthesis.cancel() + speechSynthesis.speak(new SpeechSynthesisUtterance(text)) + } } globalThis.App ??= { Page: undefined } diff --git a/home-console.html b/home-console.html index ddca2dc..855aac9 100644 --- a/home-console.html +++ b/home-console.html @@ -136,12 +136,12 @@ color: inherit; padding-left: 1ex; padding-right: 1ex; - - transition: background-color 300ms, color 300ms; + transition: text-shadow 300ms, + color 300ms, + background-size 300ms; &:focus { background-color: rgba(207, 180, 146, 0.25); - color: black; } } } @@ -149,6 +149,13 @@ a { text-decoration: none; color: inherit; + text-shadow: 0 0 4px black; + transition: text-shadow 300ms, + color 300ms, + background-size 300ms; + &:focus { + text-shadow: 0 4px 6px black; + } } @@ -239,6 +246,15 @@ bottom: 1em; left: 1em; right: 1em; + + background-position: 75% center; + background-size: 120%; + background-repeat: no-repeat; + filter: grayscale(0.5); + + &:focus { + background-size: 150%; + } } } } @@ -274,6 +290,15 @@ bottom: 1em; left: 1em; right: 1em; + + background-position: center 75%; + background-size: 125%; + background-repeat: no-repeat; + filter: grayscale(0.5); + + &:focus { + background-size: 150%; + } } } } @@ -290,27 +315,27 @@