wip

2024-10-16 11:41:39 +02:00
commit 866e2aaa28
30 changed files with 334 additions and 0 deletions
@@ -0,0 +1 @@
+.idea
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Startle Machine</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script type="text/javascript" src="main.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- card related -->
+    <meta property="og:title" content="Startle Machine">
+    <meta property="og:description" content="Generates silence occasionally broken up by random sound effects">
+    <meta property="org:url" content="https://prank.klemek.fr">
+    <!--
+    <meta property="og:image" content="https://.../preview_640x320.jpg">
+    -->
+</head>
+<body>
+    <main id="app" style="display:none">
+        <h1>Startle Machine</h1>
+        <br>
+        <button @click="start">Start</button>
+        <button @click="selectAll">Select all</button>
+        <button @click="deselectAll">Deselect all</button>
+        <br>
+        <div style="display:flex;flex-flow: row wrap;">
+            <div style="width: 33%; padding: .5em;" v-for="sound in sounds">
+                <input v-bind:id="`active-${sound.id}`" type="checkbox" v-model="sound.active">&nbsp;
+                <label v-bind:for="`active-${sound.id}`">{{ sound.name }}</label>
+            </div>
+        </div>
+        <br>
+        <small><a href="https://github.com/klemek" target="_blank">@klemek</a> - <a href="https://github.com/klemek/startle-machine" target="_blank">Github Repository</a> - 2024</small>
+    </main>
+</body>
+</html>
@@ -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");
+};
@@ -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;
+  }
+}