From a2ad0cbe22ba565af59997d9e853172ce9ad7fea Mon Sep 17 00:00:00 2001
From: Saahil <neon@saahild.com>
Date: Mon, 6 Jan 2025 19:42:17 -0500
Subject: [PATCH] update: bday render

---
 src/modules/bday.ts     | 177 ++++++++++++++++++++++++++++++++++++++++
 src/modules/slackapp.ts |   3 +-
 2 files changed, 179 insertions(+), 1 deletion(-)
diff --git a/src/modules/bday.ts b/src/modules/bday.ts
index 5cd231d..7ee3979 100644
--- a/src/modules/bday.ts
+++ b/src/modules/bday.ts
@@ -27,6 +27,183 @@ export async function cronFunc(app: ModifiedApp) {
     }
   }
 }
+
+export async function renderBday(userID:string, app:ModifiedApp) {
+  const userInfo = await app.client.users.info({ user: userID})
+  if(userInfo.error) return `Error: ${userInfo.error}`
+  const bday = app.dbs.bday.get(userID)
+  if(!bday) return `No bday found for ${userID}\n maybe you should opt-in?`
+  // currently borrowing https://github.com/NeonGamerBot-QK/myBot/blob/master/views/bday.ejs
+  //todo jsx..
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Happy Bday ${userInfo.user.real_name || userInfo.user.name} turing ${new Date().getFullYear() - new Date(bday).getFullYear()} years old">
+    <meta name="author" content="NeonGamerBot-QK">
+    <meta property="og:title" content="Happy Bday ${userInfo.user.real_name || userInfo.user.name}">
+    <meta property="og:description" content="Happy Bday ${userInfo.user.real_name || userInfo.user.name} turing ${new Date().getFullYear() - new Date(bday).getFullYear()} years old">
+    <meta property="og:image" content="${userInfo.user.profile.image_1024}">
+    <title>Happy Bday ${userInfo.user.real_name || userInfo.user.name}</title>
+<style>
+    @import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");
+
+body {
+    margin: 0px;
+}
+
+#container {
+    position: absolute;
+    margin: auto;
+    width: 100vw;
+    height: 80pt;
+    top: 0;
+    bottom: 0;
+
+    filter: url(#threshold) blur(0.6px);
+}
+
+#text1,
+#text2 {
+    position: absolute;
+    width: 100%;
+    display: inline-block;
+
+    font-family: "Raleway", sans-serif;
+    font-size: 80pt;
+
+    text-align: center;
+
+    user-select: none;
+}
+</style>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
+</head>
+<body>
+<img src="${userInfo.user.profile.image_512}" style="width:100%;height:100%">
+    <div id="container">
+        <span id="text1"></span>
+        <span id="text2"></span>
+    </div>
+    
+    <svg id="filters">
+        <defs>
+            <filter id="threshold">
+                <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
+                      0 1 0 0 0
+                      0 0 1 0 0
+                      0 0 0 255 -140" />
+            </filter>
+        </defs>
+    </svg>
+</body>
+<script>
+    // confeti effect
+
+    (function frame() {
+  confetti({
+    particleCount: 2,
+    angle: 60,
+    spread: 55,
+    origin: { x: 0 },
+    // colors: colors,
+  });
+
+  confetti({
+    particleCount: 2,
+    angle: 120,
+    spread: 55,
+    origin: { x: 1 },
+    // colors: colors,
+  });
+
+//   if (Date.now() < end) {
+    requestAnimationFrame(frame);
+//   }
+})();
+    const elts = {
+    text1: document.getElementById("text1"),
+    text2: document.getElementById("text2")
+};
+
+const texts = [
+\`Happy birthday ${userInfo.user.real_name || userInfo.user.name}.  Congrats on being ${new Date().getFullYear()  -new Date(bday).getFullYear() } years old\`
+];
+
+const morphTime = 1;
+const cooldownTime = .5;
+
+let textIndex = texts.length - 1;
+let time = new Date();
+let morph = 0;
+let cooldown = cooldownTime;
+
+elts.text1.textContent = texts[textIndex % texts.length];
+elts.text2.textContent = texts[(textIndex + 1) % texts.length];
+
+function doMorph() {
+    morph -= cooldown;
+    cooldown = 0;
+
+    let fraction = morph / morphTime;
+
+    if (fraction > 1) {
+        cooldown = cooldownTime;
+        fraction = 1;
+    }
+
+    setMorph(fraction);
+}
+
+function setMorph(fraction) {
+    elts.text2.style.filter = \`blur(\${Math.min(8 / fraction - 8, 100)}px)\`;
+    elts.text2.style.opacity = \`\${Math.pow(fraction, 0.4) * 100}%\`;
+
+    fraction = 1 - fraction;
+    elts.text1.style.filter = \`blur(\${Math.min(8 / fraction - 8, 100)}px)\`;
+    elts.text1.style.opacity = \`\${Math.pow(fraction, 0.4) * 100}%\`;
+
+    elts.text1.textContent = texts[textIndex % texts.length];
+    elts.text2.textContent = texts[(textIndex + 1) % texts.length];
+}
+
+function doCooldown() {
+    morph = 0;
+
+    elts.text2.style.filter = "";
+    elts.text2.style.opacity = "100%";
+
+    elts.text1.style.filter = "";
+    elts.text1.style.opacity = "0%";
+}
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    let newTime = new Date();
+    let shouldIncrementIndex = cooldown > 0;
+    let dt = (newTime - time) / 1000;
+    time = newTime;
+
+    cooldown -= dt;
+
+    if (cooldown <= 0) {
+        if (shouldIncrementIndex) {
+            textIndex++;
+        }
+
+        doMorph();
+    } else {
+        doCooldown();
+    }
+}
+
+animate();
+</script>
+</html>`
+}
 export function startBdayCron(app: ModifiedApp) {
   cron.schedule("0 0 * * *", async () => {
     cronFunc(app);
diff --git a/src/modules/slackapp.ts b/src/modules/slackapp.ts
index 36e7b15..5e0c2de 100644
--- a/src/modules/slackapp.ts
+++ b/src/modules/slackapp.ts
@@ -4,6 +4,7 @@ import { App } from "@slack/bolt";
 import { StringIndexed } from "@slack/bolt/dist/types/helpers";
 import JSONdb from "simple-json-db";
 import { handleGitRequest } from "./projectWaterydo";
+import { bdayutils } from "./index";
 export interface ModifiedApp extends App<StringIndexed> {
   db: JSONdb;
   dbs: {
@@ -105,7 +106,7 @@ export const app = new App({
         console.log(user);
         if (!user) return res.writeHead(400).end(`I cant find that user`);
         //@ts-ignore
-        res.writeHead(200).end(`Happy bday!! (this is a WIP)`);
+        res.writeHead(200).end(await bdayutils.renderBday(user, app));
       },
     },
     {
