107 lines
4.5 KiB
TypeScript
107 lines
4.5 KiB
TypeScript
/** 바퀴벌레 포커 30초 규칙 요약 (docs/07 §5). Simple inline SVG + emoji; the screen's critter art lives in index.tsx. */
|
|
import type { QuickCard } from '../types';
|
|
|
|
/** A small upright card: face-down (pattern) or face-up with a critter emoji. */
|
|
function Card({ x, y, face, w = 44, h = 62, tilt = 0, red = false }: { x: number; y: number; face?: string; w?: number; h?: number; tilt?: number; red?: boolean }) {
|
|
return (
|
|
<g transform={`translate(${x} ${y}) rotate(${tilt})`}>
|
|
<rect x={-w / 2} y={-h / 2} width={w} height={h} rx={6} fill={face ? '#fffaf0' : '#5b3f8c'} stroke={red ? '#b91c1c' : '#3b2a5c'} strokeWidth={red ? 3 : 1.5} />
|
|
{face ? (
|
|
<text x={0} y={9} textAnchor="middle" fontSize={26}>
|
|
{face}
|
|
</text>
|
|
) : (
|
|
<text x={0} y={8} textAnchor="middle" fontSize={22} fill="#e7def5">
|
|
?
|
|
</text>
|
|
)}
|
|
</g>
|
|
);
|
|
}
|
|
|
|
function Person({ x, y, label }: { x: number; y: number; label: string }) {
|
|
return (
|
|
<g>
|
|
<circle cx={x} cy={y} r={20} fill="#e0e7ff" stroke="#4f46e5" strokeWidth={1.5} />
|
|
<text x={x} y={y + 7} textAnchor="middle" fontSize={20}>
|
|
🙂
|
|
</text>
|
|
<text x={x} y={y + 38} textAnchor="middle" fontSize={12} fill="#333">
|
|
{label}
|
|
</text>
|
|
</g>
|
|
);
|
|
}
|
|
|
|
const GivePic = (
|
|
<svg viewBox="0 0 260 170" width={260} height={170} aria-hidden>
|
|
<Person x={36} y={110} label="나" />
|
|
<Person x={224} y={110} label="받는 사람" />
|
|
<Card x={130} y={112} tilt={-6} />
|
|
<path d="M70 128 Q130 160 190 128" fill="none" stroke="#4f46e5" strokeWidth={2.5} strokeDasharray="5 4" markerEnd="url(#cpq-arrow)" />
|
|
<defs>
|
|
<marker id="cpq-arrow" viewBox="0 0 10 10" refX={6} refY={5} markerWidth={7} markerHeight={7} orient="auto">
|
|
<path d="M0 0 L10 5 L0 10 z" fill="#4f46e5" />
|
|
</marker>
|
|
</defs>
|
|
<rect x={64} y={14} width={132} height={44} rx={14} fill="#fff" stroke="#333" strokeWidth={1.5} />
|
|
<path d="M90 58 L80 74 L104 58" fill="#fff" stroke="#333" strokeWidth={1.5} />
|
|
<text x={130} y={43} textAnchor="middle" fontSize={18} fontWeight={700} fill="#222">
|
|
이건 쥐야!
|
|
</text>
|
|
</svg>
|
|
);
|
|
|
|
const ChoosePic = (
|
|
<svg viewBox="0 0 260 170" width={260} height={170} aria-hidden>
|
|
<Card x={130} y={40} />
|
|
<rect x={14} y={84} width={110} height={36} rx={10} fill="#dcfce7" stroke="#15803d" strokeWidth={2} />
|
|
<text x={69} y={108} textAnchor="middle" fontSize={16} fontWeight={700} fill="#14532d">
|
|
⭕ 진짜!
|
|
</text>
|
|
<rect x={136} y={84} width={110} height={36} rx={10} fill="#fee2e2" stroke="#b91c1c" strokeWidth={2} />
|
|
<text x={191} y={108} textAnchor="middle" fontSize={16} fontWeight={700} fill="#7f1d1d">
|
|
❌ 거짓말!
|
|
</text>
|
|
<rect x={30} y={128} width={200} height={36} rx={10} fill="#dbeafe" stroke="#1d4ed8" strokeWidth={2} />
|
|
<text x={130} y={152} textAnchor="middle" fontSize={15} fontWeight={700} fill="#1e3a8a">
|
|
👁 몰래 보고 넘기기
|
|
</text>
|
|
</svg>
|
|
);
|
|
|
|
const LosePic = (
|
|
<svg viewBox="0 0 260 170" width={260} height={170} aria-hidden>
|
|
<Card x={40} y={66} face="🐀" red />
|
|
<Card x={100} y={66} face="🐀" red />
|
|
<Card x={160} y={66} face="🐀" red />
|
|
<Card x={220} y={66} face="🐀" red />
|
|
<Card x={70} y={140} face="🦇" w={34} h={46} />
|
|
<Card x={110} y={140} face="🐸" w={34} h={46} />
|
|
<text x={186} y={147} textAnchor="middle" fontSize={17} fontWeight={800} fill="#b91c1c">
|
|
4장이면 패배
|
|
</text>
|
|
</svg>
|
|
);
|
|
|
|
export const quickStart: QuickCard[] = [
|
|
{
|
|
pic: GivePic,
|
|
alt: '내가 뒤집은 카드를 다른 사람에게 건네며 "이건 쥐야!"라고 말해요',
|
|
title: '카드를 건네며 말해요',
|
|
text: '내 차례에 카드 한 장을 뒤집어 다른 사람에게 주며 무슨 벌레인지 말해요. 진짜를 말해도, 거짓말을 해도 돼요.',
|
|
},
|
|
{
|
|
pic: ChoosePic,
|
|
alt: '받은 카드 아래에 진짜, 거짓말, 몰래 보고 넘기기 버튼이 있어요',
|
|
title: '받으면 맞히거나 넘겨요',
|
|
text: '받은 사람은 [진짜!]나 [거짓말!]을 골라요. 맞히면 건넨 사람이, 틀리면 받은 사람이 카드를 앞마당에 놓아요. 3명 이상이면 몰래 보고 넘길 수도 있어요.',
|
|
},
|
|
{
|
|
pic: LosePic,
|
|
alt: '앞마당에 쥐 카드 4장이 빨간 테두리로 모여 있어요',
|
|
title: '같은 벌레가 모이면 져요',
|
|
text: '앞마당에 같은 벌레가 4장(2명이면 5장, 방 설정에 따라 다름) 모인 사람 한 명이 지고, 나머지는 모두 이겨요.',
|
|
},
|
|
];
|