dominionator/src/draw.ts

import { DominionCard } from "./types.ts";

const imageCache: Record<string, HTMLImageElement> = {};
export const loadImage = (
	key: string,
	src: string
): Promise<HTMLImageElement> => {
	console.log("2", key);
	console.log(src);
	return new Promise((resolve) => {
		if (key in imageCache && imageCache[key]) {
			resolve(imageCache[key]);
		}
		const img = new Image();
		img.onload = () => {
			imageCache[key] = img;
			resolve(img);
		};
		img.onerror = (e) => {
			console.log("err", e);
		};
		img.src = src;
	});
};

const imageList = [
	{
		key: "card-color-1",
		src: "/static/assets/CardColorOne.png",
	},
	{
		key: "card-brown",
		src: "/static/assets/CardBrown.png",
	},
	{
		key: "card-gray",
		src: "/static/assets/CardGray.png",
	},
	{
		key: "card-description-focus",
		src: "/static/assets/DescriptionFocus.png",
	},
];

export const loadImages = async () => {
	for (const imageInfo of imageList) {
		const { key, src } = imageInfo;
		console.log(key);
		await loadImage(key, src);
	}
};

export const getImage = (key: string) => {
	const image = imageCache[key];
	if (!image) {
		throw Error(`Tried to get an invalid image ${key}`);
	}
	return image;
};

export const colorImage = (
	image: HTMLImageElement,
	color: string
): HTMLCanvasElement => {
	const canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	const context = canvas.getContext("2d")!;
	context.save();
	context.drawImage(image, 0, 0);
	context.globalCompositeOperation = "multiply";
	context.fillStyle = color;
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.globalCompositeOperation = "destination-atop"; // restore transparency
	context.drawImage(image, 0, 0);
	context.restore();
	return canvas;
};

export const drawCard = (
	context: CanvasRenderingContext2D,
	card: DominionCard
): Promise<void> => {
	if (card.orientation === "card") {
		return drawStandardCard(context, card);
	} else {
		return drawLandscapeCard(context, card);
	}
};

const drawText = (
	context: CanvasRenderingContext2D,
	text: string,
	x: number,
	y: number,
	options?: {
		maxWidth?: number;
		maxHeight?: number;
		allowWrap?: boolean;
		font?: string;
		color?: string;
	}
) => {
	const { maxWidth = undefined } = options ?? {};
	context.font = "bold 48px serif";
	context.fillText(text, x, y, maxWidth);
};

const drawStandardCard = async (
	context: CanvasRenderingContext2D,
	card: DominionCard
): Promise<void> => {
	const w = context.canvas.width;
	const h = context.canvas.height;
	context.save();
	// Draw the image
	// Draw the card base
	const color = "#ffffff"; // "#ffbc55";
	context.drawImage(colorImage(getImage("card-color-1"), color), 0, 0);
	context.drawImage(getImage("card-gray"), 0, 0);
	context.drawImage(colorImage(getImage("card-brown"), "#ff9911"), 0, 0);
	context.drawImage(getImage("card-description-focus"), 44, 1094);
	// Draw the name
	drawText(context, card.title, 300, 300);
	// Draw the description
	// Draw the types
	// Draw the cost
	// Draw the preview
	// Draw the icon
	// Draw the credit
	context.restore();
};

const drawLandscapeCard = async (
	context: CanvasRenderingContext2D,
	card: DominionCard
): Promise<void> => {
	// TODO: everything
};