mirror of
https://github.com/BlueMap-Minecraft/BlueMap.git
synced 2024-11-25 20:16:00 +01:00
spaces -> tabs
This commit is contained in:
parent
713c9a5494
commit
e5660ac754
@ -24,11 +24,11 @@
|
||||
*/
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
Euler,
|
||||
Raycaster,
|
||||
Vector2,
|
||||
Vector3,
|
||||
MOUSE
|
||||
Euler,
|
||||
Raycaster,
|
||||
Vector2,
|
||||
Vector3,
|
||||
MOUSE
|
||||
} from 'three';
|
||||
|
||||
import { Vector2_ZERO } from './utils.js';
|
||||
|
@ -24,36 +24,36 @@
|
||||
*/
|
||||
|
||||
export default class Tile {
|
||||
isLoading = false;
|
||||
disposed = false;
|
||||
model = null;
|
||||
isLoading = false;
|
||||
disposed = false;
|
||||
model = null;
|
||||
|
||||
constructor(scene, x, z) {
|
||||
this.scene = scene;
|
||||
this.x = x;
|
||||
this.z = z;
|
||||
}
|
||||
constructor(scene, x, z) {
|
||||
this.scene = scene;
|
||||
this.x = x;
|
||||
this.z = z;
|
||||
}
|
||||
|
||||
setModel(model) {
|
||||
this.disposeModel();
|
||||
setModel(model) {
|
||||
this.disposeModel();
|
||||
|
||||
if (model) {
|
||||
this.model = model;
|
||||
this.scene.add(model);
|
||||
if (model) {
|
||||
this.model = model;
|
||||
this.scene.add(model);
|
||||
|
||||
//console.log("Added tile:", this.x, this.z);
|
||||
}
|
||||
}
|
||||
//console.log("Added tile:", this.x, this.z);
|
||||
}
|
||||
}
|
||||
|
||||
disposeModel() {
|
||||
this.disposed = true;
|
||||
disposeModel() {
|
||||
this.disposed = true;
|
||||
|
||||
if (this.model) {
|
||||
this.scene.remove(this.model);
|
||||
this.model.geometry.dispose();
|
||||
delete this.model;
|
||||
if (this.model) {
|
||||
this.scene.remove(this.model);
|
||||
this.model.geometry.dispose();
|
||||
delete this.model;
|
||||
|
||||
//console.log("Removed tile:", this.x, this.z);
|
||||
}
|
||||
}
|
||||
//console.log("Removed tile:", this.x, this.z);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -25,22 +25,22 @@
|
||||
import $ from 'jquery';
|
||||
import {
|
||||
AmbientLight,
|
||||
BackSide,
|
||||
BufferGeometryLoader,
|
||||
ClampToEdgeWrapping,
|
||||
CubeGeometry,
|
||||
DirectionalLight,
|
||||
BackSide,
|
||||
BufferGeometryLoader,
|
||||
ClampToEdgeWrapping,
|
||||
CubeGeometry,
|
||||
DirectionalLight,
|
||||
FileLoader,
|
||||
FrontSide,
|
||||
Mesh,
|
||||
MeshBasicMaterial,
|
||||
MeshLambertMaterial,
|
||||
NormalBlending,
|
||||
NearestFilter,
|
||||
PerspectiveCamera,
|
||||
NearestFilter,
|
||||
PerspectiveCamera,
|
||||
Scene,
|
||||
Texture,
|
||||
TextureLoader,
|
||||
TextureLoader,
|
||||
VertexColors,
|
||||
WebGLRenderer,
|
||||
} from 'three';
|
||||
|
@ -29,25 +29,25 @@ import { getTopLeftElement } from './Module.js';
|
||||
import COMPASS from '../../../assets/compass.svg';
|
||||
|
||||
export default class Compass {
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
|
||||
$('#bluemap-compass').remove();
|
||||
this.element = $(`<div id="bluemap-compass" class="button"><img id="bluemap-compass-needle" src="${COMPASS}" /></div>`).appendTo(getTopLeftElement(blueMap));
|
||||
this.needle = $('#bluemap-compass-needle');
|
||||
$('#bluemap-compass').remove();
|
||||
this.element = $(`<div id="bluemap-compass" class="button"><img id="bluemap-compass-needle" src="${COMPASS}" /></div>`).appendTo(getTopLeftElement(blueMap));
|
||||
this.needle = $('#bluemap-compass-needle');
|
||||
|
||||
$(document).on('bluemap-update-frame', this.onBlueMapUpdateFrame);
|
||||
$(this.element).click(this.onClick);
|
||||
}
|
||||
$(document).on('bluemap-update-frame', this.onBlueMapUpdateFrame);
|
||||
$(this.element).click(this.onClick);
|
||||
}
|
||||
|
||||
onBlueMapUpdateFrame = () => {
|
||||
this.needle.css('transform', `rotate(${this.blueMap.controls.direction}rad)`);
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
@ -27,23 +27,23 @@ import $ from 'jquery';
|
||||
import { getTopRightElement } from './Module.js';
|
||||
|
||||
export default class Info {
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
const parent = getTopRightElement(blueMap);
|
||||
$('#bluemap-info').remove();
|
||||
this.elementInfo = $('<div id="bluemap-info" class="button"></div>').appendTo(parent);
|
||||
this.elementInfo.click(this.onClick);
|
||||
}
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
const parent = getTopRightElement(blueMap);
|
||||
$('#bluemap-info').remove();
|
||||
this.elementInfo = $('<div id="bluemap-info" class="button"></div>').appendTo(parent);
|
||||
this.elementInfo.click(this.onClick);
|
||||
}
|
||||
|
||||
onClick = () => {
|
||||
this.blueMap.alert(
|
||||
'<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>' +
|
||||
'<h2>Controls</h2>' +
|
||||
'Leftclick-drag with your mouse or use the arrow-keys to navigate.<br>' +
|
||||
'Rightclick-drag with your mouse to rotate your view.<br>' +
|
||||
'Scroll to zoom.<br>'
|
||||
);
|
||||
}
|
||||
onClick = () => {
|
||||
this.blueMap.alert(
|
||||
'<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>' +
|
||||
'<h2>Controls</h2>' +
|
||||
'Leftclick-drag with your mouse or use the arrow-keys to navigate.<br>' +
|
||||
'Rightclick-drag with your mouse to rotate your view.<br>' +
|
||||
'Scroll to zoom.<br>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -27,37 +27,37 @@ import $ from 'jquery';
|
||||
import { getTopLeftElement } from './Module.js';
|
||||
|
||||
export default class MapMenu {
|
||||
constructor(blueMap) {
|
||||
this.bluemap = blueMap;
|
||||
const maps = this.bluemap.settings;
|
||||
constructor(blueMap) {
|
||||
this.bluemap = blueMap;
|
||||
const maps = this.bluemap.settings;
|
||||
|
||||
$('#bluemap-mapmenu').remove();
|
||||
this.element = $(`<div id="bluemap-mapmenu" class="dropdown-container"><span class="selection">${maps[this.bluemap.map].name}</span></div>`).appendTo(getTopLeftElement(blueMap));
|
||||
$('#bluemap-mapmenu').remove();
|
||||
this.element = $(`<div id="bluemap-mapmenu" class="dropdown-container"><span class="selection">${maps[this.bluemap.map].name}</span></div>`).appendTo(getTopLeftElement(blueMap));
|
||||
|
||||
const dropdown = $('<div class="dropdown"></div>').appendTo(this.element);
|
||||
this.maplist = $('<ul></ul>').appendTo(dropdown);
|
||||
const dropdown = $('<div class="dropdown"></div>').appendTo(this.element);
|
||||
this.maplist = $('<ul></ul>').appendTo(dropdown);
|
||||
|
||||
for (let mapId in maps) {
|
||||
if (!maps.hasOwnProperty(mapId)) continue;
|
||||
if (!maps.enabled) continue;
|
||||
for (let mapId in maps) {
|
||||
if (!maps.hasOwnProperty(mapId)) continue;
|
||||
if (!maps.enabled) continue;
|
||||
|
||||
const map = maps[mapId];
|
||||
$(`<li map="${mapId}">${map.name}</li>`).appendTo(this.maplist);
|
||||
}
|
||||
const map = maps[mapId];
|
||||
$(`<li map="${mapId}">${map.name}</li>`).appendTo(this.maplist);
|
||||
}
|
||||
|
||||
this.maplist.find('li[map=' + this.bluemap.map + ']').hide();
|
||||
this.maplist.find('li[map]').click(this.onMapClick);
|
||||
$(document).on('bluemap-map-change', this.onBlueMapMapChange);
|
||||
}
|
||||
this.maplist.find('li[map=' + this.bluemap.map + ']').hide();
|
||||
this.maplist.find('li[map]').click(this.onMapClick);
|
||||
$(document).on('bluemap-map-change', this.onBlueMapMapChange);
|
||||
}
|
||||
|
||||
onMapClick = event => {
|
||||
const map = $(this).attr('map');
|
||||
this.bluemap.changeMap(map);
|
||||
}
|
||||
onMapClick = event => {
|
||||
const map = $(this).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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
@ -27,21 +27,21 @@ import $ from 'jquery';
|
||||
// ###### Modules ######
|
||||
|
||||
export const getTopRightElement = blueMap => {
|
||||
let element = $('#bluemap-topright');
|
||||
let element = $('#bluemap-topright');
|
||||
|
||||
if (element.length === 0){
|
||||
element = $('<div id="bluemap-topright" class="box"></div>').appendTo(blueMap.element);
|
||||
}
|
||||
if (element.length === 0){
|
||||
element = $('<div id="bluemap-topright" class="box"></div>').appendTo(blueMap.element);
|
||||
}
|
||||
|
||||
return element;
|
||||
return element;
|
||||
};
|
||||
|
||||
export const getTopLeftElement = blueMap => {
|
||||
let element = $('#bluemap-topleft');
|
||||
let element = $('#bluemap-topleft');
|
||||
|
||||
if (element.length === 0){
|
||||
element = $('<div id="bluemap-topleft" class="box"></div>').appendTo(blueMap.element);
|
||||
}
|
||||
if (element.length === 0){
|
||||
element = $('<div id="bluemap-topleft" class="box"></div>').appendTo(blueMap.element);
|
||||
}
|
||||
|
||||
return element;
|
||||
return element;
|
||||
};
|
||||
|
@ -27,21 +27,21 @@ import $ from 'jquery';
|
||||
import { getTopLeftElement } from './Module.js';
|
||||
|
||||
export default class Position {
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
const parent = getTopLeftElement(blueMap);
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
const parent = getTopLeftElement(blueMap);
|
||||
|
||||
$('.bluemap-position').remove();
|
||||
this.elementX = $('<div class="bluemap-position pos-x">0</div>').appendTo(parent);
|
||||
//this.elementY = $('<div class="bluemap-position pos-y">0</div>').appendTo(parent);
|
||||
this.elementZ = $('<div class="bluemap-position pos-z">0</div>').appendTo(parent);
|
||||
$('.bluemap-position').remove();
|
||||
this.elementX = $('<div class="bluemap-position pos-x">0</div>').appendTo(parent);
|
||||
//this.elementY = $('<div class="bluemap-position pos-y">0</div>').appendTo(parent);
|
||||
this.elementZ = $('<div class="bluemap-position pos-z">0</div>').appendTo(parent);
|
||||
|
||||
$(document).on('bluemap-update-frame', this.onBlueMapUpdateFrame);
|
||||
}
|
||||
$(document).on('bluemap-update-frame', this.onBlueMapUpdateFrame);
|
||||
}
|
||||
|
||||
onBlueMapUpdateFrame = () => {
|
||||
this.elementX.html(Math.floor(this.blueMap.controls.targetPosition.x));
|
||||
//this.elementY.html(this.blueMap.controls.targetPosition.y === 0 ? "-" : Math.floor(this.blueMap.controls.targetPosition.y));
|
||||
this.elementZ.html(Math.floor(this.blueMap.controls.targetPosition.z));
|
||||
}
|
||||
onBlueMapUpdateFrame = () => {
|
||||
this.elementX.html(Math.floor(this.blueMap.controls.targetPosition.x));
|
||||
//this.elementY.html(this.blueMap.controls.targetPosition.y === 0 ? "-" : Math.floor(this.blueMap.controls.targetPosition.y));
|
||||
this.elementZ.html(Math.floor(this.blueMap.controls.targetPosition.z));
|
||||
}
|
||||
}
|
||||
|
@ -30,93 +30,93 @@ import { getTopRightElement } from './Module.js';
|
||||
import GEAR from '../../../assets/gear.svg';
|
||||
|
||||
export default class Settings {
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
const parent = getTopRightElement(blueMap);
|
||||
constructor(blueMap) {
|
||||
this.blueMap = blueMap;
|
||||
const parent = getTopRightElement(blueMap);
|
||||
|
||||
$('#bluemap-settings').remove();
|
||||
this.elementMenu = $('<div id="bluemap-settings-container" style="display: none"></div>').appendTo(parent);
|
||||
this.elementSettings = $(`<div id="bluemap-settings" class="button"><img src="${GEAR}" /></div>`).appendTo(parent);
|
||||
this.elementSettings.click(this.onSettingsClick);
|
||||
$('#bluemap-settings').remove();
|
||||
this.elementMenu = $('<div id="bluemap-settings-container" style="display: none"></div>').appendTo(parent);
|
||||
this.elementSettings = $(`<div id="bluemap-settings" class="button"><img src="${GEAR}" /></div>`).appendTo(parent);
|
||||
this.elementSettings.click(this.onSettingsClick);
|
||||
|
||||
/* Quality */
|
||||
/* Quality */
|
||||
|
||||
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>' +
|
||||
'</ul></div></div>'
|
||||
).prependTo(this.elementMenu);
|
||||
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>' +
|
||||
'</ul></div></div>'
|
||||
).prependTo(this.elementMenu);
|
||||
|
||||
this.elementQuality.find('li[quality]').click(this.onQualityClick);
|
||||
this.elementRenderDistance = $('<div id="bluemap-settings-render-distance" class="dropdown-container"></div>').prependTo(this.elementMenu);
|
||||
this.elementQuality.find('li[quality]').click(this.onQualityClick);
|
||||
this.elementRenderDistance = $('<div id="bluemap-settings-render-distance" class="dropdown-container"></div>').prependTo(this.elementMenu);
|
||||
|
||||
this.init();
|
||||
this.init();
|
||||
|
||||
$(document).on('bluemap-map-change', this.init);
|
||||
}
|
||||
$(document).on('bluemap-map-change', this.init);
|
||||
}
|
||||
|
||||
init = () => {
|
||||
this.defaultHighRes = this.blueMap.hiresTileManager.viewDistance;
|
||||
this.defaultLowRes = this.blueMap.lowresTileManager.viewDistance;
|
||||
init = () => {
|
||||
this.defaultHighRes = this.blueMap.hiresTileManager.viewDistance;
|
||||
this.defaultLowRes = this.blueMap.lowresTileManager.viewDistance;
|
||||
|
||||
this.elementRenderDistance.html(
|
||||
'<span class="selection">View Distance: <span>' + this.blueMap.hiresTileManager.viewDistance + '</span></span>' +
|
||||
'<div class="dropdown">' +
|
||||
'<input type="range" min="0" max="100" step="1" value="' + this.renderDistanceToPct(this.blueMap.hiresTileManager.viewDistance, this.defaultHighRes) + '" />' +
|
||||
'</div>'
|
||||
);
|
||||
this.elementRenderDistance.html(
|
||||
'<span class="selection">View Distance: <span>' + this.blueMap.hiresTileManager.viewDistance + '</span></span>' +
|
||||
'<div class="dropdown">' +
|
||||
'<input type="range" min="0" max="100" step="1" value="' + this.renderDistanceToPct(this.blueMap.hiresTileManager.viewDistance, this.defaultHighRes) + '" />' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
this.slider = this.elementRenderDistance.find('input');
|
||||
this.slider.on('change input', this.onViewDistanceSlider);
|
||||
};
|
||||
this.slider = this.elementRenderDistance.find('input');
|
||||
this.slider.on('change input', this.onViewDistanceSlider);
|
||||
};
|
||||
|
||||
onViewDistanceSlider = () => {
|
||||
this.blueMap.hiresTileManager.viewDistance = this.pctToRenderDistance(parseFloat(this.slider.val()), this.defaultHighRes);
|
||||
this.blueMap.lowresTileManager.viewDistance = this.pctToRenderDistance(parseFloat(this.slider.val()), this.defaultLowRes);
|
||||
this.elementRenderDistance.find('.selection > span').html(Math.round(this.blueMap.hiresTileManager.viewDistance * 10) / 10);
|
||||
onViewDistanceSlider = () => {
|
||||
this.blueMap.hiresTileManager.viewDistance = this.pctToRenderDistance(parseFloat(this.slider.val()), this.defaultHighRes);
|
||||
this.blueMap.lowresTileManager.viewDistance = this.pctToRenderDistance(parseFloat(this.slider.val()), this.defaultLowRes);
|
||||
this.elementRenderDistance.find('.selection > span').html(Math.round(this.blueMap.hiresTileManager.viewDistance * 10) / 10);
|
||||
|
||||
this.blueMap.lowresTileManager.update();
|
||||
this.blueMap.hiresTileManager.update();
|
||||
};
|
||||
this.blueMap.lowresTileManager.update();
|
||||
this.blueMap.hiresTileManager.update();
|
||||
};
|
||||
|
||||
onQualityClick = (event) => {
|
||||
const target = event.target
|
||||
const desc = $(target).html();
|
||||
this.blueMap.quality = parseFloat($(target).attr("quality"));
|
||||
onQualityClick = (event) => {
|
||||
const target = event.target
|
||||
const desc = $(target).html();
|
||||
this.blueMap.quality = parseFloat($(target).attr("quality"));
|
||||
|
||||
this.elementQuality.find('li').show();
|
||||
this.elementQuality.find(`li[quality="${this.blueMap.quality}"]`).hide();
|
||||
this.elementQuality.find('li').show();
|
||||
this.elementQuality.find(`li[quality="${this.blueMap.quality}"]`).hide();
|
||||
|
||||
this.elementQuality.find('.selection > span').html(desc);
|
||||
this.elementQuality.find('.selection > span').html(desc);
|
||||
|
||||
this.blueMap.handleContainerResize();
|
||||
};
|
||||
this.blueMap.handleContainerResize();
|
||||
};
|
||||
|
||||
onSettingsClick = () => {
|
||||
if (this.elementMenu.css('display') === 'none'){
|
||||
this.elementSettings.addClass('active');
|
||||
} else {
|
||||
this.elementSettings.removeClass('active');
|
||||
}
|
||||
onSettingsClick = () => {
|
||||
if (this.elementMenu.css('display') === 'none'){
|
||||
this.elementSettings.addClass('active');
|
||||
} else {
|
||||
this.elementSettings.removeClass('active');
|
||||
}
|
||||
|
||||
this.elementMenu.animate({
|
||||
width: 'toggle'
|
||||
}, 200);
|
||||
}
|
||||
this.elementMenu.animate({
|
||||
width: 'toggle'
|
||||
}, 200);
|
||||
}
|
||||
|
||||
pctToRenderDistance(value, defaultValue) {
|
||||
let max = defaultValue * 5;
|
||||
if (max > 20) max = 20;
|
||||
pctToRenderDistance(value, defaultValue) {
|
||||
let max = defaultValue * 5;
|
||||
if (max > 20) max = 20;
|
||||
|
||||
return Math3.mapLinear(value, 0, 100, 1, max);
|
||||
}
|
||||
return Math3.mapLinear(value, 0, 100, 1, max);
|
||||
}
|
||||
|
||||
renderDistanceToPct(value, defaultValue) {
|
||||
let max = defaultValue * 5;
|
||||
if (max > 20) max = 20;
|
||||
renderDistanceToPct(value, defaultValue) {
|
||||
let max = defaultValue * 5;
|
||||
if (max > 20) max = 20;
|
||||
|
||||
return Math3.mapLinear(value, 1, max, 0, 100);
|
||||
}
|
||||
return Math3.mapLinear(value, 1, max, 0, 100);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user