You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.2 KiB
50 lines
1.2 KiB
// canvas-app.js
|
|
// Copyright (C) 2022 Rob Colbert @[email protected]
|
|
// License: Apache-2.0
|
|
|
|
'use strict';
|
|
|
|
console.log('loaded');
|
|
|
|
const IMAGE_W = 32;
|
|
const IMAGE_H = 32;
|
|
|
|
const DTP_COMPONENT_NAME = 'canvas-app';
|
|
import '../less/style.less';
|
|
|
|
import { NiceAudio, NiceLog } from 'dtp-nice-game';
|
|
|
|
export default class CanvasApp {
|
|
|
|
constructor ( ) {
|
|
this.audio = new NiceAudio();
|
|
|
|
this.log = new NiceLog(DTP_COMPONENT_NAME);
|
|
this.log.info('Canvas app online');
|
|
|
|
this.canvas = document.querySelector('canvas');
|
|
this.ctx = this.canvas.getContext('2d');
|
|
this.imageData = this.ctx.createImageData(32, 32);
|
|
}
|
|
|
|
updatePixels (message) {
|
|
for (const pixel of message.pixels) {
|
|
if ((pixel.x < 0) ||
|
|
(pixel.x > (IMAGE_W - 1)) ||
|
|
(pixel.y < 0) ||
|
|
(pixel.y > (IMAGE_H - 1))) {
|
|
this.log.info('rejecting invalid pixel update', pixel);
|
|
return;
|
|
}
|
|
let pixelIdx = (pixel.y * IMAGE_W * 4) + (pixel.x * 4);
|
|
this.imageData[pixelIdx++] = pixel.r;
|
|
this.imageData[pixelIdx++] = pixel.g;
|
|
this.imageData[pixelIdx++] = pixel.b;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', async ( ) => {
|
|
window.app = new CanvasApp();
|
|
console.log('running');
|
|
});
|