mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-11-16 23:12:15 +01:00
da47e0f3a8
Code-only periods (such as T, excluding default even though it is possible) will take the default value.
200 lines
No EOL
9.3 KiB
JavaScript
200 lines
No EOL
9.3 KiB
JavaScript
/*
|
|
========================================================================
|
|
The 2022 r/place Atlas
|
|
|
|
An atlas of Reddit's 2022 r/place, with information to each
|
|
artwork of the canvas provided by the community.
|
|
|
|
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
|
|
Copyright (c) 2022 Place Atlas contributors
|
|
|
|
Licensed under the GNU Affero General Public License Version 3
|
|
https://place-atlas.stefanocoding.me/license.txt
|
|
========================================================================
|
|
*/
|
|
|
|
function createInfoBlock(entry, isPreview) {
|
|
function createLabel(name, value, parent) {
|
|
const nameElement = document.createElement("span");
|
|
nameElement.className = "fw-bold";
|
|
nameElement.textContent = name;
|
|
const valueElement = document.createElement("span");
|
|
valueElement.textContent = value;
|
|
parent.appendChild(nameElement);
|
|
parent.appendChild(valueElement);
|
|
return parent;
|
|
}
|
|
function createInfoListItem(name, value) {
|
|
const entryInfoListElement = document.createElement("li");
|
|
entryInfoListElement.className = "list-group-item";
|
|
createLabel(name, value, entryInfoListElement);
|
|
return entryInfoListElement;
|
|
}
|
|
|
|
const element = document.createElement("div");
|
|
element.className = "card mb-2 overflow-hidden shadow";
|
|
|
|
const headerElement = document.createElement("h4");
|
|
headerElement.className = "card-header";
|
|
|
|
const linkElement = document.createElement("a");
|
|
linkElement.className = "text-decoration-none d-flex justify-content-between text-body";
|
|
if (isPreview) linkElement.href = "#";
|
|
else {
|
|
let targetPeriod = formatPeriod(currentPeriod, currentPeriod, currentVariation)
|
|
linkElement.href = "#" + entry.id
|
|
if (targetPeriod !== defaultPeriod) linkElement.href += "/" + targetPeriod
|
|
};
|
|
const linkNameElement = document.createElement("span");
|
|
linkNameElement.className = "flex-grow-1 text-break";
|
|
linkNameElement.textContent = entry.name;
|
|
headerElement.appendChild(linkElement);
|
|
linkElement.appendChild(linkNameElement);
|
|
linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary" aria-hidden="true"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>');
|
|
element.appendChild(headerElement);
|
|
|
|
const bodyElement = document.createElement("div");
|
|
bodyElement.className = "card-body d-flex flex-column gap-3";
|
|
element.appendChild(bodyElement);
|
|
|
|
if (entry.description) {
|
|
const descElement = document.createElement("div");
|
|
descElement.id = "objectDescription";
|
|
let formattedDesc = entry.description.replace(/\n{2}/g, '</p><p>');
|
|
formattedDesc = formattedDesc.replace(/\n/g, '<br>');
|
|
descElement.innerHTML = '<p>' + formattedDesc + '</p>';
|
|
bodyElement.appendChild(descElement);
|
|
}
|
|
|
|
const linkListElement = document.createElement("div");
|
|
linkListElement.className = "d-flex flex-column gap-2";
|
|
bodyElement.appendChild(linkListElement);
|
|
|
|
const listElement = document.createElement("ul");
|
|
listElement.className = "list-group list-group-flush";
|
|
element.appendChild(listElement);
|
|
|
|
if (entry.diff) {
|
|
let diffElement = createInfoListItem("Diff: ", entry.diff);
|
|
if (entry.diff == "add") {
|
|
diffElement.className = "list-group-item list-group-item-success";
|
|
} else if (entry.diff == "edit") {
|
|
diffElement.className = "list-group-item list-group-item-warning";
|
|
} else if (entry.diff == "delete") {
|
|
diffElement.className = "list-group-item list-group-item-danger";
|
|
}
|
|
listElement.appendChild(diffElement);
|
|
}
|
|
|
|
if (!isPreview) {
|
|
const [x, y] = entry.center;
|
|
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
|
|
|
|
if(entry.path){
|
|
const area = calcPolygonArea(entry.path);
|
|
listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`));
|
|
}
|
|
}
|
|
|
|
if (!(entry.links.subreddit === undefined || entry.links.subreddit.length == 0)) {
|
|
const subredditGroupElement = document.createElement("div");
|
|
subredditGroupElement.className = "btn-group-vertical";
|
|
linkListElement.appendChild(subredditGroupElement);
|
|
|
|
entry.links.subreddit.forEach(subreddit => {
|
|
if (subreddit) {
|
|
subreddit = "r/" + subreddit;
|
|
const subredditLinkElement = document.createElement("a");
|
|
subredditLinkElement.className = "btn btn-primary text-truncate";
|
|
subredditLinkElement.target = "_blank";
|
|
subredditLinkElement.rel = "noopener noreferrer";
|
|
subredditLinkElement.href = "https://reddit.com/" + subreddit;
|
|
subredditLinkElement.innerHTML = `<i class="bi bi-reddit" aria-hidden="true"></i> ${subreddit}`;
|
|
subredditGroupElement.appendChild(subredditLinkElement);
|
|
}
|
|
});
|
|
};
|
|
|
|
if (!(entry.links.website === undefined || entry.links.website.length == 0)) {
|
|
const websiteGroupElement = document.createElement("div");
|
|
websiteGroupElement.className = "btn-group-vertical";
|
|
linkListElement.appendChild(websiteGroupElement);
|
|
|
|
entry.links.website.forEach(link => {
|
|
if (link) {
|
|
const websiteLinkElement = document.createElement("a");
|
|
websiteLinkElement.className = "btn btn-primary text-truncate"
|
|
websiteLinkElement.target = "_blank";
|
|
websiteLinkElement.rel = "noopener noreferrer";
|
|
websiteLinkElement.href = link;
|
|
try {
|
|
const urlObject = new URL(link)
|
|
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> ${urlObject.hostname.replace("www.", "")}`
|
|
} catch (e) {
|
|
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> Website`;
|
|
}
|
|
websiteGroupElement.appendChild(websiteLinkElement);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!(entry.links.discord === undefined || entry.links.discord.length == 0)) {
|
|
const discordGroupElement = document.createElement("div");
|
|
discordGroupElement.className = "btn-group-vertical";
|
|
linkListElement.appendChild(discordGroupElement);
|
|
|
|
entry.links.discord.forEach(link => {
|
|
if (link) {
|
|
const discordLinkElement = document.createElement("a");
|
|
discordLinkElement.className = "btn btn-primary text-truncate"
|
|
discordLinkElement.target = "_blank";
|
|
discordLinkElement.rel = "noopener noreferrer";
|
|
discordLinkElement.href = "https://discord.gg/" + link;
|
|
discordLinkElement.innerHTML = `<i class="bi bi-discord" aria-hidden="true"></i> ${link}`;
|
|
discordGroupElement.appendChild(discordLinkElement);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (!(entry.links.wiki === undefined || entry.links.wiki.length == 0)) {
|
|
const wikiGroupElement = document.createElement("div");
|
|
wikiGroupElement.className = "btn-group-vertical";
|
|
linkListElement.appendChild(wikiGroupElement);
|
|
|
|
entry.links.wiki.forEach(link => {
|
|
if (link) {
|
|
const wikiLinkElement = document.createElement("a");
|
|
wikiLinkElement.className = "btn btn-primary text-truncate"
|
|
wikiLinkElement.target = "_blank";
|
|
wikiLinkElement.rel = "noopener noreferrer";
|
|
wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_');
|
|
wikiLinkElement.innerHTML = `<i class="bi bi-book" aria-hidden="true"></i> Wiki Article`;
|
|
wikiGroupElement.appendChild(wikiLinkElement);
|
|
}
|
|
});
|
|
}
|
|
|
|
const idElement = document.createElement("div");
|
|
idElement.className = "py-1";
|
|
createLabel("ID: ", entry.id, idElement);
|
|
|
|
const idElementContainer = document.createElement("div");
|
|
idElementContainer.className = "card-footer d-flex justify-content-between align-items-center";
|
|
idElementContainer.appendChild(idElement);
|
|
element.appendChild(idElementContainer);
|
|
|
|
if (!isPreview && (!entry.diff || entry.diff !== "delete")) {
|
|
const editElement = document.createElement("a");
|
|
editElement.textContent = "Edit";
|
|
editElement.className = "btn btn-sm btn-outline-primary";
|
|
editElement.href = "./?mode=draw&id=" + entry.id
|
|
editElement.title = "Edit " + entry.name;
|
|
idElementContainer.appendChild(editElement);
|
|
}
|
|
|
|
if (!bodyElement.hasChildNodes()) bodyElement.remove();
|
|
if (!linkListElement.hasChildNodes()) linkListElement.remove();
|
|
if (!listElement.hasChildNodes()) listElement.remove();
|
|
|
|
return element;
|
|
} |