progress!

deno.json

@@ -1,8 +1,11 @@
 {
 	"lock": false,
 	"tasks": {
+		"dev": "deno run -A tools/dev.ts",
 		"build": "deno run -A tools/build.ts",
-		"serve": "deno run -A src/server/index.ts"
+		"build:watch": "deno run --watch=src/client,src/server -A tools/build.ts",
+		"serve": "deno run -A src/server/index.ts",
+		"serve:watch": "deno run --watch=src/client,src/server -A src/server/index.ts"
 	},
 	"lint": {
 		"rules": {

src/client/Card.tsx

@@ -1,4 +1,4 @@
-import { drawCard } from "../draw.ts";
+import { drawCard, loadImages } from "../draw.ts";
 import { DominionCard } from "../types.ts";
 
 const sizeMap = {
@@ -15,10 +15,13 @@ const sizeMap = {
 export const Card = (props: {card: DominionCard}) => {
 	const {card} = props;
 	const {width, height} = sizeMap[card.orientation];
-	return <canvas style={{width: "2.5in"}} width={width} height={height} ref={(canvasElement) => {
+	return <canvas style={{width: "2.5in"}} width={width} height={height} ref={async (canvasElement) => {
 		if (canvasElement) {
 			const context = canvasElement.getContext("2d");
 			if (context) {
+				console.log("loading");
+				await loadImages()
+				console.log("done loading");
 				drawCard(context, card);
 			}
 		}

src/draw.ts

@@ -5,6 +5,8 @@ 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]);
@@ -14,21 +16,39 @@ export const loadImage = (
 			imageCache[key] = img;
 			resolve(img);
 		};
+		img.onerror = (e) => {
+			console.log("err", e);
+		};
 		img.src = src;
 	});
 };
 
 const imageList = [
 	{
-		key: "card",
+		key: "card-color-1",
-		src: "/assets/CardColorOne.png",
+		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",
 	},
 ];
 
-for (const imageInfo of imageList) {
+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];
@@ -38,6 +58,25 @@ export const getImage = (key: string) => {
 	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
@@ -56,8 +95,19 @@ const drawStandardCard = async (
 	const w = context.canvas.width;
 	const h = context.canvas.height;
 	context.save();
-	context.fillStyle = "brown";
+	// Draw the image
-	context.drawImage(getImage("card"), 0, 0);
+	// Draw the card base
+	context.drawImage(colorImage(getImage("card-color-1"), "#ff9900"), 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
+	// Draw the description
+	// Draw the types
+	// Draw the cost
+	// Draw the preview
+	// Draw the icon
+	// Draw the credit
 	context.restore();
 };
 

tools/dev.ts

@@ -0,0 +1,37 @@
+runConcurrentTasks().catch((error) => {
+	console.error("Error running tasks:", error);
+	Deno.exit(1);
+});
+
+async function runConcurrentTasks() {
+	const tasks = [
+		runCommand("deno task build:watch"),
+		runCommand("deno task serve:watch"),
+	];
+
+	const results = await Promise.all(tasks);
+	if (results.includes(false)) {
+		console.error("One or more tasks failed.");
+		Deno.exit(1);
+	} else {
+		console.log("All tasks completed successfully.");
+	}
+}
+
+async function runCommand(fullCommand: string) {
+	const [command, ...args] = fullCommand.split(" ");
+
+	const cmd = new Deno.Command(command!, {
+		args,
+		stdout: "piped",
+	});
+	const process = cmd.spawn();
+
+	const status = await process.status;
+	if (status.code !== 0) {
+		console.error(`Command failed: ${command}`);
+		return false;
+	}
+
+	return true;
+}