feat: Added extremely useful new 'whack' function.

Press 'w' to whack your fediwall.

Author: defnull

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, onBeforeUnmount, onMounted, onUpdated, provide, ref, watch } from 'vue';
-import { createFilterWrapper, debounceFilter, useDocumentVisibility, usePreferredDark, useWindowScroll, useWindowSize } from '@vueuse/core'
+import { createFilterWrapper, debounceFilter, onKeyStroke, useDocumentVisibility, usePreferredDark, useWindowScroll, useWindowSize } from '@vueuse/core'
 
 import { type Config, type Post } from '@/types';
 import { loadConfig } from '@/config';
@@ -10,7 +10,7 @@ import { fetchPosts } from '@/sources'
 import Card from './components/Card.vue';
 import ConfigModal from './components/ConfigModal.vue';
 import InfoBar from './components/InfoBar.vue';
-import { arrayUnique } from './utils';
+import { whack } from './utils';
 
 const config = ref<Config>();
 
@@ -82,7 +82,9 @@ watch(() => config.value?.title, () => document.title = config.value?.title || f
 // Watch for a update interval changes
 watch(() => config.value?.interval, () => restartUpdates())
 
-
+onKeyStroke(['w'], (e) => {
+  whack("#wall *", 1)
+})
 
 /**
  * Starts or restarts the update interval timer.

src/utils.ts

@@ -27,7 +27,7 @@ export function deepClone(obj: any) {
     return JSON.parse(JSON.stringify(obj))
 }
 
-export async function sleep(ms:number) {
+export async function sleep(ms: number) {
     await new Promise(resolve => setTimeout(resolve, Math.max(0, ms)));
 }
 
@@ -67,4 +67,14 @@ export function replaceInText(root: Node, pattern: RegExp, replace: (m: RegExpMa
 
     walk(root)
     return root;
+}
+
+export function whack(what:string, how_much: number) {
+    const rand = (scale:number) => (Math.random() * 2 - 1) * scale * how_much;
+    document
+        .querySelectorAll(what)
+        .forEach((node) => {
+            if(node instanceof HTMLElement)
+                node.style.transform = how_much > 0 ? `translate(${rand(4)}px, ${rand(4)}px) rotate(${rand(1)}deg)` : ""
+        })
 }