reviews using reviewdb

assets/css/style.css

@@ -758,3 +758,7 @@ br {
 	text-decoration: underline;
 	color: var(--white) !important;
 }
+
+.review:hover {
+	background: var(--surface1);
+}

assets/js/index.js

@@ -1,5 +1,6 @@
 import * as wakatime from "./wakatime.js";
 import * as github from "./github.js";
+import * as reviewdb from "./reviewdb.js";
 const timeElem = document.getElementById('time');
 const timezone = 'Europe/Berlin';
 
@@ -16,6 +17,45 @@ function getTime(timezone) {
     });
 };
 
+export function formatTime(ms) {
+	const totalSecs = Math.floor(ms / 1000);
+	const hours = Math.floor(totalSecs / 3600);
+	const mins = Math.floor((totalSecs % 3600) / 60);
+	const secs = totalSecs % 60;
+
+	return `${String(hours).padStart(1, "0")}:${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+
+export function formatVerbose(ms) {
+	const totalSecs = Math.floor(ms / 1000);
+	const hours = Math.floor(totalSecs / 3600);
+	const mins = Math.floor((totalSecs % 3600) / 60);
+	const secs = totalSecs % 60;
+
+	return `${hours}h ${mins}m ${secs}s`;
+}
+
+export function msToTimestamp(ms, seconds=true) {
+	if (seconds) {
+		const timestamp = new Date(ms).toLocaleTimeString('en-GB', {
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit"
+		});
+		return timestamp;
+	} else {
+		const timestamp = new Date(ms).toLocaleTimeString('en-GB', {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		return timestamp;
+	}
+}
+
+export function msToDate(ms) {
+	return new Date(ms).toISOString();
+}
+
 timeElem.innerHTML = getTime(timezone);
 
 setInterval(() => {
@@ -54,6 +94,7 @@ function lan() {
         const activity = document.querySelector('.activity');
         const activityNameElem = document.getElementById('activity-name');
         const activityImageElem = document.getElementById('activity-image');
+		const uname = document.getElementById('username');
 
         const gameActivity = data.activities.find(activity => activity.type === 0);
         const status = data.activities.find(activity => activity.type === 4);
@@ -64,26 +105,27 @@ function lan() {
             offline: "#80848e"
         };
 
+		const userName = data.discord_user.display_name
+
+		uname.innerText = userName;
+		uname.href = `https://discord.com/users/${data.discord_user.id}`
+
 		pfpElem.src = `https://cdn.discordapp.com/avatars/${user}/${data.discord_user.avatar}.webp`
 
         const borderColor = statusColors[data.discord_status] || statusColors.offline;
         pfpElem.style.borderColor = borderColor;
 
         if (status) {
-            statusElem.innerHTML = `<strong class="quote">"${
+            statusElem.innerHTML = `<strong class="quote">"${status.state}"</strong> - ${userName}`;
-                status.state
-            }"</strong> - zyqunix`;
         } else {
             statusElem.innerHTML = `<strong class="quote">Empty void. Nothingness.</strong>`;
         }
 
-        if (gameActivity) {
 
+        if (gameActivity) {
             const parts = [];
             if (gameActivity.name) 
-                parts.push(`<strong>Playing</strong> ${
+                parts.push(`<strong>Playing</strong> ${gameActivity.name}`);
-                    gameActivity.name
-                }`);
             
 
             if (gameActivity.details) 
@@ -93,18 +135,20 @@ function lan() {
             if (gameActivity.state) 
                 parts.push(gameActivity.state);
             
+			if (gameActivity.timestamps.start)
+				parts.push(`Since ${new Date(gameActivity.timestamps.start).toLocaleTimeString('en-GB', {
+					hour: "2-digit",
+					minute: "2-digit",
+					second: "2-digit"
+				})}`);
 
             activityNameElem.innerHTML = parts.join(': ');
 
             if (gameActivity.assets && gameActivity.assets.large_image) {
-                const imgId = gameActivity.assets.large_image;
+                activityImageElem.src =`https://cdn.discordapp.com/app-assets/${gameActivity.application_id}/${gameActivity.assets.large_image}.png`;
-                const imageUrl = imgId.startsWith("mp:external/") ? `https://media.discordapp.net/${
-                    imgId.replace("mp:", "")
-                }` : `https://cdn.discordapp.com/app-assets/${
-                    gameActivity.application_id
-                }/${imgId}.png`;
-                activityImageElem.src = imageUrl;
                 activityImageElem.style.display = "block";
+				activityImageElem.style.width = "64px";
+				activityImageElem.style.height = "64px";
             } else {
                 activityImageElem.style.display = "none";
             }
@@ -119,7 +163,7 @@ window.onload = () => {
 
 setInterval(() => {
     lan();
-}, 6000);
+}, 60000);
 
 function generateLanguageCards(languagesData) {
     const container = document.querySelector('.languages');
@@ -244,6 +288,7 @@ function fetchWeather(location) {
 
 wakatime.fetchWakatime("#wakapi");
 github.writeGithubStats("#github-full");
+reviewdb.writeReviews("#reviews");
 
 const messages = [
     "Coding",

assets/js/reviewdb.js

@@ -0,0 +1,42 @@
+import { msToDate, msToTimestamp } from "./index.js";
+
+const API_URL = "https://manti.vendicated.dev/api/reviewdb";
+const user = "1201415921802170388";
+
+export async function fetchReviews(user) {
+    const response = await fetch(`${API_URL}/users/${user}/reviews`);
+    if (!response.ok) throw new Error(`Error fetching reviews: ${response.status} ${response.statusText}`);
+    const data = await response.json();
+    data.reviews = data.reviews.filter(r => r.id !== 0);
+    return data;
+}
+
+export async function writeReviews(target) {
+	const element = document.querySelector(target);
+    const data = await fetchReviews(user);
+
+    element.innerHTML = "";
+
+    data.reviews.forEach(review => {
+        const el = document.createElement("div");
+		el.classList.add("shadow", "review");
+		el.style.transition = "background 0.3s";
+		el.style.margin = "10px";
+		el.style.padding = "15px";
+		el.style.border = "2px solid var(--surface1)";
+		el.style.borderRadius = "5px";
+        el.innerHTML = `
+			<div style="display: flex; justify-content: space-between; align-items: center;">
+				<div style="display: flex; justify-content: left; align-items: center;">
+					<img src="${review.sender.profilePhoto}" style="height: 48px; border-radius: 50%; margin-right: 10px">
+					<a style="margin:0; color: var(--text)" href="https://discord.com/users/${review.sender.discordID}">${review.sender.username}</a>
+				</div>
+				<div style="display: flex; justify-content: left; align-items: center;">
+					<span style="margin-left: 10px; color: var(--overlay1); font-size: 0.8rem">${msToDate(review.timestamp * 1000).split('T')[0].replace(/-/g, '/')} @ ${msToTimestamp(review.timestamp * 1000, false)}</span>
+				</div>
+			</div>	
+            <p style="margin: 5px">${review.comment}</p>
+		`;
+        element.appendChild(el);
+	});
+}

index.html

@@ -13,7 +13,7 @@
     <body>
         <div class="info" id="Info">
             <img alt="Profile Picture" id="profile-picture"/>
-            <h1 class="name tooltip" data-tooltip="zyqunix / Fabio / fentboiswag / монгол">zyqunix</h1>
+			<h1 class="name"><a target="_blank" id="username">zyqunix</a></h1>
 			<span><div class="time tooltip" id="time"></div><div class="weather" id="weather"></div></span></span>
 			<div class="age tooltip" id="age"></div>
             <span class="hobbies" id="hobbies">
@@ -113,6 +113,12 @@
 			<h4 id="note">Note: I do forget to add new sites there sometimes. So check the <a href="https://github.com/zyqunix/tools">GitHub</a> if you think there are some missing</h4>
 		</div>
 
+
+		<div class="cards reviews shadow" id="User Reviews">
+			<h2 class="card-header">User Reviews</h2>
+			<div id="reviews"></div>
+		</div>
+
 		<div class="music">
 			<img src="assets/img/dancing-banan.gif" class="banan" id="banan">
 			<div class="popup shadow" id="music-pop">