42 lines
2.5 KiB
TypeScript
42 lines
2.5 KiB
TypeScript
/** 마피아 30초 규칙 요약 (docs/07 §5). */
|
|
import type { QuickCard } from '../types';
|
|
|
|
/** Big emoji composition on a soft panel (no images). */
|
|
function Scene({ bg, rows }: { bg: string; rows: { e: string; label?: string }[][] }) {
|
|
return (
|
|
<div aria-hidden style={{ width: 240, height: 150, borderRadius: 14, background: bg, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6, padding: 8, boxSizing: 'border-box' }}>
|
|
{rows.map((row, i) => (
|
|
<div key={i} style={{ display: 'flex', justifyContent: 'center', gap: 12 }}>
|
|
{row.map((c, j) => (
|
|
<div key={j} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 44 }}>
|
|
<span style={{ fontSize: 34, lineHeight: 1.1 }}>{c.e}</span>
|
|
{c.label && <span style={{ fontSize: 13, fontWeight: 700, color: '#111827', background: 'rgba(255,255,255,.85)', borderRadius: 6, padding: '0 4px' }}>{c.label}</span>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const quickStart: QuickCard[] = [
|
|
{
|
|
pic: <Scene bg="linear-gradient(#fde68a, #fef3c7)" rows={[[{ e: '☀️' }], [{ e: '🙂', label: '토론' }, { e: '🤔', label: '투표' }, { e: '👉', label: '탈락' }]]} />,
|
|
alt: '해가 뜬 낮에 사람들이 토론하고 투표해서 한 명을 가리켜요',
|
|
title: '낮: 토론하고 투표',
|
|
text: '낮에는 [전체] 채팅으로 누가 마피아 같은지 이야기하고, 투표로 한 명을 골라 찬성이 많으면 탈락시켜요.',
|
|
},
|
|
{
|
|
pic: <Scene bg="linear-gradient(#1e1b4b, #312e81)" rows={[[{ e: '🌙' }], [{ e: '🕶️', label: '마피아' }, { e: '🔎', label: '경찰' }, { e: '🩺', label: '의사' }]]} />,
|
|
alt: '달이 뜬 밤에 마피아, 경찰, 의사가 몰래 행동해요',
|
|
title: '밤: 직업대로 몰래',
|
|
text: '밤에는 마피아가 한 명을 노리고, 경찰은 한 명을 조사하고, 의사는 한 명을 지켜요. 내 직업은 [내 직업] 카드를 꾹 눌러 봐요.',
|
|
},
|
|
{
|
|
pic: <Scene bg="linear-gradient(#dcfce7, #fee2e2)" rows={[[{ e: '🙂', label: '시민 팀' }, { e: '⚔️' }, { e: '🕶️', label: '마피아 팀' }]]} />,
|
|
alt: '시민 팀과 마피아 팀이 마주 보고 있어요',
|
|
title: '팀이 함께 이겨요',
|
|
text: '시민 팀은 마피아를 모두 찾으면, 마피아 팀은 시민만큼 많이 남으면 이겨요. 탈락하면 살아 있는 사람에게 힌트를 주면 안 돼요.',
|
|
},
|
|
];
|