88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
|
import { CardBackDef, CardBackPattern } from "./online/types";
|
||
|
|
|
||
|
|
export interface BackVisual {
|
||
|
|
background: string;
|
||
|
|
backgroundSize?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Build the CSS background for a card back. Each pattern family looks visibly
|
||
|
|
* different (not just recoloured) — luxury backs use the fancier ones.
|
||
|
|
*/
|
||
|
|
export function cardBackVisual(
|
||
|
|
c1: string,
|
||
|
|
c2: string,
|
||
|
|
accent: string,
|
||
|
|
pattern: CardBackPattern = "stripes"
|
||
|
|
): BackVisual {
|
||
|
|
const base = `linear-gradient(160deg, ${c1}, ${c2})`;
|
||
|
|
switch (pattern) {
|
||
|
|
case "argyle":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`repeating-linear-gradient(45deg, ${accent}3a 0 9px, transparent 9px 18px),` +
|
||
|
|
`repeating-linear-gradient(-45deg, ${accent}3a 0 9px, transparent 9px 18px), ${base}`,
|
||
|
|
};
|
||
|
|
case "grid":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`repeating-linear-gradient(0deg, ${accent}38 0 1.5px, transparent 1.5px 11px),` +
|
||
|
|
`repeating-linear-gradient(90deg, ${accent}38 0 1.5px, transparent 1.5px 11px), ${base}`,
|
||
|
|
};
|
||
|
|
case "dots":
|
||
|
|
return {
|
||
|
|
background: `radial-gradient(${accent}66 1.6px, transparent 2px), ${base}`,
|
||
|
|
backgroundSize: "10px 10px, 100% 100%",
|
||
|
|
};
|
||
|
|
case "rays":
|
||
|
|
return {
|
||
|
|
background: `repeating-conic-gradient(from 0deg at 50% 50%, ${accent}26 0deg 9deg, transparent 9deg 18deg), ${base}`,
|
||
|
|
};
|
||
|
|
case "scales":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`radial-gradient(circle at 50% 100%, transparent 5px, ${accent}40 5.5px 6.5px, transparent 7px), ${base}`,
|
||
|
|
backgroundSize: "13px 9px, 100% 100%",
|
||
|
|
};
|
||
|
|
case "crosshatch":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`repeating-linear-gradient(45deg, ${accent}30 0 2px, transparent 2px 7px),` +
|
||
|
|
`repeating-linear-gradient(-45deg, ${accent}30 0 2px, transparent 2px 7px), ${base}`,
|
||
|
|
};
|
||
|
|
case "royal":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`repeating-linear-gradient(0deg, ${accent}22 0 1px, transparent 1px 9px),` +
|
||
|
|
`repeating-linear-gradient(90deg, ${accent}22 0 1px, transparent 1px 9px),` +
|
||
|
|
`radial-gradient(circle at 50% 42%, ${accent}38, transparent 58%), ${base}`,
|
||
|
|
};
|
||
|
|
case "filigree":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`repeating-linear-gradient(45deg, ${accent}26 0 4px, transparent 4px 10px),` +
|
||
|
|
`radial-gradient(circle at 50% 50%, ${accent}30, transparent 62%), ${base}`,
|
||
|
|
};
|
||
|
|
case "gem":
|
||
|
|
return {
|
||
|
|
background:
|
||
|
|
`repeating-linear-gradient(60deg, ${accent}33 0 6px, transparent 6px 13px),` +
|
||
|
|
`repeating-linear-gradient(-60deg, ${accent}33 0 6px, transparent 6px 13px), ${base}`,
|
||
|
|
};
|
||
|
|
case "stripes":
|
||
|
|
default:
|
||
|
|
return { background: `repeating-linear-gradient(45deg, ${accent}44 0 6px, transparent 6px 12px), ${base}` };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Centered emblem glyph for a back (only the fancy ones carry one). */
|
||
|
|
export function cardBackMotif(pattern: CardBackPattern | undefined, motif: string | undefined): string {
|
||
|
|
if (motif) return motif;
|
||
|
|
return pattern == null || pattern === "stripes" ? "✦" : "";
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Convenience: full visual from a CardBackDef. */
|
||
|
|
export function backVisualFromDef(b: CardBackDef): BackVisual {
|
||
|
|
return cardBackVisual(b.c1, b.c2, b.accent, b.pattern);
|
||
|
|
}
|