// Section 4 — How do you draw cards? // Interactive wall. All 4 steps visible at once; wall shown for each. function SectionDraw() { const variant = React.useContext(VariantContext); const MAX_HAND = variant === 'taiwan' ? 17 : 14; const [hand, setHand] = React.useState([]); const [drawing, setDrawing] = React.useState(false); const [sorted, setSorted] = React.useState(false); const DRAW_POOL = [ 'wan-3', 'bing-7', 'tiao-5', 'east', 'wan-8', 'bing-2', 'tiao-2', 'red', 'wan-5', 'bing-5', 'south', 'tiao-9', 'green', 'wan-1', 'bing-9', 'tiao-4', 'west', 'wan-6', ]; const SUIT_ORDER = { wan: 0, bing: 1, tiao: 2 }; const WIND_ORDER = { east: 0, south: 1, west: 2, north: 3 }; const DRAGON_ORDER = { red: 0, green: 1, white: 2 }; const WINDS = new Set(['east', 'south', 'west', 'north']); const DRAGONS = new Set(['red', 'green', 'white']); const sortHand = (tiles) => [...tiles].sort((a, b) => { const getSuit = t => t.includes('-') ? t.split('-')[0] : t; const getNum = t => t.includes('-') ? parseInt(t.split('-')[1]) : 0; const suitA = getSuit(a), suitB = getSuit(b); const groupA = WINDS.has(a) ? 1 : DRAGONS.has(a) ? 2 : 0; const groupB = WINDS.has(b) ? 1 : DRAGONS.has(b) ? 2 : 0; if (groupA !== groupB) return groupA - groupB; if (groupA === 0) { if (suitA !== suitB) return SUIT_ORDER[suitA] - SUIT_ORDER[suitB]; return getNum(a) - getNum(b); } if (groupA === 1) return WIND_ORDER[a] - WIND_ORDER[b]; return DRAGON_ORDER[a] - DRAGON_ORDER[b]; }); // Dice-driven break logic (classical Hong Kong / Chinese rules): // total mod 4: 1→E, 2→S, 3→W, 0→N (treating 4/8/12 as N) // then count that many stacks from the RIGHT end of that player's wall. const [d1, setD1] = React.useState(3); const [d2, setD2] = React.useState(5); const [rolling, setRolling] = React.useState(false); const total = d1 + d2; const SEATS = ['east', 'south', 'west', 'north']; const SEAT_META = { east: { zh: '东', en: 'East', label: '东 E', wallSide: 'right', nums: [1, 5, 9] }, south: { zh: '南', en: 'South', label: '南 S', wallSide: 'bottom', nums: [2, 6, 10] }, west: { zh: '西', en: 'West', label: '西 W', wallSide: 'left', nums: [3, 7, 11] }, north: { zh: '北', en: 'North', label: '北 N', wallSide: 'top', nums: [4, 8, 12] }, }; const seatFor = (t) => SEATS[(t - 1) % 4]; const breakSeat = seatFor(total); // Count `total` stacks from the right end of that wall (0-indexed from right): const breakStackFromRight = total - 1; const rollDice = () => { if (rolling) return; setRolling(true); let ticks = 0; const iv = setInterval(() => { setD1(1 + Math.floor(Math.random() * 6)); setD2(1 + Math.floor(Math.random() * 6)); ticks++; if (ticks >= 10) { clearInterval(iv); setRolling(false); } }, 60); }; const DiceFace = ({ v }) => { const faces = ['⚀','⚁','⚂','⚃','⚄','⚅']; return {faces[v - 1]}; }; const doDraw = () => { if (drawing || hand.length >= MAX_HAND) return; setDrawing(true); const next = DRAW_POOL[hand.length % DRAW_POOL.length]; setTimeout(() => { setHand((h) => { const newHand = [...h, next]; if (newHand.length === MAX_HAND) { setSorted(true); return sortHand(newHand); } return newHand; }); setDrawing(false); }, 280); }; const resetHand = () => { setHand([]); setSorted(false); }; const discardTile = (idx) => { if (hand.length !== MAX_HAND) return; setHand(h => h.filter((_, i) => i !== idx)); setSorted(false); }; const wallSides = ['top', 'right', 'bottom', 'left']; const SmallWall = ({ variant, showDirection, breakSeat: bSeat, breakIdx }) => (
{wallSides.map((side) => { // Map side → seat for dynamic break highlighting const sideToSeat = { top: 'north', right: 'east', bottom: 'south', left: 'west' }; const isBreakSide = variant === 'break' && bSeat && sideToSeat[side] === bSeat; return (
{Array.from({ length: 17 }).map((_, i) => { // For the break: count breakIdx stacks from the RIGHT end of the side. // In the DOM each .mj-wall-side goes left→right; "right end" = last stack (i=16). const isBroken = isBreakSide && i === 16 - breakIdx; const isBreakDead = isBreakSide && i > 16 - breakIdx; const isDealt = variant === 'deal' && side === 'top' && i >= 10; return (
); })}
); })} {variant === 'break' && showDirection !== false && ( <>
北 N
西 W
南 S
东 E
)} {showDirection && variant !== 'break' && ( <>
北 N←
↓西 W
→南 S
东 E↑
)}
); const handFull = hand.length === MAX_HAND; return (
Section 03 · Opening the game

How do you draw tiles?

Before the first turn, the 136 tiles become a square wall that shrinks as players draw from it. Here's the opening ritual — in four steps.

{/* Dealer selection callout */}
Choosing the first dealer

Each player rolls two dice. The highest total takes the East seat and becomes the first dealer. Ties re-roll between the tied players.

Dealer rotation
{variant === 'taiwan' ? (

Same as Hong Kong rules — the dealer keeps the East seat as long as they win. When any other player wins, the deal passes counter-clockwise. A drawn hand also keeps the dealer in place.

) : (

The dealer keeps the East seat for as long as they keep winning. The moment any other player wins, the deal passes counter-clockwise — South becomes East, West becomes South, and so on. A drawn hand (荒庄) also keeps the dealer in place.

)}
{/* 4-step walkthrough — all visible at once */}
1
Build the wall

All 136 tiles are shuffled face-down and stacked two-high in a square. Each side is 17 stacks long — 17 × 2 × 4 = 136.

2
Break the wall

The dealer rolls two dice. The total does two things at once — it picks whose wall to break, and how many stacks in from the right to break it.

① Whose wall?
Count the total counter-clockwise starting from the dealer (East = 1).
东 East1 · 5 · 9
南 South2 · 6 · 10
西 West3 · 7 · 11
北 North4 · 8 · 12
② Where on it?
On that player's wall, count the same total in stacks from the right end. That's your break point. Tiles to the left are the live wall; to the right, the dead wall (kongs & replacements).
→ {total} lands on {SEAT_META[breakSeat].en} ({SEAT_META[breakSeat].zh}). Break at stack {total} from the right.
3
{variant === 'taiwan' ? 'Deal 16 to each player' : 'Deal 13 to each player'}
{variant === 'taiwan' ? (

Four tiles at a time until everyone has 16. The dealer draws first to hold 17. Any flower or season tile drawn during the deal is immediately revealed, set aside, and replaced from the dead wall — this can chain if the replacement is also a bonus tile.

) : (

Starting with the dealer, players take tiles in counter-clockwise order (East → South → West → North). Four tiles at a time until everyone has 12, then one more each. The dealer takes 14.

)}
4
Draw on your turn
{variant === 'taiwan' ? (

Click a stack in the wall to draw the next tile. You now have 17 — discard one to return to 16. If you draw a flower or season tile, reveal it, set it aside, and draw a replacement instead. Play continues counter-clockwise (E → S → W → N).

) : (

Click a stack in the wall to draw the next tile. You now have 14 — discard one to return to 13. Play continues counter-clockwise (E → S → W → N).

)}
{wallSides.map((side) => (
{Array.from({ length: 17 }).map((_, i) => { const drawnCount = hand.length; const isDrawn = side === 'top' && i >= 17 - Math.min(drawnCount, 17); return (
); })}
))}
北 N←
↓西 W
→南 S
东 E↑
{/* Your hand */}
Your hand · {hand.length} / {MAX_HAND} {handFull && — tap a tile to discard}
{hand.map((t, i) => (
discardTile(i) : undefined} >
))} {hand.length === 0 && (
Click a stack in the wall (step 4) to draw a tile →
)}
{/* Simple list — re-done as per user request */}
  • Draw order. Counter-clockwise. East (the dealer) always starts.
  • Dead wall. The last 14 tiles are reserved for kongs and replacements.
  • Kong replacement. Declare a kong → draw one extra tile from the dead wall's end.
    • {variant === 'taiwan' &&
  • Flower replacement. Draw a flower or season tile → reveal it, set it aside face-up, and draw a replacement from the dead wall. Happens during the deal and on any subsequent draw.
    • }
  • Exhausted wall. If the live wall runs out with no winner, it's a draw (黄庄 · huáng zhuāng).
); } Object.assign(window, { SectionDraw });