From a2df9a69dcc14cb70118cda2ded499055e7ee358 Mon Sep 17 00:00:00 2001
From: Minteck <contact@minteck.org>
Date: Sun, 21 Aug 2022 17:31:56 +0200
Subject: m. update

---
 app/banner.js | 163 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 163 insertions(+)
 create mode 100644 app/banner.js

(limited to 'app/banner.js')

diff --git a/app/banner.js b/app/banner.js
new file mode 100644
index 0000000..6daa2b7
--- /dev/null
+++ b/app/banner.js
@@ -0,0 +1,163 @@
+// noinspection JSUnresolvedVariable
+
+function timeAgo(time) {
+    if (!isNaN(parseInt(time))) {
+        time = new Date(time).getTime();
+    }
+
+    let periods = ["second", "minute", "hour", "day", "week", "month", "year", "age"];
+    let lengths = ["60", "60", "24", "7", "4.35", "12", "100"];
+
+    let now = new Date().getTime();
+
+    let difference = Math.round((now - time) / 1000);
+    let tense;
+    let period;
+
+    if (difference <= 10 && difference >= 0) {
+        return tense = "now";
+    } else if (difference > 0) {
+        tense = "ago";
+    } else {
+        tense = "later";
+    }
+
+    let j;
+
+    for (j = 0; difference >= lengths[j] && j < lengths.length - 1; j++) {
+        difference /= lengths[j];
+    }
+
+    difference = Math.round(difference);
+
+    period = periods[j] + (difference > 1 ? "s" : '');
+    return `${difference} ${period} ${tense}`;
+}
+
+async function refreshBanner(offline) {
+    if (!offline) offline = false;
+
+    let data = window.currentMemberData;
+    let index;
+
+    if (data['last_fronted'] && data['last_fronted']['timestamp']) {
+        data['last_fronted']['relative'] = timeAgo(currentMemberData.last_fronted.timestamp * 1000);
+    }
+
+    if (data.id === "scootaloo" && new Date().getDay() % 2 === 0) {
+        data['relations']['marefriends'] = data['relations']['marefriends'].reverse();
+    }
+
+    if (offline) {
+        let images = JSON.parse(await localforage.getItem("images"));
+
+        index = 0;
+        for (let species of data['species']) {
+            data['species'][index]["icon_offline"] = images.misc.species[species['id']];
+            index++;
+        }
+
+        index = 0;
+        for (let relation of data['relations']['marefriends']) {
+            data['relations']['marefriends'][index]["icon_offline"] = images.ponytown[relation['id'].split("/")[0]][relation['id'].split("/")[1]];
+            index++;
+        }
+
+        index = 0;
+        for (let relation of data['relations']['sisters']) {
+            data['relations']['sisters'][index]["icon_offline"] = images.ponytown[relation['id'].split("/")[0]][relation['id'].split("/")[1]];
+            index++;
+        }
+
+        if (data['relations']['caretakers']) {
+            index = 0;
+            for (let relation of data['relations']['caretakers']) {
+                data['relations']['caretakers'][index]["icon_offline"] = images.ponytown[relation['id'].split("/")[0]][relation['id'].split("/")[1]];
+                index++;
+            }
+        }
+
+        data['system']['icon_offline'] = images.misc.systems[data['system']['icon']];
+    }
+
+    document.getElementById("member-banner").innerHTML = `
+
+<div id="system-info" style="border:1px solid #${data['color']};background:rgba(255, 255, 255, .1);border-radius:10px;display:grid;grid-template-columns: 128px 1fr;">
+    <div style="margin:10px;width:100%;display:flex;align-items: center;justify-content: center;">
+        <img id="member-icon" src="${offline ? JSON.parse(await localforage.getItem("images")).profile[data['icon']['offline'].split(".")[0].split("-")[1]][data['icon']['offline'].split(".")[0].split("-")[2]] : data['icon']['online']}" alt="" style="background-color:rgba(255, 255, 255, .125);width:128px;height:128px;border-radius:5px;">
+    </div>
+    
+    <div style="padding:10px 10px 10px 20px;text-align:center;">
+        <h3 style="margin-bottom:0;">
+            ${data['name']}
+        </h3>
+        
+        <div style="margin-bottom:0.5rem;">
+            ${data['badges'].map(i => i.html).join(" ")}
+            ${data['badges'].length === 0 ? "&nbsp;" : ""}
+        </div>
+        
+        <div style="display:grid;grid-template-columns: repeat(${data['median'] ? 4 : 5}, 1fr);" id="member-card">
+            <span>
+                <b>Prefix${data['prefixes'].length > 1 ? 'es' : ''}: </b>
+                <code style="color: white;">${data['prefixes'].join('</code>, <code style="color: white;">')}</code>
+            </span>
+            <span>
+                <b>Pronouns: </b>
+                ${data['pronouns']}
+            </span>
+            ${!data['median'] ? `
+            <span>
+                <b>Last fronted: </b>
+                ${data['last_fronted'] ? `
+                    ${data['last_fronted']['now'] ? `
+                        Right now<br>
+                        (started <span class="relative-time" data-relative-timestamp="${data['last_fronted']['timestamp']}">${data['last_fronted']['relative']}</span>)
+                    ` : `
+                        <span class="relative-time" data-relative-timestamp="${data['last_fronted']['timestamp']}">${data['last_fronted']['relative']}</span><br>
+                        (for ${data['last_fronted']['duration']['pretty']})
+                    `}
+                ` : "A long time ago<br>&nbsp;"}
+            </span>
+            ` : ''}
+            <span>
+                <span style="vertical-align: middle;position:relative;top:-5px;"><b>Species: </b></span>
+                ${data['species'].map(species => `
+                    <img data-bs-toggle="tooltip" title="${species['name']}" style="width:32px;vertical-align: middle;position:relative;top:-5px;" src="${offline ? species['icon_offline'] : `/assets/species/${species['icon']}`}" alt="${species['name']}">
+                `).join("")}
+            </span>
+            <span>
+                <b>System: </b>
+                <a class="member-link" href="${data['system']['page']}"><img style="width:24px;border-radius:5px;" src="${offline ? data['system']['icon_offline'] : `/assets/uploads/${data['system']['icon']}`}"> ${data['system']['name']}</a>
+                ${data['system']['subsystem'] ? `
+                    <br><b>Subsystem: </b><a class="member-link" href="${data['system']['subsystem']['page']}"><img style="width:24px;border-radius:5px;" src="/assets/uploads/${data['system']['subsystem']['icon']}"> ${data['system']['subsystem']['name']}</a>
+                ` : data['system']['temporary'] ? '<br>(temporary)' : ''}
+            </span>
+        </div>
+        <div style="display:grid;grid-template-columns: repeat(${data["little"] ? "3" : "2"}, 1fr);margin-top:5px;">
+            <span>
+                <b>Marefriend${data['relations']['sisters'].length > 1 ? 's' : ''}: </b>${data['relations']['marefriends'].length > 1 ? '<span class="list-separator-mobile"><br></span>' : ''}
+                ${data['relations']['marefriends'].map(relation => `
+                    <a class="member-link" href="${relation['link']}"><img src="${offline ? relation['icon_offline'] : `/assets/uploads/${relation['icon']}`}" style="width:24px;"> ${relation['name']}</a>`).join(`<span class="list-separator-desktop">, </span><span class="list-separator-mobile"><br></span>`)}
+                ${data['relations']['marefriends'].length === 0 ? '-' : ''}
+            </span>
+            <span>
+                <b>Sister${data['relations']['sisters'].length > 1 ? 's' : ''}: </b>${data['relations']['sisters'].length > 1 ? '<span class="list-separator-mobile"><br></span>' : ''}
+                ${data['relations']['sisters'].map(relation => `
+                    <a class="member-link" href="${relation['link']}"><img src="${offline ? relation['icon_offline'] : `/assets/uploads/${relation['icon']}`}" style="width:24px;"> ${relation['name']}</a>`).join(`<span class="list-separator-desktop">, </span><span class="list-separator-mobile"><br></span>`)}
+                ${data['relations']['sisters'].length === 0 ? '-' : ''}
+            </span>
+            ${data['little'] ? `
+                <span>
+                    <b>Caretaker${data['relations']['sisters'].length > 1 ? 's' : ''}: </b>${data['relations']['caretakers'].length > 1 ? '<span class="list-separator-mobile"><br></span>' : ''}
+                    ${data['relations']['caretakers'].map(relation => `
+                        <a class="member-link" href="${relation['link']}"><img src="${offline ? relation['icon_offline'] : `/assets/uploads/${relation['icon']}`}" style="width:24px;"> ${relation['name']}</a>`).join(`<span class="list-separator-desktop">, </span><span class="list-separator-mobile"><br></span>`)}
+                    ${data['relations']['caretakers'].length === 0 ? '-' : ''}
+                </span>
+            ` : ''}
+        </div>
+    </div>
+</div>
+
+`;
+}
\ No newline at end of file
-- 
cgit