From b1d87f1e30dbc757f03496dd950f32b856cdc35a Mon Sep 17 00:00:00 2001
From: Hans5958 <hans5958@outlook.com>
Date: Sun, 10 Apr 2022 14:03:08 +0700
Subject: [PATCH 1/2] Add tooltip on timeline

---
 web/_css/style.css | 21 +++++++++++++++++++++
 web/_js/time.js    | 20 +++++++++++++++-----
 web/index.html     |  3 ++-
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/web/_css/style.css b/web/_css/style.css
index 5a68b752..3aa4c717 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -732,6 +732,7 @@ #timeControls {
 	font-size: 12px;
 	text-align: center;
 	min-width: 300px;
+	position: relative;
 }
 
 #timeControls input {
@@ -742,6 +743,26 @@ #timeControls input {
     width: 100%;
 }
 
+#timeControlsTooltip {
+	display: none;
+	position: absolute;
+	padding: 0.5em 2em;
+	background: #555;
+	border: 1px #000 solid;
+	justify-content: center;
+	bottom: 40px;
+	white-space: nowrap;
+}
+
+#timeControlsTooltip p {
+	line-height: normal;
+	margin-bottom: 0;
+}
+
+#timeControls:hover #timeControlsTooltip {
+	display: flex;
+}
+
 .slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;
diff --git a/web/_js/time.js b/web/_js/time.js
index 49483cbf..76e23a42 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -90,10 +90,11 @@ const timeConfig = [
         url: "./_img/place/final.png",
         image: null,
         showAtlas: true,
-    },
+    }
 ];
 
 let slider = document.getElementById("timeControlsSlider");
+let tooltip = document.getElementById("timeControlsTooltip")
 let image = document.getElementById("image");
 
 let timeCallback = (a) => {};
@@ -102,11 +103,11 @@ let atlasBackup = [];
 // SETUP
 slider.max = timeConfig.length;
 slider.value = timeConfig.length;
-updateTime(timeConfig.length)
+updateTime(slider.value)
 
-slider.oninput = (event) => {
+slider.addEventListener("input", (event) => {
     updateTime(parseInt(event.target.value))
-};
+})
 
 async function updateTime(index) {
     let configObject = timeConfig[index-1];
@@ -124,4 +125,13 @@ async function updateTime(index) {
         atlas = []
     }
     timeCallback(atlas)
-}
\ No newline at end of file
+    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 = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+}
+
+tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+)
+
+window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
+)
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 5071fb15..c4c8f16c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -156,7 +156,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 					<button title="Reset View" id="zoomResetButton"></button>
 					<button title="Zoom Out" id="zoomOutButton"></button>
 				</div>
-					<div id="timeControls">
+				<div id="timeControls">
+					<div id="timeControlsTooltip"><p>Test</p></div>
 					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
 				</div>
 				<div id="author">

From 1ac4394793d65e68dc84b13e1463d97b88ee0824 Mon Sep 17 00:00:00 2001
From: Stefano <stefan0-@hotmail.com>
Date: Sun, 10 Apr 2022 15:21:43 +0200
Subject: [PATCH 2/2] Update index.html

---
 web/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index 17edc519..b2f5021c 100644
--- a/web/index.html
+++ b/web/index.html
@@ -172,7 +172,7 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 					<button title="Zoom Out" id="zoomOutButton"></button>
 				</div>
 				<div id="timeControls">
-					<div id="timeControlsTooltip"><p>Test</p></div>
+					<div id="timeControlsTooltip"><p>Time control slider</p></div>
 					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
 				</div>
 				<div id="author">