A fast, local-first "redirection engine" for !bang users with a few extra features ^-^

feat: add more cuties

Changed files
+40 -1
src
+1
README.md
···
- [x] [OpenSearch](https://developer.mozilla.org/en-US/docs/Web/XML/Guides/OpenSearch) support
- [x] Search History (clearable, all local, and disabled by default ofc)
- [x] Fancy sounds (disabled if you have `prefers-reduced-motion` set; sounds only account for 201.3 KB of the 707 KB total size)
+
- [x] Cute little text animations
- [ ] ~Search suggestions~ (as far as I can tell this essentially impossible to do natively with either firefox or chrome; please correct me if I'm wrong though. In this case I would very much love to be wrong)
and then some more really ambitious stuff like:
+39 -1
src/main.ts
···
</div>
</header>
<div class="content-container">
-
<h1>┐( ˘_˘ )┌</h1>
+
<h1 id="cutie">┐( ˘_˘ )┌</h1>
<p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>
<div class="url-container">
<input
···
const elements = {
app,
+
cutie: app.querySelector<HTMLHeadingElement>("#cutie"),
copyInput: app.querySelector<HTMLInputElement>(".url-input"),
copyButton: app.querySelector<HTMLButtonElement>(".copy-button"),
copyIcon: app.querySelector<HTMLImageElement>(".copy-button img"),
···
).matches;
if (!prefersReducedMotion) {
+
// Add mouse tracking behavior
+
document.addEventListener("click", (e) => {
+
const x = e.clientX;
+
const y = e.clientY;
+
const centerX = window.innerWidth / 2;
+
const centerY = window.innerHeight / 2;
+
const differenceX = x - centerX;
+
const differenceY = y - centerY;
+
+
// Left-facing cuties
+
const leftCuties = ["╰(°□°╰)", "(◕‿◕´)", "(・ω・´)"];
+
+
// Right-facing cuties
+
const rightCuties = ["(╯°□°)╯", "(`◕‿◕)", "(`・ω・)"];
+
+
// Up-facing cuties
+
const upCuties = ["(↑°□°)↑", "(´◕‿◕)↑", "↑(´・ω・)↑"];
+
+
// Down-facing cuties
+
const downCuties = ["(↓°□°)↓", "(´◕‿◕)↓", "↓(´・ω・)↓"];
+
+
if (
+
Math.abs(differenceX) > Math.abs(differenceY) &&
+
Math.abs(differenceX) > 100
+
) {
+
validatedElements.cutie.textContent =
+
differenceX < 0
+
? leftCuties[Math.floor(Math.random() * leftCuties.length)]
+
: rightCuties[Math.floor(Math.random() * rightCuties.length)];
+
} else if (Math.abs(differenceY) > 100) {
+
validatedElements.cutie.textContent =
+
differenceY < 0
+
? upCuties[Math.floor(Math.random() * upCuties.length)]
+
: downCuties[Math.floor(Math.random() * downCuties.length)];
+
}
+
});
+
const audio = {
spin: createAudio("/heavier-tick-sprite.mp3"),
toggleOff: createAudio("/toggle-button-off.mp3"),