Small refactoring 2

An instance is the copy of Atlas for a specific r/place event
Instance-only code are now indicated with "@instance-only"

web/_js/config.js

@@ -1,3 +1,16 @@
+// This script only applies to this instance of the Atlas.
+// Please also check code indicated with "@instance-only" outside this file.
+// TODO: Avoid having instance-only code inside the main scripts to make updating easier.
+
+const prodDomain = "place-atlas.stefanocoding.me"
+window.prodDomain = prodDomain
+
+const instanceId = "2022"
+window.instanceId = instanceId
+
+const pageTitle = "The 2022 r/place Atlas"
+window.pageTitle = pageTitle
+
 const canvasSize = {
 	x: 2000,
 	y: 2000
@@ -10,21 +23,17 @@ const canvasCenter = {
 }
 window.canvasCenter = canvasCenter
 
-const prodDomain = "place-atlas.stefanocoding.me"
-window.prodDomain = prodDomain
-
-const instanceId = "2022"
-window.instanceId = instanceId
-
-const pageTitle = "The 2022 r/place Atlas"
-window.pageTitle = pageTitle
-
 const variationsConfig = {
 	default: {
 		name: "r/place",
 		code: "",
 		default: 164,
 		drawablePeriods: [1, 164],
+		drawableRegions: [
+			[[1, 55], [0, 0, 1000, 1000]],
+			[[56, 108], [0, 0, 2000, 1000]],
+			[[109, 164], [0, 0, 2000, 2000]]
+		],
 		expansions: [56, 109],
 		versions: [
 			{ "timestamp": 1648818000, "url": ["./_img/canvas/place30ex/start.png"] },

web/_js/main/draw.js

@@ -48,7 +48,6 @@ const discordPattern = /^(?:(?:https?:\/\/)?(?:www\.)?(?:(?:discord)?\.?gg|disco
 
 let entryId = 0
 let path = []
-let center = [1000, 1000]
 
 let websiteGroupElements = []
 let subredditGroupElements = []
@@ -131,8 +130,8 @@ function initDraw() {
 	})
 
 	function getCanvasCoords(x, y) {
-		x = x - container.offsetLeft
-		y = y - container.offsetTop
+		x -= container.offsetLeft
+		y -= container.offsetTop
 
 		const pos = [
 			~~((x - (container.clientWidth / 2 - innerContainer.clientWidth / 2 + zoomOrigin[0])) / zoom) + 0.5,
@@ -755,13 +754,13 @@ function initDraw() {
 	zoom = 4
 
 	zoomOrigin = [
-		innerContainer.clientWidth / 2 - center[0] * zoom,// + container.offsetLeft
-		innerContainer.clientHeight / 2 - center[1] * zoom// + container.offsetTop
+		innerContainer.clientWidth / 2 - canvasCenter.x * zoom,// + container.offsetLeft
+		innerContainer.clientHeight / 2 - canvasCenter.y * zoom// + container.offsetTop
 	]
 
 	scaleZoomOrigin = [
-		canvasCenter.x - center[0],// + container.offsetLeft
-		canvasCenter.y - center[1]// + container.offsetTop
+		0, // + container.offsetLeft
+		0  // + container.offsetTop
 	]
 
 	applyView()
@@ -872,6 +871,7 @@ function initPeriodGroups() {
 		startPeriodEl.addEventListener('input', () => {
 			if (path.length >= 3) {
 				periodCenter = calculateCenter(path)
+				// @instance-only
 				if ((periodCenter[1] > 1000) && (startPeriodEl.valueAsNumber <= variationsConfig[variation].expansions[1])) {
 					// Second expansion
 					startPeriodEl.value = variationsConfig[variation].expansions[1];
@@ -919,6 +919,7 @@ function initPeriodGroups() {
 			} else {
 				if (path.length >= 3) {
 					periodCenter = calculateCenter(path)
+					// @instance-only
 					if ((periodCenter[1] > 1000) && (startPeriodEl.valueAsNumber <= variationsConfig[variation].expansions[1])) {
 						// Second expansion
 						startPeriodLeftEl.disabled = true
@@ -939,6 +940,7 @@ function initPeriodGroups() {
 		endPeriodEl.addEventListener('input', () => {
 			if (path.length >= 3) {
 				periodCenter = calculateCenter(path)
+				// @instance-only
 				if ((periodCenter[1] > 1000) && (endPeriodEl.valueAsNumber <= variationsConfig[variation].expansions[1])) {
 					// Second expansion
 					endPeriodEl.value = variationsConfig[variation].expansions[1];
@@ -985,6 +987,7 @@ function initPeriodGroups() {
 			} else {
 				if (path.length >= 3) {
 					periodCenter = calculateCenter(path)
+					// @instance-only
 					if (periodCenter && (periodCenter[1] > 1000) && (endPeriodEl.valueAsNumber <= variationsConfig[variation].expansions[1])) {
 						// Second expansion
 						endPeriodLeftEl.disabled = true
@@ -1161,6 +1164,7 @@ function updatePeriodGroups() {
 			else periodDeleteEl.disabled = false
 
 			// Set start incremental button disabled states
+			// @instance-only
 			if (startPeriodEl.value === startPeriodEl.min) {
 				startPeriodLeftEl.disabled = true
 				startPeriodRightEl.disabled = false
@@ -1184,6 +1188,7 @@ function updatePeriodGroups() {
 			}
 
 			// Set end incremental button disabled states
+			// @instance-only
 			if (endPeriodEl.value === endPeriodEl.min) {
 				endPeriodLeftEl.disabled = true
 				endPeriodRightEl.disabled = false

web/_js/main/main.js

@@ -234,7 +234,7 @@ async function init() {
 		initialPinchZoom = zoom
 
 		lastPosition = [x, y]
-		zoom = zoom / 2
+		zoom /= 2
 		zoom = Math.max(minZoom, Math.min(maxZoom, zoom))
 
 		applyZoom(x, y, zoom)
@@ -265,14 +265,8 @@ async function init() {
 
 		lastPosition = [x, y]
 
-		if (e.ctrlKey) {
-
-			zoom = zoom / 2
-
-		} else {
-
-			zoom = zoom * 2
-		}
+		if (e.ctrlKey) zoom /= 2
+		else zoom *= 2
 
 		zoom = Math.max(minZoom, Math.min(maxZoom, zoom))
 		applyZoom(x, y, zoom)

web/_js/main/overlap.js

@@ -17,7 +17,7 @@ function initOverlap() {
 
 	window.renderBackground = renderBackground
 
-	const hovered = []
+	// const hovered = []
 
 	buildObjectsList(null, null)
 	renderBackground(atlas)

web/_js/main/stats.js

@@ -245,30 +245,10 @@ for (let i = 0; i < topCount; i++) {
 
 console.info(outstring)
 
-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
-	return 0
-})
-
+atlas.sort((a, b) => a.center[0] - b.center[0])
 console.info("Median x: " + atlas[~~(atlas.length / 2)].center[0])
 
-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
-	return 0
-})
-
+atlas.sort((a, b) => a.center[1] - b.center[1])
 console.info("Median y: " + atlas[~~(atlas.length / 2)].center[1])
 
 

web/_js/main/view.js

@@ -193,12 +193,6 @@ objectsContainer.addEventListener("scroll", function () {
 })
 
 window.addEventListener("resize", function (e) {
-	//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight)
-
-	// Legacy code
-	let viewportWidth = document.documentElement.clientWidth
-
-	viewportWidth = document.documentElement.clientWidth
 
 	applyView()
 	render()
@@ -338,12 +332,12 @@ function buildObjectsList(filter = null, sort = null) {
 	}
 
 	if (filter) {
-		sortedAtlas = atlas.filter(function (value) {
+		sortedAtlas = atlas.filter(entry => {
 			return (
-				value.name.toLowerCase().indexOf(filter) !== -1
-				|| value.description.toLowerCase().indexOf(filter) !== -1
-				|| value.subreddit && value.subreddit.toLowerCase().indexOf(filter) !== -1
-				|| value.id === filter
+				entry.name.toLowerCase().some(filter)
+				|| entry.description.toLowerCase().some(filter)
+				|| Object.values(entry.links).flat().toLowerCase().some(filter)
+				|| entry.id === filter
 			)
 		})
 		document.getElementById("atlasSize").innerHTML = "Found " + sortedAtlas.length + " entries."
@@ -493,43 +487,6 @@ function buildObjectsList(filter = null, sort = null) {
 				previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]
 				applyView()
 			}
-			// Legacy code
-			/*if (document.documentElement.clientWidth < 500) {
-				objectsContainer.replaceChildren()
-
-				entriesListShown = false
-				
-				bsOffcanvasList.hide()
-				wrapper.classList.add("listHidden")
-
-				zoom = 4
-				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
-				]
-
-				scaleZoomOrigin = [
-					2000 / 2 - this.entry.center[0],
-					2000 / 2 - this.entry.center[1]
-				]
-
-				previousZoomOrigin = [zoomOrigin[0], zoomOrigin[1]]
-				previousScaleZoomOrigin = [scaleZoomOrigin[0], scaleZoomOrigin[1]]
-
-				fixed = true
-
-				hovered = [this.entry]
-				hovered[0].element = this
-
-				applyView()
-				render()
-				updateLines()
-
-			}*/
 		})
 
 		element.addEventListener("mouseleave", function () {
@@ -682,73 +639,73 @@ async function render() {
 
 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
-		]
-		const coords_p = document.getElementById("coords_p")
+	if (dragging || (fixed && !tapped)) return
 
-		// Displays coordinates as zero instead of NaN
-		if (isNaN(pos[0]) === true) {
-			coords_p.textContent = "0, 0"
-		} else {
-			coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
-		}
+	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
+	]
+	const coords_p = document.getElementById("coords_p")
 
-		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])
-				}
-			}
+	// Displays coordinates as zero instead of NaN
+	if (isNaN(pos[0]) === true) {
+		coords_p.textContent = "0, 0"
+	} else {
+		coords_p.textContent = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1])
+	}
 
-			let changed = false
+	if (!(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100)) return
 
-			if (hovered.length === newHovered.length) {
-				for (let i = 0; i < hovered.length; i++) {
-					if (hovered[i].id !== newHovered[i].id) {
-						changed = true
-						break
-					}
-				}
-			} else {
-				changed = true
-			}
-
-			if (changed) {
-				hovered = newHovered.sort(function (a, b) {
-					return calcPolygonArea(a.path) - calcPolygonArea(b.path)
-				})
-
-				objectsContainer.replaceChildren()
-
-				for (const i in hovered) {
-					const element = createInfoBlock(hovered[i])
-
-					objectsContainer.appendChild(element)
-
-					hovered[i].element = element
-				}
-
-				if (hovered.length > 0) {
-					document.getElementById("timeControlsSlider").blur()
-					closeObjectsListButton.classList.remove("d-none")
-					if ((objectsContainer.scrollHeight > objectsContainer.clientHeight) && !tapped) {
-						objectsListOverflowNotice.classList.remove("d-none")
-					} else {
-						objectsListOverflowNotice.classList.add("d-none")
-					}
-				} else {
-					closeObjectsListButton.classList.add("d-none")
-					objectsListOverflowNotice.classList.add("d-none")
-					entriesList.classList.remove("disableHover")
-				}
-				render()
-			}
+	const newHovered = []
+	for (let i = 0; i < atlas.length; i++) {
+		if (pointIsInPolygon(pos, atlas[i].path)) {
+			newHovered.push(atlas[i])
 		}
 	}
+
+	let changed = false
+
+	if (hovered.length === newHovered.length) {
+		for (let i = 0; i < hovered.length; i++) {
+			if (hovered[i].id !== newHovered[i].id) {
+				changed = true
+				break
+			}
+		}
+	} else {
+		changed = true
+	}
+
+	if (!changed) return
+
+	hovered = newHovered.sort(function (a, b) {
+		return calcPolygonArea(a.path) - calcPolygonArea(b.path)
+	})
+
+	objectsContainer.replaceChildren()
+
+	for (const i in hovered) {
+		const element = createInfoBlock(hovered[i])
+
+		objectsContainer.appendChild(element)
+
+		hovered[i].element = element
+	}
+
+	if (hovered.length > 0) {
+		document.getElementById("timeControlsSlider").blur()
+		closeObjectsListButton.classList.remove("d-none")
+		if ((objectsContainer.scrollHeight > objectsContainer.clientHeight) && !tapped) {
+			objectsListOverflowNotice.classList.remove("d-none")
+		} else {
+			objectsListOverflowNotice.classList.add("d-none")
+		}
+	} else {
+		closeObjectsListButton.classList.add("d-none")
+		objectsListOverflowNotice.classList.add("d-none")
+		entriesList.classList.remove("disableHover")
+	}
+	render()
 }
 
 window.addEventListener("hashchange", highlightEntryFromUrl)
@@ -930,18 +887,19 @@ function initViewGlobal() {
 
 		//console.log(e)
 		//console.log(e.changedTouches[0].clientX)
-		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) {
-				//console.log("Foo!!")
-				dragging = false
-				fixed = false
-				setTimeout(function () {
-					updateHovering(e, true)
-				}, 10)
-			}
-		}
+		if (e.changedTouches.length !== 1) return
+
+		e = e.changedTouches[0]
+		//console.log(lastPos[0] - e.clientX)
+
+		if (Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) > 4)
+
+		//console.log("Foo!!")
+		dragging = false
+		fixed = false
+		setTimeout(function () {
+			updateHovering(e, true)
+		}, 10)
 	})
 
 	if (window.location.hash) { // both "/" and just "/#" will be an empty hash string