M9: 게임 26종 30초 요약 카드·[?] 지금 할 수 있는 것 내용

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/games/cockroach-poker/quick.tsx

@@ -0,0 +1,106 @@
+/** 바퀴벌레 포커 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장, 방 설정에 따라 다름) 모인 사람 한 명이 지고, 나머지는 모두 이겨요.',
+  },
+];