enhancement(lint): Fix lint errors for lib/jsscripts/oneko.ts

Co-authored-by: NeonGamerBot-QK <neon@saahild.com>
Signed-off-by: zeon-neon[bot] <136533918+zeon-neon[bot]@users.noreply.github.com>

app.vue

@@ -2,7 +2,13 @@
 import Backdrop from "./components/Backdrop.vue";
 import Footer from "./components/Footer.vue";
 import Navbar from "./components/Navbar.vue";
+import "./lib/jsscripts/index.ts";
 </script>
+<!-- <script
+  defer
+  src="https://cloud.umami.is/script.js"
+  data-website-id=""
+></script> -->
 <style>
 body,
 html {

components/Navbar.vue

@@ -22,8 +22,13 @@
           tabindex="0"
           class="menu menu-sm dropdown-content bg-base-100 rounded-box z-1 mt-3 w-52 p-2 shadow"
         >
-          <li><a>Item 1</a></li>
-          <li><a>Item 3</a></li>
+          <li>
+            <a>
+              <Icon name="catppuccin:folder-queue" class="text-2xl" />
+              About me</a
+            >
+          </li>
+          <li><a>Webrings</a></li>
         </ul>
       </div>
       <a class="btn btn-ghost text-xl">saahild.com</a>
@@ -33,8 +38,38 @@
     </div> -->
     <div class="navbar-end">
       <ul class="menu menu-horizontal px-1 hidden lg:flex">
-        <li><a>Item 1</a></li>
-        <li><a>Item 3</a></li>
+        <li>
+          <a href="/about">
+            <Icon name="catppuccin:text" class="text-2xl" />About me</a
+          >
+        </li>
+        <li>
+          <a href="/projects">
+            <Icon name="catppuccin:folder" class="text-2xl" />Projects</a
+          >
+        </li>
+        <!-- it looks close enough to a ring -->
+        <li>
+          <a href="/buttons"
+            ><Icon name="catppuccin:webpack" class="text-2xl" />Webrings</a
+          >
+        </li>
+        <li>
+          <a href="/contact.html"
+            ><Icon name="catppuccin:readme" class="text-2xl" />Contact</a
+          >
+        </li>
+        <li>
+          <a href="/donate.html"
+            ><Icon
+              name="donate"
+              class="text-2xl"
+              v-umami="{ name: 'Navbar-Donate', external: true }"
+            />
+            <Icon name="catppuccin:certificate" class="text-2xl" />
+            Donate</a
+          >
+        </li>
       </ul>
     </div>
   </div>

lib/jsscripts/changing_title.ts

@@ -0,0 +1,28 @@
+let title0: null | string = null;
+let interId: any = null;
+const isDev = process.env.NODE_ENV !== "production";
+
+export function runTitle() {
+  if (interId) clearInterval(interId);
+  interId = setInterval(() => {
+    if (document.title !== "Come Back :(") {
+      title0 = document.title;
+    }
+    window.document.documentElement.className = "duration-500 ease-in-out ";
+    if (document.hasFocus()) {
+      document.title =
+        title0?.toLowerCase() === "react app"
+          ? "Saahild.com"
+          : (title0 ?? "Saahild.com");
+      window.document.documentElement.style.filter = "";
+    } else {
+      document.title = "Come Back :(";
+      if (!isDev) window.document.documentElement.style.filter = "blur(30px)";
+    }
+  }, 200);
+}
+export function stopTitle() {
+  if (!interId) return false;
+  return clearInterval(interId);
+}
+// runTitle()

lib/jsscripts/index.ts

@@ -0,0 +1,16 @@
+import { startingLog } from "./log";
+import { runTitle } from "./changing_title";
+import { injectOneko } from "./oneko";
+startingLog();
+runTitle();
+
+injectOneko();
+umIdentify({
+  semi_perm_id: localStorage.getItem("semi_perm_id")
+    ? localStorage.getItem("semi_perm_id")
+    : (localStorage.semi_perm_id =
+        Math.random().toString(36).substring(2, 15) +
+        Math.random().toString(36).substring(2, 15)),
+  temp_id: Date.now() + Math.random().toString(36).substring(2, 15),
+  user_agent: navigator.userAgent,
+});

lib/jsscripts/log.ts

@@ -0,0 +1,20 @@
+export function startingLog(): void {
+  const isDev = process.env.NODE_ENV !== "production";
+  console.log(
+    `%c What's up?`,
+    `font-size: 120px;
+      font-family: "Poppins", sans-serif;
+      background-size: 1000% 1000%;
+      animation: gradient 1s ease infinite;
+      `,
+  );
+  console.log(
+    `%c Thanks for visting this site you can dontate me at https://ko-fi.com/saahil\n Try to find the easter egg in this site🥚\n HINT: to use it you must use the console it is a very VERY hard one`,
+    `font-size: 15px;`,
+  );
+  if (isDev) {
+    console.debug(
+      "This message will show during production build. & development build",
+    );
+  }
+}

lib/jsscripts/oneko.ts

@@ -0,0 +1,288 @@
+// oneko.js: https://github.com/tylxr59/oneko.js/blob/main/oneko.js
+// modified by @NeonGamerBot-QK
+// oneko.js: https://github.com/adryd325/oneko.js
+
+export function injectOneko() {
+  const isReducedMotion =
+    window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
+
+  if (isReducedMotion) return;
+
+  const nekoEl = document.createElement("div");
+
+  let nekoPosX = 32;
+  let nekoPosY = 32;
+
+  let mousePosX = 0;
+  let mousePosY = 0;
+
+  let frameCount = 0;
+  let idleTime = 0;
+  let idleAnimation: any = null;
+  let idleAnimationFrame = 0;
+
+  const nekoSpeed = 10;
+  const spriteSets = {
+    idle: [[-3, -3]],
+    alert: [[-7, -3]],
+    scratchSelf: [
+      [-5, 0],
+      [-6, 0],
+      [-7, 0],
+    ],
+    scratchWallN: [
+      [0, 0],
+      [0, -1],
+    ],
+    scratchWallS: [
+      [-7, -1],
+      [-6, -2],
+    ],
+    scratchWallE: [
+      [-2, -2],
+      [-2, -3],
+    ],
+    scratchWallW: [
+      [-4, 0],
+      [-4, -1],
+    ],
+    tired: [[-3, -2]],
+    sleeping: [
+      [-2, 0],
+      [-2, -1],
+    ],
+    N: [
+      [-1, -2],
+      [-1, -3],
+    ],
+    NE: [
+      [0, -2],
+      [0, -3],
+    ],
+    E: [
+      [-3, 0],
+      [-3, -1],
+    ],
+    SE: [
+      [-5, -1],
+      [-5, -2],
+    ],
+    S: [
+      [-6, -3],
+      [-7, -2],
+    ],
+    SW: [
+      [-5, -3],
+      [-6, -1],
+    ],
+    W: [
+      [-4, -2],
+      [-4, -3],
+    ],
+    NW: [
+      [-1, 0],
+      [-1, -1],
+    ],
+  };
+
+  function init() {
+    nekoEl.id = "oneko";
+    nekoEl.ariaHidden = "true";
+    nekoEl.style.width = "32px";
+    nekoEl.style.height = "32px";
+    nekoEl.style.position = "fixed";
+    nekoEl.style.pointerEvents = "auto";
+    nekoEl.style.imageRendering = "pixelated";
+    nekoEl.style.left = `${nekoPosX - 16}px`;
+    nekoEl.style.top = `${nekoPosY - 16}px`;
+    nekoEl.style.zIndex = "99999999";
+
+    let nekoFile = "https://saahild.com/oneko.gif";
+    const curScript = document.currentScript;
+    if (curScript && curScript.dataset.cat) {
+      nekoFile = curScript.dataset.cat;
+    }
+    nekoEl.style.backgroundImage = `url(${nekoFile})`;
+
+    document.body.appendChild(nekoEl);
+
+    document.addEventListener("mousemove", function (event) {
+      mousePosX = event.clientX;
+      mousePosY = event.clientY;
+    });
+
+    window.requestAnimationFrame(onAnimationFrame);
+  }
+
+  let lastFrameTimestamp: any;
+
+  function onAnimationFrame(timestamp: any) {
+    // Stops execution if the neko element is removed from DOM
+    if (!nekoEl.isConnected) {
+      return;
+    }
+    if (!lastFrameTimestamp) {
+      lastFrameTimestamp = timestamp;
+    }
+    if (timestamp - lastFrameTimestamp > 100) {
+      lastFrameTimestamp = timestamp;
+      frame();
+    }
+    window.requestAnimationFrame(onAnimationFrame);
+  }
+
+  function setSprite(name: any, frame: any) {
+    //@ts-ignore
+    const sprite = spriteSets[name][frame % spriteSets[name].length];
+    nekoEl.style.backgroundPosition = `${sprite[0] * 32}px ${sprite[1] * 32}px`;
+  }
+
+  function resetIdleAnimation() {
+    idleAnimation = null;
+    idleAnimationFrame = 0;
+  }
+
+  function idle() {
+    idleTime += 1;
+
+    // every ~ 20 seconds
+    if (
+      idleTime > 10 &&
+      Math.floor(Math.random() * 200) == 0 &&
+      idleAnimation == null
+    ) {
+      let avalibleIdleAnimations = ["sleeping", "scratchSelf"];
+      if (nekoPosX < 32) {
+        avalibleIdleAnimations.push("scratchWallW");
+      }
+      if (nekoPosY < 32) {
+        avalibleIdleAnimations.push("scratchWallN");
+      }
+      if (nekoPosX > window.innerWidth - 32) {
+        avalibleIdleAnimations.push("scratchWallE");
+      }
+      if (nekoPosY > window.innerHeight - 32) {
+        avalibleIdleAnimations.push("scratchWallS");
+      }
+      idleAnimation =
+        avalibleIdleAnimations[
+          Math.floor(Math.random() * avalibleIdleAnimations.length)
+        ];
+    }
+
+    switch (idleAnimation) {
+      case "sleeping":
+        if (idleAnimationFrame < 8) {
+          setSprite("tired", 0);
+          break;
+        }
+        setSprite("sleeping", Math.floor(idleAnimationFrame / 4));
+        if (idleAnimationFrame > 192) {
+          resetIdleAnimation();
+        }
+        break;
+      case "scratchWallN":
+      case "scratchWallS":
+      case "scratchWallE":
+      case "scratchWallW":
+      case "scratchSelf":
+        setSprite(idleAnimation, idleAnimationFrame);
+        if (idleAnimationFrame > 9) {
+          resetIdleAnimation();
+        }
+        break;
+      default:
+        setSprite("idle", 0);
+        return;
+    }
+    idleAnimationFrame += 1;
+  }
+
+  function explodeHearts() {
+    const parent = nekoEl.parentElement;
+    const rect = nekoEl.getBoundingClientRect();
+    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const centerX = rect.left + rect.width / 2 + scrollLeft;
+    const centerY = rect.top + rect.height / 2 + scrollTop;
+
+    for (let i = 0; i < 10; i++) {
+      const heart = document.createElement("div");
+      heart.className = "heart";
+      heart.textContent = "❤";
+      const offsetX = (Math.random() - 0.5) * 50;
+      const offsetY = (Math.random() - 0.5) * 50;
+      heart.style.left = `${centerX + offsetX - 16}px`;
+      heart.style.top = `${centerY + offsetY - 16}px`;
+      heart.style.transform = `translate(-50%, -50%) rotate(${Math.random() * 360}deg)`;
+      parent?.appendChild(heart);
+
+      setTimeout(() => {
+        parent?.removeChild(heart);
+      }, 1000);
+    }
+  }
+
+  const style = document.createElement("style");
+  style.innerHTML = `
+		  @keyframes heartBurst {
+			  0% { transform: scale(0); opacity: 1; }
+			  100% { transform: scale(1); opacity: 0; }
+		  }
+		  .heart {
+			  position: absolute;
+			  font-size: 2em;
+			  animation: heartBurst 1s ease-out;
+			  animation-fill-mode: forwards;
+			  color: var(--mauve);
+		  }
+	  `;
+
+  document.head.appendChild(style);
+  nekoEl.addEventListener("click", explodeHearts);
+
+  function frame() {
+    frameCount += 1;
+    const diffX = nekoPosX - mousePosX;
+    const diffY = nekoPosY - mousePosY;
+    const distance = Math.sqrt(diffX ** 2 + diffY ** 2);
+
+    if (distance < nekoSpeed || distance < 48) {
+      idle();
+      return;
+    }
+
+    idleAnimation = null;
+    idleAnimationFrame = 0;
+
+    if (idleTime > 1) {
+      setSprite("alert", 0);
+      // count down after being alerted before moving
+      idleTime = Math.min(idleTime, 7);
+      idleTime -= 1;
+      return;
+    }
+
+    let direction;
+    direction = diffY / distance > 0.5 ? "N" : "";
+    direction += diffY / distance < -0.5 ? "S" : "";
+    direction += diffX / distance > 0.5 ? "W" : "";
+    direction += diffX / distance < -0.5 ? "E" : "";
+    setSprite(direction, frameCount);
+
+    nekoPosX -= (diffX / distance) * nekoSpeed;
+    nekoPosY -= (diffY / distance) * nekoSpeed;
+
+    nekoPosX = Math.min(Math.max(16, nekoPosX), window.innerWidth - 16);
+    nekoPosY = Math.min(Math.max(16, nekoPosY), window.innerHeight - 16);
+
+    nekoEl.style.left = `${nekoPosX - 16}px`;
+    nekoEl.style.top = `${nekoPosY - 16}px`;
+  }
+
+  init();
+}
+
+export function stopOneko() {
+  return document.getElementById("oneko")?.remove();
+}

nuxt.config.ts

@@ -15,7 +15,22 @@ export default defineNuxtConfig({
     "@nuxt/fonts",
     "@nuxt/icon",
     "@nuxt/image",
+    "nuxt-umami",
   ],
+
+  umami: {
+    id: "ee9a2efa-f5af-496f-8e37-b8fe9e1e8ec2",
+    host: "https://cloud.umami.is",
+    autoTrack: true,
+    // proxy: 'cloak',
+    useDirective: true,
+    ignoreLocalhost: false,
+    // excludeQueryParams: false,
+    // domains: ['cool-site.app', 'my-space.site'],
+    // customEndpoint: '/my-custom-endpoint',
+    // enabled: false,
+    logErrors: true,
+  },
   vite: {
     plugins: [tailwindcss()],
   },

package.json

@@ -20,6 +20,7 @@
     "daisyui": "^5.0.43",
     "eslint": "^9.0.0",
     "nuxt": "^3.17.5",
+    "nuxt-umami": "3.2.0",
     "tailwindcss": "^4.1.10",
     "vue": "^3.5.16",
     "vue-router": "^4.5.1"

pages/about.vue

@@ -0,0 +1 @@
+<template>About who?</template>

pages/buttons.vue

@@ -0,0 +1 @@
+<template>Webrings:3</template>