mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-06-26 07:08:57 +02:00
Added preview button
Added another test entry
This commit is contained in:
mxdanger
parent
2fbd1afa66
commit
5634f58b8d
|
|
@ -16,14 +16,12 @@ const finishButton = document.getElementById("finishButton");
|
|||
const resetButton = document.getElementById("resetButton");
|
||||
const undoButton = document.getElementById("undoButton");
|
||||
const redoButton = document.getElementById("redoButton");
|
||||
const previewButton = document.getElementById("previewButton");
|
||||
const highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
||||
let entryId = 0
|
||||
|
||||
const objectInfoBox = document.getElementById("objectInfo");
|
||||
|
||||
var drawControlsBody = document.getElementById("offcanvasDraw-drawControls");
|
||||
var objectInfoBody = document.getElementById("offcanvasDraw-objectInfo");
|
||||
var objectInfoForm = document.getElementById("objectInfo");
|
||||
const drawControlsBody = document.getElementById("offcanvasDraw-drawControls");
|
||||
const objectInfoBody = document.getElementById("offcanvasDraw-objectInfo");
|
||||
const objectInfoForm = document.getElementById("objectInfo");
|
||||
|
||||
const hintText = document.getElementById("hint");
|
||||
|
||||
|
|
@ -50,6 +48,7 @@ const discordGroup = document.getElementById("discordGroup");
|
|||
const wikiGroup = document.getElementById("wikiGroup");
|
||||
const exportArea = document.getElementById("exportString");
|
||||
|
||||
let entryId = 0;
|
||||
let path = [];
|
||||
let center = [1000, 1000];
|
||||
|
||||
|
|
@ -219,6 +218,10 @@ function initDraw() {
|
|||
back();
|
||||
});
|
||||
|
||||
previewButton.addEventListener("click", function (e) {
|
||||
preview();
|
||||
});
|
||||
|
||||
// refocus on button when modal is closed
|
||||
exportModalElement.addEventListener('hidden.bs.modal', function() {
|
||||
document.getElementById("exportButton").focus();
|
||||
|
|
@ -238,7 +241,7 @@ function initDraw() {
|
|||
render(path);
|
||||
});
|
||||
|
||||
function exportJson() {
|
||||
function generateExportObject() {
|
||||
const exportObject = {
|
||||
id: entryId,
|
||||
name: nameField.value,
|
||||
|
|
@ -253,28 +256,34 @@ function initDraw() {
|
|||
for (let i = pathWithPeriodsTemp.length - 1; i > 0; i--) {
|
||||
for (let j = 0; j < i; j++) {
|
||||
if (JSON.stringify(pathWithPeriodsTemp[i][1]) === JSON.stringify(pathWithPeriodsTemp[j][1])) {
|
||||
pathWithPeriodsTemp[j][0] = pathWithPeriodsTemp[i][0] + ', ' + pathWithPeriodsTemp[j][0]
|
||||
pathWithPeriodsTemp.splice(i, 1)
|
||||
break
|
||||
pathWithPeriodsTemp[j][0] = pathWithPeriodsTemp[i][0] + ', ' + pathWithPeriodsTemp[j][0];
|
||||
pathWithPeriodsTemp.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pathWithPeriodsTemp.forEach(([key, value]) => {
|
||||
// TODO: Compress periods on something like 0-13, 14.
|
||||
exportObject.path[key] = value
|
||||
exportObject.center[key] = calculateCenter(value)
|
||||
exportObject.path[key] = value;
|
||||
exportObject.center[key] = calculateCenter(value);
|
||||
})
|
||||
|
||||
const inputWebsite = websiteGroupElements.map(element => element.value.trim()).filter(element => element);
|
||||
const inputSubreddit = subredditGroupElements.map(element => element.value.trim().replace(/(?:(?:(?:(?:https?:\/\/)?(?:(?:www|old|new|np)\.)?)?reddit\.com)?\/)?[rR]\/([A-Za-z0-9][A-Za-z0-9_]{2,20})(?:\/[^" ]*)*/, '$1')).filter(element => element);
|
||||
const inputSubreddit = subredditGroupElements.map(element => element.value.trim().replace(/(?:(?:(?:(?:https?:\/\/)?(?:(?:www|old|new|np)\.)?)?reddit\.com)?\/)?[rR]\/([A-Za-z0-9][A-Za-z0-9_]{0,20})(?:\/[^" ]*)*/, '$1')).filter(element => element);
|
||||
const inputDiscord = discordGroupElements.map(element => element.value.trim().replace(/(?:https?:\/\/)?(?:www\.)?(?:(?:discord)?\.?gg|discord(?:app?)\.com\/invite)\/([^\s/]+?)(?=\b)/, '$1')).filter(element => element);
|
||||
const inputWiki = wikiGroupElements.map(element => element.value.trim().replace(/ /g, '_')).filter(element => element);
|
||||
|
||||
if (inputWebsite.length) exportObject.links.website = inputWebsite
|
||||
if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit
|
||||
if (inputDiscord.length) exportObject.links.discord = inputDiscord
|
||||
if (inputWiki.length) exportObject.links.wiki = inputWiki
|
||||
if (inputWebsite.length) exportObject.links.website = inputWebsite;
|
||||
if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit;
|
||||
if (inputDiscord.length) exportObject.links.discord = inputDiscord;
|
||||
if (inputWiki.length) exportObject.links.wiki = inputWiki;
|
||||
|
||||
return exportObject;
|
||||
}
|
||||
|
||||
function exportJson() {
|
||||
const exportObject = generateExportObject()
|
||||
|
||||
let jsonString = JSON.stringify(exportObject, null, "\t");
|
||||
jsonString = jsonString.split("\n");
|
||||
|
|
@ -293,6 +302,13 @@ function initDraw() {
|
|||
exportModal.show();
|
||||
}
|
||||
|
||||
function preview() {
|
||||
let infoElement = createInfoBlock(generateExportObject(), true);
|
||||
objectsContainer.replaceChildren();
|
||||
objectsContainer.appendChild(infoElement);
|
||||
closeObjectsListButton.classList.remove("d-none");
|
||||
}
|
||||
|
||||
function undo() {
|
||||
if (path.length > 0 && drawing) {
|
||||
undoHistory.push(path.pop());
|
||||
|
|
@ -310,7 +326,7 @@ function initDraw() {
|
|||
}
|
||||
|
||||
function finish() {
|
||||
if (objectInfoBox.style.display === "block") return
|
||||
if (objectInfoForm.style.display === "block") return
|
||||
updatePath()
|
||||
drawing = false;
|
||||
disableDrawingOverride = true;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
========================================================================
|
||||
*/
|
||||
|
||||
function createInfoBlock(entry) {
|
||||
function createInfoBlock(entry, isPreview) {
|
||||
function createLabel(name, value, parent) {
|
||||
const nameElement = document.createElement("span");
|
||||
nameElement.className = "fw-bold";
|
||||
|
|
@ -38,7 +38,8 @@ function createInfoBlock(entry) {
|
|||
headerElement.className = "card-header";
|
||||
const linkElement = document.createElement("a");
|
||||
linkElement.className = "text-decoration-none d-flex justify-content-between text-body";
|
||||
linkElement.href = "#" + entry.id;
|
||||
if (isPreview) linkElement.href = "#";
|
||||
else linkElement.href = "#" + entry.id;
|
||||
const linkNameElement = document.createElement("span");
|
||||
linkNameElement.className = "flex-grow-1 text-break";
|
||||
linkNameElement.textContent = entry.name;
|
||||
|
|
@ -80,6 +81,7 @@ function createInfoBlock(entry) {
|
|||
listElement.appendChild(diffElement);
|
||||
}
|
||||
|
||||
if (!isPreview) {
|
||||
const [x, y] = entry.center;
|
||||
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
|
||||
|
||||
|
|
@ -87,8 +89,9 @@ function createInfoBlock(entry) {
|
|||
const area = calcPolygonArea(entry.path);
|
||||
listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`));
|
||||
}
|
||||
}
|
||||
|
||||
if (entry.links.subreddit.length) {
|
||||
if (entry.links.subreddit) {
|
||||
const subredditGroupElement = document.createElement("div");
|
||||
subredditGroupElement.className = "btn-group-vertical";
|
||||
linkListElement.appendChild(subredditGroupElement);
|
||||
|
|
@ -107,7 +110,7 @@ function createInfoBlock(entry) {
|
|||
});
|
||||
};
|
||||
|
||||
if (entry.links.website.length) {
|
||||
if (entry.links.website) {
|
||||
const websiteGroupElement = document.createElement("div");
|
||||
websiteGroupElement.className = "btn-group-vertical";
|
||||
linkListElement.appendChild(websiteGroupElement);
|
||||
|
|
@ -130,7 +133,7 @@ function createInfoBlock(entry) {
|
|||
});
|
||||
}
|
||||
|
||||
if (entry.links.discord.length) {
|
||||
if (entry.links.discord) {
|
||||
const discordGroupElement = document.createElement("div");
|
||||
discordGroupElement.className = "btn-group-vertical";
|
||||
linkListElement.appendChild(discordGroupElement);
|
||||
|
|
@ -148,7 +151,7 @@ function createInfoBlock(entry) {
|
|||
});
|
||||
}
|
||||
|
||||
if (entry.links.wiki.length) {
|
||||
if (entry.links.wiki) {
|
||||
const wikiGroupElement = document.createElement("div");
|
||||
wikiGroupElement.className = "btn-group-vertical";
|
||||
linkListElement.appendChild(wikiGroupElement);
|
||||
|
|
@ -175,7 +178,7 @@ function createInfoBlock(entry) {
|
|||
idElementContainer.appendChild(idElement);
|
||||
element.appendChild(idElementContainer);
|
||||
|
||||
if (!entry.diff || entry.diff !== "delete") {
|
||||
if (!isPreview && (!entry.diff || entry.diff !== "delete")) {
|
||||
const editElement = document.createElement("a");
|
||||
editElement.textContent = "Edit";
|
||||
editElement.className = "btn btn-sm btn-outline-primary";
|
||||
|
|
@ -184,13 +187,9 @@ function createInfoBlock(entry) {
|
|||
idElementContainer.appendChild(editElement);
|
||||
}
|
||||
|
||||
if (!linkListElement.hasChildNodes()) {
|
||||
linkListElement.remove();
|
||||
}
|
||||
|
||||
if (!bodyElement.hasChildNodes()) {
|
||||
bodyElement.remove();
|
||||
}
|
||||
if (!bodyElement.hasChildNodes()) bodyElement.remove();
|
||||
if (!linkListElement.hasChildNodes()) linkListElement.remove();
|
||||
if (!listElement.hasChildNodes()) listElement.remove();
|
||||
|
||||
return element;
|
||||
}
|
||||
|
|
@ -734,8 +734,6 @@ window.addEventListener("hashchange", highlightEntryFromUrl);
|
|||
|
||||
function highlightEntryFromUrl() {
|
||||
|
||||
const objectsContainer = document.getElementById("objectsList");
|
||||
|
||||
const id = window.location.hash.substring(1); //Remove hash prefix
|
||||
|
||||
const entries = atlas.filter(function (e) {
|
||||
|
|
|
|||
|
|
@ -2638,7 +2638,7 @@
|
|||
{"id": "twxs49", "submitted_by": "Breyck_version_2", "name": "Ralsei(chapter 2)", "description": "Ralsei is a fluffy goat prince with magical abilities. Special thank you to r/Deltarune for helping us a ton. The in-game sprite is very troublesome because of the weird shading, so that caused a lot of misunderstanding and griefing. Please dont add him red eyes.", "website": "", "subreddit": "/r/Ralsei", "center": [690.5, 796.5], "path": [[679.5, 780.5], [681.5, 784.5], [686.5, 780.5], [691.5, 781.5], [690.5, 778.5], [689.5, 776.5], [692.5, 775.5], [695.5, 781.5], [699.5, 780.5], [700.5, 782.5], [698.5, 786.5], [696.5, 788.5], [696.5, 791.5], [697.5, 796.5], [700.5, 800.5], [704.5, 800.5], [707.5, 802.5], [704.5, 806.5], [702.5, 808.5], [700.5, 808.5], [698.5, 807.5], [695.5, 808.5], [695.5, 810.5], [692.5, 814.5], [689.5, 816.5], [686.5, 815.5], [684.5, 814.5], [688.5, 811.5], [689.5, 810.5], [686.5, 810.5], [684.5, 808.5], [683.5, 807.5], [684.5, 804.5], [685.5, 802.5], [683.5, 800.5], [682.5, 802.5], [676.5, 801.5], [675.5, 799.5], [679.5, 796.5], [679.5, 794.5], [679.5, 791.5], [678.5, 786.5], [677.5, 784.5], [677.5, 781.5]]},
|
||||
{"id": "twxs1g", "submitted_by": "j8b8123", "name": "Welsh Sheep", "description": "Trail of Welsh Sheep featuring flags such as Eqypt (a r/Place neighbour and ally) and Ukraine, as well as partially griefed Pride sheep's such as a rainbow sheep", "website": "", "subreddit": "/r/Wales", "center": [23.5, 117.5], "path": [[5.5, 136.5], [0.5, 136.5], [0.5, 93.5], [43.5, 94.5], [44.5, 130.5], [51.5, 130.5], [53.5, 133.5], [57.5, 134.5], [57.5, 136.5], [40.5, 137.5], [39.5, 98.5], [5.5, 98.5], [5.5, 132.5], [39.5, 132.5], [39.5, 137.5], [0.5, 136.5], [0.5, 136.5], [1.5, 136.5], [0.5, 136.5], [0.5, 136.5], [0.5, 136.5]]},
|
||||
{"id": "twxrl1", "submitted_by": "SchneckchenAndy", "name": "Clustertruck Speedrunning", "description": "A truck from the game Clustertruck by Landfall Games. It was made in collaboration with the TeosGame community to represent the speedrunning community of Clustertruck.", "website": "https://www.speedrun.com/Clustertruck", "subreddit": "", "center": [1108.5, 1027.5], "path": [[1100.5, 1033.5], [1100.5, 1030.5], [1101.5, 1030.5], [1101.5, 1026.5], [1108.5, 1019.5], [1115.5, 1019.5], [1115.5, 1027.5], [1114.5, 1027.5], [1114.5, 1030.5], [1112.5, 1030.5], [1112.5, 1032.5], [1108.5, 1032.5], [1108.5, 1034.5], [1100.5, 1034.5]]},
|
||||
{"id": "twxreq", "submitted_by": "StuckeyIRL", "name": "Factorio Locomotive", "description": "A blue-dyed locomotive from the videogame Factorio. This project on r/place was meant to incorperate several communities in cargo wagons but was limited due to space. The front of the locomotive is also cropped because a streamer expanded Mexico.", "website": "https://www.factorio.com/", "subreddit": "/r/factorio", "center": [529.5, 1198.5], "path": [[554.5, 1187.5], [522.5, 1187.5], [522.5, 1186.5], [510.5, 1186.5], [510.5, 1187.5], [504.5, 1187.5], [504.5, 1203.5], [509.5, 1203.5], [509.5, 1209.5], [554.5, 1209.5]]},
|
||||
{"id":"twxreq","name":"Factorio Locomotive","description":"A blue-dyed locomotive from the videogame Factorio. This project on r/place was meant to incorporate several communities in cargo wagons but was limited due to space.\n\nThe front of the locomotive is also cropped because a streamer expanded Mexico.","links":{"website":["https://www.factorio.com/"],"subreddit":["factorio"],"discord":["factorio"]},"center":{"152-164":[539.5,1198.5],"0-151, T:0":[550.5,1198.5]},"path":{"152-164":[[554.5,1187.5],[522.5,1187.5],[522.5,1186.5],[510.5,1186.5],[510.5,1187.5],[504.5,1187.5],[504.5,1203.5],[509.5,1203.5],[509.5,1209.5],[554.5,1209.5]],"0-151, T:0":[[522.5,1187.5],[522.5,1186.5],[510.5,1186.5],[510.5,1187.5],[504.5,1187.5],[504.5,1203.5],[509.5,1203.5],[509.5,1209.5],[565.5,1209.5],[569.5,1205.5],[569.5,1198.5],[568.5,1197.5],[565.5,1197.5],[565.5,1192.5],[563.5,1192.5],[560.5,1189.5],[558.5,1189.5],[558.5,1187.5]]}},
|
||||
{"id": "twxrdg", "submitted_by": "Firanka", "name": "Gail Phoenotopia", "description": "The protagonist of the game Phoenotopia: Awakening.", "website": "https://phoenotopia.com", "subreddit": "/r/phoenotopia", "center": [1875.5, 1242.5], "path": [[1874.5, 1235.5], [1875.5, 1235.5], [1876.5, 1236.5], [1879.5, 1239.5], [1879.5, 1242.5], [1878.5, 1243.5], [1880.5, 1246.5], [1878.5, 1246.5], [1878.5, 1247.5], [1876.5, 1249.5], [1875.5, 1248.5], [1874.5, 1249.5], [1873.5, 1248.5], [1872.5, 1247.5], [1870.5, 1246.5], [1872.5, 1244.5], [1872.5, 1242.5], [1871.5, 1242.5], [1871.5, 1240.5], [1871.5, 1239.5], [1873.5, 1237.5], [1876.5, 1237.5], [1874.5, 1237.5], [1875.5, 1237.5], [1874.5, 1237.5], [1875.5, 1237.5], [1875.5, 1237.5], [1875.5, 1237.5]]},
|
||||
{"id": "twxrbk", "submitted_by": "GeheimLeise", "name": "Squirtle Squad", "description": "A sprite of the Pokémon Squirtle from Pokémon Mystery Dungeon: Red/Blue Rescue Team, placed by a private friend group who uses it as a Discord server icon.", "website": "https://bulbapedia.bulbagarden.net/wiki/Squirtle_(Pok%C3%A9mon)", "subreddit": "", "center": [1710.5, 1445.5], "path": [[1714.5, 1439.5], [1705.5, 1439.5], [1704.5, 1447.5], [1703.5, 1447.5], [1703.5, 1449.5], [1705.5, 1450.5], [1717.5, 1450.5], [1716.5, 1449.5], [1715.5, 1448.5], [1716.5, 1447.5], [1716.5, 1443.5], [1715.5, 1442.5], [1714.5, 1440.5]]},
|
||||
{"id": "twxrbb", "submitted_by": "Chemistry-Honest", "name": "The friendship cube", "description": "A cube representing a small group of friends", "website": "", "subreddit": "", "center": [762.5, 1578.5], "path": [[762.5, 1578.5], [762.5, 1578.5], [762.5, 1578.5], [762.5, 1578.5]]},
|
||||
|
|
|
|||
|
|
@ -332,18 +332,16 @@ <h6>Need Help?</h6>
|
|||
</a>
|
||||
</label>
|
||||
<div id="wikiGroup" class="mb-3 d-flex flex-column gap-2"></div>
|
||||
<div id="infoButtons" class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-secondary w-50" id="cancelButton">Back</button>
|
||||
<button type="submit" class="btn btn-primary w-50" id="exportButton">Ok</button>
|
||||
<div id="infoButtons" class="d-flex flex-wrap gap-2">
|
||||
<button type="button" class="btn btn-secondary flex-fill" id="cancelButton">Back</button>
|
||||
<button type="button" class="btn btn-secondary flex-fill" id="previewButton">Preview</button>
|
||||
<button type="submit" class="btn btn-primary flex-fill" id="exportButton">Export</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow" aria-label="Close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
|
||||
<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
|
||||
</svg>
|
||||
<button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow p-0" aria-label="Close">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
<div id="objectsList" class="p-2"></div>
|
||||
<span id="objectsListOverflowNotice" class="p-2 me-2 btn-primary rounded text-center d-none">Click the map to lock your selection</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue