eric/itsericwoodward-site-v2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add WebToys and BPS

Browse Source
This commit is contained in:
Eric Woodward 2024-02-10 19:21:54 -05:00
parent 292f6ee3d0
commit f2ed98bc5d
36 changed files with 500 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "iew-site-builder", "name": "iew-site",
"version": "0.10.0", "version": "0.11.0",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": {}, "scripts": {},

BIN
src/assets/_root/webtoys/bps/bps.tar.gz Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/bps.zip Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/images/aliens_17_days.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

BIN
src/assets/_root/webtoys/bps/images/aliens_current_affairs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
src/assets/_root/webtoys/bps/images/aliens_express_elevator.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
src/assets/_root/webtoys/bps/images/aliens_game_over.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/assets/_root/webtoys/bps/images/random.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
src/assets/_root/webtoys/bps/images/true_lies_navel_lint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
src/assets/_root/webtoys/bps/images/true_lies_pathetic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
src/assets/_root/webtoys/bps/images/weird_science_booze.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/assets/_root/webtoys/bps/images/weird_science_dead_meat.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
src/assets/_root/webtoys/bps/images/weird_science_he_pukes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
src/assets/_root/webtoys/bps/images/weird_science_sandwich.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
src/assets/_root/webtoys/bps/images/weird_science_stewwed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
src/assets/_root/webtoys/bps/images/weird_science_turd_brain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

150
src/assets/_root/webtoys/bps/index.html Normal file
View File

@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<!--
/****************************************************************************
* BPS (Bill Paxton Soundboard)
*
* Copyright 2024 Eric Woodward
* Source released under CC0 Public Domain License v1.0
* https://www.itsericwoodward.com/licenses/cc0/
* http://creativecommons.org/publicdomain/zero/1.0/
****************************************************************************/
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>BPS (Bill Paxton Soundboard)</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<div id="output"></div>
<!--
`cat main.js | openssl dgst -sha256 -binary | openssl base64 -A`, then repeat for 384 and 512
-->
<script crossorigin="anonymous" integrity="sha256-YvGi/WY2dKJwaU3cCMLSkiJCnE2hFCiiUdRwqWTGvEE=
sha384-mtemuzaWEW/0HsyxJyDCaqMquUejVMwzs5VSj5KOr0jrg0+bG/aV2JGsvn/5AbRP
sha512-z5iEy8ijJzKBzzzBZSdt1DFqwsHLRAV2fvGk4N7P0VikiXtRla258zX7YiSvSIwYskOnnPySzFLaDAdXWUkgNQ=="
src="scripts/main.js" type="module" ></script>
<noscript>
<p>Sorry, but the Bill Paxton Soundboard requires JavaScript to work.</p>
<p>Please enable it or try using a different browser.</p>
</noscript>
<p class="center">
<a class="downloadButton" href="bps.zip">Download ZIP</a>
<a class="downloadButton" href="bps.tar.gz">Download TAR</a>
</p>
<hr />
<h2>What is This?</h2>
<p>
This is the BPS (Bill Paxton Soundboard), my entry into the UI Developers Guild Coding Challenge for
February 2024 at the company I work for.
</p>
<p>
If you want to know a bit more about how (and why) it was made, be sure to check
out <a href="/journal/2024/02-10-webtoys-bps">the blog post I wrote about it</a> when it was released
on 2024-02-10.
</p>
<h3>The Rules</h3>
<p>
This particular challenge had 3 simple rules (copied verbatim below):
</p>
<ol>
<li><em>Play some kind of music / sound</em></li>
<li><em>Be viewable</em></li>
<li><em>Don't work over 4hrs!!!!</em></li>
</ol>
<p>
The BPS satisfies all 3 of the rules: it's an HTML5 / CSS / JS application that creates
a series of virtual <code>audio</code> tags, and then loads a WAV or MP3 into each one before
inserting them into the document. It then renders a series of clickable image-buttons
(each one being an <code>img</code> tag, surrounded by a <code>figure</code> tag, and
augmented by the text of a <code>figcaption</code> tag) and attaches a <code>play()</code>
function to the click handlers for those <code>figure</code>s. Plus, I wrote it all in under 4 hours:
</p>
<ul>
<li>
One hour thinking through the concept and writing the rough draft
<a href="scripts/player.js"><code>player.js</code></a> and
<a href="scripts/main.js"><code>main.js</code></a> modules;
</li>
<li>
One hour to turn draft into an MVP, addressing
<a href="styles/styles.css">layout</a> and audio issues;
</li>
<li>
One hour to add images and expand the audio selection; and
</li>
<li>
One final hour to add mobile support and some light documentation.
</li>
</ul>
<h3>How to Install Locally</h3>
<ol>
<li>
Download either the <a href="bps.zip">ZIP'd</a>
or <a href="bps.tar.gz">TAR-balled</a> version.
</li>
<li>
Decompress it:
<ul>
<li>For the ZIP: <code>unzip bps.zip</code></li>
<li>For the TAR-ball: <code>tar -xvzf bps.tar.gz</code></li>
</ul>
</li>
<li>
Change to the new directory: <code>cd bps</code>
</li>
<li>
Start an HTTP server: <code>npx http-server</code>
</li>
<li>
Point your web browser to
<a href="http://127.0.0.1:8080/">http://127.0.0.1:8080/</a>.
</li>
</ol>
<h3>Copyright</h3>
<ul>
<li><em>True Lies</em> is copyright 1994 20th Century Fox.</li>
<li><em>Aliens</em> is copyright 1986 Twentieth Century Fox.</li>
<li><em>Weird Science</em> is copyright 1985 Universal Pictures (I think).</li>
</ul>
<p>
The images and sound clips used for the Bill Paxton Soundboard are copyright their
respective owners, and used under the
<a href="https://fairuse.stanford.edu/overview/fair-use/">fair use provision</a>
of the <a href="https://constitution.congress.gov/constitution/">Constitution of the United
States of America</a>.
</p>
<p>
All other content on this page (including scripts and text content) is released under a
<a href="/licenses/cc0/">Creative Commons CC0 1.0 Universal</a>
license.
</p>
<p>Share and enjoy!</p>
<p class="center">
<a href="/web.html">More of Eric&#39;s Web Stuff</a>
</p>
</body>
</html>

