+ {children} + {logEntry.ctx?.trainers?.length ? ` ${logEntry.ctx.trainers.map(id => metadata.trainers[id].name).list($T)} joined them!` : null} + +
+ + ); + + const playerName = players[logEntry.turn]?.name; + const opts = { name: `${id}-chatlog` }; + + switch (logEntry.action) { + case ACTIONS.BUY: + case ACTIONS.BUY_RESERVE: { + const card = metadata.pokemon[logEntry.ctx.id]; + return [ +
+
+ );
+}
+
+function TrainerCard({ data }: { data: Trainer }): ReactElement {
+ const trainersToScooch = ['flint', 'gardenia', 'grimsley'];
+ return (
+
+
+ );
+}
+
+function CardWrapper({
+ onClick,
+ style,
+ children,
+}: {
+ onClick: string | undefined;
+ style?: CSSProperties;
+ children?: ReactNode;
+}): ReactElement {
+ if (!onClick) return
+ {data.points}
+
+
+ {(Object.entries(data.types) as [TOKEN_TYPE, number][]).map(([tokenType, cost]) => (
+
+
+
+ ))}
+ {children}
;
+ return (
+
+ );
+}
+
+export function PokemonCard({
+ data,
+ reserved,
+ onClick,
+ stackIndex,
+}: {
+ data: Card;
+ reserved?: boolean | undefined;
+ onClick?: string | undefined;
+ stackIndex?: number | undefined;
+}): ReactElement {
+ return (
+
+
+ {data.points || '\u200b'}
+
+ ![{metadata.types[data.type].name}]({getArtUrl('type',)
+
+ {reserved ? (
+
+
+ RESERVED
+
+
+ ) : null}
+
+ {(Object.entries(data.cost) as [TOKEN_TYPE, number][]).map(([tokenType, cost]) => (
+
+
+
+ ))}
+
+
+ );
+}
+
+function PlaceholderCard(): ReactElement {
+ return ;
+}
+
+export function Stack({
+ cards,
+ hidden,
+ reserved,
+ onClick,
+ style,
+}: {
+ cards: Card[];
+ hidden?: boolean | undefined;
+ reserved?: boolean | undefined;
+ onClick?: string | undefined;
+ style?: CSSProperties | undefined;
+}): ReactElement {
+ return (
+
+ ×{count}
+
+
+
+ );
+}
+
+function TokenInput({
+ types: _types,
+ allowDragon,
+ preset,
+ label,
+ onClick,
+}: {
+ types?: TOKEN_TYPE[];
+ allowDragon?: boolean;
+ preset: TokenCount | null;
+ label: TranslatedText;
+ onClick: string;
+}): ReactElement {
+ const types = _types ?? (allowDragon ? AllTokenTypes : TokenTypes);
+ return (
+
+ );
+}
+
+function WildCardInput({ action, onClick }: { action: ViewType; onClick: string }): ReactElement {
+ if (!action.active || action.action !== VIEW_ACTION_TYPE.CLICK_WILD) return <>;
+ const card = metadata.pokemon[action.id];
+ const typesToInclude = (Object.keys(card.cost) as TOKEN_TYPE[]).concat([TOKEN_TYPE.DRAGON]);
+ const typesToShow = AllTokenTypes.filter(type => typesToInclude.includes(type));
+ return (
+
+ {cards.length === 0 ? (
+
+ {!hidden && cards.length > 1 ? : null}
+
+
+ );
+}
+
+function ReservedCardInput({ card, preset, onClick }: { preset: TokenCount; card: Card; onClick: string }): ReactElement {
+ const typesToInclude = (Object.keys(card.cost) as TOKEN_TYPE[]).concat([TOKEN_TYPE.DRAGON]);
+ const typesToShow = AllTokenTypes.filter(type => typesToInclude.includes(type));
+ return (
+
+
+
+ ) : null}
+
+ {board.trainers.map(trainer => (
+
+
+ {view.active && view.action === VIEW_ACTION_TYPE.CLICK_TOKENS ? (
+
+ ) : (
+ <>
+ {AllTokenTypes.map(tokenType => (
+
+ {view.active && view.action === VIEW_ACTION_TYPE.CLICK_WILD ?
+ {wild.map(card => (
+
+ ))}
+
+ );
+}
+
+const RESOURCE_STYLES: CSSProperties = {
+ zoom: '40%',
+ overflowX: 'auto',
+ fontSize: 24,
+ background: '#1119',
+ borderRadius: 8,
+ padding: '8px 12px',
+ margin: 12,
+};
+
+export function ActivePlayer({
+ data,
+ action,
+ onClick,
+}: {
+ data: PlayerData;
+ action: ViewType & { type: 'player' };
+ onClick: string;
+}): ReactElement {
+ const cardsGroup = data.cards.groupBy(card => card.type);
+ const cards = AllTokenTypes.filterMap<[TOKEN_TYPE, Card[]]>(type => {
+ const cards = cardsGroup[type];
+ if (cards?.length) return [type, cards];
+ });
+ const tokensEl = AllTokenTypes.filterMap(type => {
+ const count = data.tokens[type];
+ if (count) return
+
+ );
+}
+
+export function PlayerSummary({ data }: { data: PlayerData }): ReactElement {
+ const cards = data.cards.groupBy(card => card.type);
+ if (data.reserved.length > 0) cards[TOKEN_TYPE.DRAGON] = data.reserved;
+
+ const cardsEl = AllTokenTypes.filterMap(type => {
+ const count = cards[type]?.length;
+ if (count) return
+
+
+
+
+ {data.trainers.map(trainer => (
+
+
+
+ {cards.length || data.reserved.length ? (
+
+
+ Tokens:{tokensEl.length === 0 ? ' - ' : null}
+ {tokensEl}
+
+ {cards.length ? (
+
+ ) : null}
+ {action.active && action.action === VIEW_ACTION_TYPE.CLICK_RESERVE ? (
+ action.preset ? (
+
+
+ {cards.map(([tokenType, { length: count }]) => (
+
+
+ ) : null}
+ {data.reserved.map(card => (
+
+ {cards.map(([tokenType, { length: count }]) => (
+
+
+ {cards.map(([_tokenType, card]) => (
+
+ {`You can't afford ${metadata.pokemon[action.id].name}...`}
+ )
+ ) : null}
+ {action.active && action.action === VIEW_ACTION_TYPE.TOO_MANY_TOKENS ? (
+
+
+ ) : null}
+ + { + // eslint-disable-next-line max-len -- TODO $T + `You have too many tokens! The maximum you can have at a time is ${MAX_TOKEN_COUNT}; please discard at least ${action.discard}.` as ToTranslate + } +
+
+
+ );
+}
+
+export function render(this: This, ctx: RenderCtx): ReactElement {
+ return (
+
+
+
+
+
+
+ {data.trainers.map(trainer => (
+
+
+
+
+
+ Cards:{cardsEl.length === 0 ? ' - ' : null}
+ {cardsEl}
+
+
+ Tokens:{tokensEl.length === 0 ? ' - ' : null}
+ {tokensEl}
+ {ctx.header}
+
+
+ + ) : null} + {ctx.turns.map(turn =>
+ + + ) : null} + {ctx.turns.map(turn =>