Add first-pass colors to the card types

This commit is contained in:
Dylan Pizzo
2025-01-06 00:12:39 -05:00
parent f497057dae
commit 1e6e336f73
2 changed files with 10 additions and 9 deletions

View File

@@ -1,3 +1,4 @@
import { TYPE_ACTION } from "./types.ts";
import { DominionCard } from "./types.ts";
const imageCache: Record<string, HTMLImageElement> = {};
@@ -57,7 +58,7 @@ export const getImage = (key: string) => {
export const colorImage = (
image: HTMLImageElement,
color: string
color?: string
): HTMLCanvasElement => {
const canvas = document.createElement("canvas");
canvas.width = image.width;
@@ -66,7 +67,7 @@ export const colorImage = (
context.save();
context.drawImage(image, 0, 0);
context.globalCompositeOperation = "multiply";
context.fillStyle = color;
context.fillStyle = color ?? "white";
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = "destination-atop"; // restore transparency
context.drawImage(image, 0, 0);
@@ -220,7 +221,7 @@ const drawStandardCard = async (
context.save();
// Draw the image
// Draw the card base
const color = "#ffffff"; // "#ffbc55";
const color = TYPE_ACTION.color?.value; // "#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);