add touchmove

This commit is contained in:
biglyderv 2025-05-16 14:15:58 -04:00
parent da4f5afbe9
commit 8275c8decc
Signed by: biglyderv
GPG key ID: 0E2EB0B4CD7397B5

View file

@ -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 = ``
} }
@ -220,7 +225,7 @@ var handler = new TickHandler(canvas);
setInterval(() => { setInterval(() => {
if (canvas.stopNow) return; if (canvas.stopNow) return;
handler.tick(); handler.tick();
}, 1000 / 60); }, 1000 / 60);