add touchmove
This commit is contained in:
parent
da4f5afbe9
commit
8275c8decc
1 changed files with 38 additions and 33 deletions
45
js/core.js
45
js/core.js
|
@ -31,6 +31,11 @@ function Canvas(width, height, upscale) {
|
||||||
that.clicked = true;
|
that.clicked = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.elem.addEventListener('touchmove', function (e) {
|
||||||
|
that.pageX = e.touches[0].pageX;
|
||||||
|
that.pageY = e.touches[0].pageY;
|
||||||
|
})
|
||||||
|
|
||||||
this.elem.addEventListener('mousemove', function (e) {
|
this.elem.addEventListener('mousemove', function (e) {
|
||||||
that.pageX = e.pageX;
|
that.pageX = e.pageX;
|
||||||
that.pageY = e.pageY;
|
that.pageY = e.pageY;
|
||||||
|
@ -92,16 +97,16 @@ Canvas.prototype.render = function () {
|
||||||
let imgData = this.ctx.getImageData(0, 0, this.width, this.height);
|
let imgData = this.ctx.getImageData(0, 0, this.width, this.height);
|
||||||
let pixels = imgData.data;
|
let pixels = imgData.data;
|
||||||
|
|
||||||
let int = Math.ceil(this.width * this.height/8);
|
let int = Math.ceil(this.width * this.height / 8);
|
||||||
for (let j = 0; j < 8; j++) {
|
for (let j = 0; j < 8; j++) {
|
||||||
let that = this;
|
let that = this;
|
||||||
(async function() {
|
(async function () {
|
||||||
for (let i = j*int; i < (j+1)*int; i++) {
|
for (let i = j * int; i < (j + 1) * int; i++) {
|
||||||
if (i > that.width * that.height) break;
|
if (i > that.width * that.height) break;
|
||||||
let x = Math.floor(i / that.height);
|
let x = Math.floor(i / that.height);
|
||||||
let y = i % that.height;
|
let y = i % that.height;
|
||||||
|
|
||||||
let i2 = x + y*that.width;
|
let i2 = x + y * that.width;
|
||||||
|
|
||||||
let block = mainTiles.tiles[that.blocks[i]];
|
let block = mainTiles.tiles[that.blocks[i]];
|
||||||
|
|
||||||
|
@ -109,19 +114,19 @@ Canvas.prototype.render = function () {
|
||||||
|
|
||||||
if (block.color[0] != -1) {
|
if (block.color[0] != -1) {
|
||||||
|
|
||||||
let val = (temp + 310)/310;
|
let val = (temp + 310) / 310;
|
||||||
if (val < -2.861) val = -2.861;
|
if (val < -2.861) val = -2.861;
|
||||||
|
|
||||||
pixels[i2*4] = (block.color[0] - temp / 1e28) * val ;
|
pixels[i2 * 4] = (block.color[0] - temp / 1e28) * val;
|
||||||
pixels[i2*4+1] = (block.color[1] - temp / 1e28) * (val * 0.259 + 0.741);
|
pixels[i2 * 4 + 1] = (block.color[1] - temp / 1e28) * (val * 0.259 + 0.741);
|
||||||
pixels[i2*4+2] = (block.color[2] - temp / 1e28) * (val * 0.023 + 0.977);
|
pixels[i2 * 4 + 2] = (block.color[2] - temp / 1e28) * (val * 0.023 + 0.977);
|
||||||
pixels[i2*4+3] = block.color[3] * 255 + Math.abs(val-1) * 100 || 255;
|
pixels[i2 * 4 + 3] = block.color[3] * 255 + Math.abs(val - 1) * 100 || 255;
|
||||||
} else {
|
} else {
|
||||||
let lg = Math.log(temp);
|
let lg = Math.log(temp);
|
||||||
pixels[i2*4] = ((handler.ticks*69 ) % (lg*0.6969)) * 255 / (lg*0.6969);
|
pixels[i2 * 4] = ((handler.ticks * 69) % (lg * 0.6969)) * 255 / (lg * 0.6969);
|
||||||
pixels[i2*4+1] = ((handler.ticks*69) % (lg*0.420420)) * 255 /(lg*0.420420);
|
pixels[i2 * 4 + 1] = ((handler.ticks * 69) % (lg * 0.420420)) * 255 / (lg * 0.420420);
|
||||||
pixels[i2*4+2] = ((handler.ticks*69) % (lg*0.13371337)) * 255 / (lg*0.13371337);
|
pixels[i2 * 4 + 2] = ((handler.ticks * 69) % (lg * 0.13371337)) * 255 / (lg * 0.13371337);
|
||||||
pixels[i2*4+3] = 255;
|
pixels[i2 * 4 + 3] = 255;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
|
@ -129,7 +134,7 @@ Canvas.prototype.render = function () {
|
||||||
|
|
||||||
/* TODO: clean up */
|
/* TODO: clean up */
|
||||||
|
|
||||||
this.ctx.putImageData(imgData,0,0,0,0,this.width,this.height)
|
this.ctx.putImageData(imgData, 0, 0, 0, 0, this.width, this.height)
|
||||||
|
|
||||||
if (window.loc2 && loc2.get('only') == 'true') {
|
if (window.loc2 && loc2.get('only') == 'true') {
|
||||||
this.stopNow = true;
|
this.stopNow = true;
|
||||||
|
@ -138,7 +143,7 @@ Canvas.prototype.render = function () {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.forceShowTilePlacement == true) {
|
if (this.forceShowTilePlacement == true) {
|
||||||
var x = (this.width / 2 - this.radius) * this.upscale;
|
var x = (this.width / 2 - this.radius) * this.upscale;
|
||||||
var y = (this.height / 2 - this.radius) * this.upscale;
|
var y = (this.height / 2 - this.radius) * this.upscale;
|
||||||
} else {
|
} else {
|
||||||
|
@ -150,20 +155,20 @@ Canvas.prototype.render = function () {
|
||||||
|
|
||||||
this.ctx.strokeStyle = 'rgb(255,255,255)';
|
this.ctx.strokeStyle = 'rgb(255,255,255)';
|
||||||
this.ctx.lineWidth = 2;
|
this.ctx.lineWidth = 2;
|
||||||
if(this.isMouseOver || this.forceShowTilePlacement)
|
if (this.isMouseOver || this.forceShowTilePlacement)
|
||||||
this.ctx.strokeRect(x / this.upscale, y / this.upscale, this.radius * 2 + 2, this.radius * 2 + 2);
|
this.ctx.strokeRect(x / this.upscale, y / this.upscale, this.radius * 2 + 2, this.radius * 2 + 2);
|
||||||
|
|
||||||
let theX = Math.floor(x/this.upscale + this.radius + 1);
|
let theX = Math.floor(x / this.upscale + this.radius + 1);
|
||||||
let theY = Math.floor(y/this.upscale + this.radius + 1);
|
let theY = Math.floor(y / this.upscale + this.radius + 1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let blok = mainTiles.tiles[this.getBlock(theX, theY)];
|
let blok = mainTiles.tiles[this.getBlock(theX, theY)];
|
||||||
let temp = this.getBlock(theX,theY, true);
|
let temp = this.getBlock(theX, theY, true);
|
||||||
|
|
||||||
if (blok && this.isMouseOver) {
|
if (blok && this.isMouseOver) {
|
||||||
document.querySelector('.info').textContent = `
|
document.querySelector('.info').textContent = `
|
||||||
Looking at ${blok.id} from ${blok.namespace}. Temperature at tile: ${Math.round(temp+23)}deg Celsius`
|
Looking at ${blok.id} from ${blok.namespace}. Temperature at tile: ${Math.round(temp + 23)}deg Celsius`
|
||||||
} else {
|
} else {
|
||||||
document.querySelector('.info').textContent = ``
|
document.querySelector('.info').textContent = ``
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue