dylan/dominionator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add first-pass colors to the card types

Browse Source
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

7
src/draw.ts

@ -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);

12
src/types.ts

@ -93,7 +93,7 @@ export const TYPE_TREASURE: DominionBasicCardType = {
typeType: "basic",
name: "Treasure",
color: {
value: "yellow",
value: "#ffe076",
priority: 5,
},
};
@ -102,7 +102,7 @@ export const TYPE_VICTORY: DominionBasicCardType = {
typeType: "basic",
name: "Victory",
color: {
value: "green",
value: "#b3e5ad",
priority: 4,
},
};
@ -111,7 +111,7 @@ export const TYPE_REACTION: DominionBasicCardType = {
typeType: "basic",
name: "Reaction",
color: {
value: "blue",
value: "#81adff",
priority: 1,
overridesAction: true,
},
@ -121,7 +121,7 @@ export const TYPE_DURATION: DominionBasicCardType = {
typeType: "basic",
name: "Duration",
color: {
value: "orange",
value: "#ffbc55",
priority: 3,
overridesAction: true,
},
@ -129,9 +129,9 @@ export const TYPE_DURATION: DominionBasicCardType = {
export const TYPE_RESERVE: DominionBasicCardType = {
typeType: "basic",
name: "Duration",
name: "Reserve",
color: {
value: "brown",
value: "#e5c28b",
priority: 2, // unknown whether this should be above or below reaction/duration?
overridesAction: true,
},