73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
/** 구십구 30초 규칙 요약 (docs/07 §5). */
|
||
import type { QuickCard } from '../types';
|
||
|
||
/** A 44 × 62 card at (x, y). */
|
||
function Card({ label, x, y, color = '#1d4ed8', dim, ok }: { label: string; x: number; y: number; color?: string; dim?: boolean; ok?: boolean }) {
|
||
return (
|
||
<g transform={`translate(${x} ${y})`} opacity={dim ? 0.45 : 1}>
|
||
{ok && <rect x={-3} y={-3} width={50} height={68} rx={9} fill="none" stroke="#16a34a" strokeWidth={3} />}
|
||
<rect width={44} height={62} rx={7} fill="#fffef9" stroke={color} strokeWidth={2.5} />
|
||
<text x={22} y={40} textAnchor="middle" fontSize={label.length > 2 ? 15 : 22} fontWeight={900} fill={color}>
|
||
{label}
|
||
</text>
|
||
</g>
|
||
);
|
||
}
|
||
|
||
function Dial({ n, x, y, r = 30, hot }: { n: number; x: number; y: number; r?: number; hot?: boolean }) {
|
||
return (
|
||
<g>
|
||
<circle cx={x} cy={y} r={r} fill={hot ? '#b91c1c' : '#1f2937'} />
|
||
<text x={x} y={y + 9} textAnchor="middle" fontSize={26} fontWeight={900} fill="#fff">
|
||
{n}
|
||
</text>
|
||
</g>
|
||
);
|
||
}
|
||
|
||
export const quickStart: QuickCard[] = [
|
||
{
|
||
pic: (
|
||
<svg viewBox="0 0 250 110" width={250} height={110} aria-hidden>
|
||
<Dial n={85} x={40} y={50} />
|
||
<text x={84} y={58} fontSize={24} fontWeight={900} fill="#374151">+</text>
|
||
<Card label="10" x={104} y={19} />
|
||
<text x={160} y={58} fontSize={24} fontWeight={900} fill="#374151">=</text>
|
||
<Dial n={95} x={212} y={50} hot />
|
||
</svg>
|
||
),
|
||
alt: '합계 85에 10 카드를 내서 95가 되는 모습',
|
||
title: '내 카드를 더해요',
|
||
text: '차례마다 카드 1장을 내고 그 수만큼 합계를 바꿔요. 보통은 낸 뒤 1장을 다시 받아요.',
|
||
},
|
||
{
|
||
pic: (
|
||
<svg viewBox="0 0 250 120" width={250} height={120} aria-hidden>
|
||
<Dial n={95} x={36} y={50} hot />
|
||
<Card label="8" x={90} y={19} dim />
|
||
<text x={112} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#b91c1c">103 ✕</text>
|
||
<Card label="7" x={144} y={19} dim />
|
||
<text x={166} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#b91c1c">102 ✕</text>
|
||
<Card label="±9" x={198} y={19} color="#7c3aed" ok />
|
||
<text x={220} y={100} textAnchor="middle" fontSize={13} fontWeight={800} fill="#15803d">−9 → 86</text>
|
||
</svg>
|
||
),
|
||
alt: '합계 95에서 8과 7은 99를 넘어 어둡고, ±9 카드만 빼기로 낼 수 있어요',
|
||
title: '99를 넘기면 안 돼요',
|
||
text: '합계가 99를 넘게 되는 카드는 낼 수 없어요. 낼 카드가 하나도 없으면 져요(탈락하거나 목숨을 잃어요).',
|
||
},
|
||
{
|
||
pic: (
|
||
<svg viewBox="0 0 250 90" width={250} height={90} aria-hidden>
|
||
<Card label="±9" x={8} y={14} color="#7c3aed" />
|
||
<Card label="±10" x={68} y={14} color="#7c3aed" />
|
||
<Card label="0" x={128} y={14} color="#0f766e" />
|
||
<Card label="조커" x={188} y={14} color="#be185d" />
|
||
</svg>
|
||
),
|
||
alt: '특수 카드 ±9, ±10, 0, 조커',
|
||
title: '특수 카드로 버텨요',
|
||
text: '±9·±10은 빼기도 돼요. 0은 방향만 바꾸고, 조커는 합계를 원하는 수(보통 60~99)로 만들어요. 끝까지 남으면 이겨요.',
|
||
},
|
||
];
|