add vp symbols
This commit is contained in:
Dylan Pizzo
parent
6213eda240
commit
3adf3bf76d
@ -1,13 +1,13 @@
|
||||
import { useState } from "react";
|
||||
import { sampleCard1, sampleCard2, sampleCard3 } from "../sampleData.ts";
|
||||
import { sampleCards } from "../sampleData.ts";
|
||||
import { Card } from "./Card.tsx";
|
||||
|
||||
export const App = () => {
|
||||
const [count, setCount] = useState(0);
|
||||
return <div>
|
||||
<Card key={`1-${count}`} card={sampleCard1}/>
|
||||
<Card key={`2-${count}`} card={sampleCard2}/>
|
||||
<Card key={`3-${count}`} card={sampleCard3}/>
|
||||
{sampleCards.map((sampleCard) => {
|
||||
return <Card key={`${sampleCard.title}-${count}`} card={sampleCard}/>
|
||||
})}
|
||||
<button onClick={() => {setCount(c => c+1)}}>Rerender (for fonts)</button>
|
||||
</div>;
|
||||
};
|
||||
|
||||
@ -5,9 +5,12 @@ export type Piece =
|
||||
| { type: "text"; text: string; isBold?: boolean; isItalic?: boolean }
|
||||
| { type: "space" }
|
||||
| { type: "break" }
|
||||
| { type: "coin"; text: string }
|
||||
| { type: "debt"; text: string }
|
||||
| { type: "potion"; text: string };
|
||||
| {
|
||||
type: "symbol";
|
||||
symbol: "coin" | "debt" | "potion" | "vp" | "vp-token";
|
||||
text: string;
|
||||
textColor: string;
|
||||
};
|
||||
|
||||
type PromiseOr<T> = T | Promise<T>;
|
||||
|
||||
@ -124,14 +127,14 @@ const breakPiece = pieceDef({
|
||||
render() {},
|
||||
});
|
||||
|
||||
const coinPiece = pieceDef({
|
||||
type: "coin",
|
||||
measure(context, _piece) {
|
||||
const symbolPiece = pieceDef({
|
||||
type: "symbol",
|
||||
measure(context, piece) {
|
||||
context.save();
|
||||
const metrics = context.measureText(" ");
|
||||
const height =
|
||||
metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
|
||||
const coinImage = getImage("coin");
|
||||
const coinImage = getImage(piece.symbol);
|
||||
context.restore();
|
||||
return {
|
||||
type: "content",
|
||||
@ -146,7 +149,7 @@ const coinPiece = pieceDef({
|
||||
const height = measure.ascent + measure.descent;
|
||||
// context.fillRect(x, y - measure.ascent, measure.width, height);
|
||||
context.drawImage(
|
||||
getImage("coin"),
|
||||
getImage(piece.symbol),
|
||||
x,
|
||||
y - measure.ascent,
|
||||
measure.width,
|
||||
@ -158,103 +161,14 @@ const coinPiece = pieceDef({
|
||||
fontInfo.size = parseInt(fontInfo.size.toString()) * 1.2;
|
||||
const font = stringifyFont(fontInfo);
|
||||
context.font = font;
|
||||
context.fillStyle = "black";
|
||||
context.fillStyle = piece.textColor;
|
||||
context.textAlign = "center";
|
||||
context.fillText(piece.text, x + measure.width / 2, y);
|
||||
context.restore();
|
||||
},
|
||||
});
|
||||
|
||||
const debtPiece = pieceDef({
|
||||
type: "debt",
|
||||
measure(context, _piece) {
|
||||
context.save();
|
||||
const metrics = context.measureText(" ");
|
||||
const height =
|
||||
metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
|
||||
const coinImage = getImage("debt");
|
||||
context.restore();
|
||||
return {
|
||||
type: "content",
|
||||
width: coinImage.width * (height / coinImage.height),
|
||||
ascent: metrics.fontBoundingBoxAscent,
|
||||
descent: metrics.fontBoundingBoxDescent,
|
||||
};
|
||||
},
|
||||
render(context, piece, x, y, measure) {
|
||||
context.save();
|
||||
// context.fillStyle = "yellow";
|
||||
const height = measure.ascent + measure.descent;
|
||||
// context.fillRect(x, y - measure.ascent, measure.width, height);
|
||||
context.drawImage(
|
||||
getImage("debt"),
|
||||
x,
|
||||
y - measure.ascent,
|
||||
measure.width,
|
||||
height
|
||||
);
|
||||
const fontInfo = parseFont(context.font);
|
||||
fontInfo.family = ["DominionSpecial"];
|
||||
fontInfo.weight = "bold";
|
||||
fontInfo.size = parseInt(fontInfo.size.toString()) * 1.2;
|
||||
const font = stringifyFont(fontInfo);
|
||||
context.font = font;
|
||||
context.fillStyle = "white";
|
||||
context.textAlign = "center";
|
||||
context.fillText(piece.text, x + measure.width / 2, y);
|
||||
context.restore();
|
||||
},
|
||||
});
|
||||
|
||||
const potionPiece = pieceDef({
|
||||
type: "potion",
|
||||
measure(context, _piece) {
|
||||
context.save();
|
||||
const metrics = context.measureText(" ");
|
||||
const height =
|
||||
metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
|
||||
const coinImage = getImage("potion");
|
||||
context.restore();
|
||||
return {
|
||||
type: "content",
|
||||
width: coinImage.width * (height / coinImage.height),
|
||||
ascent: metrics.fontBoundingBoxAscent,
|
||||
descent: metrics.fontBoundingBoxDescent,
|
||||
};
|
||||
},
|
||||
render(context, piece, x, y, measure) {
|
||||
context.save();
|
||||
// context.fillStyle = "yellow";
|
||||
const height = measure.ascent + measure.descent;
|
||||
// context.fillRect(x, y - measure.ascent, measure.width, height);
|
||||
context.drawImage(
|
||||
getImage("potion"),
|
||||
x,
|
||||
y - measure.ascent,
|
||||
measure.width,
|
||||
height
|
||||
);
|
||||
const fontInfo = parseFont(context.font);
|
||||
fontInfo.family = ["DominionSpecial"];
|
||||
fontInfo.weight = "bold";
|
||||
fontInfo.size = parseInt(fontInfo.size.toString()) * 1.2;
|
||||
const font = stringifyFont(fontInfo);
|
||||
context.font = font;
|
||||
context.fillStyle = "white";
|
||||
context.textAlign = "center";
|
||||
context.fillText(piece.text, x + measure.width / 2, y);
|
||||
context.restore();
|
||||
},
|
||||
});
|
||||
|
||||
const pieceDefs = [
|
||||
textPiece,
|
||||
spacePiece,
|
||||
breakPiece,
|
||||
coinPiece,
|
||||
debtPiece,
|
||||
potionPiece,
|
||||
];
|
||||
const pieceDefs = [textPiece, spacePiece, breakPiece, symbolPiece];
|
||||
|
||||
const tools: PieceTools = {} as any;
|
||||
|
||||
@ -406,23 +320,28 @@ export const renderDominionText = async (
|
||||
|
||||
export const parse = (text: string): Piece[] => {
|
||||
const pieces: Piece[] = [];
|
||||
const symbolMap = {
|
||||
"$": { symbol: "coin", textColor: "black" },
|
||||
"@": { symbol: "debt", textColor: "white" },
|
||||
"^": { symbol: "potion", textColor: "white" },
|
||||
"%": { symbol: "vp", textColor: "white" },
|
||||
"#": { symbol: "vp-token", textColor: "black" },
|
||||
} as const;
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const char = text[i];
|
||||
if (char === " ") {
|
||||
pieces.push({ type: "space" });
|
||||
} else if (char === "\n") {
|
||||
pieces.push({ type: "break" });
|
||||
} else if (char === "$") {
|
||||
const end = text.slice(i).match(/\$\d*/)![0].length;
|
||||
pieces.push({ type: "coin", text: text.slice(i + 1, i + end) });
|
||||
i += end - 1;
|
||||
} else if (char === "@") {
|
||||
const end = text.slice(i).match(/@\d*/)![0].length;
|
||||
pieces.push({ type: "debt", text: text.slice(i + 1, i + end) });
|
||||
i += end - 1;
|
||||
} else if (char === "^") {
|
||||
const end = text.slice(i).match(/\^\d*/)![0].length;
|
||||
pieces.push({ type: "potion", text: text.slice(i + 1, i + end) });
|
||||
} else if (char && char in symbolMap) {
|
||||
const c = char as keyof typeof symbolMap;
|
||||
const end = text.slice(i).match(new RegExp(`\\${c}\\w*`))![0]
|
||||
.length;
|
||||
pieces.push({
|
||||
type: "symbol",
|
||||
...symbolMap[c],
|
||||
text: text.slice(i + 1, i + end),
|
||||
});
|
||||
i += end - 1;
|
||||
} else if (char === "+") {
|
||||
const match = text.slice(i).match(/\+\d* \w+/);
|
||||
|
||||
@ -59,6 +59,14 @@ const imageList = [
|
||||
key: "potion",
|
||||
src: "/static/assets/Potion.png",
|
||||
},
|
||||
{
|
||||
key: "vp",
|
||||
src: "/static/assets/VP.png",
|
||||
},
|
||||
{
|
||||
key: "vp-token",
|
||||
src: "/static/assets/VP-Token.png",
|
||||
},
|
||||
];
|
||||
|
||||
export const loadImages = async () => {
|
||||
|
||||
@ -3,45 +3,58 @@ import {
|
||||
TYPE_ACTION,
|
||||
TYPE_REACTION,
|
||||
TYPE_TREASURE,
|
||||
TYPE_VICTORY,
|
||||
} from "./types.ts";
|
||||
|
||||
export const sampleCard1: DominionCard = {
|
||||
orientation: "card",
|
||||
title: "Title",
|
||||
description:
|
||||
"+1 Action\n\nReveal the top card of your deck. If it's an Action card, +1 Action.",
|
||||
types: [TYPE_ACTION, TYPE_REACTION],
|
||||
image: "https://wiki.dominionstrategy.com/images/7/76/AdventurerArt.jpg",
|
||||
artist: "Dall-E",
|
||||
author: "John Doe",
|
||||
version: "",
|
||||
cost: "@8",
|
||||
preview: "",
|
||||
};
|
||||
|
||||
export const sampleCard2: DominionCard = {
|
||||
orientation: "card",
|
||||
title: "Market",
|
||||
description: "+1 Card\n+1 Action\n+1 Buy\n+$1",
|
||||
types: [TYPE_ACTION],
|
||||
image: "",
|
||||
artist: "Leonardo DaVinci",
|
||||
author: "Jane Smith",
|
||||
version: "",
|
||||
cost: "$4",
|
||||
preview: "",
|
||||
};
|
||||
|
||||
export const sampleCard3: DominionCard = {
|
||||
orientation: "card",
|
||||
title: "Flask",
|
||||
description:
|
||||
"+2 Cards\n\nAt the start of your Clean-up phase, you may put a card from your hand onto your deck.",
|
||||
types: [TYPE_TREASURE],
|
||||
image: "",
|
||||
artist: "",
|
||||
author: "",
|
||||
version: "",
|
||||
cost: "$6",
|
||||
preview: "",
|
||||
};
|
||||
export const sampleCards: DominionCard[] = [
|
||||
{
|
||||
orientation: "card",
|
||||
title: "Title",
|
||||
description:
|
||||
"+1 Action\n\nReveal the top card of your deck. If it's an Action card, +1 Action. If it has ^ in its cost, +1 Card.",
|
||||
types: [TYPE_ACTION, TYPE_REACTION],
|
||||
image: "https://wiki.dominionstrategy.com/images/7/76/AdventurerArt.jpg",
|
||||
artist: "Dall-E",
|
||||
author: "John Doe",
|
||||
version: "",
|
||||
cost: "@8",
|
||||
preview: "",
|
||||
},
|
||||
{
|
||||
orientation: "card",
|
||||
title: "Market",
|
||||
description: "+1 Card\n+1 Action\n+1 Buy\n+$1",
|
||||
types: [TYPE_ACTION],
|
||||
image: "",
|
||||
artist: "Leonardo DaVinci",
|
||||
author: "Jane Smith",
|
||||
version: "",
|
||||
cost: "$4",
|
||||
preview: "",
|
||||
},
|
||||
{
|
||||
orientation: "card",
|
||||
title: "Flask",
|
||||
description:
|
||||
"+2 Cards\n\nAt the start of your Clean-up phase, you may put a card from your hand onto your deck.",
|
||||
types: [TYPE_TREASURE],
|
||||
image: "",
|
||||
artist: "",
|
||||
author: "",
|
||||
version: "",
|
||||
cost: "$6",
|
||||
preview: "",
|
||||
},
|
||||
{
|
||||
orientation: "card",
|
||||
title: "Flask",
|
||||
description: "+1 #\n\n-\n\n2 %",
|
||||
types: [TYPE_VICTORY],
|
||||
image: "",
|
||||
artist: "",
|
||||
author: "",
|
||||
version: "",
|
||||
cost: "$6",
|
||||
preview: "",
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user