139 lines
3.5 KiB
JavaScript
139 lines
3.5 KiB
JavaScript
// @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
|