Merge pull request #1052 from placeAtlas/time-travel-2

web/_css/style.css

@@ -648,16 +648,101 @@ #exportOverlay {
 	display: none;
 }
 
-#zoomControls {
+#bottomBar {
 	position: absolute;
-	bottom: 10px;
-	left: 370px;
-	width: 90px;
-	display: flex;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+    display: flex;
+	gap: 10px;
+	z-index: 100;
 }
 
-.listHidden #zoomControls {
-	left: 10px;
+div:not(.listHidden) > #bottomBar {
+	left: 370px !important;
+}
+
+@media (max-width: 1120px) {
+	div:not(.listHidden) > #bottomBar  {
+		flex-wrap: wrap;
+	}
+
+	.listHidden #author {
+		flex: 1 !important;
+	}
+}
+
+@media (max-width: 800px) {
+	#bottomBar {
+		flex-wrap: wrap;
+	}
+
+	#timeControls {
+		min-width: calc(100vw - 390px) !important;
+	}
+
+	#author {
+		flex: 1;
+		min-width: 100% !important;
+	}
+}
+
+#timeControls {
+	flex: 1;
+	background-color: #555;
+	border: 1px #000 solid;
+	font-size: 12px;
+	text-align: center;
+	min-width: 300px;
+}
+
+#timeControls input {
+    height: 100%;
+	background: #555;
+	-webkit-appearance: none;
+	appearance: none;
+    width: 100%;
+}
+
+.slider::-webkit-slider-thumb {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 10px;
+	height: 25px;
+	background: #d3d3d3;
+	cursor: pointer;
+  }
+  
+  .slider::-moz-range-thumb {
+	appearance: none;
+	width: 10px;
+	height: 25px;
+	background: #d3d3d3;
+	cursor: pointer;
+  }
+
+#author {
+	background-color: #555;
+	border: 1px #000 solid;
+	padding: 3px;
+	font-size: 12px;
+	z-index: 1100;
+	min-width: 320px;
+	text-align: center;
+	display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#author p {
+	margin: 0;
+	line-height: inherit;
+}
+
+#zoomControls {
+	width: 90px;
+	display: flex;
+	align-self: flex-end;
 }
 
 #zoomControls button {
@@ -715,8 +800,8 @@ @media (max-width: 500px) {
 		width: 100%;
 	}
 
-	div:not(.listHidden) > #zoomControls {
-		display: none;
+	div:not(.listHidden) > #bottomBar {
+		display: none !important;
 	}
 
 	div:not(.listHidden) > button#hideListButton {
@@ -736,18 +821,6 @@ @media (max-width: 500px) {
 	}
 }
 
-@media (max-width: 750px) {
-	div:not(.listHidden) > #author {
-		display: none;
-	}
-}
-
-@media (max-width: 400px) {
-	#author {
-		display: none;
-	}
-}
-
 @media (max-width: 350px) {
 	#entriesListContainer > nav > a#drawLink {
 		display: none;
@@ -947,18 +1020,6 @@ #entriesList .object {
 	text-align: left;
 }
 
-#author {
-	position: absolute;
-	bottom: 10px;
-	right: 10px;
-	background-color: #555;
-	border: 1px #000 solid;
-	padding: 3px;
-	font-size: 12px;
-	z-index: 1100;
-	text-align: center;
-}
-
 #aboutContainer {
 	position: absolute;
 	top: 50px;
@@ -1096,4 +1157,4 @@ h2#abouth2 {
 #bitcoinNotice {
 	color: #AAA;
 	margin-top: 7px;
-}
+}

web/_js/main.js

@@ -92,6 +92,8 @@ async function init(){
 		// a must be equal to b
 		return 0;
 	});
+	//TEMP FOR TIME TRAVEL
+	atlasBackup = atlas;
 	
 
 	//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);

web/_js/time.js

