Little styling additions and QoL, also only load hires-tiles when zoomed in - closes #16

.gitignore

@@ -20,6 +20,9 @@ bin/*
 .project
 */.project
 
+.idea
+*/.idea
+
 node_modules/
 package-lock.json
 

BlueMapCore/src/main/webroot/js/libs/BlueMap.js

@@ -205,7 +205,9 @@ export default class BlueMap {
 		setTimeout(this.update, 1000);
 
 		this.lowresTileManager.setPosition(this.controls.targetPosition);
-		this.hiresTileManager.setPosition(this.controls.targetPosition);
+		if (this.camera.position.y < 400) {
+			this.hiresTileManager.setPosition(this.controls.targetPosition);
+		}
 
 		this.locationHash =
 			'#' + this.map
@@ -239,7 +241,7 @@ export default class BlueMap {
 			this.renderer.clearDepth();
 			this.renderer.render(this.hiresScene, this.camera, this.renderer.getRenderTarget(), false);
 		}
-	}
+	};
 
 	handleContainerResize = () => {
 		this.camera.aspect = this.element.clientWidth / this.element.clientHeight;
@@ -254,7 +256,7 @@ export default class BlueMap {
 			.css('height', this.element.clientHeight);
 
 		this.updateFrame = true;
-	}
+	};
 
 	async loadSettings() {
 		return new Promise(resolve => {
@@ -455,20 +457,29 @@ export default class BlueMap {
 
 	// ###### UI ######
 
-	alert(content) {
+	toggleAlert(id, content) {
 		let alertBox = $('#alert-box');
 		if (alertBox.length === 0){
 			alertBox = $('<div id="alert-box"></div>').appendTo(this.element);
 		}
 
 		let displayAlert = () => {
-			let alert = $(`<div class="alert box" style="display: none;"><div class="alert-close-button"></div>${content}</div>`).appendTo(alertBox);
+			let alert = $(`<div class="alert box" data-alert-id="${id}" style="display: none;"><div class="alert-close-button"></div>${content}</div>`).appendTo(alertBox);
 			alert.find('.alert-close-button').click(() => {
 				alert.fadeOut(200, () => alert.remove());
 			});
 			alert.fadeIn(200);
 		};
 
+		let sameAlert = alertBox.find(`.alert[data-alert-id=${id}]`);
+		if (sameAlert.length > 0){
+			alertBox.fadeOut(200, () => {
+				alertBox.html('');
+				alertBox.show();
+			});
+			return;
+		}
+
 		let oldAlerts = alertBox.find('.alert');
 		if (oldAlerts.length > 0){
 			alertBox.fadeOut(200, () => {
@@ -476,8 +487,9 @@ export default class BlueMap {
 				alertBox.show();
 				displayAlert();
 			});
-		} else {
-			displayAlert();
+			return;
 		}
+
+		displayAlert();
 	}
 }

BlueMapCore/src/main/webroot/js/libs/Controls.js

@@ -103,7 +103,7 @@ export default class Controls {
 		}, false);
 		window.addEventListener('mousemove', this.onMouseMove, false);
 		canvas.addEventListener('mousedown', this.onMouseDown, false);
-		canvas.addEventListener('mouseup', this.onMouseUp, false);
+		window.addEventListener('mouseup', this.onMouseUp, false); //this is on the window instead of the canvas, so if we drag out of the canvas and release the mouse it actually gets released
 		canvas.addEventListener('wheel', this.onMouseWheel, { passive: true });
 		window.addEventListener('keydown', this.onKeyDown, false);
 		window.addEventListener('keyup', this.onKeyUp, false);
@@ -197,7 +197,7 @@ export default class Controls {
 					this.minHeight = intersects[0].point.y;
 				}
 			}
-	};
+	}
 
 	updateMouseMoves = () => {
 		this.deltaMouse.set(this.lastMouse.x - this.mouse.x, this.lastMouse.y - this.mouse.y);
@@ -249,7 +249,7 @@ export default class Controls {
 
 		if (this.targetDistance < this.settings.zoom.min) this.targetDistance = this.settings.zoom.min;
 		if (this.targetDistance > this.settings.zoom.max) this.targetDistance = this.settings.zoom.max;
-	}
+	};
 
 	onMouseMove = event => {
 		this.mouse.set(event.clientX, event.clientY);
@@ -257,11 +257,13 @@ export default class Controls {
 		if (this.state !== Controls.STATES.NONE){
 			event.preventDefault();
 		}
-	}
+	};
 
 	onMouseDown = event => {
 		if (this.state !== Controls.STATES.NONE) return;
 
+		$(":focus").blur();
+
 		switch (event.button) {
 			case Controls.KEYS.MOVE :
 				this.state = Controls.STATES.MOVE;
@@ -272,7 +274,7 @@ export default class Controls {
 				event.preventDefault();
 				break;
 		}
-	}
+	};
 
 	onMouseUp = event => {
 		if (this.state === Controls.STATES.NONE) return;
@@ -285,13 +287,13 @@ export default class Controls {
 				if (this.state === Controls.STATES.ORBIT) this.state = Controls.STATES.NONE;
 				break;
 		}
-	}
+	};
 
 	onKeyDown = event => {
 		this.keyStates[event.keyCode] = true;
-	}
+	};
 
 	onKeyUp = event => {
 		this.keyStates[event.keyCode] = false;
-	}
+	};
 }

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

