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

.github/FUNDING.yml

@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+patreon: placeAtlas
+ko_fi: placeatlas
+custom: ['https://paypal.me/Codixer'] 

README.md

@@ -35,7 +35,7 @@ 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

tools/redditcrawl.py

@@ -3,6 +3,7 @@
 import json
 import time
 import re
+import os
 
 outfile = open('temp_atlas.json', 'w', encoding='utf-8')
 failfile = open('manual_atlas.json', 'w', encoding='utf-8')
@@ -25,7 +26,9 @@
 for item in existing:
 	existing_ids.append(item['id'])
 
-
+total_all_flairs = 0
+duplicate_count = 0
+outfile.write("[\n")
 for submission in reddit.subreddit('placeAtlas2').new(limit=2000):
 	"""
 	Auth setup
@@ -47,10 +50,14 @@
 	4. Pull Request
 
 	"""
-	#print(dir(submission))
+	total_all_flairs += 1
 	if (submission.id in existing_ids):
 		print("Found first duplicate!")
-		break
+		duplicate_count += 1
+		if (duplicate_count > 10):
+			break
+		else:
+			continue
 	if(submission.link_flair_text == "New Entry"):
 		text = submission.selftext
 		#Old backslash filter:
@@ -73,7 +80,7 @@
 				lines[i] = line.replace("\"id\": 0", "\"id\": "+"\""+str(submission.id)+"\"")
 		text = "\n".join(lines)
 		try:
-			outfile.write(json.dumps(json.loads(text))+",\n")
+			outfile.write(json.dumps(json.loads(text))+"  ,\n")
 			successcount += 1
 		except json.JSONDecodeError:
 			failfile.write(text+",\n")
@@ -81,4 +88,10 @@
 		print("written "+submission.id+" submitted "+str(round(time.time()-submission.created_utc))+" seconds ago")
 		totalcount += 1
 
-print(f"\n\nSuccess: {successcount}/{totalcount}\nFail: {failcount}/{totalcount}\nPlease check manual_atlas.txt for failed entries to manually resolve.")
+# Remove ,\n
+outfile.seek(outfile.tell()-4, os.SEEK_SET)
+outfile.truncate()
+
+outfile.write("\n]")
+
+print(f"\n\nTotal all flairs:{total_all_flairs}\nSuccess: {successcount}/{totalcount}\nFail: {failcount}/{totalcount}\nPlease check manual_atlas.txt for failed entries to manually resolve.")

web/_css/style.css

@@ -78,6 +78,7 @@ a:hover {
 }
 
 button,
