Use rollup and split up files

src/Frame.js

@@ -0,0 +1,74 @@
+// @ts-check
+import { TRANSPARENT, Directions } from './constants.js';
+import Layer from './Layer.js';
+import BirdType from './birdType.js';
+
+class Frame {
+
+	/** @type {{ [tag: string]: string[][] }} */
+	#pixelsByTag = {};
+
+	/**
+	 * @param {Layer[]} layers
+	 */
+	constructor(layers) {
+		/** @type {Set<string>} */
+		let tags = new Set();
+		for (let layer of layers) {
+			tags.add(layer.tag);
+		}
+		tags.add("default");
+		for (let tag of tags) {
+			let maxHeight = layers.reduce((max, layer) => Math.max(max, layer.pixels.length), 0);
+			if (layers[0].tag !== "default") {
+				throw new Error("First layer must have the 'default' tag");
+			}
+			this.pixels = layers[0].pixels.map(row => row.slice());
+			// Pad from top with transparent pixels
+			while (this.pixels.length < maxHeight) {
+				this.pixels.unshift(new Array(this.pixels[0].length).fill(TRANSPARENT));
+			}
+			// Combine layers
+			for (let i = 1; i < layers.length; i++) {
+				if (layers[i].tag === "default" || layers[i].tag === tag) {
+					let layerPixels = layers[i].pixels;
+					let topMargin = maxHeight - layerPixels.length;
+					for (let y = 0; y < layerPixels.length; y++) {
+						for (let x = 0; x < layerPixels[y].length; x++) {
+							this.pixels[y + topMargin][x] = layerPixels[y][x] !== TRANSPARENT ? layerPixels[y][x] : this.pixels[y + topMargin][x];
+						}
+					}
+				}
+			}
+			this.#pixelsByTag[tag] = this.pixels.map(row => row.slice());
+		}
+	}
+
+	/**
+	 * @param {string} [tag]
+	 * @returns {string[][]}
+	 */
+	getPixels(tag = "default") {
+		return this.#pixelsByTag[tag] ?? this.#pixelsByTag["default"];
+	}
+
+	/**
+	 * @param {CanvasRenderingContext2D} ctx
+	 * @param {BirdType} [species]
+	* @param {number} direction
+	 * @param {number} canvasPixelSize
+	 */
+	draw(ctx, direction, canvasPixelSize, species) {
+		const pixels = this.getPixels(species?.tags[0]);
+		for (let y = 0; y < pixels.length; y++) {
+			const row = pixels[y];
+			for (let x = 0; x < pixels[y].length; x++) {
+				const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
+				ctx.fillStyle = species?.colors[cell] ?? cell;
+				ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
+			};
+		};
+	}
+}
+
+export default Frame;

src/Layer.js

@@ -0,0 +1,14 @@
+// @ts-check
+
+class Layer {
+	/**
+	 * @param {string[][]} pixels
+	 * @param {string} [tag]
+	 */
+	constructor(pixels, tag = "default") {
+		this.pixels = pixels;
+		this.tag = tag;
+	}
+}
+
+export default Layer;

src/birdType.js

@@ -0,0 +1,47 @@
+// @ts-check
+
+import {
+	THEME_HIGHLIGHT,
+	OUTLINE,
+	BORDER,
+	BEAK,
+	EYE,
+	HEART,
+	HEART_BORDER,
+	HEART_SHINE,
+	FEATHER_SPINE,
+	TRANSPARENT,
+	NOSE,
+	HOOD
+} from './constants.js';
+
+class BirdType {
+	/**
+	 * @param {string} name
+	 * @param {string} description
+	 * @param {Record<string, string>} colors
+	 * @param {string[]} [tags]
+	 */
+	constructor(name, description, colors, tags = []) {
+		this.name = name;
+		this.description = description;
+		const defaultColors = {
+			[TRANSPARENT]: "transparent",
+			[OUTLINE]: "#000000",
+			[BORDER]: "#ffffff",
+			[BEAK]: "#000000",
+			[EYE]: "#000000",
+			[HEART]: "#c82e2e",
+			[HEART_BORDER]: "#501a1a",
+			[HEART_SHINE]: "#ff6b6b",
+			[FEATHER_SPINE]: "#373737",
+			[HOOD]: colors.face,
+			[NOSE]: colors.face,
+		};
+		/** @type {Record<string, string>} */
+		this.colors = { ...defaultColors, ...colors, [THEME_HIGHLIGHT]: colors[THEME_HIGHLIGHT] ?? colors.hood ?? colors.face };
+		this.tags = tags;
+	}
+}
+
+export default BirdType;

src/constants.js

@@ -0,0 +1,47 @@
+// @ts-check
+
+// Theme color indicators
+export const THEME_HIGHLIGHT = "theme-highlight";
+export const TRANSPARENT = "transparent";
+export const OUTLINE = "outline";
+export const BORDER = "border";
+export const FOOT = "foot";
+export const BEAK = "beak";
+export const EYE = "eye";
+export const FACE = "face";
+export const HOOD = "hood";
+export const NOSE = "nose";
+export const BELLY = "belly";
+export const UNDERBELLY = "underbelly";
+export const WING = "wing";
+export const WING_EDGE = "wing-edge";
+export const HEART = "heart";
+export const HEART_BORDER = "heart-border";
+export const HEART_SHINE = "heart-shine";
+export const FEATHER_SPINE = "feather-spine";
+
+/** @type {Record<string, string>} */
+export const SPRITE_SHEET_COLOR_MAP = {
+	"transparent": TRANSPARENT,
+	"#ffffff": BORDER,
+	"#000000": OUTLINE,
+	"#010a19": BEAK,
+	"#190301": EYE,
+	"#af8e75": FOOT,
+	"#639bff": FACE,
+	"#99e550": HOOD,
+	"#d95763": NOSE,
+	"#f8b143": BELLY,
+	"#ec8637": UNDERBELLY,
+	"#578ae6": WING,
+	"#326ed9": WING_EDGE,
+	"#c82e2e": HEART,
+	"#501a1a": HEART_BORDER,
+	"#ff6b6b": HEART_SHINE,
+	"#373737": FEATHER_SPINE,
+};
+
+export const Directions = {
+	LEFT: -1,
+	RIGHT: 1,
+};