93 lines
4.1 KiB
TypeScript
93 lines
4.1 KiB
TypeScript
/** 뱅! 30초 규칙 요약 (docs/07 §5). */
|
||
import type { QuickCard } from '../types';
|
||
|
||
/** A small play card: brown (instant) or blue (stays in front of you). */
|
||
function Mini({ icon, name, blue = false, back = false }: { icon: string; name: string; blue?: boolean; back?: boolean }) {
|
||
return (
|
||
<div
|
||
style={{
|
||
width: 50,
|
||
height: 72,
|
||
borderRadius: 8,
|
||
border: `3px solid ${back ? '#7c2d12' : blue ? '#2563eb' : '#92400e'}`,
|
||
background: back ? 'repeating-linear-gradient(45deg, #9a3412 0 6px, #c2410c 6px 12px)' : '#fffbeb',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
gap: 2,
|
||
boxSizing: 'border-box',
|
||
}}
|
||
>
|
||
{!back && <span style={{ fontSize: 28, lineHeight: 1 }}>{icon}</span>}
|
||
{!back && <span style={{ fontSize: 12, fontWeight: 800, color: '#111827' }}>{name}</span>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const row = { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, width: 250, height: 150 } as const;
|
||
const arrow = { fontSize: 22, fontWeight: 900, color: '#374151' } as const;
|
||
|
||
function Badge({ icon, name, color, hidden = false }: { icon: string; name: string; color: string; hidden?: boolean }) {
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, width: 52 }}>
|
||
<span style={{ fontSize: 30, lineHeight: 1.1 }}>{hidden ? '🂠' : icon}</span>
|
||
<span style={{ fontSize: 12, fontWeight: 800, color: '#fff', background: hidden ? '#6b7280' : color, borderRadius: 6, padding: '1px 5px', whiteSpace: 'nowrap' }}>{hidden ? '비밀' : name}</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const quickStart: QuickCard[] = [
|
||
{
|
||
pic: (
|
||
<div aria-hidden style={row}>
|
||
<div style={{ display: 'flex', gap: 2 }}>
|
||
<Mini icon="" name="" back />
|
||
<Mini icon="" name="" back />
|
||
</div>
|
||
<span style={arrow}>➜</span>
|
||
<Mini icon="💥" name="뱅!" />
|
||
<Mini icon="🛢️" name="술통" blue />
|
||
</div>
|
||
),
|
||
alt: '카드 2장을 받은 뒤 뱅! 카드를 내고 파란 술통 카드를 앞에 놓아요',
|
||
title: '받고, 내고, 마쳐요',
|
||
text: '내 차례엔 카드 2장을 받고, 원하는 만큼 카드를 내요. 파란 카드는 내 앞에 놓여 계속 효과가 있어요. 다 냈으면 [턴 마치기].',
|
||
},
|
||
{
|
||
pic: (
|
||
<div aria-hidden style={row}>
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||
<span style={{ fontSize: 34 }}>🤠</span>
|
||
<Mini icon="💥" name="뱅!" />
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||
<span style={arrow}>➜</span>
|
||
<span style={{ fontSize: 12, fontWeight: 800, color: '#15803d' }}>거리 1</span>
|
||
</div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||
<span style={{ fontSize: 34 }}>🤠</span>
|
||
<Mini icon="💨" name="빗나감!" />
|
||
</div>
|
||
</div>
|
||
),
|
||
alt: '한 사람이 뱅!을 쏘고, 거리 1인 상대가 빗나감!으로 막아요',
|
||
title: '뱅!은 빗나감!으로 막아요',
|
||
text: '뱅!은 사거리 안의 한 명을 쏴요(한 턴에 1번). 맞은 사람은 빗나감!을 내서 막거나 생명 1을 잃어요. 생명이 다 떨어지면 쓰러져요.',
|
||
},
|
||
{
|
||
pic: (
|
||
<div aria-hidden style={{ ...row, gap: 4 }}>
|
||
<Badge icon="⭐" name="보안관" color="#b45309" />
|
||
<Badge icon="🛡️" name="부관" color="#2563eb" hidden />
|
||
<span style={{ ...arrow, fontSize: 20 }}>⚔️</span>
|
||
<Badge icon="🎯" name="무법자" color="#b91c1c" hidden />
|
||
<Badge icon="🃏" name="배신자" color="#7c3aed" hidden />
|
||
</div>
|
||
),
|
||
alt: '보안관만 공개되어 있고 다른 사람들의 역할은 비밀로 가려져 있어요',
|
||
title: '역할마다 목표가 달라요',
|
||
text: '⭐보안관만 공개돼요. 보안관·부관은 무법자와 배신자를, 무법자는 보안관을 쓰러뜨리면 이겨요. 배신자는 끝까지 혼자 남아야 해요.',
|
||
},
|
||
];
|