From 2e728ef20ff8e0b4b485388636f1833dbb53cf00 Mon Sep 17 00:00:00 2001
From: Hans5958 <hans5958@outlook.com>
Date: Sat, 16 Apr 2022 19:44:50 +0700
Subject: [PATCH] Fix no-var problems (ESLint), run formatter on JS

---
 web/_js/atlas.js          |  34 +--
 web/_js/draw.js           | 300 +++++++++++++--------------
 web/_js/infoblock.js      | 152 +++++++-------
 web/_js/main.js           | 308 +++++++++++++--------------
 web/_js/overlap.js        |  24 +--
 web/_js/pointInPolygon.js |  36 ++--
 web/_js/stats.js          | 158 +++++++-------
 web/_js/time.js           | 402 +++++++++++++++++------------------
 web/_js/view.js           | 426 +++++++++++++++++++-------------------
 9 files changed, 920 insertions(+), 920 deletions(-)

diff --git a/web/_js/atlas.js b/web/_js/atlas.js
index 2670953f..7dfee742 100644
--- a/web/_js/atlas.js
+++ b/web/_js/atlas.js
@@ -15,20 +15,20 @@
 
 window.addEventListener("error", function (e) {
 	console.log(e);
-	var errorMessage = "<p class=\"error\">An error has occurred:</p>";
+	let errorMessage = "<p class=\"error\">An error has occurred:</p>";
 	errorMessage += "<p class=\"errorBody\">" + e.message + "</p>";
 	errorMessage += "<p class=\"errorBody\">on line " + e.lineno + "</p>";
 	errorMessage += "<p class=\"error\">If this keeps happening, feel free to tell us on <a href=\"https://discord.gg/pJkm23b2nA\">our Discord server</a>.</p>";
 	document.getElementById("loadingContent").innerHTML = errorMessage;
 });
 
-function getPositionOfEntry(entry){
+function getPositionOfEntry(entry) {
 	let startX = 2000, startY = 2000;
-	for(const [x, y] of entry.path){
+	for (const [x, y] of entry.path) {
 		startX = Math.min(x, startX);
 		startY = Math.min(y, startY)
 	}
-	if(startX === 2000 || startY === 2000) return null;
+	if (startX === 2000 || startY === 2000) return null;
 	return [parseInt(startX), parseInt(startY)];
 }
 
@@ -36,25 +36,25 @@ const areaMap = new Map();
 
 // Modified from https://stackoverflow.com/a/33670691 
 function calcPolygonArea(vertices) {
-	var hit = areaMap.get(vertices);
+	const hit = areaMap.get(vertices);
 	if (hit != null) {
 		return hit;
 	}
 
-    var total = 0;
+	let total = 0;
 
-    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];
+	for (let i = 0, l = vertices.length; i < l; i++) {
+		const addX = vertices[i][0];
+		const addY = vertices[i == vertices.length - 1 ? 0 : i + 1][1];
+		const subX = vertices[i == vertices.length - 1 ? 0 : i + 1][0];
+		const subY = vertices[i][1];
 
-      total += (addX * addY * 0.5);
-      total -= (subX * subY * 0.5);
-    }
+		total += (addX * addY * 0.5);
+		total -= (subX * subY * 0.5);
+	}
 
-	var area = Math.floor(Math.abs(total));
+	const area = Math.floor(Math.abs(total));
 	areaMap.set(vertices, area);
-	
-    return area;
+
+	return area;
 }
\ No newline at end of file
diff --git a/web/_js/draw.js b/web/_js/draw.js
index 6d102fb2..22b46571 100644
--- a/web/_js/draw.js
+++ b/web/_js/draw.js
@@ -13,96 +13,96 @@
 	========================================================================
 */
 
-var finishButton = document.getElementById("finishButton");
-var resetButton = document.getElementById("resetButton");
-var undoButton = document.getElementById("undoButton");
-var redoButton = document.getElementById("redoButton");
-var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
-var entryId = 0
+const finishButton = document.getElementById("finishButton");
+const resetButton = document.getElementById("resetButton");
+const undoButton = document.getElementById("undoButton");
+const redoButton = document.getElementById("redoButton");
+const highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
+let entryId = 0
 
-var objectInfoBox = document.getElementById("objectInfo");
-var hintText = document.getElementById("hint");
+const objectInfoBox = document.getElementById("objectInfo");
+const hintText = document.getElementById("hint");
 
-var periodsStatus = document.getElementById('periodsStatus')
-var periodGroups = document.getElementById('periodGroups')
-var periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
-var periodsAdd = document.getElementById('periodsAdd')	
+const periodsStatus = document.getElementById('periodsStatus')
+const periodGroups = document.getElementById('periodGroups')
+const periodGroupTemplate = document.getElementById('period-group').content.firstElementChild.cloneNode(true)
+const periodsAdd = document.getElementById('periodsAdd')
 
-var exportButton = document.getElementById("exportButton");
-var cancelButton = document.getElementById("cancelButton");
+const exportButton = document.getElementById("exportButton");
+const cancelButton = document.getElementById("cancelButton");
 
-var exportOverlay = document.getElementById("exportOverlay");
-var exportCloseButton = document.getElementById("exportCloseButton");
-var exportBackButton = document.getElementById("exportBackButton")
+const exportOverlay = document.getElementById("exportOverlay");
+const exportCloseButton = document.getElementById("exportCloseButton");
+const exportBackButton = document.getElementById("exportBackButton")
 
-var path = [];
-var center = [1000, 1000];
+let path = [];
+let center = [1000, 1000];
 
-var pathWithPeriods = []
-var periodGroupElements = []
+let pathWithPeriods = []
+let periodGroupElements = []
 
-var disableDrawingOverride = false
-var drawing = true;
+let disableDrawingOverride = false
+let drawing = true;
 
