140 lines
3.1 KiB
TypeScript
140 lines
3.1 KiB
TypeScript
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
|
|
};
|