Add menu footer, block-info hightlight and renamed a switch

BlueMapCore/src/main/webroot/js/libs/modules/HudInfo.js

@@ -1,7 +1,10 @@
 import $ from 'jquery';
 import {
 	Raycaster,
-	Vector2
+	Vector2,
+	BoxBufferGeometry,
+	Mesh,
+	MeshBasicMaterial
 } from 'three';
 import {pathFromCoords} from "../utils";
 
@@ -11,6 +14,16 @@ export default class HudInfo {
 		this.blueMap = blueMap;
 		this.container = container;
 
+		let blockMarkerGeo = new BoxBufferGeometry( 1, 1, 1 );
+		blockMarkerGeo.translate(0.5, 0.5, 0.5);
+		this.blockMarker = new Mesh(blockMarkerGeo, new MeshBasicMaterial( {
+			color: 0xffffff,
+			opacity: 0.3,
+			depthWrite: false,
+			depthTest: false,
+			transparent: true
+		} ));
+
 		this.rayPosition = new Vector2();
 		this.raycaster = new Raycaster();
 
@@ -125,6 +138,12 @@ export default class HudInfo {
 				this.element.removeClass("below");
 			}
 			this.element.fadeIn(200);
+
+			if (hiresData){
+				this.blockMarker.position.set(block.x, block.y, block.z);
+				this.blueMap.hiresScene.add(this.blockMarker);
+				this.blueMap.updateFrame = true;
+			}
 		}
 
 	};
@@ -132,6 +151,8 @@ export default class HudInfo {
 	onHideInfo = event => {
 		if (!this.element.is(':animated')) {
 			this.element.fadeOut(200);
+			this.blueMap.hiresScene.remove(this.blockMarker);
+			this.blueMap.updateFrame = true;
 		}
 	};
 

BlueMapCore/src/main/webroot/js/libs/ui/Menu.js

@@ -25,6 +25,7 @@
 import $ from 'jquery';
 
 import Element from './Element.js';
+import Separator from "./Separator";
 
 export default class Menu {
 
@@ -47,6 +48,23 @@ export default class Menu {
 		this.children.forEach(child => {
 			this.content.append(child.createElement());
 		});
+
+		$(`<div class="footer-separator"></div>`).appendTo(this.content);
+
+		$(`
+			<div class="ui-element footer">
+				<h1>BlueMap</h1>
+				<p>
+					Visit BlueMap on <a href="https://github.com/BlueMap-Minecraft">GitHub</a> and <a href="https://discord.gg/zmkyJa3">Discord</a>! 
+				</p>
+				<h2>Controls</h2>
+				<p>
+					<kbd>leftclick and drag</kbd> or <kbd>arrow-keys</kbd> to navigate<br>
+					<kbd>rightclick and drag</kbd> to rotate your view<br>
+					<kbd>scroll</kbd> to zoom in and out
+				</p>
+			</div>
+		`).appendTo(this.content);
 	}
 
 	isOpen = () => {

BlueMapCore/src/main/webroot/js/libs/ui/UI.js

@@ -69,7 +69,7 @@ export default class UI {
 		let posZ = new Position(this.blueMap, 'z');
 		let compass = new Compass(this.blueMap);
 
-		let mobSpawnOverlay = new ToggleButton("mob-spawnable overlay", blueMap.mobSpawnOverlay.value, button => {
+		let mobSpawnOverlay = new ToggleButton("mob-spawn (experimental)", blueMap.mobSpawnOverlay.value, button => {
 			this.blueMap.mobSpawnOverlay.value = button.isSelected();
 			this.blueMap.updateFrame = true;
 		});
@@ -119,6 +119,7 @@ export default class UI {
 		this.menu.addElement(new Separator());
 		this.menu.addElement(debugInfo);
 		this.menu.update();
+
 	}
 
 }

BlueMapCore/src/main/webroot/style/ui/menu.scss

@@ -69,6 +69,9 @@ $menu-width: 375px;
         right: 0;
         top: 3rem;
 
+        display: flex;
+        flex-direction: column;
+
         width: calc(375px - 1rem);
         height: calc(100% - 4rem);
 
@@ -80,6 +83,11 @@ $menu-width: 375px;
             width: calc(100% - 1rem);
         }
 
+        > * {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+
         > .separator {
             position: relative;
             left: -0.5rem;
@@ -88,6 +96,11 @@ $menu-width: 375px;
 
             border-top: solid 1px $line_color;
             margin: 0.5rem 0;
+
+            &.greedy {
+                flex-grow: 1;
+                border-bottom: solid 1px $line_color;
+            }
         }
 
         > .label {
@@ -127,5 +140,40 @@ $menu-width: 375px;
                 color: $hover_fg;
             }
         }
+
+        > .footer-separator{
+            flex-grow: 1;
+        }
+
+        > .footer {
+            margin: 0.5rem -0.5rem -0.5rem -0.5rem;
+            padding: 0 0.5rem 0.5rem 0.5rem;
+
+            border-top: solid 1px $line_color;
+
+            line-height: 1rem;
+            font-size: 0.8rem;
+
+            white-space: normal;
+
+            h1 {
+                margin: 1rem 0 0.5rem 0;
+                font-size: 1rem;
+                text-align: center;
+            }
+
+            h2 {
+                margin: 1rem 0 0 0;
+                font-size: inherit;
+            }
+
+            p {
+                margin: 0 0 0.5rem 0;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
     }
 }