Skip to content

Commit

Permalink
added multimedia to console home
Browse files Browse the repository at this point in the history
  • Loading branch information
@lunarcloud
lunarcloud committed Oct 11, 2023
1 parent 1f139b1 commit b92bf86
Show file tree
Hide file tree
Showing 12 changed files with 129 additions and 20 deletions.
Binary file added audio/538551__sjonas88__3-select-3.mp3
View file
Binary file not shown.
Binary file added audio/538551__sjonas88__3-select-cancel.mp3
View file
Binary file not shown.
Binary file added audio/538551__sjonas88__3-select-chime.mp3
View file
Binary file not shown.
Binary file added audio/538551__sjonas88__3-select-ok.mp3
View file
Binary file not shown.
Binary file added audio/687905__tehclaw__ambient_piano__bpm62.mp3
View file
Binary file not shown.
15 changes: 15 additions & 0 deletions controllers/bg-audio-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
}
}
}
56 changes: 53 additions & 3 deletions controllers/home-console.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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())
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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')
}

Expand All @@ -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) {
Expand All @@ -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 }
Expand Down
78 changes: 61 additions & 17 deletions home-console.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,19 +136,26 @@
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;
}
}
}

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;
}
}


Expand Down Expand Up @@ -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%;
}
}
}
}
Expand Down Expand Up @@ -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%;
}
}
}
}
Expand All @@ -290,27 +315,27 @@
<nav>
<ul>
<li>
<a is="fadeout-anchor" hover-style="fire" href="vr-demo.html">
<a is="fadeout-anchor" href="vr-demo.html"
style="background-image: url('img/projects/kmc-vr-lab-me.jpg');">
Virtual Explore
<audio src="audio/518616__taman21__guitar-notes-a.mp3" preload></audio>
</a>
</li>
<li>
<a is="fadeout-anchor" hover-style="charcoal" href="project-list-view.html">
<a is="fadeout-anchor" href="project-list-view.html"
style="background-image: url('img/projects/steampunk-panels-karaoke.jpg');">
Projects
<audio src="audio/518616__taman21__guitar-notes-b.mp3" preload></audio>
</a>
</li>
<li>
<a is="fadeout-anchor" hover-style="busted" href="drag-n-drop.html">
<a is="fadeout-anchor" href="drag-n-drop.html"
style="background-image: url('img/projects/travelling-to-rufflecon.jpg');">
Tarot Cards
<audio src="audio/518616__taman21__guitar-notes-c.mp3" preload></audio>
</a>
</li>
<li>
<a is="fadeout-anchor" hover-style="focus-in" href="celestial-test.html">
<a is="fadeout-anchor" href="celestial-test.html"
style="background-image: url('img/projects/color-below-game.jpg');">
CSS Animations
<audio src="audio/518616__taman21__guitar-notes-d.mp3" preload></audio>
</a>
</li>
</ul>
Expand All @@ -324,18 +349,37 @@ <h1>Sam Sarette's Portfolio</h1>
<button id="unmute-btn" tabindex="1">🔇</button>
</header>
<main>
<p tabindex="2">This page is meant for large screens controlled at a distance by keyboards / remotes and game controllers. Try using one of those with this page.</p>
<p tabindex="2" narrate="select">This page is meant for large screens controlled at a distance by keyboards / remotes and game controllers. Try using one of those with this page.</p>
</main>
<footer>
<ul>
<li><a is="fadeout-anchor" href="home-ala-homestar.html">Flash-Like</a></li>
<li><a is="fadeout-anchor" href="home-lcars.html">Sci-fi</a></li>
<li><a is="fadeout-anchor" href="home-console.html">TV</a></li>
<li><a is="fadeout-anchor" href="home-pro.html">Pro</a></li>
<li><a is="fadeout-anchor" href="home-ala-homestar.html"
style="background-image: url('img/pages/home-flash.webp');">
Flash-Like
</a></li>
<li><a is="fadeout-anchor" href="home-lcars.html"
style="background-image: url('img/pages/home-lcars.webp');">
Sci-fi

</a></li>
<li><a is="fadeout-anchor" href="home-console.html"
style="background-image: url('img/pages/home-console.webp');">
TV

</a></li>
<li><a is="fadeout-anchor" href="home-pro.html"
style="background-image: url('img/pages/home-pro.webp');">
Pro

</a></li>
</ul>
</footer>
</container>
<audio id="bg-audio" src="" loop="loop" autoplay></audio>
<audio id="chime-audio" src="audio/538551__sjonas88__3-select-chime.mp3"></audio>
<audio id="cancel-audio" src="audio/538551__sjonas88__3-select-cancel.mp3"></audio>
<audio id="ok-audio" src="audio/538551__sjonas88__3-select-ok.mp3"></audio>
<audio id="select-audio" src="audio/538551__sjonas88__3-select-3.mp3"></audio>
<audio id="bg-audio" src="audio/687905__tehclaw__ambient_piano__bpm62.mp3" loop="loop" autoplay></audio>
</body>
<script type="module" src="controllers/home-console.js"></script>

Expand Down
Binary file added img/pages/home-console.webp
View file
Binary file not shown.
Binary file added img/pages/home-flash.webp
View file
Binary file not shown.
Binary file added img/pages/home-lcars.webp
View file
Binary file not shown.
Binary file added img/pages/home-pro.webp
View file
Binary file not shown.

0 comments on commit b92bf86

Please sign in to comment.