-var periodClipboard = {
+const periodClipboard = {
 	"index": null,
 	"path": null
 }
 
-;[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
-	el.addEventListener("input", function() {
-		this.style.height = "auto";
-		this.style.height = (this.scrollHeight) + "px"
+	;[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
+		el.addEventListener("input", function () {
+			this.style.height = "auto";
+			this.style.height = (this.scrollHeight) + "px"
+		})
 	})
-})
 
-function initDraw(){
-	
+function initDraw() {
+
 	wrapper.classList.remove('listHidden')
 
 	window.render = render
 	window.renderBackground = renderBackground
 	window.updateHovering = updateHovering
 
-	// var startPeriodField = document.getElementById('startPeriodField')
-	// var endPeriodField = document.getElementById('endPeriodField')
-	// var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
+	// let startPeriodField = document.getElementById('startPeriodField')
+	// let endPeriodField = document.getElementById('endPeriodField')
+	// let periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
 
-	var rShiftPressed = false;
-	var lShiftPressed = false;
-	var shiftPressed = false;
+	let rShiftPressed = false;
+	let lShiftPressed = false;
+	let shiftPressed = false;
 
-	var highlightUncharted = true;
+	let highlightUncharted = true;
 
 	renderBackground();
 	applyView();
 
 	container.style.cursor = "crosshair";
-	
-	var undoHistory = [];
+
+	let undoHistory = [];
 
 	render(path);
 
-	container.addEventListener("mousedown", function(e){
+	container.addEventListener("mousedown", function (e) {
 		lastPos = [
-			 e.clientX,
+			e.clientX,
 			e.clientY
 		];
 	});
 
-	function getCanvasCoords(x, y){
+	function getCanvasCoords(x, y) {
 		x = x - container.offsetLeft;
 		y = y - container.offsetTop;
 
-		var pos = [
-			~~((x - (container.clientWidth/2  - innerContainer.clientWidth/2  + zoomOrigin[0]))/zoom)+0.5,
-			~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
+		const pos = [
+			~~((x - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0])) / zoom) + 0.5,
+			~~((y - (container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1])) / zoom) + 0.5
 		];
-		
-		if(shiftPressed && path.length > 0){
-			var previous = path[path.length-1];
-			
-			if(Math.abs(pos[1] - previous[1]) > Math.abs(pos[0] - previous[0]) ){
+
+		if (shiftPressed && path.length > 0) {
+			const previous = path[path.length - 1];
+
+			if (Math.abs(pos[1] - previous[1]) > Math.abs(pos[0] - previous[0])) {
 				pos[0] = previous[0];
 			} else {
 				pos[1] = previous[1];
@@ -112,13 +112,13 @@ function initDraw(){
 		return pos;
 	}
 
-	container.addEventListener("mouseup", function(e){
-		
+	container.addEventListener("mouseup", function (e) {
 
-		if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing){
 
-			var coords = getCanvasCoords(e.clientX, e.clientY);
-			
+		if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing) {
+
+			const coords = getCanvasCoords(e.clientX, e.clientY);
+
 			path.push(coords);
 			render(path);
 
@@ -126,7 +126,7 @@ function initDraw(){
 			redoButton.disabled = true;
 			undoButton.disabled = false;
 
-			if(path.length >= 3){
+			if (path.length >= 3) {
 				finishButton.disabled = false;
 			}
 
@@ -134,68 +134,68 @@ function initDraw(){
 		}
 	});
 
-	window.addEventListener("mousemove", function(e){
-		
-		if(!dragging && drawing && path.length > 0){
+	window.addEventListener("mousemove", function (e) {
 
-			var coords = getCanvasCoords(e.clientX, e.clientY);
+		if (!dragging && drawing && path.length > 0) {
+
+			const coords = getCanvasCoords(e.clientX, e.clientY);
 			render(path.concat([coords]));
 		}
-		
+
 	});
 
-	window.addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
+	window.addEventListener("keyup", function (e) {
+		if (e.key == "Enter") {
 			finish();
-		} else if(e.key == "z" && e.ctrlKey){
+		} else if (e.key == "z" && e.ctrlKey) {
 			undo();
-		} else if(e.key == "y" && e.ctrlKey){
+		} else if (e.key == "y" && e.ctrlKey) {
 			redo();
-		} else if(e.key == "Escape"){
+		} else if (e.key == "Escape") {
 			exportOverlay.style.display = "none";
-		} else if (e.key === "Shift" ){
-			if(e.code === "ShiftRight"){
+		} else if (e.key === "Shift") {
+			if (e.code === "ShiftRight") {
 				rShiftPressed = false;
-			} else if(e.code === "ShiftLeft"){
+			} else if (e.code === "ShiftLeft") {
 				lShiftPressed = false;
 			}
 			shiftPressed = rShiftPressed || lShiftPressed;
 		}
 	});
 
-	window.addEventListener("keydown", function(e){
-		if (e.key === "Shift" ){
-			if(e.code === "ShiftRight"){
+	window.addEventListener("keydown", function (e) {
+		if (e.key === "Shift") {
+			if (e.code === "ShiftRight") {
 				rShiftPressed = true;
-			} else if(e.code === "ShiftLeft"){
+			} else if (e.code === "ShiftLeft") {
 				lShiftPressed = true;
 			}
 			shiftPressed = rShiftPressed || lShiftPressed;
 		}
 	});
 
-	finishButton.addEventListener("click", function(e){
+	finishButton.addEventListener("click", function (e) {
 		finish();
 	});
 
-	undoButton.addEventListener("click", function(e){
+	undoButton.addEventListener("click", function (e) {
 		undo();
 	});
 
-	redoButton.addEventListener("click", function(e){
+	redoButton.addEventListener("click", function (e) {
 		redo();
 	});
 
-	resetButton.addEventListener("click", function(e){
+	resetButton.addEventListener("click", function (e) {
 		reset();
 	});
-	
-	cancelButton.addEventListener("click", function(e){
+
+	cancelButton.addEventListener("click", function (e) {
 		back();
 	});
 
-	document.getElementById("nameField").addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
+	document.getElementById("nameField").addEventListener("keyup", function (e) {
+		if (e.key == "Enter") {
 			exportJson();
 		}
 	});
@@ -212,27 +212,27 @@ function initDraw(){
 	// 	}
 	// });
 
-	exportButton.addEventListener("click", function(e){
+	exportButton.addEventListener("click", function (e) {
 		exportJson();
 	});
 
-	exportCloseButton.addEventListener("click", function(e){
+	exportCloseButton.addEventListener("click", function (e) {
 		reset();
 		exportOverlay.style.display = "none";
 	});
 
-	exportBackButton.addEventListener("click", function(e){
+	exportBackButton.addEventListener("click", function (e) {
 		finish();
 		exportOverlay.style.display = "none";
 	});
 
-	document.getElementById("highlightUncharted").addEventListener("click", function(e){
+	document.getElementById("highlightUncharted").addEventListener("click", function (e) {
 		highlightUncharted = this.checked;
 		render(path);
 	});
 
-	function exportJson(){		
-		var exportObject = {
+	function exportJson() {
+		const exportObject = {
 			id: entryId,
 			name: document.getElementById("nameField").value,
 			description: document.getElementById("descriptionField").value,
@@ -269,41 +269,41 @@ function initDraw(){
 		if (inputWebsite.length) exportObject.links.website = inputWebsite
 		if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit
 
-		var jsonString = JSON.stringify(exportObject, null, "\t");
-		var textarea = document.getElementById("exportString");
+		let jsonString = JSON.stringify(exportObject, null, "\t");
+		const textarea = document.getElementById("exportString");
 		jsonString = jsonString.split("\n");
 		jsonString = jsonString.join("\n    ");
-		jsonString = "    "+jsonString;
+		jsonString = "    " + jsonString;
 		textarea.value = jsonString;
-		var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
+		let directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text=" + encodeURIComponent(document.getElementById("exportString").value);
 		if (jsonString.length > 7493) {
-			directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent("    " + JSON.stringify(exportObject));
+			directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text=" + encodeURIComponent("    " + JSON.stringify(exportObject));
 		}
-		document.getElementById("exportDirectPost").href=directPostUrl;
+		document.getElementById("exportDirectPost").href = directPostUrl;
 
 		exportOverlay.style.display = "flex";
-		
+
 		textarea.focus();
 		textarea.select();
 	}
 
-	function undo(){
-		if(path.length > 0 && drawing){
+	function undo() {
+		if (path.length > 0 && drawing) {
 			undoHistory.push(path.pop());
 			redoButton.disabled = false;
 			updatePath()
 		}
 	}
 
-	function redo(){
-		if(undoHistory.length > 0 && drawing){
+	function redo() {
+		if (undoHistory.length > 0 && drawing) {
 			path.push(undoHistory.pop());
 			undoButton.disabled = false;
 			updatePath()
 		}
 	}
 
-	function finish(){
+	function finish() {
 		if (objectInfoBox.style.display === "block") return
 		updatePath()
 		drawing = false;
@@ -313,7 +313,7 @@ function initDraw(){
 		hintText.style.display = "none";
 		[...document.querySelectorAll("#drawControlsContainer textarea")].forEach(el => {
 			if (el.value) el.style.height = (el.scrollHeight) + "px"
-		})			
+		})
 		// if (isOnPeriod()) {
 		// 	periodVisbilityInfo.textContent = ""
 		// } else {
@@ -321,7 +321,7 @@ function initDraw(){
 		// }
 	}
 
-	function reset(){
+	function reset() {
 		updatePath([])
 		undoHistory = [];
 		drawing = true;
@@ -336,7 +336,7 @@ function initDraw(){
 		document.getElementById("subredditField").value = "";
 	}
 
-	function back(){
+	function back() {
 		drawing = true;
 		disableDrawingOverride = false;
 		updatePath()
@@ -345,54 +345,54 @@ function initDraw(){
 		hintText.style.display = "block";
 	}
 
-	function renderBackground(){
+	function renderBackground() {
 
 		backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
-			
+
 		backgroundContext.fillStyle = "rgba(0, 0, 0, 1)";
 		//backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
-		
-		for(var i = 0; i < atlas.length; i++){
 
-			var path = atlas[i].path;
-			
+		for (let i = 0; i < atlas.length; i++) {
+
+			const path = atlas[i].path;
+
 			backgroundContext.beginPath();
 
-			if(path[0]){
+			if (path[0]) {
 				backgroundContext.moveTo(path[0][0], path[0][1]);
 			}
-			
-			for(var p = 1; p < path.length; p++){
+
+			for (let p = 1; p < path.length; p++) {
 				backgroundContext.lineTo(path[p][0], path[p][1]);
 			}
 
 			backgroundContext.closePath();
-			
+
 			backgroundContext.fill();
 		}
 	}
 
-	function render(path){
+	function render(path) {
 
 		context.globalCompositeOperation = "source-over";
 		context.clearRect(0, 0, canvas.width, canvas.height);
-		
-		if(highlightUncharted){
+
+		if (highlightUncharted) {
 			context.drawImage(backgroundCanvas, 0, 0);
 			context.fillStyle = "rgba(0, 0, 0, 0.4)";
 		} else {
 			context.fillStyle = "rgba(0, 0, 0, 0.6)";
 		}
-		
+
 		context.fillRect(0, 0, canvas.width, canvas.height);
 
 		context.beginPath();
 
-		if(path[0]){
+		if (path[0]) {
 			context.moveTo(path[0][0], path[0][1]);
 		}
-		
-		for(var i = 1; i < path.length; i++){
+
+		for (let i = 1; i < path.length; i++) {
 			context.lineTo(path[i][0], path[i][1]);
 		}
 
@@ -405,16 +405,16 @@ function initDraw(){
 
 		context.fillStyle = "rgba(0, 0, 0, 1)";
 		context.fill();
-		
+
 	}
-	
-	function updateHovering(e, tapped){
-		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
+
+	function updateHovering(e, tapped) {
+		if (!dragging && (!fixed || tapped)) {
+			const 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");
+			const coords_p = document.getElementById("coords_p");
 			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
 		}
 	}
@@ -452,16 +452,16 @@ function initDraw(){
 	zoom = 4;
 
 	zoomOrigin = [
-		innerContainer.clientWidth/2  - center[0] * zoom,// + container.offsetLeft
-		innerContainer.clientHeight/2 - center[1] * zoom// + container.offsetTop
+		innerContainer.clientWidth / 2 - center[0] * zoom,// + container.offsetLeft
+		innerContainer.clientHeight / 2 - center[1] * zoom// + container.offsetTop
 	];
 
 	scaleZoomOrigin = [
-	   2000/2 - center[0],// + container.offsetLeft
-	   2000/2 - center[1]// + container.offsetTop
+		2000 / 2 - center[0],// + container.offsetLeft
+		2000 / 2 - center[1]// + container.offsetTop
 	];
 
-   applyView();
+	applyView();
 
 	document.addEventListener('timeupdate', (event) => {
 		renderBackground()
@@ -476,9 +476,9 @@ function initDraw(){
 
 }
 
-function calculateCenter(path){
+function calculateCenter(path) {
 
-	var area = 0,
+	let area = 0,
 		i,
 		j,
 		point1,
@@ -487,7 +487,7 @@ function calculateCenter(path){
 		y = 0,
 		f;
 
-	for (i = 0, j = path.length - 1; i < path.length; j=i,i++) {
+	for (i = 0, j = path.length - 1; i < path.length; j = i, i++) {
 		point1 = path[i];
 		point2 = path[j];
 		f = point1[0] * point2[1] - point2[0] * point1[1];
@@ -497,7 +497,7 @@ function calculateCenter(path){
 	}
 	area *= 3;
 
-	return [Math.floor(x / area)+0.5, Math.floor(y / area)+0.5];
+	return [Math.floor(x / area) + 0.5, Math.floor(y / area) + 0.5];
 }
 
 function initPeriodGroups() {
@@ -560,7 +560,7 @@ function initPeriodGroups() {
 			startPeriodEl.value = newVariationConfig.default
 			startPeriodEl.max = newVariationConfig.versions.length - 1
 			endPeriodEl.value = newVariationConfig.default
-			endPeriodEl.max = newVariationConfig.versions.length - 1	
+			endPeriodEl.max = newVariationConfig.versions.length - 1
 			updateTime(newVariationConfig.default, newVariation)
 			// console.log(parseInt(event.target.value))
 		})
@@ -613,10 +613,10 @@ function initPeriodGroups() {
 
 function updatePeriodGroups() {
 	// console.log('updatePeriodGroups')
-	var pathToActive = []
-	var lastActivePathIndex
-	var currentActivePathIndex 
-	var currentActivePathIndexes = []
+	let pathToActive = []
+	let lastActivePathIndex
+	let currentActivePathIndex
+	const currentActivePathIndexes = []
 
 	periodGroupElements.forEach((elements, index) => {
 		const {
@@ -632,7 +632,7 @@ function updatePeriodGroups() {
 		periodGroupEl.dataset.active = ""
 
 		if (isOnPeriod(
-			parseInt(startPeriodEl.value), 
+			parseInt(startPeriodEl.value),
 			parseInt(endPeriodEl.value),
 			periodVariationEl.value,
 			currentPeriod,
@@ -645,7 +645,7 @@ function updatePeriodGroups() {
 		}
 
 		pathWithPeriods[index][0] = formatPeriod(
-			parseInt(startPeriodEl.value), 
+			parseInt(startPeriodEl.value),
 			parseInt(endPeriodEl.value),
 			periodVariationEl.value
 		)
@@ -681,7 +681,7 @@ function updatePeriodGroups() {
 	// 	})
 	// 	currentActivePathIndex = undefined
 	// } 
-	
+
 	// console.log(lastActivePathIndex)
 	if (lastActivePathIndex !== undefined) {
 		if (lastActivePathIndex === currentActivePathIndex) {
@@ -715,11 +715,11 @@ function updatePeriodGroups() {
 	}
 
 	drawing = disableDrawingOverride ? false : currentActivePathIndex !== undefined
-	
+
 }
 
 function formatPeriod(start, end, variation) {
-	let periodString 
+	let periodString
 	if (start === end) periodString = start
 	else periodString = start + "-" + end
 	if (variation !== "default") periodString = variationsConfig[variation].code + ":" + periodString
@@ -766,11 +766,11 @@ function updateErrors() {
 		})
 	}
 }
- 
+
 function getConflicts() {
 
 	let conflicts = new Set()
-	
+
 	for (let i = pathWithPeriods.length - 1; i > 0; i--) {
 		const [start1, end1, period1] = parsePeriod(pathWithPeriods[i][0])
 		for (let j = 0; j < i; j++) {
@@ -801,7 +801,7 @@ function getErrors() {
 	pathWithPeriods.forEach(([period, path], i) => {
 		if (path.length < 3) invalidPaths.push(i)
 	})
-	
+
 	// console.info('conflicts', conflicts)
 	// console.info('invalid paths', invalidPaths)
 
diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js
index 85dd20df..981f247a 100644
--- a/web/_js/infoblock.js
+++ b/web/_js/infoblock.js
@@ -14,93 +14,93 @@
 */
 
 function createInfoBlock(entry) {
-    // console.log(entry)
-    function createInfoParagraph(name, value){
-        const entryParagraphPositionElement = document.createElement("p");
-        const nameElement = document.createElement("span");
-        nameElement.style.fontWeight = "bold";
-        nameElement.innerText = name;
-        const valueElement = document.createElement("span");
-        valueElement.innerText = value;
-        entryParagraphPositionElement.appendChild(nameElement);
-        entryParagraphPositionElement.appendChild(valueElement);
-        return entryParagraphPositionElement;
-    }
+	// console.log(entry)
+	function createInfoParagraph(name, value) {
+		const entryParagraphPositionElement = document.createElement("p");
+		const nameElement = document.createElement("span");
+		nameElement.style.fontWeight = "bold";
+		nameElement.innerText = name;
+		const valueElement = document.createElement("span");
+		valueElement.innerText = value;
+		entryParagraphPositionElement.appendChild(nameElement);
+		entryParagraphPositionElement.appendChild(valueElement);
+		return entryParagraphPositionElement;
+	}
 
-    var element = document.createElement("div");
-    element.className = "object";
+	const element = document.createElement("div");
+	element.className = "object";
 
-    const headerElement = document.createElement("h2");
-    const linkElement = document.createElement("a");
-    linkElement.href = "#" + entry.id;
-    linkElement.innerText = entry.name;
-    headerElement.appendChild(linkElement);
+	const headerElement = document.createElement("h2");
+	const linkElement = document.createElement("a");
+	linkElement.href = "#" + entry.id;
+	linkElement.innerText = entry.name;
+	headerElement.appendChild(linkElement);
 
-    element.appendChild(headerElement);
+	element.appendChild(headerElement);
 
-    if (entry.diff) {
-        const diffElement = createInfoParagraph("Diff: ", entry.diff);
-        diffElement.className = entry.diff;
-        element.appendChild(diffElement);
-    }
+	if (entry.diff) {
+		const diffElement = createInfoParagraph("Diff: ", entry.diff);
+		diffElement.className = entry.diff;
+		element.appendChild(diffElement);
+	}
 
-    if (entry.description) {
-        const descElement = document.createElement("p");
-        descElement.innerText = entry.description;
-        element.appendChild(descElement);
-    }
-    
-    const [x, y] = entry.center;
-    element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
+	if (entry.description) {
+		const descElement = document.createElement("p");
+		descElement.innerText = entry.description;
+		element.appendChild(descElement);
+	}
 
-    if(entry.path){
-        const area = calcPolygonArea(entry.path);
-        element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
-    }
+	const [x, y] = entry.center;
+	element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
 
-    entry.links.subreddit.forEach(subreddit => {
-        subreddit = "/r/" + subreddit;
-        const subredditLinkElement = document.createElement("a");
-        subredditLinkElement.target = "_blank";
-        subredditLinkElement.href = "https://reddit.com" + subreddit;
-        subredditLinkElement.innerText = subreddit;
-        element.appendChild(subredditLinkElement);
-    })
+	if (entry.path) {
+		const area = calcPolygonArea(entry.path);
+		element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
+	}
 
-    entry.links.website.forEach(link => {
-        const websiteLinkElement = document.createElement("a");
-        websiteLinkElement.target = "_blank";
-        websiteLinkElement.href = link;
-        websiteLinkElement.innerText = "Website";
-        element.appendChild(websiteLinkElement);
-    })
+	entry.links.subreddit.forEach(subreddit => {
+		subreddit = "/r/" + subreddit;
+		const subredditLinkElement = document.createElement("a");
+		subredditLinkElement.target = "_blank";
+		subredditLinkElement.href = "https://reddit.com" + subreddit;
+		subredditLinkElement.innerText = subreddit;
+		element.appendChild(subredditLinkElement);
+	})
 
-    entry.links.discord.forEach(link => {
-        const websiteLinkElement = document.createElement("a");
-        websiteLinkElement.target = "_blank";
-        websiteLinkElement.href = "https://discord.gg/" + link;
-        websiteLinkElement.innerText = "Discord";
-        element.appendChild(websiteLinkElement);
-    })
+	entry.links.website.forEach(link => {
+		const websiteLinkElement = document.createElement("a");
+		websiteLinkElement.target = "_blank";
+		websiteLinkElement.href = link;
+		websiteLinkElement.innerText = "Website";
+		element.appendChild(websiteLinkElement);
+	})
 
-    entry.links.wiki.forEach(link => {
-        const websiteLinkElement = document.createElement("a");
-        websiteLinkElement.target = "_blank";
-        websiteLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_');
-        websiteLinkElement.innerText = "Wiki Article";
-        element.appendChild(websiteLinkElement);
-    })
+	entry.links.discord.forEach(link => {
+		const websiteLinkElement = document.createElement("a");
+		websiteLinkElement.target = "_blank";
+		websiteLinkElement.href = "https://discord.gg/" + link;
+		websiteLinkElement.innerText = "Discord";
+		element.appendChild(websiteLinkElement);
+	})
 
-    const idElement = createInfoParagraph("ID: ", entry.id);
-    element.appendChild(idElement);
+	entry.links.wiki.forEach(link => {
+		const websiteLinkElement = document.createElement("a");
+		websiteLinkElement.target = "_blank";
+		websiteLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_');
+		websiteLinkElement.innerText = "Wiki Article";
+		element.appendChild(websiteLinkElement);
+	})
 
-    if (!entry.diff || entry.diff !== "delete") {
-        const editElement = document.createElement("a");
-        editElement.innerText = "Edit"
-        editElement.className = "objectEdit"
-        editElement.href = "./?mode=draw&id=" + entry.id
-        element.appendChild(editElement);    
-    }
+	const idElement = createInfoParagraph("ID: ", entry.id);
+	element.appendChild(idElement);
 
-    return element;
+	if (!entry.diff || entry.diff !== "delete") {
+		const editElement = document.createElement("a");
+		editElement.innerText = "Edit"
+		editElement.className = "objectEdit"
+		editElement.href = "./?mode=draw&id=" + entry.id
+		element.appendChild(editElement);
+	}
+
+	return element;
 }
\ No newline at end of file
diff --git a/web/_js/main.js b/web/_js/main.js
index f2ae3d69..859f588f 100644
--- a/web/_js/main.js
+++ b/web/_js/main.js
@@ -15,64 +15,64 @@
 
 const prodDomain = "place-atlas.stefanocoding.me"
 
-var innerContainer = document.getElementById("innerContainer");
-var container = document.getElementById("container");
-var canvas = document.getElementById("highlightCanvas");
-var context = canvas.getContext("2d");
+const innerContainer = document.getElementById("innerContainer");
+const container = document.getElementById("container");
+const canvas = document.getElementById("highlightCanvas");
+const context = canvas.getContext("2d");
 
-var zoom = 1;
+let zoom = 1;
 
-if(window.devicePixelRatio){
-	zoom = 1/window.devicePixelRatio;
+if (window.devicePixelRatio) {
+	zoom = 1 / window.devicePixelRatio;
 }
 
-var maxZoom = 128;
-var minZoom = 0.1;
+const maxZoom = 128;
+const minZoom = 0.1;
 
-var zoomOrigin = [0, 0];
-var scaleZoomOrigin = [0, 0];
+let zoomOrigin = [0, 0];
+let scaleZoomOrigin = [0, 0];
 
-var dragging = false;
-var lastPosition = [0, 0];
+let dragging = false;
+let lastPosition = [0, 0];
 
-var viewportSize = [0, 0];
+const viewportSize = [0, 0];
 
-document.getElementById("entriesListDonate").addEventListener("click", function(e){
+document.getElementById("entriesListDonate").addEventListener("click", function (e) {
 	document.getElementById("donateOverlay").style.display = "flex";
 });
 
-document.getElementById("closeDonateButton").addEventListener("click", function(e){
+document.getElementById("closeDonateButton").addEventListener("click", function (e) {
 	document.getElementById("donateOverlay").style.display = "none";
 });
 
-function applyView(){
-	
+function applyView() {
+
 	//console.log(zoomOrigin, scaleZoomOrigin);
 	//console.log(scaleZoomOrigin[0]);
 
 	scaleZoomOrigin[0] = Math.max(-1000, Math.min(1000, scaleZoomOrigin[0]));
 	scaleZoomOrigin[1] = Math.max(-1000, Math.min(1000, scaleZoomOrigin[1]));
 
-	zoomOrigin = [scaleZoomOrigin[0]*zoom, scaleZoomOrigin[1]*zoom];
+	zoomOrigin = [scaleZoomOrigin[0] * zoom, scaleZoomOrigin[1] * zoom];
+
+	innerContainer.style.height = (~~(zoom * 2000)) + "px";
+	innerContainer.style.width = (~~(zoom * 2000)) + "px";
+
+	innerContainer.style.left = ~~(container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0] + container.offsetLeft) + "px";
+	innerContainer.style.top = ~~(container.clientHeight / 2 - innerContainer.clientHeight / 2 + zoomOrigin[1] + container.offsetTop) + "px";
 
-	innerContainer.style.height = (~~(zoom*2000))+"px";
-	innerContainer.style.width = (~~(zoom*2000))+"px";
-	
-	innerContainer.style.left = ~~(container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft)+"px";
-	innerContainer.style.top = ~~(container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop)+"px";
-	
 }
 
-var atlas = null;
+let atlas = null;
 window.atlas = atlas
-var atlasAll = null
+let atlasAll = null
 window.atlasAll = atlasAll
 
 if (document.location.host !== prodDomain) document.body.dataset.dev = ""
 
 init();
 
-async function init(){
+async function init() {
 	// For Reviewing Reddit Changes
 	//let resp = await fetch("../tools/temp_atlas.json");
 	const resp = await fetch("./atlas.json");
@@ -89,7 +89,7 @@ async function init(){
 	});
 
 	atlasAll = updateAtlasAll(atlas);
-	
+
 	await updateTime(currentPeriod, currentVariation)
 
 	//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
@@ -97,18 +97,18 @@ async function init(){
 	zoomOrigin = [0, 0];
 	applyView();
 
-	var initialPinchDistance = 0;
-	var initialPinchZoom = 0;
-	var initialPinchZoomOrigin = [0, 0];
+	let initialPinchDistance = 0;
+	let initialPinchZoom = 0;
+	let initialPinchZoomOrigin = [0, 0];
 
-	var desiredZoom;
-	var zoomAnimationFrame;
+	let desiredZoom;
+	let zoomAnimationFrame;
 
-	var mode = "view";
+	let mode = "view";
 
-	var args = window.location.search;
-	var params = new URLSearchParams(args)
-	if (args){
+	const args = window.location.search;
+	const params = new URLSearchParams(args)
+	if (args) {
 		mode = params.get("mode")
 		if (!mode) {
 			mode = "view";
@@ -130,41 +130,41 @@ async function init(){
 	initGlobal()
 	if (mode !== "draw") initViewGlobal()
 
-	if(mode === "draw"){
-		initDraw();	
-	} else if(mode === "about"){
+	if (mode === "draw") {
+		initDraw();
+	} else if (mode === "about") {
 		window.location = "./about.html";
-	} else if(mode === "overlap"){
-		if(initOverlap){
+	} else if (mode === "overlap") {
+		if (initOverlap) {
 			initOverlap();
 		}
-	} else if(mode.startsWith("diff")){
+	} else if (mode.startsWith("diff")) {
 		try {
 			const liveResp = await fetch("https://place-atlas.stefanocoding.me/atlas.json");
 			let liveJson = await liveResp.json();
 			liveJson = updateAtlasAll(liveJson)
 			// console.log(liveJson)
 
-			const liveAtlasReduced = liveJson.reduce(function(a, c) {
+			const liveAtlasReduced = liveJson.reduce(function (a, c) {
 				a[c.id] = c;
 				return a;
-			},{});
+			}, {});
 			// Mark added/edited entries
-			atlasAll = atlasAll.map(function(entry) {
-				if(liveAtlasReduced[entry.id] === undefined){
+			atlasAll = atlasAll.map(function (entry) {
+				if (liveAtlasReduced[entry.id] === undefined) {
 					entry.diff = "add";
-				}else if(JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id])){
+				} else if (JSON.stringify(entry) !== JSON.stringify(liveAtlasReduced[entry.id])) {
 					entry.diff = "edit";
 				}
 				return entry;
 			});
 
 			// Mark removed entries
-			const atlasReduced = atlasAll.reduce(function(a, c) {
+			const atlasReduced = atlasAll.reduce(function (a, c) {
 				a[c.id] = c;
 				return a;
-			},{});
-			const removedEntries = liveJson.filter(entry => 
+			}, {});
+			const removedEntries = liveJson.filter(entry =>
 				atlasReduced[entry.id] === undefined
 			).map(entry => {
 				entry.diff = "delete"
@@ -172,8 +172,8 @@ async function init(){
 			})
 			atlasAll.push(...removedEntries)
 
-			if(mode.includes("only")){
-				atlasAll = atlasAll.filter(function(entry) {
+			if (mode.includes("only")) {
+				atlasAll = atlasAll.filter(function (entry) {
 					return typeof entry.diff == "string"
 				});
 			}
@@ -182,26 +182,26 @@ async function init(){
 			console.warn("Diff mode failed to load, reverting to normal view.", error);
 		} finally {
 			await updateTime()
-			if(initOverlap && mode.includes("overlap")){
+			if (initOverlap && mode.includes("overlap")) {
 				initOverlap();
 			} else {
 				initView();
 			}
 		}
-	} else if(mode === "explore"){
+	} else if (mode === "explore") {
 		initExplore();
 	} else {
 		initView();
 	}
-	
-	document.getElementById("zoomInButton").addEventListener("click", function(e){
+
+	document.getElementById("zoomInButton").addEventListener("click", function (e) {
 
 		/*if(zoomAnimationFrame){
 			window.cancelAnimationFrame(zoomAnimationFrame);
 		}*/
-		
-		var x = container.clientWidth/2;
-		var y = container.clientHeight/2;
+
+		const x = container.clientWidth / 2;
+		const y = container.clientHeight / 2;
 
 		initialPinchZoomOrigin = [
 			scaleZoomOrigin[0],
@@ -209,23 +209,23 @@ async function init(){
 		];
 
 		initialPinchZoom = zoom;
-		
+
 		lastPosition = [x, y];
 		zoom = zoom * 2;
 		zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
-		
+
 		applyZoom(x, y, zoom);
-		
+
 	});
 
-	document.getElementById("zoomOutButton").addEventListener("click", function(e){
+	document.getElementById("zoomOutButton").addEventListener("click", function (e) {
 
 		/*if(zoomAnimationFrame){
 			window.cancelAnimationFrame(zoomAnimationFrame);
 		}*/
-		
-		var x = container.clientWidth/2;
-		var y = container.clientHeight/2;
+
+		const x = container.clientWidth / 2;
+		const y = container.clientHeight / 2;
 
 		initialPinchZoomOrigin = [
 			scaleZoomOrigin[0],
@@ -233,15 +233,15 @@ async function init(){
 		];
 
 		initialPinchZoom = zoom;
-		
+
 		lastPosition = [x, y];
 		zoom = zoom / 2;
 		zoom = Math.max(minZoom, Math.min(maxZoom, zoom));
-		
+
 		applyZoom(x, y, zoom);
 	});
 
-	document.getElementById("zoomResetButton").addEventListener("click", function(e){
+	document.getElementById("zoomResetButton").addEventListener("click", function (e) {
 		zoom = 1;
 		zoomOrigin = [0, 0];
 		scaleZoomOrigin = [0, 0];
@@ -249,13 +249,13 @@ async function init(){
 		applyView();
 	});
 
-	container.addEventListener("dblclick", function(e){
+	container.addEventListener("dblclick", function (e) {
 		/*if(zoomAnimationFrame){
 			window.cancelAnimationFrame(zoomAnimationFrame);
 		}*/
 
-		var x = e.clientX - container.offsetLeft;
-		var y = e.clientY - container.offsetTop;
+		const x = e.clientX - container.offsetLeft;
+		const y = e.clientY - container.offsetTop;
 
 		initialPinchZoomOrigin = [
 			scaleZoomOrigin[0],
@@ -263,15 +263,15 @@ async function init(){
 		];
 
 		initialPinchZoom = zoom;
-		
+
 		lastPosition = [x, y];
 
-		if(e.ctrlKey){
+		if (e.ctrlKey) {
 
 			zoom = zoom / 2;
-			
+
 		} else {
-			
+
 			zoom = zoom * 2;
 		}
 
@@ -282,14 +282,14 @@ async function init(){
 	});
 
 
-	container.addEventListener("wheel", function(e){
+	container.addEventListener("wheel", function (e) {
 
 		/*if(zoomAnimationFrame){
 			window.cancelAnimationFrame(zoomAnimationFrame);
 		}*/
 
-		var x = e.clientX - container.offsetLeft;
-		var y = e.clientY - container.offsetTop;
+		const x = e.clientX - container.offsetLeft;
+		const y = e.clientY - container.offsetTop;
 
 		initialPinchZoomOrigin = [
 			scaleZoomOrigin[0],
@@ -297,7 +297,7 @@ async function init(){
 		];
 
 		initialPinchZoom = zoom;
-		
+
 		lastPosition = [x, y];
 
 		// Check if we are zooming by pixels
@@ -308,12 +308,12 @@ async function init(){
 			// This creates a smoother experience
 			zoom -= e.deltaY * (0.001 * zoom);
 		} else {
-			if(e.deltaY > 0){
-	
+			if (e.deltaY > 0) {
+
 				zoom = zoom / 2;
-				
-			} else if(e.deltaY < 0){
-				
+
+			} else if (e.deltaY < 0) {
+
 				zoom = zoom * 2;
 			}
 		}
@@ -322,7 +322,7 @@ async function init(){
 		applyZoom(x, y, zoom);
 
 		e.preventDefault();
-	}, {passive: true});
+	}, { passive: true });
 
 	/*function setDesiredZoom(x, y, target){
 		zoom = (zoom*2 + target)/3;
@@ -338,36 +338,36 @@ async function init(){
 		}
 	}*/
 
-	container.addEventListener("mousedown", function(e){
+	container.addEventListener("mousedown", function (e) {
 		mousedown(e.clientX, e.clientY);
 		e.preventDefault();
 	});
-	
-	container.addEventListener("touchstart", function(e){
 
-		if(e.touches.length == 2){
+	container.addEventListener("touchstart", function (e) {
+
+		if (e.touches.length == 2) {
 			e.preventDefault();
 		}
 
 		touchstart(e);
 
-	},	{passive: true});
+	}, { passive: true });
 
-	function mousedown(x, y){
+	function mousedown(x, y) {
 		lastPosition = [x, y];
 		dragging = true;
 	}
 
-	function touchstart(e){
-		
-		if(e.touches.length == 1){
-			
+	function touchstart(e) {
+
+		if (e.touches.length == 1) {
+
 			mousedown(e.touches[0].clientX, e.touches[0].clientY);
-			
-		} else if(e.touches.length == 2){
-			
+
+		} else if (e.touches.length == 2) {
+
 			initialPinchDistance = Math.sqrt(
-				  Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
+				Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
 				+ Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
 			);
 
@@ -376,46 +376,46 @@ async function init(){
 				scaleZoomOrigin[0],
 				scaleZoomOrigin[1]
 			];
-			
+
 			mousedown(
-				(e.touches[0].clientX + e.touches[1].clientX)/2,
-				(e.touches[0].clientY + e.touches[1].clientY)/2
+				(e.touches[0].clientX + e.touches[1].clientX) / 2,
+				(e.touches[0].clientY + e.touches[1].clientY) / 2
 			);
-			
+
 		}
-		
+
 	}
 
-	window.addEventListener("mousemove", function(e){
+	window.addEventListener("mousemove", function (e) {
 		updateLines();
 		mousemove(e.clientX, e.clientY);
-		if(dragging){
+		if (dragging) {
 			e.preventDefault();
 		}
 	});
-	window.addEventListener("touchmove", function(e){
+	window.addEventListener("touchmove", function (e) {
 
-		if(e.touches.length == 2 || e.scale > 1){
+		if (e.touches.length == 2 || e.scale > 1) {
 			e.preventDefault();
 		}
 
 		touchmove(e);
 
 	},
-	{passive: false}
+		{ passive: false }
 	);
 
-	function mousemove(x, y){
-		if(dragging){
-			var deltaX = x - lastPosition[0];
-			var deltaY = y - lastPosition[1];
+	function mousemove(x, y) {
+		if (dragging) {
+			const deltaX = x - lastPosition[0];
+			const deltaY = y - lastPosition[1];
 			lastPosition = [x, y];
 
 			zoomOrigin[0] += deltaX;
 			zoomOrigin[1] += deltaY;
 
-			scaleZoomOrigin[0] += deltaX/zoom;
-			scaleZoomOrigin[1] += deltaY/zoom;
+			scaleZoomOrigin[0] += deltaX / zoom;
+			scaleZoomOrigin[1] += deltaY / zoom;
 
 			previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]];
 			previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]];
@@ -425,83 +425,83 @@ async function init(){
 		}
 	}
 
-	function touchmove(e){
+	function touchmove(e) {
 
 		updateLines();
-		
-		if(e.touches.length == 1){
-			
+
+		if (e.touches.length == 1) {
+
 			mousemove(e.touches[0].clientX, e.touches[0].clientY);
-			
-		} else if(e.touches.length == 2){
-			
-			var newPinchDistance = Math.sqrt(
-				  Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
+
+		} else if (e.touches.length == 2) {
+
+			const newPinchDistance = Math.sqrt(
+				Math.pow(e.touches[0].clientX - e.touches[1].clientX, 2)
 				+ Math.pow(e.touches[0].clientY - e.touches[1].clientY, 2)
 			);
 
 			zoom = initialPinchZoom * newPinchDistance / initialPinchDistance;
 
-			var x = (e.touches[0].clientX + e.touches[1].clientX)/2 - container.offsetLeft;
-			var y = (e.touches[0].clientY + e.touches[1].clientY)/2 - container.offsetTop;
+			const x = (e.touches[0].clientX + e.touches[1].clientX) / 2 - container.offsetLeft;
+			const y = (e.touches[0].clientY + e.touches[1].clientY) / 2 - container.offsetTop;
 
 			applyZoom(x, y, zoom);
-			
+
 		}
-		
+
 	}
 
-	function applyZoom(x, y, zoom){
+	function applyZoom(x, y, zoom) {
 
-		var deltaX = x - lastPosition[0];
-		var deltaY = y - lastPosition[1];
+		const deltaX = x - lastPosition[0];
+		const deltaY = y - lastPosition[1];
 
-		var pinchTranslateX = (x - container.clientWidth/2 - deltaX);
-		var pinchTranslateY = (y - container.clientHeight/2 - deltaY);
+		const pinchTranslateX = (x - container.clientWidth / 2 - deltaX);
+		const pinchTranslateY = (y - container.clientHeight / 2 - deltaY);
 
-		scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX/zoom + pinchTranslateX/zoom - pinchTranslateX/initialPinchZoom;
-		scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY/zoom + pinchTranslateY/zoom - pinchTranslateY/initialPinchZoom;
+		scaleZoomOrigin[0] = initialPinchZoomOrigin[0] + deltaX / zoom + pinchTranslateX / zoom - pinchTranslateX / initialPinchZoom;
+		scaleZoomOrigin[1] = initialPinchZoomOrigin[1] + deltaY / zoom + pinchTranslateY / zoom - pinchTranslateY / initialPinchZoom;
 
-		zoomOrigin[0] = scaleZoomOrigin[0]*zoom;
-		zoomOrigin[1] = scaleZoomOrigin[1]*zoom;
+		zoomOrigin[0] = scaleZoomOrigin[0] * zoom;
+		zoomOrigin[1] = scaleZoomOrigin[1] * zoom;
 
 		applyView();
 		updateLines();
 	}
 
-	window.addEventListener("mouseup", function(e){
-		if(dragging){
+	window.addEventListener("mouseup", function (e) {
+		if (dragging) {
 			e.preventDefault();
 		}
 		mouseup(e.clientX, e.clientY);
 	});
 	window.addEventListener("touchend", touchend);
 
-	function mouseup(x, y){
-		if(dragging){
+	function mouseup(x, y) {
+		if (dragging) {
 			dragging = false;
 		}
 	}
 
-	function touchend(e){
-		
-		if(e.touches.length == 0){
-			
+	function touchend(e) {
+
+		if (e.touches.length == 0) {
+
 			mouseup();
-			
-		} else if(e.touches.length == 1){
+
+		} else if (e.touches.length == 1) {
 			initialPinchZoom = zoom;
 			lastPosition = [e.touches[0].clientX, e.touches[0].clientY];
 		}
-		
+
 	}
 
-	window.addEventListener("resize", function(){
+	window.addEventListener("resize", function () {
 		//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
-		
+
 		applyView();
 	});
-	
+
 	document.body.dataset.initDone = ''
 
 }
diff --git a/web/_js/overlap.js b/web/_js/overlap.js
index a9caf2a6..a9682ebe 100644
--- a/web/_js/overlap.js
+++ b/web/_js/overlap.js
@@ -13,11 +13,11 @@
 	========================================================================
 */
 
-function initOverlap(){
+function initOverlap() {
 
 	window.renderBackground = renderBackground
 
-	var hovered = [];
+	const hovered = [];
 
 	buildObjectsList(null, null);
 	renderBackground(atlas);
@@ -34,7 +34,7 @@ function initOverlap(){
 	render();
 	updateLines();
 
-	if(window.location.hash){
+	if (window.location.hash) {
 		highlightEntryFromUrl();
 	}
 
@@ -45,17 +45,17 @@ function initOverlap(){
 		backgroundContext.fillStyle = "rgba(255, 255, 255, 1)";
 		backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
 
-		for(var i = 0; i < atlas.length; i++){
+		for (let i = 0; i < atlas.length; i++) {
 
-			var path = atlas[i].path;
+			const path = atlas[i].path;
 
 			backgroundContext.beginPath();
 
-			if(path[0]){
+			if (path[0]) {
 				backgroundContext.moveTo(path[0][0], path[0][1]);
 			}
 
-			for(var p = 1; p < path.length; p++){
+			for (let p = 1; p < path.length; p++) {
 				backgroundContext.lineTo(path[p][0], path[p][1]);
 			}
 
@@ -65,16 +65,16 @@ function initOverlap(){
 			backgroundContext.fill();
 		}
 
-		var pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data;
-		var blank = 0;
+		const pixels = backgroundContext.getImageData(0, 0, backgroundCanvas.width, backgroundCanvas.height).data;
+		let blank = 0;
 
-		for(var i = 0; i < pixels.length; i+=4){
-			if(pixels[i] == 255){
+		for (let i = 0; i < pixels.length; i += 4) {
+			if (pixels[i] == 255) {
 				blank++;
 			}
 		}
 
-		console.log(blank+" blank pixels, which are "+Math.round(blank/100)/100+"% of the canvas ("+(100-Math.round(blank/100)/100)+"% mapped)");
+		console.log(blank + " blank pixels, which are " + Math.round(blank / 100) / 100 + "% of the canvas (" + (100 - Math.round(blank / 100) / 100) + "% mapped)");
 	}
 
 }
diff --git a/web/_js/pointInPolygon.js b/web/_js/pointInPolygon.js
index d974e7a0..ca59baa9 100644
--- a/web/_js/pointInPolygon.js
+++ b/web/_js/pointInPolygon.js
@@ -24,21 +24,21 @@ SOFTWARE.
 
 */
 
-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;
-};
+function pointIsInPolygon(point, polygon) {
+	// ray-casting algorithm based on
+	// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
+
+	const x = point[0], y = point[1];
+
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i][0], yi = polygon[i][1];
+		const xj = polygon[j][0], yj = polygon[j][1];
+
+		const intersect = ((yi > y) != (yj > y))
+			&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
+		if (intersect) inside = !inside;
+	}
+
+	return inside;
+}
diff --git a/web/_js/stats.js b/web/_js/stats.js
index ab802025..898cbcb3 100644
--- a/web/_js/stats.js
+++ b/web/_js/stats.js
@@ -13,94 +13,94 @@
 	========================================================================
 */
 
-var areasSum = 0;
-var areas = [];
+let areasSum = 0;
+const areas = [];
 
-for(var q = 0; q < atlas.length; q++){
+for (let q = 0; q < atlas.length; q++) {
 
-	var path = atlas[q].path;
+	const path = atlas[q].path;
 
-	var area = 0,
+	let area = 0,
 		i,
 		j,
 		point1,
 		point2;
 
-	for (i = 0, j = path.length - 1; i < path.length; j=i,i++) {
+	for (i = 0, j = path.length - 1; i < path.length; j = i, i++) {
 		point1 = path[i];
 		point2 = path[j];
 		area += point1[0] * point2[1];
 		area -= point1[1] * point2[0];
 	}
 
-	area = Math.abs(area/2);
+	area = Math.abs(area / 2);
 
 	areasSum += area;
 	areas.push(area);
 
 	atlas[q].area = area;
-	
+
 }
 
-areas.sort(function(a, b){
+areas.sort(function (a, b) {
 	if (a < b) {
 		return -1;
 	}
 	if (a > b) {
 		return 1;
 	}
-		// a must be equal to b
+	// a must be equal to b
 	return 0;
 });
 
-atlas.sort(function(a, b){
+atlas.sort(function (a, b) {
 	if (a.area < b.area) {
 		return -1;
 	}
 	if (a.area > b.area) {
 		return 1;
 	}
-		// a must be equal to b
+	// a must be equal to b
 	return 0;
 });
 
-var el = document.createElement("canvas");
+const el = document.createElement("canvas");
 el.style.position = "absolute";
 el.style.top = "0px";
 el.style.zIndex = "10000";
-var ctx = el.getContext("2d");
+const ctx = el.getContext("2d");
 el.width = 1600;
 el.height = 500;
-var steps = 150;
-var max = 1500;
+const steps = 150;
+const max = 1500;
 
-var largerThanMax = 0;
+let largerThanMax = 0;
 
-for(var i in areas){
-	if(areas[i] > max){
+for (const i in areas) {
+	if (areas[i] > max) {
 		largerThanMax++;
 	}
 }
 
-console.log("There are "+largerThanMax+" entries larger than "+max+", accounting for "+(largerThanMax/areas.length*100)+"% of all entries.");
-console.log("The largest entry has an area of "+areas[areas.length-1]+" pixels.");
+console.log("There are " + largerThanMax + " entries larger than " + max + ", accounting for " + (largerThanMax / areas.length * 100) + "% of all entries.");
+console.log("The largest entry has an area of " + areas[areas.length - 1] + " pixels.");
 
-var counts = [0];
-var brackets = [max/steps];
+const counts = [0];
+const brackets = [max / steps];
 
-var bracket = 0;
+let bracket = 0;
 
-var mostCounts = 0;
+let mostCounts = 0;
 
-for(var i in areas){
-	if(areas[i] > (bracket+1)*(max/steps)){
+for (const i in areas) {
+	if (areas[i] > (bracket + 1) * (max / steps)) {
 		mostCounts = Math.max(mostCounts, counts[bracket]);
 		bracket++;
-		if(bracket >= steps){
+		if (bracket >= steps) {
 			break;
 		}
 		counts[bracket] = 0;
-		brackets[bracket] = (bracket+1)*(max/steps);
+		brackets[bracket] = (bracket + 1) * (max / steps);
 	}
 	counts[bracket]++;
 }
@@ -117,17 +117,17 @@ ctx.font = "15px sans";
 ctx.textAlign = "right";
 ctx.textBaseline = "middle";
 
-var linesDistance = 1;
+let linesDistance = 1;
 
-for(var i = 0; i <= Math.ceil((mostCounts/linesDistance)/5)*5; i++){
+for (let i = 0; i <= Math.ceil((mostCounts / linesDistance) / 5) * 5; i++) {
 	ctx.beginPath();
 	ctx.moveTo(
-		 50
-		,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5
+		50
+		, ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5
 	);
 	ctx.lineTo(
-		 el.width-25
-		,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5
+		el.width - 25
+		, ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5
 	);
 	ctx.stroke();
 }
@@ -135,56 +135,56 @@ for(var i = 0; i <= Math.ceil((mostCounts/linesDistance)/5)*5; i++){
 ctx.strokeStyle = "#333333";
 linesDistance = 5;
 
-for(var i = 0; i <= Math.ceil(mostCounts/linesDistance); i++){
+for (let i = 0; i <= Math.ceil(mostCounts / linesDistance); i++) {
 	ctx.beginPath();
 	ctx.moveTo(
-		 50
-		,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5
+		50
+		, ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5
 	);
 	ctx.lineTo(
-		 el.width-25
-		,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5
+		el.width - 25
+		, ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5
 	);
 	ctx.stroke();
-	
+
 	ctx.fillText(
-		i*linesDistance
-		,40
-		,~~(el.height - 50 - i*(linesDistance/mostCounts)*(el.height-100))+0.5
+		i * linesDistance
+		, 40
+		, ~~(el.height - 50 - i * (linesDistance / mostCounts) * (el.height - 100)) + 0.5
 	);
 }
 
-var skip = 2;
+const skip = 2;
 
 ctx.textAlign = "center";
 ctx.textBaseline = "hanging";
 ctx.font = "10px sans";
 
-var a = 0;
-for(var i=0; i <= counts.length; i++){
-	if(i%skip == 0){
-		var y = 0;
-		if(a % 2 == 0){
-			y = ~~(el.height - 30)+0.5;
+let a = 0;
+for (let i = 0; i <= counts.length; i++) {
+	if (i % skip == 0) {
+		let y = 0;
+		if (a % 2 == 0) {
+			y = ~~(el.height - 30) + 0.5;
 		} else {
-			y = ~~(el.height - 45)+0.5;
+			y = ~~(el.height - 45) + 0.5;
 		}
 		a++;
 		ctx.beginPath();
 		ctx.moveTo(
-			 ~~(((i)/steps)*(el.width-125)+75)+0.5
-			,~~(el.height - 50)+0.5
+			~~(((i) / steps) * (el.width - 125) + 75) + 0.5
+			, ~~(el.height - 50) + 0.5
 		);
 		ctx.lineTo(
-			 ~~(((i)/steps)*(el.width-125)+75)+0.5
-			,y
+			~~(((i) / steps) * (el.width - 125) + 75) + 0.5
+			, y
 		);
 		ctx.stroke();
 
 		ctx.fillText(
-			 (i)*(max/steps)
-			,~~(((i)/steps)*(el.width-125)+75)-0.5
-			,y+5
+			(i) * (max / steps)
+			, ~~(((i) / steps) * (el.width - 125) + 75) - 0.5
+			, y + 5
 		);
 	}
 }
@@ -192,18 +192,18 @@ for(var i=0; i <= counts.length; i++){
 ctx.fillStyle = "#FF0000";
 ctx.strokeStyle = "#CC0000";
 
-for(var i = 0; i < counts.length; i++){
-	if(i%2 == 0){
+for (let i = 0; i < counts.length; i++) {
+	if (i % 2 == 0) {
 		ctx.fillStyle = "#FF0000";
 	} else {
 		ctx.fillStyle = "#DD0000";
 	}
-	
+
 	ctx.fillRect(
-		 ~~((i/steps)*(el.width-125)+75)
-		,el.height - 50
-		,Math.ceil(1/steps*(el.width-125))
-		,~~(-(counts[i]/mostCounts)*(el.height-100))
+		~~((i / steps) * (el.width - 125) + 75)
+		, el.height - 50
+		, Math.ceil(1 / steps * (el.width - 125))
+		, ~~(-(counts[i] / mostCounts) * (el.height - 100))
 	);
 
 	/*ctx.beginPath();
@@ -230,46 +230,46 @@ document.getElementById("wrapper").appendChild(el);
 
 //console.log(areas);
 
-console.log("Median area: "+areas[~~(areas.length/2)]);
+console.log("Median area: " + areas[~~(areas.length / 2)]);
 
-console.log("Average area: "+(areasSum/atlas.length));
+console.log("Average area: " + (areasSum / atlas.length));
 
-var topCount = 50;
-console.log("The "+topCount+" largest entries:");
+const topCount = 50;
+console.log("The " + topCount + " largest entries:");
 
-var outstring = "";
+let outstring = "";
 
-for(var i = 0; i < topCount; i++){
-	outstring += ((i+1)+"|["+atlas[atlas.length-i-1].name +"](http://place-atlas.stefanocoding.me/?id="+atlas[atlas.length-i-1].id+")|"+ ~~atlas[atlas.length-i-1].area+"|"+Math.round(atlas[atlas.length-i-1].area/100)/100+"%\n");
+for (let i = 0; i < topCount; i++) {
+	outstring += ((i + 1) + "|[" + atlas[atlas.length - i - 1].name + "](http://place-atlas.stefanocoding.me/?id=" + atlas[atlas.length - i - 1].id + ")|" + ~~atlas[atlas.length - i - 1].area + "|" + Math.round(atlas[atlas.length - i - 1].area / 100) / 100 + "%\n");
 }
 
 console.log(outstring);
 
-atlas.sort(function(a, b){
+atlas.sort(function (a, b) {
 	if (a.center[0] < b.center[0]) {
 		return -1;
 	}
 	if (a.center[0] > b.center[0]) {
 		return 1;
 	}
-		// a must be equal to b
+	// a must be equal to b
 	return 0;
 });
 
-console.log("Median x: "+atlas[~~(atlas.length/2)].center[0]);
+console.log("Median x: " + atlas[~~(atlas.length / 2)].center[0]);
 
-atlas.sort(function(a, b){
+atlas.sort(function (a, b) {
 	if (a.center[1] < b.center[1]) {
 		return -1;
 	}
 	if (a.center[1] > b.center[1]) {
 		return 1;
 	}
-		// a must be equal to b
+	// a must be equal to b
 	return 0;
 });
 
-console.log("Median y: "+atlas[~~(atlas.length/2)].center[1]);
+console.log("Median y: " + atlas[~~(atlas.length / 2)].center[1]);
 
 
 
diff --git a/web/_js/time.js b/web/_js/time.js
index f47932c2..0370e752 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -14,73 +14,73 @@
 */
 
 const variationsConfig = {
-    default: {
-        name: "r/place",
-        code: "",
-        default: 14,
-        versions: [
-            {
-                timestamp: 1648822500,
-                url: "./_img/place/1648822500.png"
-            },
-            {
-                timestamp: 1648847036,
-                url: "./_img/place/1648847036.png"
-            },
-            {
-                timestamp: 1648870452,
-                url: "./_img/place/1648870452.png"
-            },
-            {
-                timestamp: 1648893666,
-                url: "./_img/place/1648893666.png"
-            },
-            {
-                timestamp: 1648917500,
-                url: "./_img/place/1648917500.png"
-            },
-            {
-                timestamp: 1648942113,
-                url: "./_img/place/1648942113.png"
-            },
-            {
-                timestamp: 1648956234,
-                url: "./_img/place/1648956234.png"
-            },
-            {
-                timestamp: 1648968061,
-                url: "./_img/place/1648968061.png"
-            },
-            {
-                timestamp: 1648979987,
-                url: "./_img/place/1648979987.png"
-            },
-            {
-                timestamp: 1648992274,
-                url: "./_img/place/1648992274.png"
-            },
-            {
-                timestamp: 1649012915,
-                url: "./_img/place/1649012915.png"
-            },
-            {
-                timestamp: 1649037182,
-                url: "./_img/place/1649037182.png"
-            },
-            {
-                timestamp: 1649060793,
-                url: "./_img/place/1649060793.png"
-            },
-            {
-                timestamp: 1649084741,
-                url: "./_img/place/1649084741.png"
-            },
-            {
-                timestamp: 1649113199,
-                url: "./_img/place/final.png"
-            }
-        ]
-    }
+	default: {
+		name: "r/place",
+		code: "",
+		default: 14,
+		versions: [
+			{
+				timestamp: 1648822500,
+				url: "./_img/place/1648822500.png"
+			},
+			{
+				timestamp: 1648847036,
+				url: "./_img/place/1648847036.png"
+			},
+			{
+				timestamp: 1648870452,
+				url: "./_img/place/1648870452.png"
+			},
+			{
+				timestamp: 1648893666,
+				url: "./_img/place/1648893666.png"
+			},
+			{
+				timestamp: 1648917500,
+				url: "./_img/place/1648917500.png"
+			},
+			{
+				timestamp: 1648942113,
+				url: "./_img/place/1648942113.png"
+			},
+			{
+				timestamp: 1648956234,
+				url: "./_img/place/1648956234.png"
+			},
+			{
+				timestamp: 1648968061,
+				url: "./_img/place/1648968061.png"
+			},
+			{
+				timestamp: 1648979987,
+				url: "./_img/place/1648979987.png"
+			},
+			{
+				timestamp: 1648992274,
+				url: "./_img/place/1648992274.png"
+			},
+			{
+				timestamp: 1649012915,
+				url: "./_img/place/1649012915.png"
+			},
+			{
+				timestamp: 1649037182,
+				url: "./_img/place/1649037182.png"
+			},
+			{
+				timestamp: 1649060793,
+				url: "./_img/place/1649060793.png"
+			},
+			{
+				timestamp: 1649084741,
+				url: "./_img/place/1649084741.png"
+			},
+			{
+				timestamp: 1649113199,
+				url: "./_img/place/final.png"
+			}
+		]
+	}
 }
 
 const codeReference = {}
@@ -89,11 +89,11 @@ const imageCache = {}
 const variantsEl = document.getElementById("variants")
 
 for (const variation in variationsConfig) {
-    codeReference[variationsConfig[variation].code] = variation
-    const optionEl = document.createElement('option')
-    optionEl.value = variation
-    optionEl.textContent = variationsConfig[variation].name
-    variantsEl.appendChild(optionEl)
+	codeReference[variationsConfig[variation].code] = variation
+	const optionEl = document.createElement('option')
+	optionEl.value = variation
+	optionEl.textContent = variationsConfig[variation].name
+	variantsEl.appendChild(optionEl)
 }
 
 const timelineSlider = document.getElementById("timeControlsSlider");
@@ -114,15 +114,15 @@ timelineSlider.max = variationsConfig[currentVariation].versions.length - 1;
 timelineSlider.value = currentPeriod;
 
 timelineSlider.addEventListener("input", (event) => {
-    updateTooltip(parseInt(event.target.value), currentVariation)
-    clearTimeout(updateTimeout)
-    updateTimeout = setTimeout(() => {
-        updateTime(parseInt(event.target.value), currentVariation)
-    }, 100)
+	updateTooltip(parseInt(event.target.value), currentVariation)
+	clearTimeout(updateTimeout)
+	updateTimeout = setTimeout(() => {
+		updateTime(parseInt(event.target.value), currentVariation)
+	}, 10)
 })
 
 variantsEl.addEventListener("input", (event) => {
-    updateTime(currentPeriod, event.target.value)
+	updateTime(currentPeriod, event.target.value)
 })
 
 // document.querySelector('#period-group .period-start').oninput = (event) => {
@@ -136,140 +136,140 @@ variantsEl.addEventListener("input", (event) => {
 // };
 
 const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => {
-    const timeUpdateEvent = new CustomEvent('timeupdate', {
-        detail: {
-            period: period,
-            atlas: atlas
-        }
-    });
-    document.dispatchEvent(timeUpdateEvent);
+	const timeUpdateEvent = new CustomEvent('timeupdate', {
+		detail: {
+			period: period,
+			atlas: atlas
+		}
+	});
+	document.dispatchEvent(timeUpdateEvent);
 }
 
 async function updateBackground(newPeriod = currentPeriod, newVariation = currentVariation) {
-    console.log(newPeriod, newVariation)
-    abortController.abort()
-    abortController = new AbortController()
-    currentUpdateIndex++
-    const myUpdateIndex = currentUpdateIndex
-    currentPeriod = newPeriod
-    // console.log(newPeriod, newVariation)
-    const variationConfig = variationsConfig[newVariation]
-    if (currentVariation !== newVariation) {
-        currentVariation = newVariation
-        timelineSlider.max = variationConfig.versions.length - 1;
-        currentPeriod = variationConfig.default;
-        newPeriod = currentPeriod 
-    }
-    timelineSlider.value = currentPeriod 
-    variantsEl.value = currentVariation 
-    const configObject = variationConfig.versions[currentPeriod];
-    if (typeof configObject.url === "string") {
-        if (imageCache[configObject.url] === undefined)  {
-            const fetchResult = await fetch(configObject.url, {
-                signal: abortController.signal
-            });
-            if (currentUpdateIndex !== myUpdateIndex) {
-                hideLoading()
-                return
-            }
-            const imageBlob = await fetchResult.blob()
-            imageCache[configObject.url] = URL.createObjectURL(imageBlob)  
-        }
-        image.src = imageCache[configObject.url]
-    } else {
-        const canvas = document.createElement('canvas')
-        const context = canvas.getContext('2d')
-        context.canvas.width = 2000
-        context.canvas.height = 2000
-        for await (const url of configObject.url) {
-            if (imageCache[url] === undefined)  {
-                const fetchResult = await fetch(url, {
-                    signal: abortController.signal
-                });
-                if (currentUpdateIndex !== myUpdateIndex) {
-                    hideLoading()
-                    break
-                }
-                const imageBlob = await fetchResult.blob()
-                imageCache[url] = URL.createObjectURL(imageBlob) 
-            }
-            const imageLayer = new Image()
-            console.log(imageCache[url])
-            await new Promise(resolve => {
-                imageLayer.onload = () => {
-                    context.drawImage(imageLayer, 0, 0)
-                    console.log("image done")        
-                    resolve()
-                }
-                imageLayer.src = imageCache[url]
-            })
-            
-        }
-        if (currentUpdateIndex !== myUpdateIndex) return
-        const blob = await new Promise(resolve => canvas.toBlob(resolve))
-        console.log(URL.createObjectURL(blob))
-        image.src = URL.createObjectURL(blob)
-    }
+	console.log(newPeriod, newVariation)
+	abortController.abort()
+	abortController = new AbortController()
+	currentUpdateIndex++
+	const myUpdateIndex = currentUpdateIndex
+	currentPeriod = newPeriod
+	// console.log(newPeriod, newVariation)
+	const variationConfig = variationsConfig[newVariation]
+	if (currentVariation !== newVariation) {
+		currentVariation = newVariation
+		timelineSlider.max = variationConfig.versions.length - 1;
+		currentPeriod = variationConfig.default;
+		newPeriod = currentPeriod
+	}
+	timelineSlider.value = currentPeriod
+	variantsEl.value = currentVariation
+	const configObject = variationConfig.versions[currentPeriod];
+	if (typeof configObject.url === "string") {
+		if (imageCache[configObject.url] === undefined) {
+			const fetchResult = await fetch(configObject.url, {
+				signal: abortController.signal
+			});
+			if (currentUpdateIndex !== myUpdateIndex) {
+				hideLoading()
+				return
+			}
+			const imageBlob = await fetchResult.blob()
+			imageCache[configObject.url] = URL.createObjectURL(imageBlob)
+		}
+		image.src = imageCache[configObject.url]
+	} else {
+		const canvas = document.createElement('canvas')
+		const context = canvas.getContext('2d')
+		context.canvas.width = 2000
+		context.canvas.height = 2000
+		for await (const url of configObject.url) {
+			if (imageCache[url] === undefined) {
+				const fetchResult = await fetch(url, {
+					signal: abortController.signal
+				});
+				if (currentUpdateIndex !== myUpdateIndex) {
+					hideLoading()
+					break
+				}
+				const imageBlob = await fetchResult.blob()
+				imageCache[url] = URL.createObjectURL(imageBlob)
+			}
+			const imageLayer = new Image()
+			console.log(imageCache[url])
+			await new Promise(resolve => {
+				imageLayer.onload = () => {
+					context.drawImage(imageLayer, 0, 0)
+					console.log("image done")
+					resolve()
+				}
+				imageLayer.src = imageCache[url]
+			})
 
-    return [configObject, newPeriod, newVariation]
+		}
+		if (currentUpdateIndex !== myUpdateIndex) return
+		const blob = await new Promise(resolve => canvas.toBlob(resolve))
+		console.log(URL.createObjectURL(blob))
+		image.src = URL.createObjectURL(blob)
+	}
+
+	return [configObject, newPeriod, newVariation]
 }
 
 async function updateTime(newPeriod = currentPeriod, newVariation = currentVariation) {
-    document.body.dataset.canvasLoading = true
+	document.body.dataset.canvasLoading = true
 
-    let configObject
-    [configObject, newPeriod, newVariation] = await updateBackground(newPeriod, newVariation)
-    
-    atlas = []
-    for ( var atlasIndex in atlasAll ) {
-        let pathChosen, centerChosen, chosenIndex
+	let configObject
+	[configObject, newPeriod, newVariation] = await updateBackground(newPeriod, newVariation)
 
-        const validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
+	atlas = []
+	for (const atlasIndex in atlasAll) {
+		let pathChosen, centerChosen, chosenIndex
 
-        // console.log(chosenIndex)
+		const validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
 
-        for (const i in validPeriods2) {
-            const validPeriods = validPeriods2[i].split(', ')
-            for (const j in validPeriods) {
-                const [start, end, variation] = parsePeriod(validPeriods[j])
-                // console.log(start, end, variation, newPeriod, newVariation)
-                if (isOnPeriod(start, end, variation, newPeriod, newVariation)) {
-                    // console.log("match", start, end, variation, newPeriod, newVariation, i)
-                    chosenIndex = i
-                    break
-                }
-            }
-            if (chosenIndex !== undefined) break
-        }
+		// console.log(chosenIndex)
 
-        // console.log(testMatches)
+		for (const i in validPeriods2) {
+			const validPeriods = validPeriods2[i].split(', ')
+			for (const j in validPeriods) {
+				const [start, end, variation] = parsePeriod(validPeriods[j])
+				// console.log(start, end, variation, newPeriod, newVariation)
+				if (isOnPeriod(start, end, variation, newPeriod, newVariation)) {
+					// console.log("match", start, end, variation, newPeriod, newVariation, i)
+					chosenIndex = i
+					break
+				}
+			}
+			if (chosenIndex !== undefined) break
+		}
 
-        // console.log(chosenIndex)
-        if (chosenIndex === undefined) continue 
-        pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex]
-        centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex]
+		// console.log(testMatches)
 
-        if (pathChosen === undefined) continue
+		// console.log(chosenIndex)
+		if (chosenIndex === undefined) continue
+		pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex]
+		centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex]
 
-        // console.log(123)
+		if (pathChosen === undefined) continue
 
-        atlas.push({
-            ...atlasAll[atlasIndex],
-            path: pathChosen,
-            center: centerChosen,
-        })
-    }
-    // console.log(atlas)
+		// console.log(123)
 
-    dispatchTimeUpdateEvent(newPeriod, atlas)
-    document.body.dataset.canvasLoading = false
+		atlas.push({
+			...atlasAll[atlasIndex],
+			path: pathChosen,
+			center: centerChosen,
+		})
+	}
+	// console.log(atlas)
+
+	dispatchTimeUpdateEvent(newPeriod, atlas)
+	document.body.dataset.canvasLoading = false
 }
 
 function updateTooltip(newPeriod, newVariation) {
-    var configObject = variationsConfig[newVariation].versions[newPeriod]
-    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 = Math.max(((timelineSlider.offsetWidth)*(timelineSlider.value >= 1 ? timelineSlider.value - 1:0)/(timelineSlider.max-1)) - tooltip.offsetWidth/2, 0) + "px"
+	const configObject = variationsConfig[newVariation].versions[newPeriod]
+	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 = Math.max(((timelineSlider.offsetWidth) * (timelineSlider.value >= 1 ? timelineSlider.value - 1 : 0) / (timelineSlider.max - 1)) - tooltip.offsetWidth / 2, 0) + "px"
 }
 
 tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseInt(timelineSlider.value), currentVariation))
@@ -277,20 +277,20 @@ tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseIn
 window.addEventListener('resize', () => updateTooltip(parseInt(timelineSlider.value), currentVariation))
 
 function isOnPeriod(start, end, variation, currentPeriod, currentVariation) {
-	return currentPeriod >= start && currentPeriod <= end && variation === currentVariation 
+	return currentPeriod >= start && currentPeriod <= end && variation === currentVariation
 }
 
 function parsePeriod(periodString) {
-    // console.log(periodString)
-    let variation = "default"
+	// console.log(periodString)
+	let variation = "default"
 	periodString = periodString + ""
-    if (periodString.split(':').length > 1) {
-        const split = periodString.split(':')
-        variation = codeReference[split[0]]
-        periodString = split[1]
-    }
+	if (periodString.split(':').length > 1) {
+		const split = periodString.split(':')
+		variation = codeReference[split[0]]
+		periodString = split[1]
+	}
 	if (periodString.search('-') + 1) {
-		var [start, end] = periodString.split('-').map(i => parseInt(i))
+		const [start, end] = periodString.split('-').map(i => parseInt(i))
 		return [start, end, variation]
 	} else {
 		const periodNew = parseInt(periodString)
diff --git a/web/_js/view.js b/web/_js/view.js
index e58c22b2..c4ec9b9c 100644
--- a/web/_js/view.js
+++ b/web/_js/view.js
@@ -13,65 +13,65 @@
 	========================================================================
 */
 
-var linesCanvas = document.getElementById("linesCanvas");
-var linesContext = linesCanvas.getContext("2d");
-var hovered = [];
+const linesCanvas = document.getElementById("linesCanvas");
+const linesContext = linesCanvas.getContext("2d");
+let hovered = [];
 
-var previousZoomOrigin = [0, 0];
-var previousScaleZoomOrigin = [0, 0];
+let previousZoomOrigin = [0, 0];
+let previousScaleZoomOrigin = [0, 0];
 
-var backgroundCanvas = document.createElement("canvas");
+const backgroundCanvas = document.createElement("canvas");
 backgroundCanvas.width = 2000;
 backgroundCanvas.height = 2000;
-var backgroundContext = backgroundCanvas.getContext("2d");
+const backgroundContext = backgroundCanvas.getContext("2d");
 
-var wrapper = document.getElementById("wrapper");
-	
-var objectsContainer = document.getElementById("objectsList");
-var closeObjectsListButton = document.getElementById("closeObjectsListButton");
+const wrapper = document.getElementById("wrapper");
 
-var filterInput = document.getElementById("searchList");
+const objectsContainer = document.getElementById("objectsList");
+const closeObjectsListButton = document.getElementById("closeObjectsListButton");
 
-var entriesList = document.getElementById("entriesList");
-var hideListButton = document.getElementById("hideListButton");
-var entriesListShown = false;
+const filterInput = document.getElementById("searchList");
 
-var sortedAtlas;
+const entriesList = document.getElementById("entriesList");
+const hideListButton = document.getElementById("hideListButton");
+let entriesListShown = false;
 
-var entriesLimit = 50;
-var entriesOffset = 0;
-var moreEntriesButton = document.createElement("button");
-moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
+let sortedAtlas;
+
+const entriesLimit = 50;
+let entriesOffset = 0;
+const moreEntriesButton = document.createElement("button");
+moreEntriesButton.innerHTML = "Show " + entriesLimit + " more";
 moreEntriesButton.id = "moreEntriesButton";
-moreEntriesButton.onclick = function(){
+moreEntriesButton.onclick = function () {
 	buildObjectsList(null, null);
 	renderBackground();
 	render();
 };
 
-var defaultSort = "shuffle";
+let defaultSort = "shuffle";
 document.getElementById("sort").value = defaultSort;
 
-var lastPos = [0, 0];
+let lastPos = [0, 0];
 
-var fixed = false; // Fix hovered items in place, so that clicking on links is possible
+let fixed = false; // Fix hovered items in place, so that clicking on links is possible
 
-if(document.documentElement.clientWidth > 2000){
+if (document.documentElement.clientWidth > 2000) {
 	entriesListShown = true;
 	wrapper.classList.remove('listHidden')
 }
 
-if(document.documentElement.clientWidth < 2000){
+if (document.documentElement.clientWidth < 2000) {
 	entriesListShown = false;
 	wrapper.classList.add('listHidden')
 }
 
-filterInput.addEventListener("input", function(e){
+filterInput.addEventListener("input", function (e) {
 	entriesOffset = 0;
 	entriesList.innerHTML = "";
 	entriesList.appendChild(moreEntriesButton);
 
-	if(this.value === ""){
+	if (this.value === "") {
 		document.getElementById("relevantOption").disabled = true;
 		sortedAtlas = atlas.concat();
 		buildObjectsList(null, null);
@@ -82,8 +82,8 @@ filterInput.addEventListener("input", function(e){
 
 });
 
-document.getElementById("sort").addEventListener("input", function(e){
-	if(this.value != "relevant"){
+document.getElementById("sort").addEventListener("input", function (e) {
+	if (this.value != "relevant") {
 		defaultSort = this.value;
 	}
 
@@ -91,9 +91,9 @@ document.getElementById("sort").addEventListener("input", function(e){
 
 });
 
-hideListButton.addEventListener("click", function(e){
+hideListButton.addEventListener("click", function (e) {
 	entriesListShown = !entriesListShown;
-	if(entriesListShown){
+	if (entriesListShown) {
 		wrapper.classList.remove('listHidden')
 	} else {
 		wrapper.classList.add('listHidden')
@@ -105,7 +105,7 @@ hideListButton.addEventListener("click", function(e){
 	return false;
 });
 
-closeObjectsListButton.addEventListener("click", function(e){
+closeObjectsListButton.addEventListener("click", function (e) {
 	hovered = [];
 	objectsContainer.innerHTML = "";
 	updateLines();
@@ -115,12 +115,12 @@ closeObjectsListButton.addEventListener("click", function(e){
 });
 
 
-function toggleFixed(e, tapped){
-	if(!fixed && hovered.length == 0){
+function toggleFixed(e, tapped) {
+	if (!fixed && hovered.length == 0) {
 		return 0;
 	}
 	fixed = !fixed;
-	if(!fixed){
+	if (!fixed) {
 		updateHovering(e, tapped);
 		render();
 	}
@@ -132,56 +132,56 @@ window.addEventListener("dblClick", updateLines);
 window.addEventListener("wheel", updateLines);
 
 
-objectsContainer.addEventListener("scroll", function(e){
+objectsContainer.addEventListener("scroll", function (e) {
 	updateLines();
 });
 
-window.addEventListener("resize", function(e){
+window.addEventListener("resize", function (e) {
 	//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
 
-	var viewportWidth = document.documentElement.clientWidth;
+	let viewportWidth = document.documentElement.clientWidth;
 
-	if(document.documentElement.clientWidth > 2000 && viewportWidth <= 2000){
+	if (document.documentElement.clientWidth > 2000 && viewportWidth <= 2000) {
 		entriesListShown = true;
 		wrapper.className = wrapper.className.replace(/ listHidden/g, "");
 	}
 
-	if(document.documentElement.clientWidth < 2000 && viewportWidth >= 2000){
+	if (document.documentElement.clientWidth < 2000 && viewportWidth >= 2000) {
 		entriesListShown = false;
 		wrapper.className += " listHidden";
 	}
 	updateHovering(e);
 
 	viewportWidth = document.documentElement.clientWidth;
-	
+
 	applyView();
 	render();
 	updateLines();
-	
+
 });
 
-function updateLines(){
+function updateLines() {
 
 	linesCanvas.width = linesCanvas.clientWidth;
 	linesCanvas.height = linesCanvas.clientHeight;
 	linesContext.lineCap = "round";
-	linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 6);
+	linesContext.lineWidth = Math.max(Math.min(zoom * 1.5, 16 * 1.5), 6);
 	linesContext.strokeStyle = "#000000";
 
-	for(var i = 0; i < hovered.length; i++){
-		var element = hovered[i].element;
+	for (let i = 0; i < hovered.length; i++) {
+		const element = hovered[i].element;
 
-		if(element.getBoundingClientRect().left != 0){
+		if (element.getBoundingClientRect().left != 0) {
 
 			linesContext.beginPath();
 			//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
 			linesContext.moveTo(
-				 element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
-				,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
+				element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2
+				, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
 			);
 			linesContext.lineTo(
-				 ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
-				,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
+				~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft
+				, ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop
 			);
 			linesContext.stroke();
 
@@ -191,26 +191,26 @@ function updateLines(){
 	linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
 	linesContext.strokeStyle = "#FFFFFF";
 
-	for(var i = 0; i < hovered.length; i++){
-		var element = hovered[i].element;
+	for (let i = 0; i < hovered.length; i++) {
+		const element = hovered[i].element;
+
+		if (element.getBoundingClientRect().left != 0) {
 
-		if(element.getBoundingClientRect().left != 0){
-				
 			linesContext.beginPath();
 			linesContext.moveTo(
-				 element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
-				,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
+				element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth / 2
+				, element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
 			);
 			linesContext.lineTo(
-				 ~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
-				,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
+				~~(hovered[i].center[0] * zoom) + innerContainer.offsetLeft
+				, ~~(hovered[i].center[1] * zoom) + innerContainer.offsetTop
 			);
 			linesContext.stroke();
 		}
 	}
 }
 
-function renderBackground(atlas){
+function renderBackground(atlas) {
 
 	backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -218,29 +218,29 @@ function renderBackground(atlas){
 	//backgroundCanvas.height = 1000 * zoom;
 
 	//backgroundContext.lineWidth = zoom;
-	
+
 	backgroundContext.fillStyle = "rgba(0, 0, 0, 0.6)";
 	backgroundContext.fillRect(0, 0, backgroundCanvas.width, backgroundCanvas.height);
 
-	for(var i = 0; i < atlas.length; i++){
+	for (let i = 0; i < atlas.length; i++) {
 
-		var path = atlas[i].path;
+		const path = atlas[i].path;
 
 		backgroundContext.beginPath();
 
-		if(path[0]){
+		if (path[0]) {
 			//backgroundContext.moveTo(path[0][0]*zoom, path[0][1]*zoom);
 			backgroundContext.moveTo(path[0][0], path[0][1]);
 		}
 
-		for(var p = 1; p < path.length; p++){
+		for (let p = 1; p < path.length; p++) {
 			//backgroundContext.lineTo(path[p][0]*zoom, path[p][1]*zoom);
 			backgroundContext.lineTo(path[p][0], path[p][1]);
 		}
 
 		backgroundContext.closePath();
 
-		var bgStrokeStyle;
+		let bgStrokeStyle;
 		switch (atlas[i].diff) {
 			case "add":
 				bgStrokeStyle = "rgba(0, 255, 0, 1)";
@@ -264,32 +264,32 @@ function renderBackground(atlas){
 	}
 }
 
-function buildObjectsList(filter = null, sort = null){
+function buildObjectsList(filter = null, sort = null) {
 
-	if(entriesList.contains(moreEntriesButton)){
+	if (entriesList.contains(moreEntriesButton)) {
 		entriesList.removeChild(moreEntriesButton);
 	}
 
-	if(!sortedAtlas){
+	if (!sortedAtlas) {
 		sortedAtlas = atlas.concat();
-		document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries.";
+		document.getElementById("atlasSize").innerHTML = "The Atlas contains " + sortedAtlas.length + " entries.";
 	}
 
-	if(filter){
-		sortedAtlas = atlas.filter(function(value){
+	if (filter) {
+		sortedAtlas = atlas.filter(function (value) {
 			return (
-				   value.name.toLowerCase().indexOf(filter) !== -1
+				value.name.toLowerCase().indexOf(filter) !== -1
 				|| value.description.toLowerCase().indexOf(filter) !== -1
 				|| value.subreddit && value.subreddit.toLowerCase().indexOf(filter) !== -1
 				|| value.id === filter
 			);
 		});
-		document.getElementById("atlasSize").innerHTML = "Found "+sortedAtlas.length+" entries.";
+		document.getElementById("atlasSize").innerHTML = "Found " + sortedAtlas.length + " entries.";
 	} else {
-		document.getElementById("atlasSize").innerHTML = "The Atlas contains "+sortedAtlas.length+" entries.";
+		document.getElementById("atlasSize").innerHTML = "The Atlas contains " + sortedAtlas.length + " entries.";
 	}
 
-	if(sort === null){
+	if (sort === null) {
 		sort = defaultSort;
 	}
 
@@ -300,59 +300,59 @@ function buildObjectsList(filter = null, sort = null){
 
 	//console.log(sort);
 
-	var sortFunction;
+	let sortFunction;
 
 	//console.log(sort);
 
-	switch(sort){
+	switch (sort) {
 		case "shuffle":
 			sortFunction = null;
-			if(entriesOffset == 0){
+			if (entriesOffset == 0) {
 				shuffle();
 			}
-		break;
+			break;
 		case "alphaAsc":
-			sortFunction = function(a, b){
+			sortFunction = function (a, b) {
 				return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
 			}
-		break;
+			break;
 		case "alphaDesc":
-			sortFunction = function(a, b){
+			sortFunction = function (a, b) {
 				return b.name.toLowerCase().localeCompare(a.name.toLowerCase());
 			}
-		break;
+			break;
 		case "newest":
-			sortFunction = function(a, b){
+			sortFunction = function (a, b) {
 				if (a.id > b.id) {
 					return -1;
 				}
 				if (a.id < b.id) {
 					return 1;
 				}
-					// a must be equal to b
+				// a must be equal to b
 				return 0;
 			}
-		break;
+			break;
 		case "oldest":
-			sortFunction = function(a, b){
+			sortFunction = function (a, b) {
 				if (a.id < b.id) {
 					return -1;
 				}
 				if (a.id > b.id) {
 					return 1;
 				}
-					// a must be equal to b
+				// a must be equal to b
 				return 0;
 			}
-		break;
+			break;
 		case "area":
-			sortFunction = function(a, b){
+			sortFunction = function (a, b) {
 				return calcPolygonArea(b.path) - calcPolygonArea(a.path);
 			}
-		break;
+			break;
 		case "relevant":
-			sortFunction = function(a, b){
-				if(a.name.toLowerCase().indexOf(filter) !== -1 && b.name.toLowerCase().indexOf(filter) !== -1){
+			sortFunction = function (a, b) {
+				if (a.name.toLowerCase().indexOf(filter) !== -1 && b.name.toLowerCase().indexOf(filter) !== -1) {
 					if (a.name.toLowerCase().indexOf(filter) < b.name.toLowerCase().indexOf(filter)) {
 						return -1;
 					}
@@ -361,9 +361,9 @@ function buildObjectsList(filter = null, sort = null){
 					} else {
 						return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
 					}
-				} else if(a.name.toLowerCase().indexOf(filter) !== -1){
+				} else if (a.name.toLowerCase().indexOf(filter) !== -1) {
 					return -1;
-				} else if(b.name.toLowerCase().indexOf(filter) !== -1){
+				} else if (b.name.toLowerCase().indexOf(filter) !== -1) {
 					return 1;
 				} else {
 					if (a.description.toLowerCase().indexOf(filter) < b.description.toLowerCase().indexOf(filter)) {
@@ -376,47 +376,47 @@ function buildObjectsList(filter = null, sort = null){
 					}
 				}
 			}
-		break;
+			break;
 	}
 
-	if(sortFunction){
+	if (sortFunction) {
 		sortedAtlas.sort(sortFunction);
 	}
 
-	for(var i = entriesOffset; i < entriesOffset+entriesLimit; i++){
+	for (let i = entriesOffset; i < entriesOffset + entriesLimit; i++) {
 
-		if(i >= sortedAtlas.length){
+		if (i >= sortedAtlas.length) {
 			break;
 		}
 
 
 		// console.log(sortedAtlas[i])
-		var element = createInfoBlock(sortedAtlas[i]);
+		const element = createInfoBlock(sortedAtlas[i]);
 
 		element.entry = sortedAtlas[i];
 
-		element.addEventListener("mouseenter", function(e){
-			if(!fixed && !dragging){
+		element.addEventListener("mouseenter", function (e) {
+			if (!fixed && !dragging) {
 				objectsContainer.innerHTML = "";
-				
+
 				previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]];
 				previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]];
 
 				applyView();
-				
+
 				zoomOrigin = [
-					 innerContainer.clientWidth/2  - this.entry.center[0]* zoom// + container.offsetLeft
-					,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
+					innerContainer.clientWidth / 2 - this.entry.center[0] * zoom// + container.offsetLeft
+					, innerContainer.clientHeight / 2 - this.entry.center[1] * zoom// + container.offsetTop
 				]
 
 				scaleZoomOrigin = [
-					2000/2  - this.entry.center[0]
-					,2000/2  - this.entry.center[1]
+					2000 / 2 - this.entry.center[0]
+					, 2000 / 2 - this.entry.center[1]
 				]
 
 				//console.log(zoomOrigin);
 
-				
+
 				applyView();
 				hovered = [this.entry];
 				render();
@@ -426,14 +426,14 @@ function buildObjectsList(filter = null, sort = null){
 
 		});
 
-		element.addEventListener("click", function(e){
+		element.addEventListener("click", function (e) {
 			toggleFixed(e);
-			if(fixed){
+			if (fixed) {
 				previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]];
 				previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]];
 				applyView();
 			}
-			if(document.documentElement.clientWidth < 500){
+			if (document.documentElement.clientWidth < 500) {
 				objectsContainer.innerHTML = "";
 
 				entriesListShown = false;
@@ -443,15 +443,15 @@ function buildObjectsList(filter = null, sort = null){
 				renderBackground(atlas);
 				applyView();
 				updateHovering(e);
-				
+
 				zoomOrigin = [
-					 innerContainer.clientWidth/2  - this.entry.center[0]* zoom// + container.offsetLeft
-					,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
+					innerContainer.clientWidth / 2 - this.entry.center[0] * zoom// + container.offsetLeft
+					, innerContainer.clientHeight / 2 - this.entry.center[1] * zoom// + container.offsetTop
 				]
 
 				scaleZoomOrigin = [
-					2000/2  - this.entry.center[0]
-					,2000/2  - this.entry.center[1]
+					2000 / 2 - this.entry.center[0]
+					, 2000 / 2 - this.entry.center[1]
 				]
 
 				previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]];
@@ -461,18 +461,18 @@ function buildObjectsList(filter = null, sort = null){
 
 				hovered = [this.entry];
 				hovered[0].element = this;
-				
+
 				applyView();
 				render();
 				updateLines();
-				
+
 			}
-			
+
 		});
 
-		element.addEventListener("mouseleave", function(e){
-			if(!fixed && !dragging){
-				zoomOrigin = [previousScaleZoomOrigin[0]*zoom, previousScaleZoomOrigin[1]*zoom];
+		element.addEventListener("mouseleave", function (e) {
+			if (!fixed && !dragging) {
+				zoomOrigin = [previousScaleZoomOrigin[0] * zoom, previousScaleZoomOrigin[1] * zoom];
 				scaleZoomOrigin = [previousScaleZoomOrigin[0], previousScaleZoomOrigin[1]];
 				applyView();
 				hovered = [];
@@ -487,17 +487,17 @@ function buildObjectsList(filter = null, sort = null){
 
 	entriesOffset += entriesLimit;
 
-	if(sortedAtlas.length > entriesOffset){
-		moreEntriesButton.innerHTML = "Show "+Math.min(entriesLimit, sortedAtlas.length - entriesOffset)+" more";
+	if (sortedAtlas.length > entriesOffset) {
+		moreEntriesButton.innerHTML = "Show " + Math.min(entriesLimit, sortedAtlas.length - entriesOffset) + " more";
 		entriesList.appendChild(moreEntriesButton);
 	}
 }
 
-function shuffle(){
+function shuffle() {
 	//console.log("shuffled atlas");
-	for (var i = sortedAtlas.length - 1; i > 0; i--) {
-		var j = Math.floor(Math.random() * (i + 1));
-		var temp = sortedAtlas[i];
+	for (let i = sortedAtlas.length - 1; i > 0; i--) {
+		const j = Math.floor(Math.random() * (i + 1));
+		const temp = sortedAtlas[i];
 		sortedAtlas[i] = sortedAtlas[j];
 		sortedAtlas[j] = temp;
 	}
@@ -512,36 +512,36 @@ function resetEntriesList() {
 
 }
 
-async function render(){
+async function render() {
 
 	context.clearRect(0, 0, canvas.width, canvas.height);
 
 	//canvas.width = 1000*zoom;
 	//canvas.height = 1000*zoom;
-	
+
 	context.globalCompositeOperation = "source-over";
 	context.clearRect(0, 0, canvas.width, canvas.height);
 
-	if(hovered.length > 0){
+	if (hovered.length > 0) {
 		container.style.cursor = "pointer";
 	} else {
 		container.style.cursor = "default";
 	}
 
 
-	for(var i = 0; i < hovered.length; i++){
+	for (let i = 0; i < hovered.length; i++) {
 
 
-		var path = hovered[i].path;
+		const path = hovered[i].path;
 
 		context.beginPath();
 
-		if(path[0]){
+		if (path[0]) {
 			//context.moveTo(path[0][0]*zoom, path[0][1]*zoom);
 			context.moveTo(path[0][0], path[0][1]);
 		}
 
-		for(var p = 1; p < path.length; p++){
+		for (let p = 1; p < path.length; p++) {
 			//context.lineTo(path[p][0]*zoom, path[p][1]*zoom);
 			context.lineTo(path[p][0], path[p][1]);
 		}
@@ -557,11 +557,11 @@ async function render(){
 	context.globalCompositeOperation = "source-out";
 	context.drawImage(backgroundCanvas, 0, 0);
 
-	if(hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage){
+	if (hovered.length === 1 && hovered[0].path.length && hovered[0].overrideImage) {
 		const undisputableHovered = hovered[0];
 		// Find the left-topmost point of all the paths
 		const entryPosition = getPositionOfEntry(undisputableHovered);
-		if(entryPosition){
+		if (entryPosition) {
 			const [startX, startY] = entryPosition;
 			const overrideImage = new Image();
 			const loadingPromise = new Promise((res, rej) => {
@@ -569,29 +569,29 @@ async function render(){
 				overrideImage.onload = res;
 			});
 			overrideImage.src = "imageOverrides/" + undisputableHovered.overrideImage;
-			try{
+			try {
 				await loadingPromise;
 				context.globalCompositeOperation = "source-over";
 				context.drawImage(overrideImage, startX, startY);
-			}catch(ex){
+			} catch (ex) {
 				console.log("Cannot override image.");
 				console.log(ex);
 			}
 		}
 	}
 
-	for(var i = 0; i < hovered.length; i++){
+	for (let i = 0; i < hovered.length; i++) {
 
-		var path = hovered[i].path;
+		const path = hovered[i].path;
 
 		context.beginPath();
 
-		if(path[0]){
+		if (path[0]) {
 			//context.moveTo(path[0][0]*zoom, path[0][1]*zoom);
 			context.moveTo(path[0][0], path[0][1]);
 		}
 
-		for(var p = 1; p < path.length; p++){
+		for (let p = 1; p < path.length; p++) {
 			//context.lineTo(path[p][0]*zoom, path[p][1]*zoom);
 			context.lineTo(path[p][0], path[p][1]);
 		}
@@ -600,7 +600,7 @@ async function render(){
 
 		context.globalCompositeOperation = "source-over";
 
-		var hoverStrokeStyle;
+		let hoverStrokeStyle;
 		switch (hovered[i].diff) {
 			case "add":
 				hoverStrokeStyle = "rgba(0, 155, 0, 1)";
@@ -619,29 +619,29 @@ async function render(){
 
 }
 
-function updateHovering(e, tapped){
-		
-	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
+function updateHovering(e, tapped) {
+
+	if (!dragging && (!fixed || tapped)) {
+		const 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");
+		const 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 = [];
-			for(var i = 0; i < atlas.length; i++){
-				if(pointIsInPolygon(pos, atlas[i].path)){
+		if (pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100) {
+			const newHovered = [];
+			for (let i = 0; i < atlas.length; i++) {
+				if (pointIsInPolygon(pos, atlas[i].path)) {
 					newHovered.push(atlas[i]);
 				}
 			}
 
-			var changed = false;
+			let changed = false;
 
-			if(hovered.length == newHovered.length){
-				for(var i = 0; i < hovered.length; i++){
-					if(hovered[i].id != newHovered[i].id){
+			if (hovered.length == newHovered.length) {
+				for (let i = 0; i < hovered.length; i++) {
+					if (hovered[i].id != newHovered[i].id) {
 						changed = true;
 						break;
 					}
@@ -650,22 +650,22 @@ function updateHovering(e, tapped){
 				changed = true;
 			}
 
-			if(changed){
-				hovered = newHovered.sort(function(a, b){
+			if (changed) {
+				hovered = newHovered.sort(function (a, b) {
 					return calcPolygonArea(a.path) - calcPolygonArea(b.path);
 				});
 
 				objectsContainer.innerHTML = "";
 
-				for(var i in hovered){
-					var element = createInfoBlock(hovered[i]);
+				for (const i in hovered) {
+					const element = createInfoBlock(hovered[i]);
 
 					objectsContainer.appendChild(element);
 
 					hovered[i].element = element;
 				}
 
-				if(hovered.length > 0){
+				if (hovered.length > 0) {
 					closeObjectsListButton.className = "";
 				} else {
 					closeObjectsListButton.className = "hidden";
@@ -680,22 +680,22 @@ function updateHovering(e, tapped){
 
 window.addEventListener("hashchange", highlightEntryFromUrl);
 
-function highlightEntryFromUrl(){
+function highlightEntryFromUrl() {
 
-	var objectsContainer = document.getElementById("objectsList");
+	const objectsContainer = document.getElementById("objectsList");
 
-	var id = window.location.hash.substring(1); //Remove hash prefix
+	const id = window.location.hash.substring(1); //Remove hash prefix
 
-	var entries = atlas.filter(function(e){
+	const entries = atlas.filter(function (e) {
 		return e.id === id;
 	});
 
-	if (entries.length === 1){
+	if (entries.length === 1) {
 		const entry = entries[0];
 
 		document.title = entry.name + " on the 2022 /r/place Atlas";
-		
-		var infoElement = createInfoBlock(entry);
+
+		const infoElement = createInfoBlock(entry);
 		objectsContainer.innerHTML = "";
 		objectsContainer.appendChild(infoElement);
 
@@ -705,19 +705,19 @@ function highlightEntryFromUrl(){
 		zoom = 4;
 		renderBackground(atlas);
 		applyView();
-		
+
 		zoomOrigin = [
-			 innerContainer.clientWidth/2  - entry.center[0]* zoom// + container.offsetLeft
-			,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
+			innerContainer.clientWidth / 2 - entry.center[0] * zoom// + container.offsetLeft
+			, innerContainer.clientHeight / 2 - entry.center[1] * zoom// + container.offsetTop
 		];
 
 		scaleZoomOrigin = [
-			2000/2 - entry.center[0]// + container.offsetLeft
-			,2000/2 - entry.center[1]// + container.offsetTop
+			2000 / 2 - entry.center[0]// + container.offsetLeft
+			, 2000 / 2 - entry.center[1]// + container.offsetTop
 		];
 
 		//console.log(zoomOrigin);
-		
+
 		applyView();
 		hovered = [entry];
 		render();
@@ -728,7 +728,7 @@ function highlightEntryFromUrl(){
 	}
 }
 
-function initView(){
+function initView() {
 
 	buildObjectsList(null, null);
 	renderBackground(atlas);
@@ -750,26 +750,26 @@ function initView(){
 	render();
 	updateLines();
 
-	if(window.location.hash){ // both "/" and just "/#" will be an empty hash string
+	if (window.location.hash) { // both "/" and just "/#" will be an empty hash string
 		highlightEntryFromUrl();
 	}
 
 }
 
-function initExplore(){
+function initExplore() {
 
 	window.updateHovering = updateHovering
-	window.render = function() {}
+	window.render = function () { }
 
-	function updateHovering(e, tapped){
-		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
+	function updateHovering(e, tapped) {
+		if (!dragging && (!fixed || tapped)) {
+			const 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");
+			const coords_p = document.getElementById("coords_p");
 			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
-	
+
 		}
 	}
 
@@ -780,9 +780,9 @@ function initExplore(){
 }
 
 function initGlobal() {
-	container.addEventListener("mousemove", function(e){
-		if(e.sourceCapabilities){
-			if(!e.sourceCapabilities.firesTouchEvents){
+	container.addEventListener("mousemove", function (e) {
+		if (e.sourceCapabilities) {
+			if (!e.sourceCapabilities.firesTouchEvents) {
 				updateHovering(e);
 			}
 		} else {
@@ -792,45 +792,45 @@ function initGlobal() {
 }
 
 function initViewGlobal() {
-	container.addEventListener("mousedown", function(e){
+	container.addEventListener("mousedown", function (e) {
 		lastPos = [
-			 e.clientX
-			,e.clientY
+			e.clientX
+			, e.clientY
 		];
 	});
-	
-	container.addEventListener("touchstart", function(e){
-		if(e.touches.length == 1){
+
+	container.addEventListener("touchstart", function (e) {
+		if (e.touches.length == 1) {
 			lastPos = [
-				 e.touches[0].clientX
-				,e.touches[0].clientY
+				e.touches[0].clientX
+				, 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){
+	}, { passive: true });
+
+	container.addEventListener("mouseup", function (e) {
+		if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4) {
 			toggleFixed(e);
 		}
 	});
-	
-	container.addEventListener("touchend", function(e){
+
+	container.addEventListener("touchend", function (e) {
 		e.preventDefault()
-	
+
 		//console.log(e);
 		//console.log(e.changedTouches[0].clientX);
-		if(e.changedTouches.length == 1){
+		if (e.changedTouches.length == 1) {
 			e = e.changedTouches[0];
 			//console.log(lastPos[0] - e.clientX);
-			if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4){
+			if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4) {
 				//console.log("Foo!!");
 				dragging = false;
 				fixed = false;
 				setTimeout(
-					function(){
+					function () {
 						updateHovering(e, true);
 					}
-				, 10);
+					, 10);
 			}
 		}
 	});