From 55bc870531bb7642799117364722d37403611442 Mon Sep 17 00:00:00 2001 From: mxdanger <32040254+mxdanger@users.noreply.github.com> Date: Fri, 29 Apr 2022 15:58:56 -0700 Subject: [PATCH] Use form validator for preview button Updated test entries to just the variant code "T" instead of "T:" --- web/_css/style.css | 10 ++++++++-- web/_js/draw.js | 40 +++++++++++++++++++--------------------- web/_js/infoblock.js | 2 +- web/atlas.json | 4 ++-- web/index.html | 14 +++++++------- 5 files changed, 37 insertions(+), 33 deletions(-) diff --git a/web/_css/style.css b/web/_css/style.css index 77559b56..9ce18889 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -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); } diff --git a/web/_js/draw.js b/web/_js/draw.js index bc312670..45d79153 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -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) diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index 6d8acd55..87c290a5 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -129,7 +129,7 @@ function createInfoBlock(entry, isPreview) { websiteLinkElement.href = link; try { const urlObject = new URL(link) - websiteLinkElement.innerHTML = ` ${urlObject.hostname.replace("www.", "")}` + websiteLinkElement.innerHTML = ` ${urlObject.hostname.replace(/^www./, "")}`; } catch (e) { websiteLinkElement.innerHTML = ` Website`; } diff --git a/web/atlas.json b/web/atlas.json index a7853a15..42fed8b6 100644 --- a/web/atlas.json +++ b/web/atlas.json @@ -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]]}, diff --git a/web/index.html b/web/index.html index d80557f2..97eeded3 100644 --- a/web/index.html +++ b/web/index.html @@ -267,7 +267,7 @@
Edit Entry
-
+
Draw
@@ -309,11 +309,11 @@
Need Help?
-