+#exportDirectPost,
 #aboutBackButton,
 #drawBackButton {
 	background-image: linear-gradient(to bottom, #888, #666);
@@ -103,6 +104,7 @@ button:disabled:hover {
 }
 
 button:hover,
+#exportDirectPost:hover,
 #aboutBackButton:hover,
 #drawBackButton:hover {
 	background-image: linear-gradient(to bottom, #999, #777);

web/_js/atlas.js

@@ -29,86 +29,30 @@ window.addEventListener("error", function (e) {
 	document.getElementById("loadingContent").innerHTML = errorMessage;
 });
 
-function pointIsInPolygon (point, polygon) {
-	// ray-casting algorithm based on
-	// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
-	
-	var x = point[0], y = point[1];
-	
-	var inside = false;
-	for (var i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-		var xi = polygon[i][0], yi = polygon[i][1];
-		var xj = polygon[j][0], yj = polygon[j][1];
-		
-		var intersect = ((yi > y) != (yj > y))
-			&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
-		if (intersect) inside = !inside;
-	}
-	return inside;
-};
-
-//console.log("There are "+atlas.length+" entries in the Atlas.");
-
-/*
-atlas.sort(function(a, b) {
-	if (a.id < b.id) {
-		return -1;
-	}
-	if (a.id > b.id) {
-		return 1;
-	}
-		// a must be equal to b
-	return 0;
-});
-
-for(var i = 0; i < atlas.length; i++) {
-	if(atlas[i-1]){
-		if(atlas[i-1].id == atlas[i].id) {
-			console.log(atlas[i-1].id + ": "+ atlas[i-1].name);
-			console.log(atlas[i  ].id + ": "+ atlas[i  ].name);
-		}
+function getPositionOfEntry(entry){
+	let startX = 2000, startY = 2000;
+	for(let [x, y] of entry.path){
+		startX = Math.min(x, startX);
+		startY = Math.min(y, startY)
 	}
+	if(startX === 2000 || startY === 2000) return null;
+	return [parseInt(startX), parseInt(startY)];
 }
 
-console.log("biggest id: "+atlas[atlas.length-1].id + ", " + atlas[atlas.length-1].name);
-*/
 
-/*
-for(var i = 0; i < atlas.length; i++) {
-	if(typeof atlas[i].website == "undefined") {
-		console.log(atlas[i].name);
-	} else if(atlas[i].website.trim() != "") {
-		if(atlas[i].website.trim().substring(0, 4) != "http") {
-			console.log(atlas[i].name + ": " + atlas[i].website);
-		}
-	}
-}
-*/
+// Modified from https://stackoverflow.com/a/33670691 
+function calcPolygonArea(vertices) {
+    var total = 0;
 
-// sort by center.y, so that lines will overlap less
+    for (var i = 0, l = vertices.length; i < l; i++) {
+      var addX = vertices[i][0];
+      var addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1];
+      var subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0];
+      var subY = vertices[i][1];
 
-/*
+      total += (addX * addY * 0.5);
+      total -= (subX * subY * 0.5);
+    }
 
-// Populate with test data
-
-for(var i = 0; i < 10000; i++) {
-	var x = ~~(Math.random() * 1000)+0.5;
-	var y = ~~(Math.random() * 1000)+0.5;
-	var w = ~~(Math.random()*100);
-	var h = ~~(Math.random()*100);
-	atlas.push( {
-		"id": 5,
-		"name": "test"+(i+3),
-		"website": "",
-		"subreddit": "",
-		"center": [0, 0],
-		"path":[
-			[x, y],
-			[x+w, y],
-			[x+w, y+h],
-			[x, y+h]
-		]
-	});
-}
-
-*/
+    return Math.floor(Math.abs(total));
+}

web/_js/infoblock.js

@@ -1,4 +1,16 @@
 function createInfoBlock(entry) {
+    function createInfoParagraph(name, value){
+        let entryParagraphPositionElement = document.createElement("p");
+        let nameElement = document.createElement("span");
+        nameElement.style.fontWeight = "bold";
+        nameElement.innerText = name;
+        let valueElement = document.createElement("span");
+        valueElement.innerText = value;
+        entryParagraphPositionElement.appendChild(nameElement);
+        entryParagraphPositionElement.appendChild(valueElement);
+        return entryParagraphPositionElement;
+    }
+
     var element = document.createElement("div");
     element.className = "object";
 
@@ -15,6 +27,15 @@ function createInfoBlock(entry) {
         descElement.innerText = entry.description;
         element.appendChild(descElement);
     }
+    
+    let [x, y] = entry.center;
+    element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}x${Math.floor(y)}`));
+
+    if(entry.path){
+        let area = calcPolygonArea(entry.path);
+        element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
+    }
+    
     if (entry.website) {
         let websiteLinkElement = document.createElement("a");
         websiteLinkElement.target = "_blank";
@@ -39,9 +60,8 @@ function createInfoBlock(entry) {
             element.appendChild(subredditLinkElement);
         }
     }
-    let idElement = document.createElement("p");
+    let idElement = createInfoParagraph("ID: ", entry.id);
     idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
-    idElement.innerText = "id: " + entry.id;
     element.appendChild(idElement);
 
     return element;

web/_js/main.js

@@ -47,7 +47,7 @@ var lastPosition = [0, 0];
 var viewportSize = [0, 0];
 
 document.getElementById("donateButton").addEventListener("click", function(e){
-	document.getElementById("bitcoinQR").src = "./_img/bitcoinQR.png?from=index";
+//	document.getElementById("bitcoinQR").src = "./_img/bitcoinQR.png?from=index";
 	document.getElementById("donateOverlay").style.display = "flex";
 });
 
@@ -78,7 +78,8 @@ var atlas = null;
 init();
 
 async function init(){
-
+	// For Reviewing Reddit Changes
+	//let resp = await fetch("../tools/temp_atlas.json");
 	let resp = await fetch("./atlas.json");
 	atlas = await resp.json();
 	atlas.sort(function (a, b) {
@@ -270,14 +271,23 @@ async function init(){
 		initialPinchZoom = zoom;
 		
 		lastPosition = [x, y];
-		
-		if(e.deltaY > 0){
 
-			zoom = zoom / 2;
-			
-		} else if(e.deltaY < 0){
-			
-			zoom = zoom * 2;
+		// Check if we are zooming by pixels
+		// https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode
+		if (e.deltaMode === 0) {
+			// Scale the pixel delta by the current zoom factor
+			// We want to zoom faster when closer, and slower when further
+			// This creates a smoother experience
+			zoom -= e.deltaY * (0.001 * zoom);
+		} else {
+			if(e.deltaY > 0){
+	
+				zoom = zoom / 2;
+				
+			} else if(e.deltaY < 0){
+				
+				zoom = zoom * 2;
+			}
 		}
 
 		zoom = Math.max(minZoom, Math.min(maxZoom, zoom));

web/_js/stats.js

@@ -21,13 +21,6 @@ for(var q = 0; q < atlas.length; q++){
 
 	area = Math.abs(area/2);
 
-	if(atlas[q].name == "Companion Cube"){
-		var w = atlas[q].path[1][0] - atlas[q].path[0][0];
-		var h = atlas[q].path[2][1] - atlas[q].path[1][1];
-		console.log(w, h, w*h);
-		console.log(area, Math.sqrt(area));
-	}
-
 	areasSum += area;
 	areas.push(area);
 

web/_js/view.js

@@ -273,12 +273,12 @@ function initView(){
 
 		//var id = parseInt(window.location.hash.substring(3));
 		
-		var entry = atlas.filter(function(e){
+		var entries = atlas.filter(function(e){
 			return e.id === id;
 		});
 
-		if (entry.length === 1){
-			entry = entry[0];
+		if (entries.length === 1){
+			let entry = entries[0];
 
 			document.title = entry.name + " on the 2022 /r/place Atlas";
 			
@@ -532,7 +532,6 @@ function initView(){
 					applyView();
 				}
 				if(document.documentElement.clientWidth < 500){
-					
 					objectsContainer.innerHTML = "";
 
 					entriesListShown = false;
@@ -591,7 +590,7 @@ function initView(){
 		}
 	}
 
-	function render(){
+	async function render(){
 
 		context.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -636,6 +635,29 @@ function initView(){
 		context.globalCompositeOperation = "source-out";
 		context.drawImage(backgroundCanvas, 0, 0);
 
+		if(hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage){
+			let undisputableHovered = hovered[0];
+			// Find the left-topmost point of all the paths
+			let entryPosition = getPositionOfEntry(undisputableHovered);
+			if(entryPosition){
+				const [startX, startY] = entryPosition;
+				let overrideImage = new Image();
+				const loadingPromise = new Promise((res, rej) => {
+					overrideImage.onerror = rej;
+					overrideImage.onload = res;
+				});
+				overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage;
+				try{
+					await loadingPromise;
+					context.globalCompositeOperation = "source-over";
+					context.drawImage(overrideImage, startX, startY);
+				}catch(ex){
+					console.log("Cannot override image.");
+					console.log(ex);
+				}
+			}
+		}
+
 		for(var i = 0; i < hovered.length; i++){
 
 			var path = hovered[i].path;

web/about.html

@@ -34,7 +34,7 @@
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
 		
-		<link href="./_css/style.css?version=1.0.32" rel="stylesheet" type="text/css" media="all">
+		<link href="./_css/style.css?version=1.0.33" rel="stylesheet" type="text/css" media="all">
 	</head>
 	<body>
 		<div id="wrapper">
@@ -76,7 +76,7 @@ <h2 id="abouth2">The 2022 /r/place Atlas</h2>
 					<p>This is an Atlas aiming to chart all the artworks created during the <a href="https://www.reddit.com/r/place/">/r/place</a> April's fools event on <a href="https://www.reddit.com/" target="_blank">Reddit</a> in 2022.</p>
 					<p>The original code was developed by <a href="/" target="_blank" rel="author">Roland Rytz</a> (<a href="mailto:roland.rytz@gmail.com" target="_blank">mail</a>, <a href="https://reddit.com/user/draemmli/" target="_blank">reddit</a>) and is available under the free <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">AGPL license</a> on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.</p>
 					<br>
-					<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/Codixer/place-atlas">Github Fork</a>.</p>
+					<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/placeAtlas/atlas">Github Fork</a>.</p>
 					<p>Image's provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a></p>.
 					<p>Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though <a target="_blank" href="https://paypal.me/codixer">Paypal</a>. (I don't have bitcoin)</p>
 					<p>To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project</p>
@@ -88,7 +88,7 @@ <h2 id="abouth2">The 2022 /r/place Atlas</h2>
 					<h2>How to contribute</h2>
 					<p>The /r/Place Atlas project relies on user contributions.</p>
 					<p>To contribute a label for an artwork, please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this post on reddit</a> to learn how to submit a new entry.</p>
-					<p>Alternatively, contributions can be made directly on <a href="https://github.com/Codixer/place-atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
+					<p>Alternatively, contributions can be made directly on <a href="https://github.com/placeAtlas/atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
 					<p>The <a href="https://reddit.com/r/placeAtlas2/" target="_blank">/r/placeAtlas2</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
 					
 

web/index.html

@@ -36,7 +36,7 @@
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
 		<meta name="mobile-web-app-capable" content="yes">
 		
-		<link href="./_css/style.css?version=1.0.32" rel="stylesheet" type="text/css" media="all">
+		<link href="./_css/style.css?version=1.0.33" rel="stylesheet" type="text/css" media="all">
 		
 		<script type="application/ld+json">
 			{
@@ -79,7 +79,7 @@
 					     by reddit and the like as the thumbnail for the site.
 					     The original is only 5.9kB, which wouldn't get much
 					     smaller by reducing the actualy size.  -->
-					<h1 id="title">The /r/place Atlas</h1>
+					<h1 id="title">The 2022 /r/place Atlas</h1>
 				</a>
 
 			</header>
@@ -92,14 +92,14 @@ <h1 id="title">The /r/place Atlas</h1>
 						<noscript>
 							<p>Sorry, you need JavaScript to view the Atlas.</p>
 							<p>All JavaScript on this site is licensed under either the MIT or AGPL license.</p>
-							<p><a href="https://github.com/RolandR/place-atlas/">See the source on GitHub</a></p>
+							<p><a href="https://github.com/placeAtlas/atlas">See the source on GitHub</a></p>
 						</noscript>
 					</div>
 				</div>
 				<canvas id="linesCanvas"></canvas>
 				<div id="innerContainer">
 					<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
-					<img id="image" src="./_img/place-indexed.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
+					<img id="image" src="./_img/place-indexed-final-place.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
 				</div>
 			</div>
 			
@@ -189,16 +189,22 @@ <h1 id="title">The /r/place Atlas</h1>
 			
 			<div id="exportOverlay" class="overlay">
 				<div id="exportWindow">
-					<p>Please copy the text below and submit it as a<br>
-					new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
-					<p>I will then check it and add it to the atlas.</p>
 					<div style="background-color:#666; padding:5px">
 						<p><b>Warning</b></p>
 						<p><b>DO NOT</b> include the character <b>"</b> (quotation marks) in your submission. It will not be approved.</p>
 					</div>
-					<textarea cols="50" rows="5" id="exportString"></textarea>
+					<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
 					<div style="display:flex; flex-direction:column;align-items:center">
 						<a href="_blank" id="exportDirectPost">Post Direct to Reddit</a>
+					</div>
+					<hr style="border-bottom: solid black 1px"/>
+					<i>or...</i>
+					<p>Please copy the text below and submit it as a
+					new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
+					<p>Don't forget to flair it with the "New Entry" tag.</p>
+					<p>We will then check it and add it to the atlas.</p>
+					<textarea cols="20" rows="5" id="exportString"></textarea>
+					<div style="display:flex; flex-direction:column;align-items:center">
 						<button id="exportCloseButton">Done</button>
 					</div>
 				</div>
@@ -206,25 +212,20 @@ <h1 id="title">The /r/place Atlas</h1>
 			
 			<div id="donateOverlay" class="overlay">
 				<div id="donateWindow">
-					<h2>Donations - Original Source Code Creator</h2>
-					<p>Roland Rytz jas worked on the Atlas full-time (and more!) for over two weeks.</p>
-					<p>If you'd like to support him, you can do so by <a target="_blank" href="https://paypal.me/draemmli">PayPal</a> or Bitcoin.</p>
-					<p>If you donate more than 10(€/$/CHF/mBTC), He'll send you a nice sticker of the Place canvas (2017)!</p>
-					<p id="bitcoinNotice">If you donate by Bitcoin and want a sticker, please send him a<br>message with your Bitcoin address <i>before</i> you make the transaction!</a>
+					<h2>Donation Links</h2>
+					<p>Current 2022 Atlas Maintainers:</p>
+					<p> - <a target="_blank" href="https://paypal.me/Codixer">PayPal</a></p>
+					<p> - <a target="_blank" href="https://www.patreon.com/placeAtlas">Patreon</a></p>
+					<p> - <a target="_blank" href="https://ko-fi.com/placeatlas">Ko-Fi</a></p>
+					<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
+					<p> - <a target="_blank" href="https://paypal.me/draemmli">PayPal</a></p>
 					
-					<h2>His Bitcoin Address</h2>
-					<img id="bitcoinQR" alt="QR Code of Bitcoin Address" height="300" width="300">
-					<br>
-					<input type="text" onclick="this.select();" readonly value="1DnBGYpH6HZYHvpCq3QqqtH1HxwwVe2QxN">
-					<br>
-					<p>Hi there! The current maintainer of the 2022 version of this website, should I accept donations and make stickers of the 2022 version? Please tell me on our <a href="https://discord.gg/pJkm23b2nA" target="_noblank">Discord Server</a> or on my Reddit (<a href="https://reddit.com/user/TCOOfficiall" target="_noblank">u/TCOOfficiall</a>)</p>
-					<br>
 					<button id="closeBitcoinButton">Close</button>
 					<br>
 				</div>
 			</div>
 			<div id="author">
-				Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
+				Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
 			</div>
 		</div>
 		<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>