@@ -0,0 +1,112 @@
+const timeConfig = [
+    {
+        timestamp: 1648822500,
+        url: "/_img/place/1648822500.png",
+        image: null
+    },
+    {
+        timestamp: 1648847036,
+        url: "/_img/place/1648847036.png",
+        image: null
+    },
+    {
+        timestamp: 1648870452,
+        url: "/_img/place/1648870452.png",
+        image: null
+    },
+    {
+        timestamp: 1648893666,
+        url: "/_img/place/1648893666.png",
+        image: null
+    },
+    {
+        timestamp: 1648917500,
+        url: "/_img/place/1648917500.png",
+        image: null
+    },
+    {
+        timestamp: 1648942113,
+        url: "/_img/place/1648942113.png",
+        image: null
+    },
+    {
+        timestamp: 1648956234,
+        url: "/_img/place/1648956234.png",
+        image: null
+    },
+    {
+        timestamp: 1648968061,
+        url: "/_img/place/1648968061.png",
+        image: null
+    },
+    {
+        timestamp: 1648979987,
+        url: "/_img/place/1648979987.png",
+        image: null
+    },
+
+    {
+        timestamp: 1648992274,
+        url: "/_img/place/1648992274.png",
+        image: null
+    },
+    {
+        timestamp: 1649012915,
+        url: "/_img/place/1649012915.png",
+        image: null
+    },
+    {
+        timestamp: 1649037182,
+        url: "/_img/place/1649037182.png",
+        image: null
+    },
+    {
+        timestamp: 1649060793,
+        url: "/_img/place/1649060793.png",
+        image: null
+    },
+    {
+        timestamp: 1649084741,
+        url: "/_img/place/1649084741.png",
+        image: null
+    },
+    {
+        timestamp: 1649113199,
+        url: "/_img/place/final.png",
+        image: null,
+        showAtlas: true,
+    },
+];
+
+let slider = document.getElementById("timeControlsSlider");
+let image = document.getElementById("image");
+
+let timeCallback = (a) => {};
+let atlasBackup = [];
+
+// SETUP
+slider.max = timeConfig.length;
+slider.value = timeConfig.length;
+updateTime(timeConfig.length)
+
+slider.oninput = (event) => {
+    updateTime(parseInt(event.target.value))
+};
+
+async function updateTime(index) {
+    let configObject = timeConfig[index-1];
+    if (!configObject.image) {
+        console.log("fetching");
+        let fetchResult = await fetch(configObject.url);
+        let imageBlob = await fetchResult.blob();
+        configObject.image = URL.createObjectURL(imageBlob);
+    }
+    image.src = configObject.image;
+    // TEMP ATLAS ONLY ON LAST TIMESTAMP
+    if (configObject.showAtlas) {
+        atlas = atlasBackup
+    } else {
+        atlas = []
+    }
+    timeCallback(atlas)
+}

web/_js/view.js

@@ -155,6 +155,11 @@ function initView(){
 
 	buildObjectsList(null, null);
 
+	timeCallback = (tempAtlas) => {
+		renderBackground(tempAtlas);
+		render();
+	}
+
 	// parse linked atlas entry id from link hash
 	/*if (window.location.hash.substring(3)){
 		zoom = 4;

web/index.html

@@ -99,7 +99,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 				<canvas id="linesCanvas"></canvas>
 				<div id="innerContainer">
 					<canvas id="highlightCanvas" width="2000" height="2000"></canvas>
-					<img id="image" src="./_img/place-indexed-final-place.png" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
+
+					<img id="image" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
 				</div>
 			</div>
 			
@@ -138,7 +139,19 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			
 			<button id="hideListButton"></button>
 			
-			<div id="zoomControls"><button title="Zoom In" id="zoomInButton"></button><button title="Reset View" id="zoomResetButton"></button><button title="Zoom Out" id="zoomOutButton"></button></div>
+			<div id="bottomBar">
+				<div id="zoomControls">
+					<button title="Zoom In" id="zoomInButton"></button>
+					<button title="Reset View" id="zoomResetButton"></button>
+					<button title="Zoom Out" id="zoomOutButton"></button>
+				</div>
+				<div id="timeControls">
+					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
+				</div>
+				<div id="author">
+					<p>Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
+				</div>
+			</div>
 			
 			<div id="drawControlsContainer">
 				<a id="drawBackButton" href="./">&lt; Back to the Atlas</a>
@@ -222,10 +235,8 @@ <h2>Donation Links</h2>
 					<br>
 				</div>
 			</div>
-			<div id="author">
-				Code forked by <a href="https://place-atlas.stefanocoding.me/" target="_blank" rel="author">Stefano Haagmans</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>, Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>. This site is powered by <a href="https://www.netlify.com">Netlify</a>.
-			</div>
 		</div>
+		<script type="text/javascript" src="./_js/time.js?version=1.0.3"></script>
 		<script type="text/javascript" src="./_js/infoblock.js?version=1.0"></script>
 		<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
 		<script type="text/javascript" src="./_js/atlas.js?version=1.0.50"></script>