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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/draw.ts
View File

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

12
src/types.ts
View File

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