138
src/assets/_root/webtoys/bps/scripts/main.js Normal file
View File

@ -0,0 +1,138 @@
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
/****************************************************************************
* BPS (Bill Paxton Soundboard)
*
* Copyright 2024 Eric Woodward
* Source released under CC0 Public Domain License v1.0
* https://www.itsericwoodward.com/licenses/cc0/
* http://creativecommons.org/publicdomain/zero/1.0/
****************************************************************************/
import { load, play } from "./player.js";
import rootdir from "./rootdir.js";
export default (() => {
// adapted from: https://cheatcode.co/tutorials/how-to-build-a-soundboard-with-javascript
const sounds = [
{
name: "true_lies_navel_lint",
fmt: "wav",
image: "aliens_17_days.png",
text: "Navel Lint",
},
{
name: "true_lies_pathetic",
fmt: "mp3",
image: "aliens_17_days.png",
text: "It's Pathetic!",
},
{
name: "aliens_game_over",
fmt: "wav",
image: "aliens_17_days.png",
text: "Game Over!",
},
{
name: "aliens_current_affairs",
fmt: "wav",
image: "aliens_17_days.png",
text: "Current Affairs",
},
{
name: "aliens_17_days",
fmt: "wav",
image: "aliens_17_days.png",
text: "17 Days?",
},
{
name: "aliens_express_elevator",
fmt: "wav",
image: "aliens_17_days.png",
text: "Express Elevator",
},
{
name: "weird_science_booze",
fmt: "mp3",
image: "aliens_17_days.png",
text: "Boozehounds Return",
},
{
name: "weird_science_dead_meat",
fmt: "mp3",
image: "aliens_17_days.png",
text: "Dead Meat",
},
{
name: "weird_science_sandwich",
fmt: "mp3",
image: "aliens_17_days.png",
text: "Pork Sandwich",
},
{
name: "weird_science_stewwed",
fmt: "mp3",
image: "aliens_17_days.png",
text: "You're Stewwed",
},
{
name: "weird_science_turd_brain",
fmt: "mp3",
image: "aliens_17_days.png",
text: "Turd Brain",
},
];
sounds.forEach(({ name, fmt }) => {
load(name, `${rootdir}/sounds/${name}.${fmt}`);
});
// adapted from https://stackoverflow.com/questions/12813573/position-icons-into-circle
let m = sounds.length; /* how many are ON the circle */
let tan = Math.tan(Math.PI / m); /* tangent of half the base angle */
const build = () => {
const figureButtons = sounds.map(({ name, text }, idx) => {
const caption = document.createElement("figcaption"),
figure = document.createElement("figure"),
img = document.createElement("img");
caption.textContent = text;
img.alt = text;
img.src = `${rootdir}/images/${name}.png`;
figure.className = "figureButton";
figure.onclick = () => play(name);
figure.style = `--i: ${idx}`;
figure.append(...[img, caption]);
return figure;
});
const randomFigure = document.createElement("figure"),
randomCaption = document.createElement("figcaption"),
randomImg = document.createElement("img");
randomCaption.textContent = "Random";
randomImg.alt = "Random";
randomImg.src = `${rootdir}/images/random.png`;
randomFigure.className = "figureButton";
randomFigure.onclick = () =>
play(sounds[~~(sounds.length * Math.random())].name);
randomFigure.append(...[randomImg, randomCaption]);
const div = document.createElement("div");
div.className = "circleWrapper";
div.style = `--m: ${m}; --tan: ${+tan.toFixed(2)}`;
div.append(...[randomFigure, ...figureButtons]);
document.getElementById("output").replaceWith(div);
};
document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
build();
}, 1);
});
return { play, build };
})();
// @license-end

