From dd5e809e4f78acf5acd2deb3a801506df5fecaf3 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Sat, 9 Apr 2022 21:07:01 +0700 Subject: [PATCH] Support editing, return to previous step instead of resetting --- web/_css/style.css | 25 ++++++++++-- web/_js/draw.js | 95 ++++++++++++++++++++++++++++++++------------ web/_js/infoblock.js | 6 +++ web/index.html | 25 +++++++----- 4 files changed, 111 insertions(+), 40 deletions(-) diff --git a/web/_css/style.css b/web/_css/style.css index b8f93693..7e90978d 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -508,6 +508,16 @@ .object p { margin-bottom: 10px; } +.object p:last-of-type { + float: left; +} + +.object .objectEdit { + float: right; + padding-left: 1em; + padding-right: 1em; +} + p.edit { color: #FFFF00; } @@ -548,19 +558,19 @@ #drawBackButton { width: 170px; } -#drawControls > * { +#drawControls > div > * { width: 100%; display: flex; justify-content: center; margin-bottom: 5px; } -#drawControls > * > * { +#drawControls > div > * > * { flex-grow: 1; margin-right: 5px; } -#drawControls > * > *:last-child { +#drawControls > div > * > *:last-child { margin-right: 0; } @@ -666,7 +676,14 @@ #exportString { flex-shrink: 0; } -#exportCloseButton { +.exportButtons { + display: flex; + flex-direction: row; + justify-content: center; + gap: 1em +} + +#exportButtons > * { margin-bottom: 0; width: 100px; align-self: flex-end; diff --git a/web/_js/draw.js b/web/_js/draw.js index 7026b86e..d926643e 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -26,6 +26,7 @@ function initDraw(){ var undoButton = document.getElementById("undoButton"); var redoButton = document.getElementById("redoButton"); var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel"); + var entryId = 0 var objectInfoBox = document.getElementById("objectInfo"); var hintText = document.getElementById("hint"); @@ -35,6 +36,7 @@ function initDraw(){ var exportOverlay = document.getElementById("exportOverlay"); var exportCloseButton = document.getElementById("exportCloseButton"); + var exportBackButton = document.getElementById("exportBackButton") var rShiftPressed = false; var lShiftPressed = false; @@ -56,8 +58,8 @@ function initDraw(){ container.addEventListener("mousedown", function(e){ lastPos = [ - e.clientX - ,e.clientY + e.clientX, + e.clientY ]; }); @@ -66,8 +68,8 @@ function initDraw(){ y = y - container.offsetTop; var pos = [ - ~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5 - ,~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5 + ~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5, + ~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5 ]; if(shiftPressed && path.length > 0){ @@ -162,7 +164,7 @@ function initDraw(){ }); cancelButton.addEventListener("click", function(e){ - reset(); + back(); }); document.getElementById("nameField").addEventListener("keyup", function(e){ @@ -192,9 +194,10 @@ function initDraw(){ exportOverlay.style.display = "none"; }); - exportCloseButton.addEventListener("click", function(e){ - exportDirectPost(); - }) + exportBackButton.addEventListener("click", function(e){ + finish(); + exportOverlay.style.display = "none"; + }); document.getElementById("highlightUncharted").addEventListener("click", function(e){ highlightUncharted = this.checked; @@ -203,13 +206,13 @@ function initDraw(){ function exportJson(){ var exportObject = { - id: 0 - ,name: document.getElementById("nameField").value - ,description: document.getElementById("descriptionField").value - ,website: document.getElementById("websiteField").value - ,subreddit: document.getElementById("subredditField").value - ,center: calculateCenter(path) - ,path: path + id: entryId, + name: document.getElementById("nameField").value, + description: document.getElementById("descriptionField").value, + website: document.getElementById("websiteField").value, + subreddit: document.getElementById("subredditField").value, + center: calculateCenter(path), + path: path }; var jsonString = JSON.stringify(exportObject, null, "\t"); var textarea = document.getElementById("exportString"); @@ -219,6 +222,9 @@ function initDraw(){ textarea.value = jsonString; console.log("a"); var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value); + if (jsonString.length > 7493) { + directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(" " + JSON.stringify(exportObject)); + } document.getElementById("exportDirectPost").href=directPostUrl; exportOverlay.style.display = "flex"; @@ -278,12 +284,8 @@ function initDraw(){ drawing = false; render(path); objectInfoBox.style.display = "block"; + objectDraw.style.display = "none"; hintText.style.display = "none"; - finishButton.style.display = "none"; - undoButton.style.display = "none"; - redoButton.style.display = "none"; - resetButton.style.display = "none"; - highlightUnchartedLabel.style.display = "none"; document.getElementById("nameField").focus(); } @@ -296,12 +298,8 @@ function initDraw(){ drawing = true; render(path); objectInfoBox.style.display = "none"; + objectDraw.style.display = "block"; hintText.style.display = "block"; - finishButton.style.display = "block"; - undoButton.style.display = "block"; - redoButton.style.display = "block"; - resetButton.style.display = "block"; - highlightUnchartedLabel.style.display = "block"; document.getElementById("nameField").value = ""; document.getElementById("descriptionField").value = ""; @@ -309,6 +307,14 @@ function initDraw(){ document.getElementById("subredditField").value = ""; } + function back(){ + drawing = true; + render(path); + objectInfoBox.style.display = "none"; + objectDraw.style.display = "block"; + hintText.style.display = "block"; + } + function renderBackground(){ backgroundContext.clearRect(0, 0, canvas.width, canvas.height); @@ -384,6 +390,45 @@ function initDraw(){ } } + const getEntry = id => { + const entries = atlas.filter(entry => entry.id === id) + if (entries.length === 1) return entries[0] + return {} + } + + let params = new URLSearchParams(document.location.search) + + if (params.has('id')) { + entry = getEntry(params.get('id')) + document.getElementById("nameField").value = entry.name + document.getElementById("descriptionField").value = entry.description + document.getElementById("websiteField").value = entry.website + document.getElementById("subredditField").value = entry.subreddit + path = entry.path + redoButton.disabled = true; + undoButton.disabled = false; + entryId = params.get('id') + + if(path.length >= 3){ + finishButton.disabled = false; + } + render(path) + + zoom = 4; + + zoomOrigin = [ + innerContainer.clientWidth/2 - entry.center[0]* zoom,// + container.offsetLeft + innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop + ]; + + scaleZoomOrigin = [ + 2000/2 - entry.center[0],// + container.offsetLeft + 2000/2 - entry.center[1]// + container.offsetTop + ]; + + applyView(); + } + } diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index 3ee3065c..e3def942 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -85,5 +85,11 @@ function createInfoBlock(entry) { idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;"; element.appendChild(idElement); + let editElement = document.createElement("a"); + editElement.innerText = "Edit" + editElement.className = "objectEdit" + editElement.href = "./?mode=draw&id=" + entry.id + element.appendChild(editElement); + return element; } \ No newline at end of file diff --git a/web/index.html b/web/index.html index 4567c057..69eea85b 100644 --- a/web/index.html +++ b/web/index.html @@ -183,15 +183,17 @@

The 2022 /r/place Atlas

< Back to the Atlas
-
- - +
+
+ + +
+ + +
- - -
@@ -202,7 +204,7 @@

The 2022 /r/place Atlas

- +
@@ -227,7 +229,7 @@

The 2022 /r/place Atlas

Recommended: Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag.

-
+
Post Direct to Reddit
@@ -237,7 +239,8 @@

The 2022 /r/place Atlas

Don't forget to flair it with the "New Entry" tag.

We will then check it and add it to the atlas.

-
+
+