Add cool animations and placeholder pfps

webroot/main.js

@@ -24,7 +24,7 @@ var url = `${prot}//${window.location.hostname}/_larpix`;
 var params = new URLSearchParams(window.location.search);
 
 try {
-
+    var loadingStatus = document.getElementById("loadingstatus");
 
     var collapseDmsBtn = document.getElementById("collapse-dms");
     var collapseGroupsBtn = document.getElementById("collapse-groups");
@@ -54,7 +54,10 @@ try {
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
     var sidebarProfileIndicator = sidebarProfile.children.item(0);
-
+    
+    var sidebarPfp = sidebarProfileButton.children.item(0);
+    
+    
     var sidebarInbox = document.getElementById("sidebar-inbox");
     var sidebarInboxButton = sidebarInbox.children.item(1);
     var sidebarInboxIndicator = sidebarInbox.children.item(0);
@@ -451,6 +454,103 @@ async function hashSHA3_512(input) {
     return hashHex;
 }
 
+//placeholder pfp
+function getInitials(name) {
+    const cleanName = (name || "").trim();
+
+    //name empty
+    if (!cleanName) return "";
+
+    const parts = cleanName.split(/\s+/);
+
+    //at least 2 words
+    if (parts.length >= 2) {
+        const firstInitial = parts[0][0];
+        const secondInitial = parts[parts.length - 1][0]; //from last word
+        return (firstInitial + secondInitial).toUpperCase();
+    }
+
+    //only 1 word with 1 letter
+    const word = parts[0];
+    if (word.length === 1) {
+        return word.toUpperCase();
+    }
+
+    //1 word at least 2 letters
+    return word.substring(0, 2).toUpperCase();
+}
+function stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    const h = Math.abs(hash) % 360;
+    const s = 50;
+    const l = 65;
+
+    return `hsl(${h}, ${s}%, ${l}%)`;
+}
+function createAvatarSvg(name, size = 512) {
+    const initials = getInitials(name);
+    const color = stringToColor(name);
+
+    const svg = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+            <rect width="100%" height="100%" fill="${color}" />
+            <text 
+                x="50%" 
+                y="50%" 
+                fill="white" 
+                font-family="Nunito" 
+                font-size="${size * 0.45}" 
+                text-anchor="middle" 
+                dy=".35em">
+                ${initials}
+            </text>
+        </svg>
+    `.trim();
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+
+async function getAvatarUrl(username)
+{
+    try {
+        let pfpUrl = `${url}/user/storage/public/getentry?u=${username}&e=larp.profile.pfp`;
+        if ((await fetchAsync(pfpUrl)) == "")
+        {
+            throw Error();
+        }
+        return pfpUrl;
+    }
+    catch (e) {
+        return createAvatarSvg(username);
+    }
+}
+
+function updateLoadingStatus(message) {
+    loadingStatus.innerHTML = processBlah(message);
+}
+
+async function loadingFadeOut() {
+    let loadingScreen = document.querySelector("loading");
+    let mainScreen = document.querySelector("main");
+    
+    mainScreen.style.transform = "scale(0.85)";
+    mainScreen.style.opacity = "0";
+    
+    loadingScreen.style.transform = "scale(0.85)";
+    loadingScreen.style.opacity = "0";
+    await delay(200);
+    loadingScreen.style.display = "none";
+    mainScreen.style.display = "";
+    await delay(200);
+    mainScreen.style.transform = "";
+    mainScreen.style.opacity = "";
+    
+
+}
+
+
 var blah;
 
 async function initBlahs() {
@@ -469,6 +569,10 @@ async function initBlahs() {
 
 function processBlah(blahmessage) {
     try {
+        if (!blahmessage.includes(":")) {
+            blahmessage = `:${blahmessage}`;
+        }
+        
         let split = blahmessage.split(":");
         let values = [];
         try {
@@ -480,10 +584,9 @@ function processBlah(blahmessage) {
         
         let valueslist = "";
         for (let i = 0; i < values.length; i++) {
-            let value = values[i];
-            valueslist+=`${values[i]}, `;
-            processBlah(value);
-    
+            let value = processBlah(values[i]);
+            valueslist+=`${value}, `;
+
             message = message.replaceAll(`{${i}}`, value);
         }
         valueslist = valueslist.slice(0, -2);
@@ -491,7 +594,6 @@ function processBlah(blahmessage) {
             
             message = message.replaceAll('{all}', valueslist);
         }
-    
         return message;
     }
     catch (e)
@@ -517,6 +619,8 @@ async function mainJS() {
     if (localStorage.getItem('lang') != null) {
         lang = localStorage.getItem('lang');
     }
+
+    await start();
 }
 username = localStorage.getItem('username');
 password = localStorage.getItem('password');
@@ -530,9 +634,14 @@ collapseGroupsBtn.addEventListener("click", () => {
     collapseGroupsBtn.classList.toggle("collapsed");
 });
 
-addDmBtn.addEventListener("click", () => {
+addDmBtn.addEventListener("click", async () => {
+    roomContentMain.style.transform = "scale(0.85)";
+    roomContentMain.style.opacity = "0";
+    await delay(200);
+    
     roomTopBar.innerHTML = "Invite to dm";
     roomDetailsBar.style.display = "none";
+    
     roomContentMain.innerHTML =
         `
         <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
@@ -551,10 +660,17 @@ addDmBtn.addEventListener("click", () => {
             </div>
         </div>
         `;
+    roomContentMain.style.transform = "";
+    roomContentMain.style.opacity = "";
 });
-addGroupBtn.addEventListener("click", () => {
+addGroupBtn.addEventListener("click", async () => {
+    roomContentMain.style.transform = "scale(0.85)";
+    roomContentMain.style.opacity = "0";
+    await delay(200);
+    
     roomTopBar.innerHTML = "Create group";
     roomDetailsBar.style.display = "none";
+    
     roomContentMain.innerHTML =
         `
         <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
@@ -573,6 +689,8 @@ addGroupBtn.addEventListener("click", () => {
             </div>
         </div>
         `;
+    roomContentMain.style.transform = "";
+    roomContentMain.style.opacity = "";
 });
 
 
@@ -608,7 +726,14 @@ sidebarInboxButton.addEventListener("mouseleave", () => {
 function gotoSideProfilePopup() {
     
 }
-function gotoCreateSpace() {
+function gotoInbox() {
+
+}
+async function gotoCreateSpace() {
+    roomContentMain.style.transform = "scale(0.85)";
+    roomContentMain.style.opacity = "0";
+    await delay(200);
+    
     roomTopBar.innerHTML = "Create space";
     roomDetailsBar.style.display = "none";
     roomContentMain.innerHTML =
@@ -629,6 +754,8 @@ function gotoCreateSpace() {
             </div>
         </div>
         `;
+    roomContentMain.style.transform = "";
+    roomContentMain.style.opacity = "";
 }
 function gotoHome() {