Use form validator for preview button

Updated test entries to just the variant code "T" instead of "T:"
This commit is contained in:
mxdanger 2022-04-29 15:58:56 -07:00
parent 49f0e631cb
commit 55bc870531
5 changed files with 37 additions and 33 deletions

View file

@ -200,6 +200,10 @@ @media (max-width: 540px) {
}
}
#objectInfo textarea {
resize: none;
}
#objectDescription p {
margin-bottom: 0.5rem;
}
@ -294,10 +298,12 @@ body[data-init-done] #timeControlsTooltip[data-force-visible] {
}
#timeControlsSlider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 0.75rem;
height: 1.5rem;
margin-top: -0.25rem;
border-radius: .25rem;
border-radius: .25rem !important;
outline: 1px solid var(--bs-body-bg);
}
@ -310,7 +316,7 @@ #timeControlsSlider::-moz-range-thumb {
width: 0.75rem;
height: 1.5rem;
margin-top: -0.25rem;
border-radius: .25rem;
border-radius: .25rem !important;
outline: 1px solid var(--bs-body-bg);
}

View file

@ -16,7 +16,6 @@ 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");
const drawControlsBody = document.getElementById("offcanvasDraw-drawControls");
@ -223,25 +222,22 @@ function initDraw() {
back();
});
previewButton.addEventListener("click", function() {
preview();
});
// refocus on button when modal is closed
// Refocus on button when modal is closed
exportModalElement.addEventListener('hidden.bs.modal', function() {
document.getElementById("exportButton").focus();
});
exportModalElement.addEventListener('shown.bs.modal', function() {
document.getElementById("exportButton").focus();
exportButton.focus();
});
objectInfoForm.addEventListener('submit', function(e) {
e.preventDefault()
exportJson()
// Allows for html form validation with preview button
if (e.submitter.value == "preview") {
preview()
} else {
exportJson()
}
});
document.getElementById("highlightUncharted").addEventListener("click", function(e){
document.getElementById("highlightUncharted").addEventListener("click", function(){
highlightUncharted = this.checked;
render(path);
});
@ -331,12 +327,11 @@ function initDraw() {
}
function finish() {
if (objectInfoForm.style.display === "block") return
updatePath()
drawing = false;
disableDrawingOverride = true;
objectInfoBody.removeAttribute("style");
drawControlsBody.style.display = "none";
objectInfoBody.classList.remove("d-none");
drawControlsBody.classList.add("d-none");
[...document.querySelectorAll("#objectInfo textarea")].forEach(el => {
if (el.value) el.style.height = (el.scrollHeight) + "px"
})
@ -357,8 +352,8 @@ function initDraw() {
undoHistory = [];
drawing = true;
disableDrawingOverride = false;
objectInfoBody.style.display = "none";
drawControlsBody.removeAttribute("style");
objectInfoBody.classList.add("d-none");
drawControlsBody.classList.remove("d-none");
// Blanks input values
nameField.value = "";
@ -394,8 +389,11 @@ function initDraw() {
drawing = true;
disableDrawingOverride = false;
updatePath()
objectInfoBody.style.display = "none";
drawControlsBody.removeAttribute("style");
objectInfoBody.classList.add("d-none");
drawControlsBody.classList.remove("d-none");
// Clears preview
objectsContainer.replaceChildren();
closeObjectsListButton.classList.add("d-none");
}
function renderBackground() {
@ -762,7 +760,7 @@ function calculateCenter(path) {
function initPeriodGroups() {
periodGroupElements = []
periodGroups.textContent = ''
periodGroups.replaceChildren();
pathWithPeriods.forEach(([period, path], index) => {
const periodGroupEl = periodGroupTemplate.cloneNode(true)

View file

@ -129,7 +129,7 @@ function createInfoBlock(entry, isPreview) {
websiteLinkElement.href = link;
try {
const urlObject = new URL(link)
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> ${urlObject.hostname.replace("www.", "")}`
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`;
}

View file

@ -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","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":"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":[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":[[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]]},
@ -5588,7 +5588,7 @@
{"id": "txic04", "submitted_by": "RKaider", "name": "Sprout Icon", "description": "A status icon given to any new player joining in FFXIV.", "website": "", "subreddit": "/r/FFXIV", "center": [1278.5, 490.5], "path": [[1273.5, 488.5], [1283.5, 488.5], [1283.5, 491.5], [1278.5, 492.5], [1273.5, 491.5], [1273.5, 488.5]]},
{"id": "txibzj", "submitted_by": "SpaceDragon_", "name": "Schneckchen", "description": "The Mascot of the German YouTuber Maudado", "website": "https://www.youtube.com/c/maudado", "subreddit": "/r/maudadomememittwoch", "center": [1615.5, 399.5], "path": [[1612.5, 392.5], [1618.5, 392.5], [1618.5, 405.5], [1612.5, 405.5], [1612.5, 392.5]]},
{"id": "txibw6", "submitted_by": "SamiTheAnxiousBean", "name": "The right Baba", "description": "Created on a whim to fill up space between Niko and Lia this cat started off as Baba (from indie puzzle game Baba is you) however passerbys and other users thought the sprite eyes were missplaced pixels, after attempting to fix it for a while most gave up as they didn't want a repeat of the niko roomba situation, blush was shortly added aswell as the cat to the left to fill up space between Lia and Basil", "website": "", "subreddit": "/r/BabaIsYou", "center": [910.5, 277.5], "path": [[906.5, 280.5], [906.5, 279.5], [905.5, 278.5], [905.5, 277.5], [905.5, 276.5], [905.5, 275.5], [906.5, 275.5], [906.5, 274.5], [907.5, 273.5], [908.5, 274.5], [909.5, 273.5], [910.5, 273.5], [911.5, 273.5], [912.5, 274.5], [913.5, 275.5], [914.5, 276.5], [914.5, 278.5], [914.5, 280.5]]},
{"id": "txibq9", "submitted_by": "DFCMarxVideos", "name": "osu!", "description": "osu! is a rhythm game that started in 2007. In 2017, the osu! logo was one of the most long-lasting, organized, well-maintained and griefed logos, and continued its trend in 2022. Despite multiple raids and griefs, the osu! community has proved it to be indestructable, deserving its huge chunk on the original canvas.", "website": "https://osu.ppy.sh", "subreddit": "/r/osuplace", "center": {"1-164, T:0-2": [727.5, 727.5]}, "path": {"1-164, T:0-2": [[727.5, 679.5], [708.5, 681.5], [697.5, 687.5], [688.5, 696.5], [678.5, 712.5], [678.5, 735.5], [680.5, 743.5], [685.5, 757.5], [705.5, 772.5], [728.5, 778.5], [752.5, 771.5], [771.5, 750.5], [770.5, 735.5], [778.5, 735.5], [774.5, 711.5], [764.5, 694.5], [752.5, 683.5], [739.5, 679.5], [728.5, 679.5]]}},
{"id": "txibq9", "submitted_by": "DFCMarxVideos", "name": "osu!", "description": "osu! is a rhythm game that started in 2007. In 2017, the osu! logo was one of the most long-lasting, organized, well-maintained and griefed logos, and continued its trend in 2022. Despite multiple raids and griefs, the osu! community has proved it to be indestructable, deserving its huge chunk on the original canvas.", "website": "https://osu.ppy.sh", "subreddit": "/r/osuplace", "center": {"1-164, T": [727.5, 727.5]}, "path": {"1-164, T": [[727.5, 679.5], [708.5, 681.5], [697.5, 687.5], [688.5, 696.5], [678.5, 712.5], [678.5, 735.5], [680.5, 743.5], [685.5, 757.5], [705.5, 772.5], [728.5, 778.5], [752.5, 771.5], [771.5, 750.5], [770.5, 735.5], [778.5, 735.5], [774.5, 711.5], [764.5, 694.5], [752.5, 683.5], [739.5, 679.5], [728.5, 679.5]]}},
{"id": "txiau2", "submitted_by": "BuzzLightr", "name": "Brads gazebo", "description": "Twitch stream dedicated to GameStop", "website": "https://www.twitch.tv/bradsgazebo", "subreddit": "", "center": [920.5, 892.5], "path": [[912.5, 888.5], [912.5, 888.5], [910.5, 887.5], [910.5, 896.5], [929.5, 897.5], [929.5, 887.5], [910.5, 887.5]]},
{"id": "txialo", "submitted_by": "LostDog_88", "name": "Lord Hanuman", "description": "One of the gods from the Hindu tradition, Hanuman was a humble servant of Lord Ram.", "website": "https://en.wikipedia.org/wiki/Hanuman", "subreddit": "/r/IndiaPlace", "center": [1243.5, 329.5], "path": [[1217.5, 330.5], [1224.5, 330.5], [1223.5, 331.5], [1224.5, 332.5], [1224.5, 333.5], [1232.5, 333.5], [1232.5, 324.5], [1233.5, 322.5], [1235.5, 320.5], [1236.5, 320.5], [1239.5, 324.5], [1239.5, 329.5], [1244.5, 325.5], [1244.5, 323.5], [1245.5, 322.5], [1249.5, 322.5], [1249.5, 327.5], [1244.5, 327.5], [1244.5, 328.5], [1242.5, 328.5], [1242.5, 329.5], [1241.5, 329.5], [1241.5, 330.5], [1240.5, 331.5], [1251.5, 331.5], [1251.5, 330.5], [1253.5, 330.5], [1253.5, 328.5], [1255.5, 328.5], [1258.5, 325.5], [1259.5, 324.5], [1260.5, 323.5], [1263.5, 321.5], [1263.5, 319.5], [1266.5, 319.5], [1266.5, 321.5], [1263.5, 321.5], [1260.5, 324.5], [1255.5, 328.5], [1255.5, 333.5], [1264.5, 333.5], [1264.5, 325.5], [1266.5, 325.5], [1269.5, 326.5], [1267.5, 327.5], [1268.5, 328.5], [1265.5, 328.5], [1265.5, 333.5], [1264.5, 334.5], [1255.5, 334.5], [1255.5, 335.5], [1225.5, 335.5], [1219.5, 331.5], [1217.5, 330.5]]},
{"id": "txiae0", "submitted_by": "ectoplazmatic7129", "name": "amogi weiss", "description": "ice queendom hype scar included", "website": "", "subreddit": "", "center": [512.5, 1698.5], "path": [[510.5, 1695.5], [510.5, 1700.5], [514.5, 1700.5], [514.5, 1699.5], [515.5, 1699.5], [515.5, 1696.5], [514.5, 1696.5], [514.5, 1695.5], [510.5, 1695.5]]},

View file

@ -267,7 +267,7 @@ <h5 class="offcanvas-title" id="offcanvasDrawLabel">Edit Entry</h5>
</div>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</header>
<div class="offcanvas-body" id="offcanvasDraw-drawControls">
<div id="offcanvasDraw-drawControls" class="offcanvas-body">
<div id="drawControls" class="d-flex flex-column gap-2 p-3 pb-2 mb-3 bg-secondary bg-opacity-10 rounded">
<h5>Draw</h5>
<div class="d-flex gap-2">
@ -309,11 +309,11 @@ <h6>Need Help?</h6>
</div>
</div>
</div>
<div class="offcanvas-body" id="offcanvasDraw-objectInfo" style="display: none;">
<div id="offcanvasDraw-objectInfo" class="offcanvas-body d-none">
<form id="objectInfo" class="d-flex flex-column p-3 bg-secondary bg-opacity-10 rounded">
<div class="mb-3">
<label for="nameField" class="form-label">Title</label>
<input type="text" id="nameField" class="form-control" placeholder="A short title" required>
<input type="text" id="nameField" class="form-control" placeholder="A short title" pattern="(.|\s)*\S(.|\s)*" title="Cannot be blank" required>
</div>
<div class="mb-3">
<label for="descriptionField" class="form-label">Description</label>
@ -332,10 +332,10 @@ <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 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>
<div id="infoButtons" class="d-flex flex-wrap flex-row-reverse gap-2">
<button type="submit" class="btn btn-primary flex-fill" id="exportButton">Export</button>
<button type="submit" class="btn btn-secondary flex-fill" id="previewButton" value="preview">Preview</button>
<button type="button" class="btn btn-secondary flex-fill" id="cancelButton">Back</button>
</div>
</form>
</div>
@ -358,7 +358,7 @@ <h5 class="modal-title" id="exportModalLabel">Export Entry</h5>
<p>Use the Post Direct to Reddit button or manually copy the text below and submit it as a new text post to <a href="https://www.reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">r/placeAtlas2</a> on Reddit.</p>
<p>Don't forget to flair it with the <span class="badge rounded-pill bg-primary"><i class="bi bi-tag" aria-hidden="true"></i> <span id="redditFlair">New Entry</span></span> tag.</p>
<p>We will then check it and add it to the atlas.</p>
<textarea class="form-control flex-grow-1" cols="40" rows="20" id="exportString" title="Raw JSON string"></textarea>
<textarea class="form-control flex-grow-1" cols="40" rows="20" id="exportString" title="Raw JSON string" readonly></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>