Classics · Strategy · season 1 · shoal/sanguosha

Sanguosha (三国杀)

Join

shoal Bring the game from shoal-games 82301f6c4521 32fe633 · 2 weeks ago History

46 lines · 1.8 KB Raw Permalink History

1	// A card as 无名杀 draws it: the theme's wood face, the card's art, its name in vertical brush script at the top left,
2	// suit and rank at the top right; 火杀 and 雷杀 are 杀 with their colour. A card with no art shows its name large.
3	import type { CSSProperties } from 'react';
4	import { cardArt } from './art';
5	import { displayCardName } from '../../../src/client/utils/gameViewHelpers';
6
7	export interface Face {
8	name: string;
9	suit?: string;
10	rank?: string;
11	damageType?: string;
12	}
13
14	const NATURE: Record<string, string> = { 火焰: 'fire', 雷电: 'thunder' };
15	export const isRed = (suit?: string) => suit === '♥' \|\| suit === '♦';
16
17	/** The card's inside, to fill a sized box (a hand card, a played card, a flying card). */
18	export function CardInner({ name, suit, rank, damageType }: Face) {
19	const art = cardArt(name);
20	const label = displayCardName(name, damageType);
21	return (
22	<>
23	{art ? <div className="nm-card-art" style={{ backgroundImage: `url(${art})` }} /> : <div className="nm-card-big">{label.slice(0, 2)}</div>}
24	<div className={`nm-card-name${label.length > 3 ? ' long' : ''}`}>{label}</div>
25	{suit && (
26	<div className={`nm-card-info${isRed(suit) ? ' red' : ''}`}>
27	<span className="nm-suit">{suit}</span>
28	{rank}
29	</div>
30	)}
31	</>
32	);
33	}
34
35	export function cardClass({ suit, damageType }: Face, extra = '') {
36	const nature = damageType ? NATURE[damageType] : undefined;
37	return `nm-card${isRed(suit) ? ' red' : ''}${nature ? ` ${nature}` : ''}${extra ? ` ${extra}` : ''}`;
38	}
39
40	export function Card({ face, className = '', style, title }: { face: Face; className?: string; style?: CSSProperties; title?: string }) {
41	return (
42	<div className={cardClass(face, className)} style={style} title={title}>
43	<CardInner {...face} />
44	</div>
45	);
46	}