37
src/assets/_root/webtoys/bps/scripts/player.js Normal file
View File

@ -0,0 +1,37 @@
// @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0
/****************************************************************************
* BPS (Bill Paxton Soundboard)
*
* Copyright 2024 Eric Woodward
* Source released under CC0 Public Domain License v1.0
* https://www.itsericwoodward.com/licenses/cc0/
* http://creativecommons.org/publicdomain/zero/1.0/
****************************************************************************/
// adapted from https://cheatcode.co/tutorials/how-to-build-a-soundboard-with-javascript
let sounds = [];
const injectPlayerIntoPage = (name, path) => {
const player = document.createElement("audio");
player.id = name;
player.src = path;
player.volume = 0.5;
player.type = "audio/mpeg";
document.body.appendChild(player);
},
load = (name, path) => {
sounds = [...sounds, { name, path }];
injectPlayerIntoPage(name, path);
},
play = (name) => {
const player = document.getElementById(name);
if (player) {
player.pause();
player.currentTime = 0;
player.play();
}
};
export { load, play };
// @license-end

1
src/assets/_root/webtoys/bps/scripts/rootdir.js Normal file
View File

@ -0,0 +1 @@
export default "/webtoys/bps";

BIN
src/assets/_root/webtoys/bps/sounds/aliens_17_days.wav Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/aliens_current_affairs.wav Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/aliens_express_elevator.wav Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/aliens_game_over.wav Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/true_lies_navel_lint.wav Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/true_lies_pathetic.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/weird_science_booze.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/weird_science_dead_meat.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/weird_science_he_pukes.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/weird_science_sandwich.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/weird_science_stewwed.mp3 Normal file
View File

Binary file not shown.

BIN
src/assets/_root/webtoys/bps/sounds/weird_science_turd_brain.mp3 Normal file
View File

Binary file not shown.

111
src/assets/_root/webtoys/bps/styles/styles.css Normal file
View File

@ -0,0 +1,111 @@
/* @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt CC0-1.0 */
/****************************************************************************
* BPS (Bill Paxton Soundboard)
*
* Copyright 2024 Eric Woodward
* Source released under CC0 Public Domain License v1.0
* https://www.itsericwoodward.com/licenses/cc0/
* http://creativecommons.org/publicdomain/zero/1.0/
****************************************************************************/
html {
color: #DDE6ED;
background-color: #161f2b;
font-size: 20px;
margin: .5rem;
}
a {
color: #abc1d3;
}
a:visited {
color: #799cb9;
}
code {
background-color: #444b55;
}
p {
text-align: justify;
}
.center { text-align: center; }
.circleWrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.downloadButton {
border: 1px dashed;
border-radius: .5rem;
display: inline-block;
font-size: .75rem;
margin: 1rem;
max-width: 8rem;
padding: 1rem;
text-align: center;
text-decoration: none;
}
.figureButton {
cursor: pointer;
margin: 0.5rem;
max-width: 5.5rem;
}
.figureButton:hover {
filter: brightness(1.5);
}
.figureButton figcaption {
text-align: center;
}
.figureButton img { max-width: 100% }
/****************************************************************************
* Media Queries
****************************************************************************/
@media all and (min-width: 950px) {
/* circular layout derived from https://stackoverflow.com/a/12817454 */
.circleWrapper {
--d: 6.5em; /* image size */
--rel: .75; /* how much extra space we want between images, 1 = one image size */
--r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
--s: calc(2*var(--r) + var(--d)); /* container size */
height: var(--s);
margin: 1rem auto;
position: relative;
width: var(--s);
}
.figureButton {
--az: calc(var(--i)*1turn/var(--m));
height: var(--d);
left: 50%;
margin: calc(-.5*var(--d));
position: absolute;
top: 50%;
transform:
rotate(var(--az))
translate(var(--r))
rotate(calc(-1*var(--az)));
width: var(--d);
}
.downloadButton {
font-size: 1rem;
margin: 4rem 1rem 1rem;
}
}
/* @license-end */

1
src/pages/web.md
View File

