Merge branch 'master' into cleanup

web/_css/style.css

@@ -69,7 +69,7 @@ #wrapper {
 }
 
 a {
-	color: #FFAA00;
+	color: #ffcf6f;
 	text-decoration: none;
 }
 
@@ -491,6 +491,16 @@ .object p {
 	margin-bottom: 10px;
 }
 
+p.edit {
+	color: #FFFF00;
+}
+p.add {
+	color: #00FF00;
+}
+p.delete {
+	color: #FF0000;
+}
+
 #drawControlsContainer {
 	background-color: #444;
 	border-right: 1px #000 solid;
@@ -648,6 +658,43 @@ #exportOverlay {
 	display: none;
 }
 
+#coordsWrapper {
+	min-width: 100px;
+	position: absolute;
+    display: flex;
+	gap: 10px;
+	z-index: 100;
+}
+.collapsed {	
+    top: 49px;
+    left: 149px;
+}
+.uncollapsed {
+    top: 49px;
+    left: 380px;
+}
+@media (max-width: 750px) {
+	#coordsWrapper {
+		display: none;
+	}
+}
+#coords {
+	background-color: #555;
+	border: 1px #000 solid;
+	padding: 3px;
+	font-size: 18px;
+	z-index: 1100;
+	display: flex;
+    align-items: center;
+    justify-content: center;
+	text-align: center;
+}
+
+#coords p {
+	margin: 0;
+	line-height: inherit;
+}
+
 #bottomBar {
 	position: absolute;
     bottom: 10px;

web/_js/infoblock.js

@@ -22,6 +22,12 @@ function createInfoBlock(entry) {
 
     element.appendChild(headerElement);
 
+    if (entry.diff) {
+        let diffElement = createInfoParagraph("Diff: ", entry.diff);
+        diffElement.className = entry.diff;
+        element.appendChild(diffElement);
+    }
+
     if (entry.description) {
         let descElement = document.createElement("p");
         descElement.innerText = entry.description;

web/_js/main.js

@@ -146,11 +146,7 @@ async function init(){
 				a[c.id] = c;
 				return a;
 			},{});
-			if(mode.endsWith("only")){
-				atlas = atlas.filter(function(entry) {
-					return JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id]);
-				});
-			}
+			// Mark added/edited entries
 			atlas = atlas.map(function(entry) {
 				if(liveAtlasReduced[entry.id] === undefined){
 					entry.diff = "add";
@@ -159,14 +155,38 @@ async function init(){
 				}
 				return entry;
 			});
+
+			// Mark removed entries
+			let atlasReduced = atlas.reduce(function(a, c) {
+				a[c.id] = c;
+				return a;
+			},{});
+			let removedEntries = liveJson.map(function(entry) {
+				if(atlasReduced[entry.id] === undefined){
+					entry.diff = "delete";
+				}
+				return entry;
+			});
+			atlas.push(...removedEntries)
+
+			if(mode.includes("only")){
+				atlas = atlas.filter(function(entry) {
+					return typeof entry.diff == "string"
+				});
+			}
+
 			//TEMP FOR TIME TRAVEL
 			atlasBackup = atlas;
 		} catch (error) {
 			console.log("Diff mode failed to load, reverting to normal view - " + error);
 		} finally {
+			if(initOverlap && mode.includes("overlap")){
+				initOverlap();
+			} else {
 				initView();
 			}
 		}
+	}
 	
 	function changeOverlapMode(){
 		console.log(mode)
@@ -325,7 +345,7 @@ async function init(){
 		applyZoom(x, y, zoom);
 
 		e.preventDefault();
-	});
+	}, {passive: true});
 
 	/*function setDesiredZoom(x, y, target){
 		zoom = (zoom*2 + target)/3;
@@ -354,7 +374,7 @@ async function init(){
 
 		touchstart(e);
 
-	});
+	},	{passive: true});
 
 	function mousedown(x, y){
 		lastPosition = [x, y];

web/_js/view.js

@@ -124,6 +124,10 @@ function renderBackground(atlas){
 				bgStrokeStyle = "rgba(255, 255, 0, 1)";
 				backgroundContext.lineWidth = 2;
 				break;
+			case "delete":
+				bgStrokeStyle = "rgba(255, 0, 0, 1)";
+				backgroundContext.lineWidth = 2;
+				break;
 			default:
 				bgStrokeStyle = "rgba(255, 255, 255, 0.8)";
 				break;
@@ -252,6 +256,7 @@ function initView(){
 		} else {
 			wrapper.className += " listHidden";
 		}
+		updateHovering();
 		applyView();
 		render();
 		updateLines();
@@ -336,12 +341,20 @@ function initView(){
 	}
 
 	function updateHovering(e, tapped){
+		var coordsWrapper = document.getElementById("coordsWrapper");
+		if (entriesListShown) {
+			coordsWrapper.className = "uncollapsed"
+		} else {
+			coordsWrapper.className = "collapsed"
+		}
 		
 		if(!dragging && (!fixed || tapped)){
 			var pos = [
 				 (e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
 				,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
 			];
+			var coords_p = document.getElementById("coords_p");
+			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
 
 			if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
 				var newHovered = [];
@@ -568,6 +581,7 @@ function initView(){
 					zoom = 4;
 					renderBackground(atlas);
 					applyView();
+					updateHovering();
 					
 					zoomOrigin = [
 						 innerContainer.clientWidth/2  - this.entry.center[0]* zoom// + container.offsetLeft
@@ -756,7 +770,7 @@ function initView(){
 				,e.touches[0].clientY
 			];
 		}
-	});
+	},{passive: true} );
 
 	container.addEventListener("mouseup", function(e){
 		if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){
@@ -803,6 +817,7 @@ function initView(){
 			entriesListShown = false;
 			wrapper.className += " listHidden";
 		}
+		updateHovering();
 
 		viewportWidth = document.documentElement.clientWidth;
 		

web/index.html

@@ -21,7 +21,7 @@
 -->
 
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>The 2022 /r/place Atlas</title>
@@ -33,10 +33,11 @@
 		
 		<!-- <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, user-scalable=no, shrink-to-fit=no">
+		<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">
 		
 		<link href="./_css/style.css?version=1.0.33" rel="stylesheet" type="text/css" media="all">
+		<link rel="manifest" href="./manifest.webmanifest">
 		
 		<script type="application/ld+json">
 			{
@@ -137,7 +138,14 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			</div>
 			<div id="entriesListBackground"></div>
 			
-			<button id="hideListButton"></button>
+			<button id="hideListButton" aria-label:="Show List Button"></button>
+
+			<div id="coordsWrapper" class="collapsed">
+
+				<div id="coords">
+					<p id="coords_p">0, 0</p>
+				</div>
+			</div>
 			
 			<div id="bottomBar">
 				<div id="zoomControls">

web/manifest.webmanifest

@@ -0,0 +1,32 @@
+{
+    "theme_color": "#f69435",
+    "background_color": "#f69435",
+    "display": "minimal-ui",
+    "scope": "/",
+    "start_url": "/",
+    "name": "r/place atlas",
+    "short_name": "r/placeAtlas2",
+    "description": "The atlas for the r/place event from 2022",
+    "icons": [
+        {
+            "src": "_img/pwa/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "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-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}