2022-04-09 04:45:47 +02:00
|
|
|
/*
|
|
|
|
========================================================================
|
|
|
|
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 r/placeAtlas2 contributors
|
|
|
|
|
|
|
|
Licensed under the GNU Affero General Public License Version 3
|
|
|
|
https://place-atlas.stefanocoding.me/license.txt
|
|
|
|
========================================================================
|
|
|
|
*/
|
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
function createInfoBlock(entry) {
|
2022-04-20 10:54:58 +02:00
|
|
|
function createInfoItem(name, value){
|
|
|
|
let entryParagraphPositionElement = document.createElement("div");
|
2022-04-06 15:29:40 +02:00
|
|
|
let nameElement = document.createElement("span");
|
2022-04-20 10:54:58 +02:00
|
|
|
nameElement.className = "fw-bold";
|
|
|
|
nameElement.innerText = name;
|
|
|
|
let valueElement = document.createElement("span");
|
|
|
|
valueElement.innerText = value;
|
|
|
|
entryParagraphPositionElement.appendChild(nameElement);
|
|
|
|
entryParagraphPositionElement.appendChild(valueElement);
|
|
|
|
return entryParagraphPositionElement;
|
|
|
|
}
|
|
|
|
function createInfoListItem(name, value){
|
|
|
|
let entryParagraphPositionElement = document.createElement("li");
|
|
|
|
entryParagraphPositionElement.className = "list-group-item";
|
|
|
|
let nameElement = document.createElement("span");
|
|
|
|
nameElement.className = "fw-bold";
|
2022-04-06 15:29:40 +02:00
|
|
|
nameElement.innerText = name;
|
|
|
|
let valueElement = document.createElement("span");
|
|
|
|
valueElement.innerText = value;
|
|
|
|
entryParagraphPositionElement.appendChild(nameElement);
|
|
|
|
entryParagraphPositionElement.appendChild(valueElement);
|
|
|
|
return entryParagraphPositionElement;
|
|
|
|
}
|
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
var element = document.createElement("div");
|
2022-04-20 10:54:58 +02:00
|
|
|
element.className = "card mb-2 overflow-hidden shadow";
|
2022-04-05 12:32:59 +02:00
|
|
|
|
2022-04-20 10:54:58 +02:00
|
|
|
let headerElement = document.createElement("h4");
|
|
|
|
headerElement.className = "card-header";
|
2022-04-05 12:32:59 +02:00
|
|
|
let linkElement = document.createElement("a");
|
2022-04-21 09:25:05 +02:00
|
|
|
linkElement.className = "text-decoration-none d-flex justify-content-between text-body";
|
2022-04-11 04:50:39 +02:00
|
|
|
linkElement.href = "#" + entry.id;
|
2022-04-20 10:54:58 +02:00
|
|
|
let linkNameElement = document.createElement("span");
|
|
|
|
linkNameElement.className = "flex-grow-1 text-break";
|
|
|
|
linkNameElement.innerText = entry.name;
|
2022-04-05 12:32:59 +02:00
|
|
|
headerElement.appendChild(linkElement);
|
2022-04-20 10:54:58 +02:00
|
|
|
linkElement.appendChild(linkNameElement);
|
2022-04-21 09:25:05 +02:00
|
|
|
linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary"></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>');
|
2022-04-05 12:32:59 +02:00
|
|
|
|
2022-04-20 10:54:58 +02:00
|
|
|
let bodyElement = document.createElement("div");
|
2022-04-05 12:32:59 +02:00
|
|
|
|
2022-04-20 10:54:58 +02:00
|
|
|
element.appendChild(headerElement);
|
|
|
|
element.appendChild(bodyElement);
|
2022-04-08 22:02:14 +02:00
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
if (entry.description) {
|
2022-04-20 10:54:58 +02:00
|
|
|
let descElement = document.createElement("div");
|
|
|
|
descElement.id = "objectDescription";
|
|
|
|
// descElement.innerText = entry.description;
|
|
|
|
descElement.innerHTML = '<p>' + entry.description.replace(/\n/g, '</p><p>');
|
|
|
|
bodyElement.appendChild(descElement);
|
2022-04-05 12:32:59 +02:00
|
|
|
}
|
2022-04-06 15:29:40 +02:00
|
|
|
|
2022-04-20 10:54:58 +02:00
|
|
|
let linkListElement = document.createElement("div");
|
|
|
|
if (entry.description || entry.website || entry.subreddit) {
|
|
|
|
bodyElement.className = "card-body d-flex flex-column gap-3";
|
|
|
|
|
|
|
|
if (entry.website || entry.subreddit) {
|
|
|
|
linkListElement.className = "d-flex flex-column gap-2";
|
|
|
|
bodyElement.appendChild(linkListElement);
|
|
|
|
}
|
2022-04-06 15:29:40 +02:00
|
|
|
}
|
2022-04-20 10:54:58 +02:00
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
if (entry.website) {
|
2022-04-20 10:54:58 +02:00
|
|
|
let websiteGroupElement = document.createElement("div");
|
|
|
|
websiteGroupElement.className = "btn-group";
|
|
|
|
linkListElement.appendChild(websiteGroupElement);
|
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
let websiteLinkElement = document.createElement("a");
|
2022-04-20 10:54:58 +02:00
|
|
|
websiteLinkElement.className = "btn btn-primary"
|
2022-04-05 12:32:59 +02:00
|
|
|
websiteLinkElement.target = "_blank";
|
|
|
|
websiteLinkElement.href = entry.website;
|
|
|
|
websiteLinkElement.innerText = "Website";
|
2022-04-20 10:54:58 +02:00
|
|
|
websiteGroupElement.appendChild(websiteLinkElement);
|
2022-04-05 12:32:59 +02:00
|
|
|
}
|
2022-04-20 10:54:58 +02:00
|
|
|
|
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
if (entry.subreddit) {
|
2022-04-20 10:54:58 +02:00
|
|
|
let subredditGroupElement = document.createElement("div");
|
|
|
|
subredditGroupElement.className = "btn-group-vertical";
|
|
|
|
linkListElement.appendChild(subredditGroupElement);
|
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
var subreddits = entry.subreddit.split(",");
|
|
|
|
|
|
|
|
for (var i in subreddits) {
|
|
|
|
var subreddit = subreddits[i].trim();
|
|
|
|
if (subreddit.substring(0, 2) == "r/") {
|
|
|
|
subreddit = "/" + subreddit;
|
|
|
|
} else if (subreddit.substring(0, 1) != "/") {
|
|
|
|
subreddit = "/r/" + subreddit;
|
|
|
|
}
|
|
|
|
let subredditLinkElement = document.createElement("a");
|
2022-04-20 10:54:58 +02:00
|
|
|
subredditLinkElement.className = "btn btn-primary text-truncate";
|
2022-04-05 12:32:59 +02:00
|
|
|
subredditLinkElement.target = "_blank";
|
2022-04-20 10:54:58 +02:00
|
|
|
subredditLinkElement.rel = "noopener noreferrer";
|
2022-04-05 12:32:59 +02:00
|
|
|
subredditLinkElement.href = "https://reddit.com" + subreddit;
|
|
|
|
subredditLinkElement.innerText = subreddit;
|
2022-04-20 10:54:58 +02:00
|
|
|
subredditGroupElement.appendChild(subredditLinkElement);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let 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";
|
2022-04-05 12:32:59 +02:00
|
|
|
}
|
2022-04-20 10:54:58 +02:00
|
|
|
listElement.appendChild(diffElement);
|
2022-04-05 12:32:59 +02:00
|
|
|
}
|
2022-04-20 10:54:58 +02:00
|
|
|
|
|
|
|
let [x, y] = entry.center;
|
|
|
|
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
|
|
|
|
|
|
|
|
if(entry.path){
|
|
|
|
let area = calcPolygonArea(entry.path);
|
|
|
|
listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`));
|
|
|
|
}
|
|
|
|
|
|
|
|
let idElement = createInfoItem("ID: ", entry.id);
|
|
|
|
let idElementContainer = document.createElement("div");
|
|
|
|
idElementContainer.className = "card-footer d-flex justify-content-between align-items-center";
|
|
|
|
idElementContainer.appendChild(idElement);
|
|
|
|
element.appendChild(idElementContainer);
|
|
|
|
|
|
|
|
let editElement = document.createElement("button");
|
|
|
|
editElement.type = "button";
|
|
|
|
editElement.innerText = "Edit";
|
|
|
|
editElement.className = "btn btn-sm btn-outline-primary";
|
|
|
|
editElement.href = "./?mode=draw&id=" + entry.id;
|
|
|
|
idElementContainer.appendChild(editElement);
|
|
|
|
|
2022-04-05 12:32:59 +02:00
|
|
|
|
|
|
|
return element;
|
|
|
|
}
|