@ -15,6 +15,7 @@ The web is, IMHO, the most revolutionary invention in information sharing since
- [LinkLists](/linklists) - Lists of links (natch) to various web sites, resources, and/or [blogs](/linklists/blogroll.html), typically organized around a particular subject. Like bookmarking, but not. Updated (occasionally). - [LinkLists](/linklists) - Lists of links (natch) to various web sites, resources, and/or [blogs](/linklists/blogroll.html), typically organized around a particular subject. Like bookmarking, but not. Updated (occasionally).
- [Licenses](/licenses) - Permanent copies of the licenses that I use [here](https://git.itsericwoodward.com/explore/repos) and [there](https://www.planarvagabond.com/). - [Licenses](/licenses) - Permanent copies of the licenses that I use [here](https://git.itsericwoodward.com/explore/repos) and [there](https://www.planarvagabond.com/).
- [WebToys](/webtoys) **NEW** - A small collection of useless, interactive fun for your web browser.
### Elsewhere ### Elsewhere

16
src/pages/webtoys/index.md Normal file
View File

@ -0,0 +1,16 @@
---
title: WebToys
description: Some useless, interactive fun for your web browser.
date_pub: 2024-02-09T23:58:51.000-04:00
section: web
content_type: feature
short_code: mwt
---
I occasionally do code challenges and other fun web things, and thought I should start collecting them here.
<!--
Most of them can best be described as useless, interactive fun for your web browser.
-->
- [BPS (Bill Paxton Soundboard)](bps/) - An old-idea-made-new as part of a time-limited code challenge.

44
src/sitePosts/journal/2024/02-10-webtoys-bps.md Normal file
View File

@ -0,0 +1,44 @@
---
title: My first WebToy - the BPS (Bill Paxton Soundboard)
content_type: journal
date_pub: 2024-02-10T17:19:07.000-04:00
description: I've written a small HTML5 Soundboard themed around the late actor, Bill Paxton.
tags: web fun js
---
Ever since the early days of JavaScript (remember `document.layers`?), I've been interested in building web applications, from the complex to the trivial. In that time, I've built more signature generators, magic 8-balls, and die rollers than I care to mention. But, apart from the tools at [Planar Vagabond](https://www.planarvagabond.com/tools/index.html), most of these #WebToys are lost to time (or sitting on some 3/4 full hard drive waiting to be rediscovered).
Until now!
I've decided to start archiving them here, in my lightly-tended [digital garden](https://indieweb.org/digital_garden), under the heading of [WebToys](/webtoys/) (a moniker chosen based on their dubious utility). And the first #WebToy is a project I've had in mind for over 25 years, but that I've just finally put the 4-ish hours in to complete: .
### [The BPS (Bill Paxton Soundboard)](/webtoys/bps/)
Back when I was in college (circa 1997), a friend of mine and I would often discuss ideas for "fun" (and typically useless) computer programs. One night, one of us suggested a virtual See-and-Say themed around quotes from the great character actor, the late [Bill Paxton[(https://en.wikipedia.org/wiki/Bill_Paxton). Of course, writing such a program wasn't worth the effort (especially circa 1997), so we just kind of chuckled and forgot about it.
Fast-forward to 2024: the company I work for has a "UI Developers Guild" (for those interested in bettering their development skills), and they recently started running coding challenges, both to drive engagement with the guild and to give the coders a chance to do something non-work related. This particular challenge had 3 simple rules (copied verbatim below):
1. _Play some kind of music / sound_
2. _Be viewable_
3. _Don't work over 4hrs!!!!_
After briefly contemplating what to offer as my entry for the challenge, the idea from college bubbled back to the front of my brain, and I thought, "this is my chance!"
The rest, as they say, is history.
### Work Breakdown
- One hour thinking through the concept and writing the rough draft [`player.js`](/webtoys/bps/scripts/player.js) and [`main.js`](/webtoys/bps/scripts/main.js) modules;
- One hour to turn draft into MVP, addressing [layout](/webtoys/bps/styles/styles.css) and audio issues;
- One hour to add images and expand the audio selection; and
- One final hour[^1] to add mobile support and some light documentation.
Now, this is obviously not the first Bill Paxton soundboard on the #interwebs, nor is it the most comprehensive. But, unlike the ones in the App or Play stores, mine doesn't require any scary permissions, and won't track you relentlessly. And, unlike other web-based soundboards, mine has no advertising, and... won't track you relentlessly. So maybe mine _is_ better, at least in some ways. :D
Plus, releasing it here doubles as my entry into the aforementioned coding challenge, so win-win!
With a few more hours work, I'd probably turn it into a PWA and add full offline support (caching the sounds and images in localstorage), or maybe disable the buttons until the previous sound is done, but... that's for another day.
I suspect I'll wind up creating (or finding) other similar small #WebToys in the future, and when I do, I'll add them [here](/webtoys/). In the meantime, I'm open to suggestions: what other tiny, useless programs does the world need more of?
[^1]: Of course, it took an additional couple of hours to move it to my website and actually get it out on the web, but those steps were technically outside the scope of the original project, which only required a codepen, so I don't count that.