Added the ability to selectively override images, removed old, commented-out code from atlas.js, added more info into the info block (position, area).

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/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;