Editing! Past canvas entries! And some others! Oh, my! #1149

Hans5958 · 2022-04-09T14:45:38Z

EDIT 3:

We moved! Visit #1314 (issue, recommended), #1315 (PR), and the remaster branch for the current status!

EDIT 2:

Despite of the name of the branch is "edit," this PR has expanded and actually tackles 5 issues at once.

Editing (Feature request: Edit existing entries from the GUI #708)
Editing existing entries from the website.
Past/alternative canvas entries
Adding/Editing new entries on past canvas/canvas variations.
Multi-canvas paths
Have multiple paths for different canvas on any period or variation
New links format
A links object that has both existing website and subreddit, and new types such as Discord links and wiki entries, along with separation by array (JSON) or newlines (website)
Canvas variations
Support for canvas variations other than the default r/place canvas. (e.g. The Final Clean)

EDIT: Now with past canvas entries, check the comments!

Should've resolves #708, but this is somehow closed. I'll just put it here.

This allows editing from the website, with adjustments on the script. This also include changes of the "submitted-by" string into "contributors" array. Additional script is made for merging temp-atlas.json with atlas.json, also made to check if there are edit conflicts, which will be excluded from addition.

The merge script is tested, but the crawler doesn't. So, please check it.

netlify · 2022-04-09T14:45:44Z

✅ Deploy Preview for place-atlas ready!

Name	Link
🔨 Latest commit	`2980b89`
🔍 Latest deploy log	https://app.netlify.com/sites/place-atlas/deploys/625ace6b1b90870008aee431
😎 Deploy Preview	https://deploy-preview-1149--place-atlas.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Hans5958 · 2022-04-10T09:30:13Z

Got entries for past canvas (aka time travel) working. The code checks the period value on the entry. The osu one has this following period.

{
	# ..., 
	"period": "0-14"
}

The gamemodes have the value of 4-14.

{
	# ..., 
	"period": "4-14"
}

Add that with editing...

I think it is good if the later TFC have the ID of 15 later.

nico-abram · 2022-04-10T18:27:04Z

Maybe we should use a bigger number for the image interval, like 0-100-...-1400 to leave some room in case we ever add more images?

enkore · 2022-04-10T18:46:04Z

web/_js/draw.js

+		if (startPeriodField.value === endPeriodField.value) {
+			exportObject.period = [startPeriodField.value]
+		} else if (startPeriodField.value * 1 < endPeriodField.value * 1) {
+			exportObject.period = [startPeriodField.value + "-" + endPeriodField.value]


If I don't misread the code, this means the JSON contains the period number (0-n), right? It would be better to translate this to the timestamp using timeConfig for storage instead.

Currently I use the availability on the images. Using timestamp would be too fine for later atlas edits.

Hans5958 · 2022-04-10T23:45:39Z

Maybe we should use a bigger number for the image interval, like 0-100-...-1400 to leave some room in case we ever add more images?

That's why I think that this should be merged after the new canvases is added. Even so I think we can transpile the values if we are going to add new images in the future.

Hans5958 · 2022-04-12T01:44:57Z

ICYMI: The submitted_by is replaced by contributors array. This enables listing of multiple contributors on a single entry. Added that with the new period field, the current format is as follows. Even so, the `submitted_by" field will stay working.

{
	"id": "...",
	"contributors": [ "redditor1", "redditor2" ],
	"name": "...",
	"description": "...",
	"website": "...",
	"subreddit": "/r/subreddit1, /r/subreddit2",
	"center": [ 726.5, 727.5 ],
	"path": [
		[ 727.5, 679.5 ],
		[ 708.5, 681.5 ],
		// ... 
	],
	"period": "0-15"
}

I have an idea to actually merge all links into an object, and/or adding a Discord link and the wiki entry (inside of it). I also plan to convert all of it as an array for futureproofing. Something like this.

{
	"id": "...",
	"name": "...",
	"description": "...",
	"contributors": [ "redditor1", "redditor2" ],
	"links": {
		"website": [ "...", "..." ],
		"subreddit": [ "subreddit1", "subreddit2" ],
		"discord": [ "invitecode1", "invitecode2" ],
		"wiki": [ "Page 1", "Page 2" ]
	},
	"center": [ 726.5, 727.5 ],
	"path": [
		[ 727.5, 679.5 ],
		[ 708.5, 681.5 ],
		// ...
	],
	"period": "0-15"
}

mxdanger · 2022-04-12T02:26:22Z

Have you considered art that has a changing path over time? Such as the expansion or recession of certain artwork during the time range.

mxdanger · 2022-04-12T02:30:28Z

Also, I think it would be a good idea to turn subreddit into an array to be consistent with everything else in the links array.

Hans5958 · 2022-04-12T02:39:47Z

Have you considered art that has a changing path over time? Such as the expansion or recession of certain artwork during the time range.

I will copy the contents later with later edit, but please see https://discord.com/channels/960791635342524496/960814065901502546/962660023664795728.

Also, I think it would be a good idea to turn subreddit into an array to be consistent with everything else in the links array.

I mean I did?

mxdanger · 2022-04-12T02:49:33Z

I mean I did?

If it's not a mistake, you have the two subreddits as one string with a comma instead of being two strings.

Hans5958 · 2022-04-12T02:58:45Z

Oh, I see. I meant two strings of course. Nice catch.

mxdanger · 2022-04-13T05:42:58Z

Here is a potential schema that allows for multi-path entries for past history. To keep it simple I think its best that its only incremental by the hour, so you only have a range from 0-82.

Note:

If the range value only includes the number, then that is the starting number, and it is inferred that 82 is the end number. This should only be used on the last range in the array.
- 0, 67 would be invalid. 0-66, 67 would be valid.
None of the numbers in the range should overlap.
- 0-62, 62-78 would be invalid. 0-62, 63-78 would be valid.

In this example the artwork exists from the start to hour 62. A replacement for the proposed period value.

{
    "id": "...",
    "name": "...",
    "description": "...",
    "contributors": [ "redditor1", "redditor2" ],
    "links": {
        "website": [ "...", "..." ],
        "subreddit": [ "subreddit1", "subreddit2" ],
        "discord": [ "invitecode1", "invitecode2" ],
        "wiki": [ "Page 1", "Page 2" ]
    },
    "paths": [
        "0-62", {
            "center": [ 726.5, 727.5 ],
            "path": [
                [ 727.5, 679.5 ],
                [ 708.5, 681.5 ]
            ]
        }
    ]
}

If the artwork was destroyed and then re-added then the following can be used. However, if the artwork significantly changes and moves location across the canvas, a new entry should be used instead.

{
    "paths": [
        "0-62", {
            "center": [ 726.5, 727.5 ],
            "path": [
                [ 727.5, 679.5 ],
                [ 708.5, 681.5 ]
            ]
        },
        "79", {
            "center": [ 726.5, 727.5 ],
            "path": [
                [ 727.5, 679.5 ],
                [ 708.5, 681.5 ]
            ]
        }
    ]
}

If the artwork existed from the beginning to the end then 0 can be used.

{
    "paths": [
        "0", {
            "center": [ 726.5, 727.5 ],
            "path": [
                [ 727.5, 679.5 ],
                [ 708.5, 681.5 ]
            ]
        }
    ]
}

Let me know your thoughts on if this is a good way to format multiple paths.

Hans5958 · 2022-04-13T06:36:59Z

I think "63-78", {} is not required. The current code only detects the given ranges so "4-6, 8-10" would mean it will appear on periods 4, 5, 6, 8, 9, and 10. "0" would mean only the period 0, not all periods, but we can do an "all" period.

Also, I agree with the 1 hour per image, but we'll see how the others think about this.

Hans5958 · 2022-04-13T06:49:35Z

ICYMI: Here is my analysis about how fine the timeline should be: https://gist.github.com/Hans5958/d9d6474c56abfde8c9000f4baf951575

mxdanger · 2022-04-13T07:25:05Z

I think "63-78", {} is not required.

I agree.

"0" would mean only the period 0, not all periods, but we can do an "all" period.

As I mentioned in my explanation: if the range value only includes the number, then that is the starting number, and it is inferred that 82 is the end number. If artwork really did exist for the first hour, then "0-1" would have to be used to be valid.

I think we should just keep it as numbers and not use "all".

Hans5958 · 2022-04-13T08:33:53Z

Oops, didn't catch the sentences right there. But that means that for one period, you would do something like 10-10, then? I would disagree on that one.

I think that is not consistent enough. IMO we should choose either using start points (e.g. 0, 20, 60, etc.), similar to the one you guys had previously on Discord, or using ranges (e.g. current implementation on period on the current state of the PR)

Hans5958 · 2022-04-13T09:10:57Z

Since the final version The Final Clean is now out, gonna mention again my preference.

I think it is good if the later TFC have the ID of ~~15 [or] later~~ the last, (with the default is the last hour).

(old footage)

Codixer · 2022-04-13T09:18:19Z

If possible, do NOT make this part of the timeline. But a toggle somewhere. I want to keep the history of r/place and TFC seperate from each other.

Hans5958 · 2022-04-13T09:35:32Z

If possible, do NOT make this part of the timeline. But a toggle somewhere. I want to keep the history of r/place and TFC seperate from each other.

Aww, fine then. So far I got two alternatives.

A switch that switches between the real timeline slider and the alternate version slider. (It would just include TFC currently but maybe other alternate versions, maybe also the past drafts IDK)
Just a dropdown that switches between the real timeline and the alternate versions. If it chooses other than the real timeline option, hide the slider.

fabi321 · 2022-04-13T09:58:02Z

Maybe we could add periods like "0-" wich would be from start to end, or "-3, 6-10, 15-" wich would include everything from start to 3, 6, 7, 8, 9, 10 and everyting from 15 to end

Hans5958 · 2022-04-13T10:08:42Z

This might getting complicated on parsing the periods and not even thinking how to implement it on the edit tool...

fabi321 · 2022-04-13T10:18:12Z

The parsing logic wouldn't bee too complicated. I think this sould translate to a list with multiple entries in the editor. But I do understand your concerns regarding how the draw/edit interface should be shaped to enable these powerful features while not being confusing.

mxdanger · 2022-04-13T20:59:17Z

If we don't use a range number and instead only starting points then how should we signify the end of the range? Just a number with blank content? Such as: "67", {}

mxdanger · 2022-04-13T21:31:27Z

To revise my original schema, we could implicitly define the ending value so that just one dumber means it only happened during that time. So 10 would be valid and 0-82 would have to be used for start to finish.

I still think using a range would be easier to do for the UI as the user for example the user may have two rows with a range slider in the first column and a edit button next to it so the range 0-50 is displayed in the first row and 51-82 on the next row. If the user changes the range of the first one to 0-49 then a new row is created between the two that has a Plus button to suggest creating a new path with the range of 50.

web/_js/time.js

web/_js/draw.js

Co-authored-by: Fabian Wunsch <42294590+fabi321@users.noreply.github.com>

Images courtesy of Scaevolus#7213

Hans5958 · 2022-04-16T15:43:05Z

We will continue on #1314.

Hans5958 changed the title ~~Editing! In the website! Oh, my!~~ Editing! Periods! Oh, my! Apr 10, 2022

Hans5958 changed the title ~~Editing! Periods! Oh, my!~~ Editing! Past canvas entries! Oh, my! Apr 10, 2022

enkore reviewed Apr 10, 2022

View reviewed changes

Hans5958 force-pushed the edit branch from d50ed1a to 7cd2302 Compare April 12, 2022 01:28

fabi321 reviewed Apr 13, 2022

View reviewed changes

web/_js/time.js Outdated Show resolved Hide resolved

fabi321 reviewed Apr 13, 2022

View reviewed changes

web/_js/draw.js Outdated Show resolved Hide resolved

Hans5958 force-pushed the edit branch from 7cd2302 to d31713b Compare April 14, 2022 06:41

Hans5958 and others added 9 commits April 16, 2022 20:36

Layer based loading, use separate object for cache, deprecate timeConfig

5172a90

Cache new folders for canvas

a78e7e2

Fix bug when period capping on 100

3831700

Co-authored-by: Fabian Wunsch <42294590+fabi321@users.noreply.github.com>

Fix switching variations on draw mode fails

1f19d74

Add copying paths to other period groups

04cfb2e

Make variant dropdown stick to the bottom

9ee2bc4

Fix prefer-const problems (ESLint)

1bbab2e

Fix no-var problems (ESLint), run formatter on JS

1a34364

Merge branch 'upstream/cleanup' into edit

a501eb7

Hans5958 force-pushed the edit branch from f61bfbd to ae92ad2 Compare April 16, 2022 13:38

Hans5958 added 5 commits April 16, 2022 20:44

Fix errors when nothing returned on updateCategory

63a1836

Remove console logs, use info and error console logs

99a47c1

Fix blank pixel calculation

18fca17

Remove function that I somehow used but not defined

5746d15

Format HTML and CSS

952f413

Hans5958 force-pushed the edit branch 2 times, most recently from 304dd6b to 863e033 Compare April 16, 2022 13:50

Hans5958 added 3 commits April 16, 2022 21:06

[TEST] The Final Clean canvases

3f3d5bb

[TEST] 30-minute r/place canvas

7df4f06

Images courtesy of Scaevolus#7213

[TEST] osu! on other canvases

21d0018

Hans5958 force-pushed the edit branch from 863e033 to 21d0018 Compare April 16, 2022 14:07

Attempt to fix inaccurate background updating

2980b89

Hans5958 changed the base branch from cleanup to remaster April 16, 2022 15:21

Hans5958 marked this pull request as ready for review April 16, 2022 15:21

Codixer merged commit bc01405 into placeAtlas:remaster Apr 16, 2022

This was referenced Apr 16, 2022

The Remaster Plan #1314

Closed

The Remaster PR #1315

Merged

Hans5958 added this to the Remaster milestone Apr 24, 2022

Hans5958 deleted the edit branch April 7, 2023 12:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editing! Past canvas entries! And some others! Oh, my! #1149

Editing! Past canvas entries! And some others! Oh, my! #1149

Hans5958 commented Apr 9, 2022 •

edited

netlify bot commented Apr 9, 2022 •

edited

Hans5958 commented Apr 10, 2022 •

edited

nico-abram commented Apr 10, 2022

enkore Apr 10, 2022

Hans5958 Apr 10, 2022

Hans5958 commented Apr 10, 2022 •

edited

Hans5958 commented Apr 12, 2022 •

edited

mxdanger commented Apr 12, 2022

mxdanger commented Apr 12, 2022

Hans5958 commented Apr 12, 2022 •

edited

mxdanger commented Apr 12, 2022

Hans5958 commented Apr 12, 2022

mxdanger commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

mxdanger commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022

Hans5958 commented Apr 13, 2022 •

edited

Codixer commented Apr 13, 2022

Hans5958 commented Apr 13, 2022 •

edited

fabi321 commented Apr 13, 2022

Hans5958 commented Apr 13, 2022 •

edited

fabi321 commented Apr 13, 2022

mxdanger commented Apr 13, 2022

mxdanger commented Apr 13, 2022 •

edited

Hans5958 commented Apr 16, 2022

Editing! Past canvas entries! And some others! Oh, my! #1149

Editing! Past canvas entries! And some others! Oh, my! #1149

Conversation

Hans5958 commented Apr 9, 2022 • edited

netlify bot commented Apr 9, 2022 • edited

✅ Deploy Preview for place-atlas ready!

Hans5958 commented Apr 10, 2022 • edited

nico-abram commented Apr 10, 2022

enkore Apr 10, 2022

Choose a reason for hiding this comment

Hans5958 Apr 10, 2022

Choose a reason for hiding this comment

Hans5958 commented Apr 10, 2022 • edited

Hans5958 commented Apr 12, 2022 • edited

mxdanger commented Apr 12, 2022

mxdanger commented Apr 12, 2022

Hans5958 commented Apr 12, 2022 • edited

mxdanger commented Apr 12, 2022

Hans5958 commented Apr 12, 2022

mxdanger commented Apr 13, 2022 • edited

Hans5958 commented Apr 13, 2022 • edited

Hans5958 commented Apr 13, 2022 • edited

mxdanger commented Apr 13, 2022 • edited

Hans5958 commented Apr 13, 2022

Hans5958 commented Apr 13, 2022 • edited

Codixer commented Apr 13, 2022

Hans5958 commented Apr 13, 2022 • edited

fabi321 commented Apr 13, 2022

Hans5958 commented Apr 13, 2022 • edited

fabi321 commented Apr 13, 2022

mxdanger commented Apr 13, 2022

mxdanger commented Apr 13, 2022 • edited

Hans5958 commented Apr 16, 2022

Hans5958 commented Apr 9, 2022 •

edited

netlify bot commented Apr 9, 2022 •

edited

Hans5958 commented Apr 10, 2022 •

edited

Hans5958 commented Apr 10, 2022 •

edited

Hans5958 commented Apr 12, 2022 •

edited

Hans5958 commented Apr 12, 2022 •

edited

mxdanger commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

mxdanger commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

Hans5958 commented Apr 13, 2022 •

edited

mxdanger commented Apr 13, 2022 •

edited