klemek/startle-machine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working poc

Browse Source
This commit is contained in:
Klemek
2024-10-18 16:48:25 +02:00
parent 3dc6034ae0
commit ece64c6794
7 changed files with 68 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
favicons/discord.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

favicons/gmail.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

favicons/instagram.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

favicons/whatsapp.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

index.html
+16 -6
View File
@@ -11,9 +11,6 @@
<meta property="og:title" content="Startle Machine"> <meta property="og:title" content="Startle Machine">
<meta property="og:description" content="Generates silence occasionally broken up by random sound effects"> <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="org:url" content="https://prank.klemek.fr">
<!--
<meta property="og:image" content="https://.../preview_640x320.jpg">
-->
</head> </head>
<body> <body>
<main id="app" style="display:none"> <main id="app" style="display:none">
@@ -44,13 +41,26 @@
<td>{{ volume }}%</td> <td>{{ volume }}%</td>
</tr> </tr>
<tr> <tr>
<td colspan="3"> <td><label for="disguise">Disguise as:</label></td>
<button :class="randomPitch ? '' : 'inactive'" @click="randomPitch = !randomPitch">Random pitch: {{ randomPitch ? '✅' : '❌' }}</button> <td colspan="2">
<select v-model="fakeId">
<option v-for="fake, i in fakes" :value="i">{{ fake.name }} ({{ fake.url }})</option>
</select>
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="3"> <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> </td>
</tr> </tr>
</table> </table>
main.js
+50 -7
View File
@@ -28,6 +28,23 @@ const SOUNDS = [
{ id: 'wrong_buzzer', name: 'Wrong Buzzer' }, { 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 = { const random = {
element: function (array) { element: function (array) {
if (array.length == 0) { if (array.length == 0) {
@@ -53,6 +70,9 @@ let app = {
volume: 50, volume: 50,
randomPitch: true, randomPitch: true,
hidePrank: true, hidePrank: true,
redirect: true,
fakeId: 0,
fakes: FAKES,
}; };
}, },
computed: {}, computed: {},
@@ -63,6 +83,9 @@ let app = {
maxDelay() { maxDelay() {
this.minDelay = Math.min(this.minDelay, this.maxDelay); this.minDelay = Math.min(this.minDelay, this.maxDelay);
}, },
fakeId() {
this.disguise();
},
}, },
methods: { methods: {
showApp() { showApp() {
@@ -72,11 +95,28 @@ let app = {
document.getElementById("app").setAttribute("style", "display:none"); document.getElementById("app").setAttribute("style", "display:none");
document.body.setAttribute("style", "background: none"); document.body.setAttribute("style", "background: none");
}, },
onBlur() {
// TODO
},
onFocus() { 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() { loadSounds() {
this.sounds = SOUNDS.map(sound => { this.sounds = SOUNDS.map(sound => {
@@ -86,6 +126,10 @@ let app = {
return sound; 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() { start() {
if (!this.started) { if (!this.started) {
const audioCtx = new AudioContext(); const audioCtx = new AudioContext();
@@ -97,6 +141,7 @@ let app = {
if (this.hidePrank) { if (this.hidePrank) {
this.hideApp(); this.hideApp();
} }
this.disguise();
} }
}, },
trigger() { trigger() {
@@ -131,9 +176,7 @@ let app = {
setTimeout(this.showApp); setTimeout(this.showApp);
this.loadSounds(); this.loadSounds();
document.addEventListener("visibilitychange", function () { document.addEventListener("visibilitychange", function () {
if (document.hidden) { if (!document.hidden) {
self.onBlur();
} else {
self.onFocus(); self.onFocus();
} }
}); });
style.css
+2 -1
View File
@@ -227,6 +227,7 @@ button:active {
position: absolute; position: absolute;
top: .25em; top: .25em;
left: .25em; left: .25em;
font-size: small;
} }
.sound-container button.inactive::before { .sound-container button.inactive::before {
@@ -248,7 +249,7 @@ table.config td:first-child {
text-align: right; text-align: right;
} }
table.config input { table.config input, table.config select {
width: 100%; width: 100%;
} }