+
+
+
+
+
+
+
+
+
+
+
+
+ ${username}
+ ${badges}
+
+
+ ${comment}
+ 
`,
+ );
+
+ const timestamp = review.timestamp
+ ? new Date(review.timestamp * 1000).toLocaleString(undefined, {
+ hour12: false,
+ year: "numeric",
+ month: "2-digit",
+ day: "2-digit",
+ hour: "2-digit",
+ minute: "2-digit",
+ })
+ : "N/A";
+
+ const badges = (sender.badges || [])
+ .map(
+ (b) =>
+ `+ ${emojiHTML}${custom.state ? `${custom.state}` : ""} +
+ `; + + if (customStatus) { + customStatus.outerHTML = html; + } else { + userInfoInner.insertAdjacentHTML("beforeend", html); + } + } else if (customStatus) { + customStatus.remove(); + } +} + +async function getAllNoAsset() { + const noAssetImages = document.querySelectorAll( + "img.activity-image.no-asset", + ); + + for (const img of noAssetImages) { + const name = img.dataset.name; + if (!name) continue; + + try { + const res = await fetch(`/api/art/${encodeURIComponent(name)}`); + if (!res.ok) continue; + + const { icon } = await res.json(); + if (icon) { + img.src = icon; + img.classList.remove("no-asset"); + img.parentElement.classList.remove("no-asset"); + } + } catch (err) { + console.warn(`Failed to fetch fallback icon for "${name}"`, err); + } + } +} + +function updateClanBadge(data) { + const userInfoInner = document.querySelector(".user-info-inner"); + if (!userInfoInner) return; + + const clan = data?.discord_user?.primary_guild; + if (!clan || !clan.tag || !clan.identity_guild_id || !clan.badge) return; + + const existing = userInfoInner.querySelector(".clan-badge"); + if (existing) existing.remove(); + + const wrapper = document.createElement("div"); + wrapper.className = "clan-badge"; + + const img = document.createElement("img"); + img.src = `https://cdn.discordapp.com/clan-badges/${clan.identity_guild_id}/${clan.badge}`; + img.alt = "Clan Badge"; + + const span = document.createElement("span"); + span.className = "clan-name"; + span.textContent = clan.tag; + + wrapper.appendChild(img); + wrapper.appendChild(span); + + const usernameEl = userInfoInner.querySelector(".username"); + if (usernameEl) { + usernameEl.insertAdjacentElement("afterend", wrapper); + } else { + userInfoInner.appendChild(wrapper); + } +} + +if (instanceUri) { + if (!instanceUri.startsWith("http")) { + instanceUri = `https://${instanceUri}`; + } + + const wsUri = instanceUri + .replace(/^http:/, "ws:") + .replace(/^https:/, "wss:") + .replace(/\/$/, ""); + + socket = new WebSocket(`${wsUri}/socket`); +} + +if (badgeURL && badgeURL !== "null" && userId) { + if (!badgeURL.startsWith("http")) { + badgeURL = `https://${badgeURL}`; + } + + if (!badgeURL.endsWith("/")) { + badgeURL += "/"; + } +} + +if (userId && instanceUri) { + let heartbeatInterval = null; + + socket.addEventListener("message", (event) => { + const payload = JSON.parse(event.data); + + if (payload.error || payload.success === false) { + const loadingOverlay = document.getElementById("loading-overlay"); + if (loadingOverlay) { + loadingOverlay.innerHTML = ` + + `; + loadingOverlay.style.opacity = "1"; + } + return; + } + + if (payload.op === 1 && payload.d?.heartbeat_interval) { + heartbeatInterval = setInterval(() => { + socket.send(JSON.stringify({ op: 3 })); + }, payload.d.heartbeat_interval); + + socket.send( + JSON.stringify({ + op: 2, + d: { + subscribe_to_id: userId, + }, + }), + ); + } + + if (payload.t === "INIT_STATE" || payload.t === "PRESENCE_UPDATE") { + updatePresence(payload); + requestAnimationFrame(updateElapsedAndProgress); + } + }); + + socket.addEventListener("close", () => { + if (heartbeatInterval) clearInterval(heartbeatInterval); + }); +} + +updateElapsedAndProgress(); +setInterval(updateElapsedAndProgress, 1000); diff --git a/public/js/rain.js b/public/js/rain.js index 27c0d8f..1e51d6e 100644 --- a/public/js/rain.js +++ b/public/js/rain.js @@ -25,24 +25,29 @@ const getRaindropColor = () => { const createRaindrop = () => { if (raindrops.length >= maxRaindrops) { - const oldestRaindrop = raindrops.shift(); - rainContainer.removeChild(oldestRaindrop); + const oldest = raindrops.shift(); + rainContainer.removeChild(oldest); } const raindrop = document.createElement("div"); raindrop.classList.add("raindrop"); raindrop.style.position = "absolute"; + const height = Math.random() * 10 + 10; raindrop.style.width = "2px"; - raindrop.style.height = `${Math.random() * 10 + 10}px`; + raindrop.style.height = `${height}px`; raindrop.style.background = getRaindropColor(); raindrop.style.borderRadius = "1px"; - raindrop.style.left = `${Math.random() * window.innerWidth}px`; - raindrop.style.top = `-${raindrop.style.height}`; raindrop.style.opacity = Math.random() * 0.5 + 0.3; + + raindrop.x = Math.random() * window.innerWidth; + raindrop.y = -height; raindrop.speed = Math.random() * 6 + 4; raindrop.directionX = (Math.random() - 0.5) * 0.2; raindrop.directionY = Math.random() * 0.5 + 0.8; + raindrop.style.left = `${raindrop.x}px`; + raindrop.style.top = `${raindrop.y}px`; + raindrops.push(raindrop); rainContainer.appendChild(raindrop); }; @@ -51,23 +56,29 @@ setInterval(createRaindrop, 50); function updateRaindrops() { raindrops.forEach((raindrop, index) => { - const rect = raindrop.getBoundingClientRect(); + const height = Number.parseFloat(raindrop.style.height); - raindrop.style.left = `${rect.left + raindrop.directionX * raindrop.speed}px`; - raindrop.style.top = `${rect.top + raindrop.directionY * raindrop.speed}px`; + raindrop.x += raindrop.directionX * raindrop.speed; + raindrop.y += raindrop.directionY * raindrop.speed; - if (rect.top + rect.height >= window.innerHeight) { + raindrop.style.left = `${raindrop.x}px`; + raindrop.style.top = `${raindrop.y}px`; + + if (raindrop.y > window.innerHeight) { rainContainer.removeChild(raindrop); raindrops.splice(index, 1); + return; } if ( - rect.left > window.innerWidth || - rect.top > window.innerHeight || - rect.left < 0 + raindrop.x > window.innerWidth || + raindrop.y > window.innerHeight || + raindrop.x < 0 ) { - raindrop.style.left = `${Math.random() * window.innerWidth}px`; - raindrop.style.top = `-${raindrop.style.height}`; + raindrop.x = Math.random() * window.innerWidth; + raindrop.y = -height; + raindrop.style.left = `${raindrop.x}px`; + raindrop.style.top = `${raindrop.y}px`; } }); diff --git a/public/js/snow.js b/public/js/snow.js index 05048a8..4d3e755 100644 --- a/public/js/snow.js +++ b/public/js/snow.js @@ -1,84 +1,95 @@ -document.addEventListener("DOMContentLoaded", () => { - const snowContainer = document.createElement("div"); - snowContainer.style.position = "fixed"; - snowContainer.style.top = "0"; - snowContainer.style.left = "0"; - snowContainer.style.width = "100vw"; - snowContainer.style.height = "100vh"; - snowContainer.style.pointerEvents = "none"; - document.body.appendChild(snowContainer); +const snowContainer = document.createElement("div"); +snowContainer.style.position = "fixed"; +snowContainer.style.top = "0"; +snowContainer.style.left = "0"; +snowContainer.style.width = "100vw"; +snowContainer.style.height = "100vh"; +snowContainer.style.pointerEvents = "none"; +document.body.appendChild(snowContainer); - const maxSnowflakes = 60; - const snowflakes = []; - const mouse = { x: -100, y: -100 }; +const maxSnowflakes = 60; +const snowflakes = []; +const mouse = { x: -100, y: -100 }; - document.addEventListener("mousemove", (e) => { - mouse.x = e.clientX; - mouse.y = e.clientY; - }); +document.addEventListener("mousemove", (e) => { + mouse.x = e.clientX; + mouse.y = e.clientY; +}); - const createSnowflake = () => { - if (snowflakes.length >= maxSnowflakes) { - const oldestSnowflake = snowflakes.shift(); - snowContainer.removeChild(oldestSnowflake); - } - - const snowflake = document.createElement("div"); - snowflake.classList.add("snowflake"); - snowflake.style.position = "absolute"; - snowflake.style.width = `${Math.random() * 3 + 2}px`; - snowflake.style.height = snowflake.style.width; - snowflake.style.background = "white"; - snowflake.style.borderRadius = "50%"; - snowflake.style.opacity = Math.random(); - snowflake.style.left = `${Math.random() * window.innerWidth}px`; - snowflake.style.top = `-${snowflake.style.height}`; - snowflake.speed = Math.random() * 3 + 2; - snowflake.directionX = (Math.random() - 0.5) * 0.5; - snowflake.directionY = Math.random() * 0.5 + 0.5; - - snowflakes.push(snowflake); - snowContainer.appendChild(snowflake); - }; - - setInterval(createSnowflake, 80); - - function updateSnowflakes() { - snowflakes.forEach((snowflake, index) => { - const rect = snowflake.getBoundingClientRect(); - - const dx = rect.left + rect.width / 2 - mouse.x; - const dy = rect.top + rect.height / 2 - mouse.y; - const distance = Math.sqrt(dx * dx + dy * dy); - - if (distance < 30) { - snowflake.directionX += (dx / distance) * 0.02; - snowflake.directionY += (dy / distance) * 0.02; - } else { - snowflake.directionX += (Math.random() - 0.5) * 0.01; - snowflake.directionY += (Math.random() - 0.5) * 0.01; - } - - snowflake.style.left = `${rect.left + snowflake.directionX * snowflake.speed}px`; - snowflake.style.top = `${rect.top + snowflake.directionY * snowflake.speed}px`; - - if (rect.top + rect.height >= window.innerHeight) { - snowContainer.removeChild(snowflake); - snowflakes.splice(index, 1); - } - - if ( - rect.left > window.innerWidth || - rect.top > window.innerHeight || - rect.left < 0 - ) { - snowflake.style.left = `${Math.random() * window.innerWidth}px`; - snowflake.style.top = `-${snowflake.style.height}`; - } - }); - - requestAnimationFrame(updateSnowflakes); +const createSnowflake = () => { + if (snowflakes.length >= maxSnowflakes) { + const oldestSnowflake = snowflakes.shift(); + snowContainer.removeChild(oldestSnowflake); } - updateSnowflakes(); -}); + const snowflake = document.createElement("div"); + snowflake.classList.add("snowflake"); + snowflake.style.position = "absolute"; + const size = Math.random() * 3 + 2; + snowflake.style.width = `${size}px`; + snowflake.style.height = `${size}px`; + snowflake.style.background = "white"; + snowflake.style.borderRadius = "50%"; + snowflake.style.opacity = Math.random(); + + snowflake.x = Math.random() * window.innerWidth; + snowflake.y = -size; + snowflake.speed = Math.random() * 3 + 2; + snowflake.directionX = (Math.random() - 0.5) * 0.5; + snowflake.directionY = Math.random() * 0.5 + 0.5; + + snowflake.style.left = `${snowflake.x}px`; + snowflake.style.top = `${snowflake.y}px`; + + snowflakes.push(snowflake); + snowContainer.appendChild(snowflake); +}; + +setInterval(createSnowflake, 80); + +function updateSnowflakes() { + snowflakes.forEach((snowflake, index) => { + const size = Number.parseFloat(snowflake.style.width); + const centerX = snowflake.x + size / 2; + const centerY = snowflake.y + size / 2; + + const dx = centerX - mouse.x; + const dy = centerY - mouse.y; + const distance = Math.sqrt(dx * dx + dy * dy); + + if (distance < 30) { + snowflake.directionX += (dx / distance) * 0.02; + snowflake.directionY += (dy / distance) * 0.02; + } else { + snowflake.directionX += (Math.random() - 0.5) * 0.01; + snowflake.directionY += (Math.random() - 0.5) * 0.01; + } + + snowflake.x += snowflake.directionX * snowflake.speed; + snowflake.y += snowflake.directionY * snowflake.speed; + + snowflake.style.left = `${snowflake.x}px`; + snowflake.style.top = `${snowflake.y}px`; + + if (snowflake.y > window.innerHeight) { + snowContainer.removeChild(snowflake); + snowflakes.splice(index, 1); + return; + } + + if ( + snowflake.x > window.innerWidth || + snowflake.y > window.innerHeight || + snowflake.x < 0 + ) { + snowflake.x = Math.random() * window.innerWidth; + snowflake.y = -size; + snowflake.style.left = `${snowflake.x}px`; + snowflake.style.top = `${snowflake.y}px`; + } + }); + + requestAnimationFrame(updateSnowflakes); +} + +updateSnowflakes(); diff --git a/public/js/stars.js b/public/js/stars.js new file mode 100644 index 0000000..6fff4eb --- /dev/null +++ b/public/js/stars.js @@ -0,0 +1,63 @@ +const container = document.createElement("div"); +container.style.position = "fixed"; +container.style.top = "0"; +container.style.left = "0"; +container.style.width = "100vw"; +container.style.height = "100vh"; +container.style.pointerEvents = "none"; +container.style.overflow = "hidden"; +container.style.zIndex = "9999"; +document.body.appendChild(container); + +for (let i = 0; i < 60; i++) { + const star = document.createElement("div"); + star.className = "star"; + const size = Math.random() * 2 + 1; + star.style.width = `${size}px`; + star.style.height = `${size}px`; + star.style.opacity = Math.random(); + star.style.top = `${Math.random() * 100}vh`; + star.style.left = `${Math.random() * 100}vw`; + star.style.animationDuration = `${Math.random() * 3 + 2}s`; + container.appendChild(star); +} + +function createShootingStar() { + const star = document.createElement("div"); + star.className = "shooting-star"; + + star.x = Math.random() * window.innerWidth * 0.8; + star.y = Math.random() * window.innerHeight * 0.3; + const angle = (Math.random() * Math.PI) / 6 + Math.PI / 8; + const speed = 10; + const totalFrames = 60; + let frame = 0; + + const deg = angle * (180 / Math.PI); + star.style.left = `${star.x}px`; + star.style.top = `${star.y}px`; + star.style.transform = `rotate(${deg}deg)`; + + container.appendChild(star); + + function animate() { + star.x += Math.cos(angle) * speed; + star.y += Math.sin(angle) * speed; + star.style.left = `${star.x}px`; + star.style.top = `${star.y}px`; + star.style.opacity = `${1 - frame / totalFrames}`; + + frame++; + if (frame < totalFrames) { + requestAnimationFrame(animate); + } else if (star.parentNode === container) { + container.removeChild(star); + } + } + + animate(); +} + +setInterval(() => { + if (Math.random() < 0.3) createShootingStar(); +}, 1000); diff --git a/src/helpers/char.ts b/src/helpers/char.ts deleted file mode 100644 index 17657b3..0000000 --- a/src/helpers/char.ts +++ /dev/null @@ -1,6 +0,0 @@ -export function timestampToReadable(timestamp?: number): string { - const date: Date = - timestamp && !Number.isNaN(timestamp) ? new Date(timestamp) : new Date(); - if (Number.isNaN(date.getTime())) return "Invalid Date"; - return date.toISOString().replace("T", " ").replace("Z", ""); -} diff --git a/src/helpers/colors.ts b/src/helpers/colors.ts deleted file mode 100644 index 43a74e7..0000000 --- a/src/helpers/colors.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { fetch } from "bun"; -import { Vibrant } from "node-vibrant/node"; - -export async function getImageColors( - url: string, - hex?: boolean, -): Promise
- <% if (user.avatar_decoration_data) { %>
- 
- <% } %>
- <% if (platform.mobile) { %>
-
- <% } else { %>
-
- <% } %>
-
- <% if (isCustom && emojiUrl) { %>
-
- <% } else if (emoji?.name) { %>
- <%= emoji.name %>
- <% } %>
- <% if (activities[0].state) { %>
- <%= activities[0].state %>
- <% } %>
-
+
+
+
+