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

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

apps/web/src/games/marble/quick.tsx

@@ -0,0 +1,87 @@
+/** 주사위 땅따먹기 30초 규칙 요약 (docs/07 §5). */
+import type { ReactNode } from 'react';
+import type { QuickCard } from '../types';
+
+const PIPS: Record<number, [number, number][]> = {
+  1: [[50, 50]],
+  2: [[28, 28], [72, 72]],
+  3: [[26, 26], [50, 50], [74, 74]],
+  4: [[28, 28], [72, 28], [28, 72], [72, 72]],
+  5: [[26, 26], [74, 26], [50, 50], [26, 74], [74, 74]],
+  6: [[28, 24], [72, 24], [28, 50], [72, 50], [28, 76], [72, 76]],
+};
+
+function Die({ value }: { value: number }) {
+  return (
+    <svg viewBox="0 0 100 100" width={56} height={56} aria-hidden>
+      <rect x={4} y={4} width={92} height={92} rx={18} fill="#fffdf8" stroke="#9ca3af" strokeWidth={5} />
+      {PIPS[value]!.map(([x, y], i) => (
+        <circle key={i} cx={x} cy={y} r={10} fill="#1c1e21" />
+      ))}
+    </svg>
+  );
+}
+
+/** A city square like on the board: colour band, name, and a line below. */
+function Tile({ name, color, children, owner }: { name: string; color: string; children: ReactNode; owner?: string }) {
+  return (
+    <div style={{ width: 96, borderRadius: 10, overflow: 'hidden', border: `3px solid ${owner ?? '#d1d5db'}`, background: '#fff', textAlign: 'center' }}>
+      <div style={{ background: color, height: 16 }} />
+      <div style={{ fontWeight: 800, fontSize: '1rem', padding: '4px 0 0', color: '#111' }}>{name}</div>
+      <div style={{ fontSize: '0.95rem', padding: '2px 4px 6px', color: '#111' }}>{children}</div>
+    </div>
+  );
+}
+
+const row = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 } as const;
+
+export const quickStart: QuickCard[] = [
+  {
+    pic: (
+      <div style={row} aria-hidden>
+        <Die value={3} />
+        <Die value={5} />
+        <span style={{ fontSize: 28 }}>➜</span>
+        <Tile name="방콕" color="#38bdf8">
+          <b>10P</b>에 사기
+        </Tile>
+      </div>
+    ),
+    alt: '주사위 3과 5를 굴려 방콕 칸에 도착하고, 10P에 살 수 있어요',
+    title: '굴리고 땅을 사요',
+    text: '주사위 2개를 굴린 만큼 판을 돌아요. 주인 없는 땅에 서면 [사기]로 내 땅으로 만들 수 있어요.',
+  },
+  {
+    pic: (
+      <div style={row} aria-hidden>
+        <Tile name="로마" color="#db2777" owner="#dc2626">
+          <span style={{ fontSize: 22 }}>🏠🏢🏨</span>
+        </Tile>
+        <div style={{ textAlign: 'center', fontWeight: 800, color: '#b91c1c' }}>
+          <div style={{ fontSize: 30 }}>🚶</div>
+          통행료
+          <br />
+          40P
+        </div>
+      </div>
+    ),
+    alt: '별장·빌딩·호텔을 지은 로마 칸에 다른 사람이 와서 통행료 40P를 내요',
+    title: '짓고 통행료 받기',
+    text: '내 땅에 다시 오면 별장→빌딩→호텔을 한 단계씩 지어요. 남이 내 땅에 서면 통행료를 받고, 건물이 클수록 비싸요.',
+  },
+  {
+    pic: (
+      <div style={{ ...row, gap: 16 }} aria-hidden>
+        <div style={{ textAlign: 'center', fontWeight: 700 }}>
+          <div style={{ fontSize: 44 }}>🏝️</div>무인도
+        </div>
+        <div style={{ textAlign: 'center', fontWeight: 700 }}>
+          <div style={{ fontSize: 44 }}>🏆</div>총자산 1등
+        </div>
+      </div>
+    ),
+    alt: '무인도 섬과 총자산 1등 트로피 그림',
+    title: '총자산이 많으면 이겨요',
+    text: '무인도에선 몇 차례 쉬어요(더블이면 바로 탈출). 라운드가 다 끝날 때 총자산(포인트+땅+건물)이 가장 많거나, 남이 모두 파산하면 이겨요.',
+  },
+];