88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
/** 주사위 땅따먹기 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: '무인도에선 몇 차례 쉬어요(더블이면 바로 탈출). 라운드가 다 끝날 때 총자산(포인트+땅+건물)이 가장 많거나, 남이 모두 파산하면 이겨요.',
|
||
},
|
||
];
|