Merge remote-tracking branch 'upstream/cleanup' into fixups

.gitignore

@@ -14,3 +14,4 @@ combined.js
 .vscode/
 web/atlas-before-ids-migration.json
 *.pyc
+tools/read-ids-temp.txt

CONTRIBUTING.md

@@ -19,7 +19,7 @@ To contribute to the map, we require a certain format for artwork region and lab
 ### GitHub Submission
 
 1. Create a fork of our repo.
-2. Enter your data into the `web/_js/atlas.js` file, with the correct format and ID number.
+2. Enter your data into the `web/atlas.json` file, with the correct format and ID number.
 3. Create a Pull Request.
 
 -->
@@ -27,9 +27,9 @@ To contribute to the map, we require a certain format for artwork region and lab
 ## Map Edits
 
 1. Create a fork of our repo.
-2. Enter your data into the `web/_js/atlas.json` file, with the correct format and ID number.
+2. Enter your data into the `web/atlas.json` file, with the correct format and ID number.
 3. Create a Pull Request against the `/cleanup` branch.
 
 ## Cleaning Contributions
 
-If you spot a duplicate, please PR against `/cleanup`. To help find duplicates, append `?mode=overlap` to the url: [`https://place-atlas.stefanocoding.me?mode=overlap`](https://place-atlas.stefanocoding.me?mode=overlap).
+If you spot a duplicate, please PR against `/cleanup`. To help find duplicates, append `?mode=overlap` to the url: [`https://place-atlas.stefanocoding.me?mode=overlap`](https://place-atlas.stefanocoding.me?mode=overlap).

tools/read-ids-temp.txt

@@ -0,0 +1,148 @@
+u0mydr
+u0mwxj
+u0mwcx
+u0mu37
+u0ms72
+u0mrgz
+u0mqfj
+u0mozw
+u0mkko
+u0mk12
+u0mj93
+u0mg5r
+u0mefl
+u0mdkc
+u0mchi
+u0mb6y
+u0m7ol
+u0m6uo
+u0m5xy
+u0m4kn
+u0m3up
+u0m2sl
+u0m17q
+u0m0o7
+u0m0e2
+u0lkqg
+u0ljzj
+u0lg1v
+u0la9m
+u0l8u8
+u0l6mx
+u0l04x
+u0kzax
+u0kw47
+u0kvqb
+u0km4v
+u0kiy3
+u0kcvk
+u0k5tx
+u0k0hp
+u0jgjs
+u0ja8g
+u0ihnt
+u0hnpj
+u0hnmq
+u0hcsf
+u0gg84
+u0flsv
+u0ffg3
+u0fewx
+u0ctn0
+u0c4jg
+u0c3s4
+u0c241
+u0bzn5
+u0by7b
+u0bplz
+u0be15
+u0bcky
+u0bc1w
+u0bbkz
+u0b40q
+u0b3o4
+u0b397
+u0b2x1
+u0ayk7
+u0axny
+u0awwp
+u0awbz
+u0avnr
+u0an4y
+u0alur
+u0aiaj
+u0ado3
+u0a8h0
+u0a7l8
+u0a6tn
+u0a5jp
+u0a3so
+u0a0tv
+u0a0ay
+u09zv0
+u09ssy
+u09rhm
+u09oc3
+u09jbs
+u09i2s
+u09fzu
+u09eti
+u09dms
+u09dg6
+u09ben
+u099j5
+u0977w
+u096fm
+u095x4
+u090mi
+u0904c
+u08vz6
+u08rdk
+u08ngp
+u08jdo
+u08g67
+u08emv
+u08dc7
+u08ch9
+u089ja
+u088bg
+u0880k
+u086n0
+u084u1
+u082p3
+u0828x
+u081u8
+u0818m
+u080s5
+u07zh3
+u07z4w
+u07xr3
+u07vk2
+u07vja
+u07uny
+u07u1d
+u07i8s
+u077yo
+u077y1
+u075jt
+u074p5
+u073rt
+u0738i
+u070h9
+u06pis
+u06p92
+tyrqka
+tygp7u
+tyfydt
+tyfxq9
+tyftac
+tyezt5
+tyenua
+tydut9
+tyd560
+tybjpt
+tybbnt
+tyb3kz
+tyawj8
+tya3uw
+ty9636

tools/redditcrawl.py

@@ -7,6 +7,7 @@
 from formatter import format_all
 
 outfile = open('temp_atlas.json', 'w', encoding='utf-8')
+editidsfile = open('read-ids-temp.txt', 'w')
 failfile = open('manual_atlas.json', 'w', encoding='utf-8')
 
 with open('credentials', 'r') as file:
@@ -29,13 +30,11 @@
 	print("Warning: No write access. Post flairs will not be updated.")
 	time.sleep(5)
 
-jsonfile = open("../web/atlas.json", "r", encoding='utf-8')
-existing = json.load(jsonfile)
-
 existing_ids = []
 
-for item in existing:
-	existing_ids.append(item['id'])
+with open('../data/edit-ids.txt', 'r') as edit_ids_file:
+	for id in [x.strip() for x in edit_ids_file.readlines()]:
+		existing_ids.append(id)
 
 def set_flair(submission, flair):
 	if has_write_access and submission.link_flair_text != flair:
@@ -116,6 +115,7 @@ def set_flair(submission, flair):
 					"Submission invalid after validation. This may be caused by not enough points on the path."
 					
 				outfile.write(json.dumps(submission_json, ensure_ascii=False) + ",\n")
+				editidsfile.write(submission.id + '\n')
 				successcount += 1
 				set_flair(submission, "Processed Entry")
 

web/_css/style.css

@@ -732,6 +732,7 @@ #timeControls {
 	font-size: 12px;
 	text-align: center;
 	min-width: 300px;
+	position: relative;
 }
 
 #timeControls input {
@@ -742,6 +743,26 @@ #timeControls input {
     width: 100%;
 }
 
