diff options
Diffstat (limited to 'app/banner.js')
| -rw-r--r-- | app/banner.js | 163 |
1 files changed, 163 insertions, 0 deletions
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 ? " " : ""} + </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> "} + </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 |