Little styling additions and QoL, also only load hires-tiles when zoomed in - closes #16
This commit is contained in:
parent
3b5393202f
commit
5ea1fbb4c5
|
@ -20,6 +20,9 @@ bin/*
|
||||||
.project
|
.project
|
||||||
*/.project
|
*/.project
|
||||||
|
|
||||||
|
.idea
|
||||||
|
*/.idea
|
||||||
|
|
||||||
node_modules/
|
node_modules/
|
||||||
package-lock.json
|
package-lock.json
|
||||||
|
|
||||||
|
|
|
@ -205,7 +205,9 @@ export default class BlueMap {
|
||||||
setTimeout(this.update, 1000);
|
setTimeout(this.update, 1000);
|
||||||
|
|
||||||
this.lowresTileManager.setPosition(this.controls.targetPosition);
|
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.locationHash =
|
||||||
'#' + this.map
|
'#' + this.map
|
||||||
|
@ -239,7 +241,7 @@ export default class BlueMap {
|
||||||
this.renderer.clearDepth();
|
this.renderer.clearDepth();
|
||||||
this.renderer.render(this.hiresScene, this.camera, this.renderer.getRenderTarget(), false);
|
this.renderer.render(this.hiresScene, this.camera, this.renderer.getRenderTarget(), false);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
handleContainerResize = () => {
|
handleContainerResize = () => {
|
||||||
this.camera.aspect = this.element.clientWidth / this.element.clientHeight;
|
this.camera.aspect = this.element.clientWidth / this.element.clientHeight;
|
||||||
|
@ -254,7 +256,7 @@ export default class BlueMap {
|
||||||
.css('height', this.element.clientHeight);
|
.css('height', this.element.clientHeight);
|
||||||
|
|
||||||
this.updateFrame = true;
|
this.updateFrame = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
async loadSettings() {
|
async loadSettings() {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
|
@ -455,20 +457,29 @@ export default class BlueMap {
|
||||||
|
|
||||||
// ###### UI ######
|
// ###### UI ######
|
||||||
|
|
||||||
alert(content) {
|
toggleAlert(id, content) {
|
||||||
let alertBox = $('#alert-box');
|
let alertBox = $('#alert-box');
|
||||||
if (alertBox.length === 0){
|
if (alertBox.length === 0){
|
||||||
alertBox = $('<div id="alert-box"></div>').appendTo(this.element);
|
alertBox = $('<div id="alert-box"></div>').appendTo(this.element);
|
||||||
}
|
}
|
||||||
|
|
||||||
let displayAlert = () => {
|
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.find('.alert-close-button').click(() => {
|
||||||
alert.fadeOut(200, () => alert.remove());
|
alert.fadeOut(200, () => alert.remove());
|
||||||
});
|
});
|
||||||
alert.fadeIn(200);
|
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');
|
let oldAlerts = alertBox.find('.alert');
|
||||||
if (oldAlerts.length > 0){
|
if (oldAlerts.length > 0){
|
||||||
alertBox.fadeOut(200, () => {
|
alertBox.fadeOut(200, () => {
|
||||||
|
@ -476,8 +487,9 @@ export default class BlueMap {
|
||||||
alertBox.show();
|
alertBox.show();
|
||||||
displayAlert();
|
displayAlert();
|
||||||
});
|
});
|
||||||
} else {
|
return;
|
||||||
displayAlert();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
displayAlert();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -103,7 +103,7 @@ export default class Controls {
|
||||||
}, false);
|
}, false);
|
||||||
window.addEventListener('mousemove', this.onMouseMove, false);
|
window.addEventListener('mousemove', this.onMouseMove, false);
|
||||||
canvas.addEventListener('mousedown', this.onMouseDown, 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 });
|
canvas.addEventListener('wheel', this.onMouseWheel, { passive: true });
|
||||||
window.addEventListener('keydown', this.onKeyDown, false);
|
window.addEventListener('keydown', this.onKeyDown, false);
|
||||||
window.addEventListener('keyup', this.onKeyUp, false);
|
window.addEventListener('keyup', this.onKeyUp, false);
|
||||||
|
@ -197,7 +197,7 @@ export default class Controls {
|
||||||
this.minHeight = intersects[0].point.y;
|
this.minHeight = intersects[0].point.y;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
updateMouseMoves = () => {
|
updateMouseMoves = () => {
|
||||||
this.deltaMouse.set(this.lastMouse.x - this.mouse.x, this.lastMouse.y - this.mouse.y);
|
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.min) this.targetDistance = this.settings.zoom.min;
|
||||||
if (this.targetDistance > this.settings.zoom.max) this.targetDistance = this.settings.zoom.max;
|
if (this.targetDistance > this.settings.zoom.max) this.targetDistance = this.settings.zoom.max;
|
||||||
}
|
};
|
||||||
|
|
||||||
onMouseMove = event => {
|
onMouseMove = event => {
|
||||||
this.mouse.set(event.clientX, event.clientY);
|
this.mouse.set(event.clientX, event.clientY);
|
||||||
|
@ -257,11 +257,13 @@ export default class Controls {
|
||||||
if (this.state !== Controls.STATES.NONE){
|
if (this.state !== Controls.STATES.NONE){
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onMouseDown = event => {
|
onMouseDown = event => {
|
||||||
if (this.state !== Controls.STATES.NONE) return;
|
if (this.state !== Controls.STATES.NONE) return;
|
||||||
|
|
||||||
|
$(":focus").blur();
|
||||||
|
|
||||||
switch (event.button) {
|
switch (event.button) {
|
||||||
case Controls.KEYS.MOVE :
|
case Controls.KEYS.MOVE :
|
||||||
this.state = Controls.STATES.MOVE;
|
this.state = Controls.STATES.MOVE;
|
||||||
|
@ -272,7 +274,7 @@ export default class Controls {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onMouseUp = event => {
|
onMouseUp = event => {
|
||||||
if (this.state === Controls.STATES.NONE) return;
|
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;
|
if (this.state === Controls.STATES.ORBIT) this.state = Controls.STATES.NONE;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
onKeyDown = event => {
|
onKeyDown = event => {
|
||||||
this.keyStates[event.keyCode] = true;
|
this.keyStates[event.keyCode] = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
onKeyUp = event => {
|
onKeyUp = event => {
|
||||||
this.keyStates[event.keyCode] = false;
|
this.keyStates[event.keyCode] = false;
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -42,12 +42,12 @@ export default class Compass {
|
||||||
|
|
||||||
onBlueMapUpdateFrame = () => {
|
onBlueMapUpdateFrame = () => {
|
||||||
this.needle.css('transform', `rotate(${this.blueMap.controls.direction}rad)`);
|
this.needle.css('transform', `rotate(${this.blueMap.controls.direction}rad)`);
|
||||||
}
|
};
|
||||||
|
|
||||||
onClick = () => {
|
onClick = () => {
|
||||||
this.blueMap.controls.targetDirection = 0;
|
this.blueMap.controls.targetDirection = 0;
|
||||||
this.blueMap.controls.direction = this.blueMap.controls.direction % (Math.PI * 2);
|
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;
|
||||||
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;
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,7 @@ export default class Info {
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick = () => {
|
onClick = () => {
|
||||||
this.blueMap.alert(
|
this.blueMap.toggleAlert('bluemap-info',
|
||||||
'<h1>Info</h1>' +
|
'<h1>Info</h1>' +
|
||||||
'Visit BlueMap on <a href="https://github.com/BlueMap-Minecraft">GitHub</a>!<br>' +
|
'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>' +
|
'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>' +
|
'Rightclick-drag with your mouse to rotate your view.<br>' +
|
||||||
'Scroll to zoom.<br>'
|
'Scroll to zoom.<br>'
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,11 +53,11 @@ export default class MapMenu {
|
||||||
onMapClick = event => {
|
onMapClick = event => {
|
||||||
const map = $(event.target).attr('map');
|
const map = $(event.target).attr('map');
|
||||||
this.bluemap.changeMap(map);
|
this.bluemap.changeMap(map);
|
||||||
}
|
};
|
||||||
|
|
||||||
onBlueMapMapChange = () => {
|
onBlueMapMapChange = () => {
|
||||||
this.maplist.find('li').show();
|
this.maplist.find('li').show();
|
||||||
this.maplist.find('li[map=' + this.bluemap.map + ']').hide();
|
this.maplist.find('li[map=' + this.bluemap.map + ']').hide();
|
||||||
this.element.find('.selection').html(this.bluemap.settings[this.bluemap.map].name);
|
this.element.find('.selection').html(this.bluemap.settings[this.bluemap.map].name);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,13 +43,13 @@ export default class Settings {
|
||||||
|
|
||||||
this.elementQuality = $(
|
this.elementQuality = $(
|
||||||
'<div id="bluemap-settings-quality" class="dropdown-container"><span class="selection">Quality: <span>Normal</span></span><div class="dropdown"><ul>' +
|
'<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 data-quality="2">High</li>' +
|
||||||
'<li quality="1" style="display: none">Normal</li>' +
|
'<li data-quality="1" style="display: none">Normal</li>' +
|
||||||
'<li quality="0.75">Fast</li>' +
|
'<li data-quality="0.75">Fast</li>' +
|
||||||
'</ul></div></div>'
|
'</ul></div></div>'
|
||||||
).prependTo(this.elementMenu);
|
).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.elementRenderDistance = $('<div id="bluemap-settings-render-distance" class="dropdown-container"></div>').prependTo(this.elementMenu);
|
||||||
|
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -84,10 +84,10 @@ export default class Settings {
|
||||||
onQualityClick = (event) => {
|
onQualityClick = (event) => {
|
||||||
const target = event.target
|
const target = event.target
|
||||||
const desc = $(target).html();
|
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').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);
|
this.elementQuality.find('.selection > span').html(desc);
|
||||||
|
|
||||||
|
@ -104,7 +104,7 @@ export default class Settings {
|
||||||
this.elementMenu.animate({
|
this.elementMenu.animate({
|
||||||
width: 'toggle'
|
width: 'toggle'
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
};
|
||||||
|
|
||||||
pctToRenderDistance(value, defaultValue) {
|
pctToRenderDistance(value, defaultValue) {
|
||||||
let max = defaultValue * 5;
|
let max = defaultValue * 5;
|
||||||
|
|
|
@ -45,10 +45,6 @@
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
.alert-close-button {
|
.alert-close-button {
|
||||||
/*position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
right: 5px;
|
|
||||||
*/
|
|
||||||
margin: -10px -10px 0px 0px;
|
margin: -10px -10px 0px 0px;
|
||||||
padding: 0 0 5px 5px;
|
padding: 0 0 5px 5px;
|
||||||
float: right;
|
float: right;
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
#bluemap-mapmenu {
|
#bluemap-mapmenu {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
.selection, .dropdown li {
|
.selection, .dropdown li {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
|
|
|
@ -8,7 +8,18 @@
|
||||||
outline: none;
|
outline: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
padding: 0 5px 0 25px;
|
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 {
|
&[data-pos]::before {
|
||||||
|
|
Loading…
Reference in New Issue