+#timeControlsTooltip {
+	display: none;
+	position: absolute;
+	padding: 0.5em 2em;
+	background: #555;
+	border: 1px #000 solid;
+	justify-content: center;
+	bottom: 40px;
+	white-space: nowrap;
+}
+
+#timeControlsTooltip p {
+	line-height: normal;
+	margin-bottom: 0;
+}
+
+#timeControls:hover #timeControlsTooltip {
+	display: flex;
+}
+
 .slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;

web/_img/favicon-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: white;}</style></defs><polygon class="cls-1" points="154 0 154 38 39 38 39 192 0 192 0 0 154 0"/><polygon class="cls-1" points="192 38 192 192 77 192 77 153 154 153 154 38 192 38"/><polygon class="cls-1" points="154 38 68.8 68.8 123.2 123.2 154 38"/><polygon class="cls-2" points="68.8 68.8 39 153 123.2 123.2 68.8 68.8"/></svg>

web/_img/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: black;}</style></defs><polygon class="cls-1" points="154 0 154 38 39 38 39 192 0 192 0 0 154 0"/><polygon class="cls-1" points="192 38 192 192 77 192 77 153 154 153 154 38 192 38"/><polygon class="cls-1" points="154 38 68.8 68.8 123.2 123.2 154 38"/><polygon class="cls-2" points="68.8 68.8 39 153 123.2 123.2 68.8 68.8"/></svg>

web/_img/logo-transparent.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1 {fill: #ff4500;}.cls-2 {fill: black;}</style></defs><polygon class="cls-1" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-1" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-1" points="364 148 205 205 307 307 364 148"/><polygon class="cls-2" points="205 205 148 364 307 307 205 205"/></svg>

web/_img/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ff4500;}</style></defs><rect class="cls-1" width="512" height="512"/><polygon class="cls-2" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-2" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-2" points="364 148 205 205 307 307 364 148"/><polygon points="205 205 148 364 307 307 205 205"/></svg>

web/_js/favicon.js

@@ -0,0 +1,27 @@
+// Based on GitHub's favicon switcher. Temporary(?) fix for Chromium based browsers that won't dynamically update embedded CSS media query inside of SVG
+function updateFavicon(colorScheme) {
+	const favicon = document.head.querySelector('.js-site-favicon[type="image/svg+xml"]')
+	const faviconFallback = document.head.querySelector('.js-site-favicon[type="image/png"]')
+	if (favicon && faviconFallback) {
+		if (colorScheme || colorScheme == 'dark') {
+			favicon.href = '_img/favicon-dark.svg';
+			faviconFallback.href = '_img/favicon-dark.png';
+		} else {
+			favicon.href = '_img/favicon.svg';
+			faviconFallback.href = '_img/favicon.png';
+		}
+	}
+}
+
+function prefersDarkColorScheme() {
+	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+}
+
+if (prefersDarkColorScheme()) {
+	// update favicon to dark on page load
+	updateFavicon('dark')
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+	updateFavicon(prefersDarkColorScheme())
+})

web/_js/time.js

@@ -90,10 +90,11 @@ const timeConfig = [
         url: "./_img/place/final.png",
         image: null,
         showAtlas: true,
-    },
+    }
 ];
 
 let slider = document.getElementById("timeControlsSlider");
+let tooltip = document.getElementById("timeControlsTooltip")
 let image = document.getElementById("image");
 
 let timeCallback = (a) => {};
@@ -102,11 +103,11 @@ let atlasBackup = [];
 // SETUP
 slider.max = timeConfig.length;
 slider.value = timeConfig.length;
-updateTime(timeConfig.length)
+updateTime(slider.value)
 
