Startle Machine

commit 866e2aaa2897f2fe7ec518b517649ba694d49e00 Author: Klemek Date: Wed Oct 16 11:41:39 2024 +0200 wip diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f526b58 --- /dev/null +++ b/index.html @@ -0,0 +1,36 @@ + + + + + Startle Machine + + + + + + + + + + + + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..08cb1c6 --- /dev/null +++ b/main.js @@ -0,0 +1,126 @@ +/* exported app */ +const SOUNDS = [ + { id: 'baba_booey', name: 'Baba Booey' }, + { id: 'bonk', name: 'Doge Bonk' }, + { id: 'boo_womp', name: 'Boo-womp (Spongebob)' }, + { id: 'bruh', name: 'Bruh' }, + { id: 'cash_register', name: 'Cash Register (Kaching)' }, + { id: 'censor_beep', name: 'Censor Beep' }, + { id: 'confetti', name: 'Confetti' }, + { id: 'fart_reverb', name: 'Fart with reverb' }, + { id: 'fart_wet', name: 'Wet Fart' }, + { id: 'gnome', name: 'Gnome' }, + { id: 'huh', name: 'Huh ?' }, + { id: 'mario_coin', name: 'Mario Coin' }, + { id: 'mario_jump', name: 'Mario Jump' }, + { id: 'metal_gear', name: 'Metal Gear Solid' }, + { id: 'microsoft_error', name: 'Windows XP Error' }, + { id: 'minecraft_cave', name: 'Minecraft Cave Ambiance' }, + { id: 'minecraft_door', name: 'Minecraft Door' }, + { id: 'minecraft_eating', name: 'Minecraft Eating' }, + { id: 'minecraft_glass', name: 'Minecraft Glass Break' }, + { id: 'minecraft_hurt', name: 'Minecraft Hurt' }, + { id: 'nope', name: 'Nope' }, + { id: 'quack', name: 'Quack' }, + { id: 'roblox_death', name: 'Roblox Death' }, + { id: 'wilhelm_scream', name: 'The Wilhelm Scream' }, + { id: 'wow', name: 'WOW' }, + { id: 'wrong_buzzer', name: 'Wrong Buzzer' }, +]; + +const random = { + element: function (array) { + if (array.length == 0) { + return null; + } + return array[Math.floor(Math.random() * array.length)]; + }, + int: function (min, max) { + return Math.floor(Math.random() * (max - min)) + min; + }, + float: function (min, max) { + return (Math.random() * (max - min)) + min; + } +}; + +let app = { + data() { + return { + sounds: [], + }; + }, + computed: { + currentYear() { + return new Date().getFullYear(); + }, + }, + methods: { + showApp() { + document.getElementById("app").setAttribute("style", ""); + }, + onBlur() { + // TODO document.getElementById("app").setAttribute("style", "display:none"); + // TODO + }, + onFocus() { + // TODO + }, + loadSounds() { + this.sounds = SOUNDS.map(sound => { + sound.audio = new Audio(`./sounds/${sound.id}.wav`); + sound.audio.preservesPitch = false; + sound.active = true; + return sound; + }); + }, + start() { + const audioCtx = new AudioContext(); + this.sounds.forEach(sound => { + const source = audioCtx.createMediaElementSource(sound.audio); + source.connect(audioCtx.destination); + }); + this.trigger(); + }, + trigger() { + const time = random.int(30, 300); + console.log(`Next in ${time} seconds`); + setTimeout(this.playRandomSound, time * 1000); + }, + selectAll() { + this.sounds.forEach(sound => { + sound.active = true; + }); + }, + deselectAll() { + this.sounds.forEach(sound => { + sound.active = false; + }); + }, + playRandomSound() { + const sound = random.element(this.sounds.filter(sound => sound.active)); + if (sound !== null) { + console.log(`Playing ${sound.id}`); + sound.audio.playbackRate = random.float(0.8, 1.2); + sound.audio.play(); + } + this.trigger(); + }, + }, + mounted: function () { + const self = this; + setTimeout(this.showApp); + this.loadSounds(); + document.addEventListener("visibilitychange", function () { + if (document.hidden) { + self.onBlur(); + } else { + self.onFocus(); + } + }); + }, +}; + +window.onload = () => { + app = Vue.createApp(app); + app.mount("#app"); +}; diff --git a/sounds/baba_booey.wav b/sounds/baba_booey.wav new file mode 100644 index 0000000..d935698 Binary files /dev/null and b/sounds/baba_booey.wav differ diff --git a/sounds/bonk.wav b/sounds/bonk.wav new file mode 100644 index 0000000..d9eab46 Binary files /dev/null and b/sounds/bonk.wav differ diff --git a/sounds/boo_womp.wav b/sounds/boo_womp.wav new file mode 100644 index 0000000..93f18e6 Binary files /dev/null and b/sounds/boo_womp.wav differ diff --git a/sounds/bruh.wav b/sounds/bruh.wav new file mode 100644 index 0000000..8fdd251 Binary files /dev/null and b/sounds/bruh.wav differ diff --git a/sounds/cash_register.wav b/sounds/cash_register.wav new file mode 100644 index 0000000..e11bb41 Binary files /dev/null and b/sounds/cash_register.wav differ diff --git a/sounds/censor_beep.wav b/sounds/censor_beep.wav new file mode 100644 index 0000000..1fe4dde Binary files /dev/null and b/sounds/censor_beep.wav differ diff --git a/sounds/confetti.wav b/sounds/confetti.wav new file mode 100644 index 0000000..39debfb Binary files /dev/null and b/sounds/confetti.wav differ diff --git a/sounds/fart_reverb.wav b/sounds/fart_reverb.wav new file mode 100644 index 0000000..bcd6c2c Binary files /dev/null and b/sounds/fart_reverb.wav differ diff --git a/sounds/fart_wet.wav b/sounds/fart_wet.wav new file mode 100644 index 0000000..a58adb8 Binary files /dev/null and b/sounds/fart_wet.wav differ diff --git a/sounds/gnome.wav b/sounds/gnome.wav new file mode 100644 index 0000000..5f61cb5 Binary files /dev/null and b/sounds/gnome.wav differ diff --git a/sounds/huh.wav b/sounds/huh.wav new file mode 100644 index 0000000..ba5d7d1 Binary files /dev/null and b/sounds/huh.wav differ diff --git a/sounds/mario_coin.wav b/sounds/mario_coin.wav new file mode 100644 index 0000000..a728a05 Binary files /dev/null and b/sounds/mario_coin.wav differ diff --git a/sounds/mario_jump.wav b/sounds/mario_jump.wav new file mode 100644 index 0000000..e273815 Binary files /dev/null and b/sounds/mario_jump.wav differ diff --git a/sounds/metal_gear.wav b/sounds/metal_gear.wav new file mode 100644 index 0000000..c03cbc1 Binary files /dev/null and b/sounds/metal_gear.wav differ diff --git a/sounds/microsoft_error.wav b/sounds/microsoft_error.wav new file mode 100644 index 0000000..3e2bb6c Binary files /dev/null and b/sounds/microsoft_error.wav differ diff --git a/sounds/minecraft_cave.wav b/sounds/minecraft_cave.wav new file mode 100644 index 0000000..ec75e74 Binary files /dev/null and b/sounds/minecraft_cave.wav differ diff --git a/sounds/minecraft_door.wav b/sounds/minecraft_door.wav new file mode 100644 index 0000000..88b6363 Binary files /dev/null and b/sounds/minecraft_door.wav differ diff --git a/sounds/minecraft_eating.wav b/sounds/minecraft_eating.wav new file mode 100644 index 0000000..bab5506 Binary files /dev/null and b/sounds/minecraft_eating.wav differ diff --git a/sounds/minecraft_glass.wav b/sounds/minecraft_glass.wav new file mode 100644 index 0000000..914e7f7 Binary files /dev/null and b/sounds/minecraft_glass.wav differ diff --git a/sounds/minecraft_hurt.wav b/sounds/minecraft_hurt.wav new file mode 100644 index 0000000..6241192 Binary files /dev/null and b/sounds/minecraft_hurt.wav differ diff --git a/sounds/nope.wav b/sounds/nope.wav new file mode 100644 index 0000000..4612d29 Binary files /dev/null and b/sounds/nope.wav differ diff --git a/sounds/quack.wav b/sounds/quack.wav new file mode 100644 index 0000000..2a76ca4 Binary files /dev/null and b/sounds/quack.wav differ diff --git a/sounds/roblox_death.wav b/sounds/roblox_death.wav new file mode 100644 index 0000000..e8fa0de Binary files /dev/null and b/sounds/roblox_death.wav differ diff --git a/sounds/wilhelm_scream.wav b/sounds/wilhelm_scream.wav new file mode 100644 index 0000000..355dec6 Binary files /dev/null and b/sounds/wilhelm_scream.wav differ diff --git a/sounds/wow.wav b/sounds/wow.wav new file mode 100644 index 0000000..0c6c493 Binary files /dev/null and b/sounds/wow.wav differ diff --git a/sounds/wrong_buzzer.wav b/sounds/wrong_buzzer.wav new file mode 100644 index 0000000..dee4485 Binary files /dev/null and b/sounds/wrong_buzzer.wav differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..f9c1b60 --- /dev/null +++ b/style.css @@ -0,0 +1,171 @@ +/* +================================================= +https://www.joshwcomeau.com/css/custom-css-reset/ +================================================= +*/ + +/* + 1. Use a more-intuitive box-sizing model. +*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +/* + 2. Remove default margin + */ +* { + margin: 0; +} +/* + 3. Allow percentage-based heights in the application + */ +html, +body { + height: 100%; +} +/* + Typographic tweaks! + 4. Add accessible line-height + 5. Improve text rendering + */ +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} +/* + 6. Improve media defaults + */ +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} +/* + 7. Remove built-in form typography styles + */ +input, +button, +textarea, +select { + font: inherit; +} +/* + 8. Avoid text overflows + */ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} +/* + 9. Create a root stacking context + */ +#root, +#__next { + isolation: isolate; +} + +/* +================================================= +CUSTOM STYLE +================================================= +*/ + +@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); + +:root { + /* https://materialui.co/colors/ */ + --hue-primary: 65.52; + --sat-primary: 20%; + --background: hsl(var(--hue-primary), var(--sat-primary), 96.08%); + --background-primary: hsl(var(--hue-primary), var(--sat-primary), 93.33%); + --background-secondary: hsl(var(--hue-primary), var(--sat-primary), 90%); + --color-primary: hsl(var(--hue-primary), var(--sat-primary), 50%); + --text-primary: hsl(var(--hue-primary), var(--sat-primary), 25%); + --text-secondary: hsl(var(--hue-primary), var(--sat-primary), 30%); +} + +/* +================================================= +https://blog.koley.in/2019/339-bytes-of-responsive-css +https://www.swyx.io/css-100-bytes +https://gist.github.com/JoeyBurzynski/617fb6201335779f8424ad9528b72c41 +================================================= +*/ + +html, +body { + padding: 0; + max-width: 100%; + color: var(--text-primary); + font-family: "Roboto", Verdana, serif; +} + +body { + background-color: var(--background); +} + +main { + padding: 1.5rem; + margin: auto; + background-color: var(--background-primary); + min-height: 100%; +} + +table { + border-collapse: collapse; + width: 100%; + font-size: 0.9em; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 1em 0 0.5em; +} + +p, +ul, +ol { + margin-bottom: 2em; + color: var(--text-secondary); +} + +textarea, +input, +select, +.mono { + font-family: "Roboto Mono", monospace; +} + +textarea { + width: 100%; + min-width: 100%; + max-width: 100%; +} + +a { + color: inherit; +} + +@media only screen and (min-width: 768px) { + main { + max-width: 42rem; + } + table { + font-size: inherit; + } +}