@@ -42,12 +42,12 @@ export default class Compass {
 
 	onBlueMapUpdateFrame = () => {
 		this.needle.css('transform', `rotate(${this.blueMap.controls.direction}rad)`);
-	}
+	};
 
 	onClick = () => {
 		this.blueMap.controls.targetDirection = 0;
 		this.blueMap.controls.direction = this.blueMap.controls.direction % (Math.PI * 2);
 		if (this.blueMap.controls.direction < -Math.PI) this.blueMap.controls.direction += Math.PI * 2;
 		if (this.blueMap.controls.direction > Math.PI) this.blueMap.controls.direction -= Math.PI * 2;
-	}
+	};
 }

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

@@ -36,7 +36,7 @@ export default class Info {
 	}
 
 	onClick = () => {
-		this.blueMap.alert(
+		this.blueMap.toggleAlert('bluemap-info',
 			'<h1>Info</h1>' +
 			'Visit BlueMap on <a href="https://github.com/BlueMap-Minecraft">GitHub</a>!<br>' +
 			'BlueMap works best with <a href="https://www.google.com/chrome/">Chrome</a>.<br>' +
@@ -45,5 +45,5 @@ export default class Info {
 			'Rightclick-drag with your mouse to rotate your view.<br>' +
 			'Scroll to zoom.<br>'
 		);
-	}
+	};
 }

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

@@ -53,11 +53,11 @@ export default class MapMenu {
 	onMapClick = event => {
 		const map = $(event.target).attr('map');
 		this.bluemap.changeMap(map);
-	}
+	};
 
 	onBlueMapMapChange = () => {
 		this.maplist.find('li').show();
 		this.maplist.find('li[map=' + this.bluemap.map + ']').hide();
 		this.element.find('.selection').html(this.bluemap.settings[this.bluemap.map].name);
-	}
+	};
 }

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

@@ -43,13 +43,13 @@ export default class Settings {
 
 		this.elementQuality = $(
 			'<div id="bluemap-settings-quality" class="dropdown-container"><span class="selection">Quality: <span>Normal</span></span><div class="dropdown"><ul>' +
-			'<li quality="2">High</li>' +
-			'<li quality="1" style="display: none">Normal</li>' +
-			'<li quality="0.75">Fast</li>' +
+			'<li data-quality="2">High</li>' +
+			'<li data-quality="1" style="display: none">Normal</li>' +
+			'<li data-quality="0.75">Fast</li>' +
 			'</ul></div></div>'
 		).prependTo(this.elementMenu);
 
-		this.elementQuality.find('li[quality]').click(this.onQualityClick);
+		this.elementQuality.find('li[data-quality]').click(this.onQualityClick);
 		this.elementRenderDistance = $('<div id="bluemap-settings-render-distance" class="dropdown-container"></div>').prependTo(this.elementMenu);
 
 		this.init();
@@ -84,10 +84,10 @@ export default class Settings {
 	onQualityClick = (event) => {
 		const target = event.target
 		const desc = $(target).html();
-		this.blueMap.quality = parseFloat($(target).attr('quality'));
+		this.blueMap.quality = parseFloat($(target).attr('data-quality'));
 
 		this.elementQuality.find('li').show();
-		this.elementQuality.find(`li[quality="${this.blueMap.quality}"]`).hide();
+		this.elementQuality.find(`li[data-quality="${this.blueMap.quality}"]`).hide();
 
 		this.elementQuality.find('.selection > span').html(desc);
 
@@ -104,7 +104,7 @@ export default class Settings {
 		this.elementMenu.animate({
 			width: 'toggle'
 		}, 200);
-	}
+	};
 
 	pctToRenderDistance(value, defaultValue) {
 		let max = defaultValue * 5;

BlueMapCore/src/main/webroot/style/modules/alertbox.scss

@@ -45,10 +45,6 @@
         padding: 10px;
 
         .alert-close-button {
-            /*position: absolute;
-            top: 5px;
-            right: 5px;
-            */
             margin: -10px -10px 0px 0px;
             padding: 0 0 5px 5px;
             float: right;

BlueMapCore/src/main/webroot/style/modules/mapmenu.scss

@@ -1,5 +1,6 @@
 #bluemap-mapmenu {
     width: 200px;
+    cursor: pointer;
 
     .selection, .dropdown li {
         padding-left: 10px;

BlueMapCore/src/main/webroot/style/modules/position.scss

@@ -8,7 +8,18 @@
     outline: none;
     background: transparent;
     padding: 0 5px 0 25px;
-    font-family: inherit;
+    font: inherit;
+    color: inherit;
+
+    // remove number spinner firefox
+    -moz-appearance:textfield;
+
+    // remove number spinner webkit
+    &::-webkit-inner-spin-button,
+    &::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
   }
 
   &[data-pos]::before {