-slider.oninput = (event) => {
+slider.addEventListener("input", (event) => {
     updateTime(parseInt(event.target.value))
-};
+})
 
 async function updateTime(index) {
     let configObject = timeConfig[index-1];
@@ -124,4 +125,13 @@ async function updateTime(index) {
         atlas = []
     }
     timeCallback(atlas)
-}
+    if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
+    else tooltip.querySelector('p').textContent = configObject.timestamp
+    tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+}
+
+tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+)
+
+window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+)

web/about.html

@@ -14,26 +14,30 @@
 -->
 
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>The 2022 /r/place Atlas</title>
-		
 		<meta name="description" content="An Atlas of Reddit's /r/place, with information to each artwork of the canvas.">
 		<meta name="author" content="Roland Rytz">
-		<meta name="keywords" content="reddit, /r/place, april">
 		<meta name="application-name" content="2022 /r/place Atlas">
 		<meta name="robots" content="index, follow">
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
+		<meta name="color-scheme" content="dark">
 		
+		<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
+		<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
+    
 		<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
+		<script type="text/javascript" src="./_js/favicon.js" defer></script>
+    
 	</head>
 	<body>
 		<div id="wrapper">
 			<header class="aboutHeader">
 				<a href="./">
-					<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
+					<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="">
 					<h1>The 2022 /r/place Atlas</h1>
 				</a>
 				<!--nav>

web/index.html

@@ -20,18 +20,33 @@
 		<title>The 2022 /r/place Atlas</title>
 		<meta name="description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
 		<meta name="author" content="Roland Rytz (2022 by Stefano#7366)">
-		<meta name="keywords" content="reddit, /r/place 2022">
 		<meta name="application-name" content="The /r/place Atlas 2022">
 		<meta name="robots" content="index, follow">
 		
+		<meta property="og:title" content="The 2022 /r/place Atlas">
+		<meta property="og:type" content="website">
+		<meta property="og:url" content="https://place-atlas.stefanocoding.me/">
+		<meta property="og:image" content="https://place-atlas.stefanocoding.me/_img/logo.png">
+		<meta property="og:image:type" content="image/png">
+		<meta property="og:image:width" content="512">
+		<meta property="og:image:height" content="512">
+		<meta property="og:image:alt" content="The /r/place Atlas logo">
+		<meta property="og:description" content="An interactive map of Reddit's 2022 /r/place, with information to each artwork of the canvas.">
+		
 		<!-- <meta name="google-site-verification" content="gZGHpBSMzffAbIn0qB8b00We6EwSGkDTfDoQVv-NWss"/> -->
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no"> <!-- user-scalable=no -->
 		<meta name="mobile-web-app-capable" content="yes">
+		<meta name="color-scheme" content="dark">
+
+		<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
+		<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
+		<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
 		
 		<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
 		<link rel="manifest" href="./manifest.webmanifest">
 		
+		<script type="text/javascript" src="./_js/favicon.js" defer></script>
 		<script type="application/ld+json">
 			{
 				"@context": "http://schema.org",
@@ -67,7 +82,7 @@
 		<div id="wrapper">
 			<header>
 				<a href="./">
-					<img id="logo" src="./_img/logo.png" height="50" width="50" alt="Logo">
+					<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
 					<!-- If you wonder why I shrink the image in html,
 					     it's because this is the image that will be used
 					     by reddit and the like as the thumbnail for the site.
@@ -156,7 +171,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 					<button title="Reset View" id="zoomResetButton"></button>
 					<button title="Zoom Out" id="zoomOutButton"></button>
 				</div>
-					<div id="timeControls">
+				<div id="timeControls">
+					<div id="timeControlsTooltip"><p>Time control slider</p></div>
 					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
 				</div>
 				<div id="author">

web/manifest.webmanifest

@@ -1,6 +1,6 @@
 {
-    "theme_color": "#f69435",
-    "background_color": "#f69435",
+    "theme_color": "#923b15",
+    "background_color": "#111111",
     "display": "minimal-ui",
     "scope": "/",
     "start_url": "/",
@@ -10,23 +10,27 @@
     "icons": [
         {
             "src": "_img/pwa/icon-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
+            "sizes": "196x196",
+            "type": "image/png",
+            "purpose": "any"
         },
         {
-            "src": "_img/pwa/icon-256x256.png",
-            "sizes": "256x256",
-            "type": "image/png"
-        },
-        {
-            "src": "_img/pwa/icon-384x384.png",
-            "sizes": "384x384",
-            "type": "image/png"
+            "src": "_img/pwa/icon-maskable-192x192.png",
+            "sizes": "196x196",
+            "type": "image/png",
+            "purpose": "maskable"
         },
         {
             "src": "_img/pwa/icon-512x512.png",
             "sizes": "512x512",
-            "type": "image/png"
+            "type": "image/png",
+            "purpose": "any"
+        },
+        {
+            "src": "_img/pwa/icon-maskable-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
         }
     ]
 }