122 lines
3.2 KiB
JavaScript
Executable File
122 lines
3.2 KiB
JavaScript
Executable File
export class Pixel {
|
|
/**
|
|
* @param {HTMLElement} el
|
|
* @param {string} char
|
|
* @param {number|string} color text/foreground color
|
|
*/
|
|
constructor(el, char = " ", color = "#fff") {
|
|
//
|
|
/** @type {HTMLElement} el the html element that makes up this cell*/
|
|
this.el = el;
|
|
|
|
/** @type {string} char */
|
|
this.char = char;
|
|
|
|
/** @type {number|string} fg color color */
|
|
this.color = color;
|
|
|
|
/** @type {boolean} Has this pixel been updated since it was flushed to DOM ? */
|
|
this.dirty = true;
|
|
}
|
|
|
|
clone() {
|
|
return new Pixel(this.el, this.car, this.color);
|
|
}
|
|
}
|
|
|
|
export class AsciiWindow {
|
|
/**
|
|
* @param {HTMLElement} container
|
|
* @param {number} width Canvas width (in pseudo-pixels)
|
|
* @param {number} height Canvas height (in pseudo-pixels)
|
|
*/
|
|
constructor(container, width, height) {
|
|
//
|
|
/** @type {HTMLElement} Paren element that contains all the pseudo-pixels */
|
|
this.container = container;
|
|
|
|
/** @type {number} width Canvas width (in pseudo-pixels) */
|
|
this.width = width;
|
|
|
|
/** @type {number} height Canvas height (in pseudo-pixels) */
|
|
this.height = height;
|
|
|
|
/** @type {Pixel[]} */
|
|
this.canvas = [];
|
|
|
|
this.initializeCanvaas();
|
|
}
|
|
|
|
/**
|
|
* Create the html elements that make up the canvas,
|
|
* as well as a buffer that holds a copy of the data
|
|
* in the cells so we can diff properly.
|
|
*/
|
|
initializeCanvaas() {
|
|
const w = this.width;
|
|
const h = this.height;
|
|
|
|
this.canvas = new Array(w * h).fill();
|
|
|
|
let i = 0;
|
|
for (let y = 0; y < h; y++) {
|
|
const rowEl = document.createElement("div");
|
|
this.container.appendChild(rowEl);
|
|
|
|
for (let x = 0; x < w; x++) {
|
|
const pixelEl = document.createElement("code");
|
|
rowEl.appendChild(pixelEl);
|
|
pixelEl.textContent = " ";
|
|
this.canvas[i] = new Pixel(pixelEl, " ", "#fff");
|
|
i++;
|
|
}
|
|
}
|
|
}
|
|
|
|
withinBounds(x, y) {
|
|
return x >= 0 && x < this.width && y >= 0 && y < this.height;
|
|
}
|
|
|
|
mustBeWithinBounds(x, y) {
|
|
if (!this.withinBounds(x, y)) {
|
|
throw new Error(`Coordinate [${x}, ${y}] is out of bounds`);
|
|
}
|
|
}
|
|
|
|
put(x, y, char, color) {
|
|
//
|
|
this.mustBeWithinBounds(x, y);
|
|
const idx = this.width * y + x;
|
|
|
|
const pixel = this.canvas[idx];
|
|
|
|
// Check for changes in text contents
|
|
if (char !== undefined && char !== null && char !== pixel.char) {
|
|
pixel.char = char;
|
|
pixel.dirty = true;
|
|
}
|
|
|
|
if (color !== undefined && color !== null && color !== pixel.color) {
|
|
pixel.color = color;
|
|
pixel.dirty = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Apply all patches to the DOM
|
|
*
|
|
* @return {number} number of DOM updates made
|
|
*/
|
|
commitToDOM() {
|
|
this.canvas.forEach((pixel) => {
|
|
if (!pixel.dirty) {
|
|
return;
|
|
}
|
|
|
|
pixel.el.textContent = pixel.char;
|
|
pixel.el.style.color = pixel.color;
|
|
pixel.dirty = false;
|
|
});
|
|
}
|
|
}
|