working poc

2024-10-18 16:48:25 +02:00
parent 3dc6034ae0
commit ece64c6794
7 changed files with 68 additions and 14 deletions
@@ -11,9 +11,6 @@
    <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">
@@ -44,13 +41,26 @@
                <td>{{ volume }}%</td>
            </tr>
            <tr>
-                <td colspan="3">
-                    <button :class="randomPitch ? '' : 'inactive'" @click="randomPitch = !randomPitch">Random pitch: {{ randomPitch ? '✅' : '❌' }}</button>
+                <td><label for="disguise">Disguise as:</label></td>
+                <td colspan="2">
+                    <select v-model="fakeId">
+                        <option v-for="fake, i in fakes" :value="i">{{ fake.name }} ({{ fake.url }})</option>
+                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="3">
-                    <button :class="hidePrank ? '' : 'inactive'" @click="hidePrank = !hidePrank">Blank page on start: {{ hidePrank ? '✅' : '❌' }}</button>
+                    <button title="Change sound pitch on every play" :class="randomPitch ? '' : 'inactive'" @click="randomPitch = !randomPitch">Random pitch: {{ randomPitch ? '✅' : '❌' }}</button>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="3">
+                    <button title="Clear page content on start" :class="hidePrank ? '' : 'inactive'" @click="hidePrank = !hidePrank">Blank page on start: {{ hidePrank ? '✅' : '❌' }}</button>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="3">
+                    <button title="Redirect to another page when prank is found" :class="redirect ? '' : 'inactive'" @click="redirect = !redirect">Redirect when found: {{ redirect ? '✅' : '❌' }}</button>
                </td>
            </tr>
        </table>
@@ -28,6 +28,23 @@ const SOUNDS = [
  { id: 'wrong_buzzer', name: 'Wrong Buzzer' },
 ];

+const FAKES = [
+  { name: 'Google Search', url: 'https://google.com/' },
+  { name: 'Stack Overflow', url: 'https://stackoverflow.com/' },
+  { name: 'Discord', url: 'https://app.discord.com/', favicon: './favicons/discord.ico' },
+  { name: 'Gmail', url: 'https://mail.google.com/', title: 'Inbox - Gmail', favicon: './favicons/gmail.ico' },
+  { name: 'Google Drive', url: 'https://drive.google.com/' },
+  { name: 'Github', url: 'https://github.com/' },
+  { name: 'Reddit', url: 'https://reddit.com/', title: 'Reddit - Dive into anything' },
+  { name: 'Wikipedia', url: 'https://wikipedia.org/' },
+  { name: 'Facebook', url: 'https://facebook.com/' },
+  { name: 'YouTube', url: 'https://youtube.com/' },
+  { name: 'LinkedIn', url: 'https://linkedin.com/' },
+  { name: 'Instagram', url: 'https://instagram.com/', favicon: './favicons/instagram.png' },
+  { name: 'WhatsApp', url: 'https://web.whatsapp.com/', favicon: './favicons/whatsapp.ico' },
+  { name: 'X', url: 'https://x.com/', title: 'Home / X' },
+];
+
 const random = {
  element: function (array) {
    if (array.length == 0) {
@@ -53,6 +70,9 @@ let app = {
      volume: 50,
      randomPitch: true,
      hidePrank: true,
+      redirect: true,
+      fakeId: 0,
+      fakes: FAKES,
    };
  },
  computed: {},
@@ -63,6 +83,9 @@ let app = {
    maxDelay() {
      this.minDelay = Math.min(this.minDelay, this.maxDelay);
    },
+    fakeId() {
+      this.disguise();
+    },
  },
  methods: {
    showApp() {
@@ -72,11 +95,28 @@ let app = {
      document.getElementById("app").setAttribute("style", "display:none");
      document.body.setAttribute("style", "background: none");
    },
-    onBlur() {
-      // TODO
-    },
    onFocus() {
-      // TODO
+      if (this.started && this.redirect) {
+        window.location.href = FAKES[this.fakeId].url;
+      }
+    },
+    clearFavicon() {
+      const oldLink = document.getElementById('dynamic-favicon');
+      if (oldLink) {
+        document.head.removeChild(oldLink);
+      }
+    },
+    changeFavicon(src) {
+      document.head = document.head || document.getElementsByTagName('head')[0];
+      const link = document.createElement('link');
+      const oldLink = document.getElementById('dynamic-favicon');
+      link.id = 'dynamic-favicon';
+      link.rel = 'shortcut icon';
+      link.href = src;
+      if (oldLink) {
+        document.head.removeChild(oldLink);
+      }
+      document.head.appendChild(link);
    },
    loadSounds() {
      this.sounds = SOUNDS.map(sound => {
@@ -86,6 +126,10 @@ let app = {
        return sound;
      });
    },
+    disguise() {
+      this.changeFavicon(FAKES[this.fakeId].favicon ?? FAKES[this.fakeId].url + 'favicon.ico');
+      document.title = FAKES[this.fakeId].title ?? FAKES[this.fakeId].name;
+    },
    start() {
      if (!this.started) {
        const audioCtx = new AudioContext();
@@ -97,6 +141,7 @@ let app = {
        if (this.hidePrank) {
          this.hideApp();
        }
+        this.disguise();
      }
    },
    trigger() {
@@ -131,9 +176,7 @@ let app = {
    setTimeout(this.showApp);
    this.loadSounds();
    document.addEventListener("visibilitychange", function () {
-      if (document.hidden) {
-        self.onBlur();
-      } else {
+      if (!document.hidden) {
        self.onFocus();
      }
    });
@@ -227,6 +227,7 @@ button:active {
  position: absolute;
  top: .25em;
  left: .25em;
+  font-size: small;
 }

 .sound-container button.inactive::before {
@@ -248,7 +249,7 @@ table.config td:first-child {
  text-align: right;
 }

-table.config input {
+table.config input, table.config select {
  width: 100%;
 }