add WebToys and BPS
This commit is contained in:
parent
292f6ee3d0
commit
f2ed98bc5d
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iew-site-builder",
|
||||
"version": "0.10.0",
|
||||
"name": "iew-site",
|
||||
"version": "0.11.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {},
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
|
|
@ -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's Web Stuff</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default "/webtoys/bps";
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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 */
|
||||
|
|
@ -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).
|
||||
- [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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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.
|
||||
Loading…
Reference in New Issue