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

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-06 13:35:21 +09:00
parent 32e3e89d8d
commit 68edd9b434
102 changed files with 6555 additions and 1 deletions
--- a/apps/web/src/games/seotda/quick.tsx
+++ b/apps/web/src/games/seotda/quick.tsx
@@ -0,0 +1,92 @@
+/** 섯다 30초 규칙 요약 (docs/07 §5). */
+import type { CSSProperties, ReactNode } from 'react';
+import { HwatuCard, type HwatuInfo } from '../../components/cards/HwatuCard';
+import type { QuickCard } from '../types';
+
+/** Illustration card: month + 광/열끗 (special) or 띠/기러기. Same idea as the 족보표 in index.tsx. */
+function hw(month: number, special: boolean): HwatuInfo {
+  const gwang = [1, 3, 8].includes(month);
+  const kind: HwatuInfo['kind'] = special ? (gwang ? 'gwang' : 'yeol') : month === 8 ? 'pi' : 'tti';
+  return {
+    id: (month - 1) * 4 + (special ? 0 : 1),
+    month,
+    kind,
+    ...(kind === 'tti' ? { tti: 'plain' as const } : {}),
+    name: `${month}월 ${special ? (gwang ? '광' : '열끗') : month === 8 ? '기러기' : '띠'}`,
+  };
+}
+
+function Pair({ a, b, label, size = 'sm' }: { a: [number, boolean]; b: [number, boolean]; label: string; size?: 'sm' | 'md' }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
+      <div style={{ display: 'flex' }}>
+        <HwatuCard card={hw(...a)} size={size} />
+        <HwatuCard card={hw(...b)} size={size} style={{ marginLeft: size === 'md' ? 4 : -10 }} />
+      </div>
+      <strong style={{ fontSize: size === 'md' ? '1.1rem' : '0.85rem', whiteSpace: 'nowrap' }}>{label}</strong>
+    </div>
+  );
+}
+
+function Row({ children, gap = 10 }: { children: ReactNode; gap?: number }) {
+  return <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap, maxWidth: 260 }}>{children}</div>;
+}
+
+const btn = (bg: string): CSSProperties => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: 74,
+  height: 40,
+  borderRadius: 10,
+  background: bg,
+  color: '#fff',
+  fontWeight: 800,
+  fontSize: '1.05rem',
+});
+
+function Buttons() {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, width: 170 }} aria-hidden>
+      <span style={btn('#dc2626')}>다이</span>
+      <span style={btn('#2563eb')}>체크</span>
+      <span style={btn('#2563eb')}>콜</span>
+      <span style={btn('#7c3aed')}>하프</span>
+    </div>
+  );
+}
+
+const gt = <span style={{ fontSize: '1.3rem', fontWeight: 900 }}>&gt;</span>;
+
+export const quickStart: QuickCard[] = [
+  {
+    pic: (
+      <Row>
+        <Pair a={[3, true]} b={[8, true]} label="38광땡" size="md" />
+      </Row>
+    ),
+    alt: '3월 광과 8월 광 화투 두 장이 놓여 있고 38광땡이라고 적혀 있어요',
+    title: '2장 조합이 센 사람이 이겨요',
+    text: '화투 2장의 조합(족보)을 겨뤄요. 가장 센 족보를 가진 사람이 가운데 모인 칩을 모두 가져가요.',
+  },
+  {
+    pic: <Buttons />,
+    alt: '다이, 체크, 콜, 하프라고 적힌 버튼 네 개가 있어요',
+    title: '차례가 오면 칩을 걸어요',
+    text: '[체크]·[콜]·[하프] 같은 버튼으로 칩을 걸고, 패가 약하면 [다이]로 이번 판을 포기해요. 다른 사람이 다 다이하면 내가 가져가요.',
+  },
+  {
+    pic: (
+      <Row gap={6}>
+        <Pair a={[10, true]} b={[10, false]} label="장땡" />
+        {gt}
+        <Pair a={[1, true]} b={[2, false]} label="알리" />
+        {gt}
+        <Pair a={[3, false]} b={[5, false]} label="8끗" />
+      </Row>
+    ),
+    alt: '장땡, 알리, 8끗 순서로 화투 두 장씩 놓여 있고 사이에 큰 쪽 표시가 있어요',
+    title: '땡 > 알리 > 끗 순서예요',
+    text: "광땡 > 땡(같은 달 2장) > 알리·독사 등 > 끗(두 달을 더한 일의 자리) 순으로 세요. 화면의 '족보표'를 보면 쉬워요.",
+  },
+];