Merge pull request #1108 from nico-abram/coords

Coord box

web/_css/style.css

@@ -648,6 +648,43 @@ #exportOverlay {
 	display: none;
 }
 
+#coordsWrapper {
+	min-width: 100px;
+	position: absolute;
+    display: flex;
+	gap: 10px;
+	z-index: 100;
+}
+.collapsed {	
+    top: 49px;
+    left: 149px;
+}
+.uncollapsed {
+    top: 49px;
+    left: 380px;
+}
+@media (max-width: 750px) {
+	#coordsWrapper {
+		display: none;
+	}
+}
+#coords {
+	background-color: #555;
+	border: 1px #000 solid;
+	padding: 3px;
+	font-size: 18px;
+	z-index: 1100;
+	display: flex;
+    align-items: center;
+    justify-content: center;
+	text-align: center;
+}
+
+#coords p {
+	margin: 0;
+	line-height: inherit;
+}
+
 #bottomBar {
 	position: absolute;
     bottom: 10px;

web/_js/view.js

@@ -252,6 +252,7 @@ function initView(){
 		} else {
 			wrapper.className += " listHidden";
 		}
+		updateHovering();
 		applyView();
 		render();
 		updateLines();
@@ -336,12 +337,20 @@ function initView(){
 	}
 
 	function updateHovering(e, tapped){
+		var coordsWrapper = document.getElementById("coordsWrapper");
+		if (entriesListShown) {
+			coordsWrapper.className = "uncollapsed"
+		} else {
+			coordsWrapper.className = "collapsed"
+		}
 		
 		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
 			];
+			var 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 = [];
@@ -568,6 +577,7 @@ function initView(){
 					zoom = 4;
 					renderBackground(atlas);
 					applyView();
+					updateHovering();
 					
 					zoomOrigin = [
 						 innerContainer.clientWidth/2  - this.entry.center[0]* zoom// + container.offsetLeft
@@ -803,6 +813,7 @@ function initView(){
 			entriesListShown = false;
 			wrapper.className += " listHidden";
 		}
+		updateHovering();
 
 		viewportWidth = document.documentElement.clientWidth;
 		

web/index.html

@@ -138,6 +138,13 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			<div id="entriesListBackground"></div>
 			
 			<button id="hideListButton"></button>
+
+			<div id="coordsWrapper" class="collapsed">
+
+				<div id="coords">
+					<p id="coords_p">0, 0</p>
+				</div>
+			</div>
 			
 			<div id="bottomBar">
 				<div id="zoomControls">