/* =============================================================================
* app.jsx โ React rendering layer.
*
* This file contains ZERO game rules. It only:
* - holds the engine state in a React hook,
* - draws the menu / lobby / board / tokens / dice from that state,
* - forwards user clicks (roll, pick token) to the engine,
* - drives AI turns on a timer,
* - animates what the engine already decided (token hops, dice, capture), and
* - in online mode, relays intents/actions over LudoNet (net.js).
*
* Online model (host-authoritative): the HOST is the only one who calls the
* engine with authority. Every action is broadcast as a tiny message
* ({kind:'roll', value} or {kind:'move', token}); every client โ host included โ
* replays it through the SAME animate-then-commit path, so all screens stay in
* lockstep. Each action also carries a state snapshot for hard resync.
* ========================================================================== */
const { useState, useEffect, useCallback, useRef } = React;
const E = window.LudoEngine;
const HEX = { red: '#ff0002', green: '#049645', yellow: '#ffde15', blue: '#1295e7' }; // matches board.svg / Ludo King palette
const GRID = 15; // board.svg is a 15x15 grid; positions map to (unit / 15) * 100%
const HOP_MS = 180; // per-cell token hop duration
const RELEASE_MS = 340; // yard -> start square: one springy glide out (matches .releasing CSS)
const RETURN_MS = 50; // captured token racing home: per-cell pace (matches .returning CSS)
const DICE_SPIN_MS = 800; // dice tumble duration โ fast flips that decelerate, like a real die (~1s total)
const AI_THINK_MS = 700; // pause before an AI rolls, so the turn hand-off is readable
const MOVE_PAUSE_MS = 1000; // hold on the settled dice so the value is clearly seen before the token moves
const GUEST_COLORS = ['green', 'yellow', 'blue']; // host is always red
/* ---- Theme (dark / light) -------------------------------------------------
* index.html applies the saved (or system) theme pre-paint via
* ; this just flips and persists it. */
const Theme = {
get current() { return document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'; },
toggle() {
const t = Theme.current === 'dark' ? 'light' : 'dark';
document.documentElement.dataset.theme = t;
const m = document.querySelector('meta[name="theme-color"]');
if (m) m.setAttribute('content', t === 'light' ? '#c7d2e0' : '#060a18');
localStorage.setItem('ludo-theme', t);
return t;
},
};
function ThemeToggle({ floating }) {
const [theme, setTheme] = useState(Theme.current);
return (
setTheme(Theme.toggle())}>
{theme === 'dark' ? '๐' : 'โ๏ธ'}
);
}
/* ---- Sounds (synthesized with WebAudio โ no audio assets needed) --------- */
const Sound = (() => {
let ctx = null;
let muted = localStorage.getItem('ludo-muted') === '1';
function ac() {
if (!ctx) ctx = new (window.AudioContext || window.webkitAudioContext)();
if (ctx.state === 'suspended') ctx.resume();
return ctx;
}
function tone(freq, dur, opts) {
if (muted) return;
opts = opts || {};
try {
const c = ac();
const t0 = c.currentTime + (opts.when || 0);
const o = c.createOscillator();
const g = c.createGain();
o.type = opts.type || 'sine';
o.frequency.setValueAtTime(freq, t0);
if (opts.slide) o.frequency.exponentialRampToValueAtTime(Math.max(40, freq + opts.slide), t0 + dur);
g.gain.setValueAtTime(opts.gain || 0.15, t0);
g.gain.exponentialRampToValueAtTime(0.001, t0 + dur);
o.connect(g).connect(c.destination);
o.start(t0);
o.stop(t0 + dur + 0.02);
} catch (e) { /* audio unavailable โ play silently */ }
}
return {
get muted() { return muted; },
toggle() { muted = !muted; localStorage.setItem('ludo-muted', muted ? '1' : '0'); return muted; },
dice() {
// Rattle that slows with the visual tumble (see executeRoll's easing).
let when = 0, gap = 0.065;
for (let i = 0; i < 8; i++) {
tone(170 + Math.random() * 170, 0.05, { type: 'square', gain: 0.045, when });
when += gap;
gap = Math.min(gap * 1.22, 0.23);
}
},
hop() { tone(430 + Math.random() * 40, 0.06, { type: 'triangle', gain: 0.11 }); },
release() { tone(320, 0.14, { type: 'triangle', gain: 0.16, slide: 220 }); },
capture() { tone(520, 0.28, { type: 'sawtooth', gain: 0.11, slide: -340 }); },
finish() { tone(660, 0.12, { gain: 0.16 }); tone(880, 0.16, { gain: 0.16, when: 0.11 }); },
win() { [523, 659, 784, 1047, 784, 1047].forEach((f, i) => tone(f, 0.22, { gain: 0.17, when: i * 0.13 })); },
};
})();
/* ---- Pawn artwork (libreludo token.svg) inlined so the head recolors via
* the CSS custom property --fill-colour ----------------------------------- */
const TOKEN_SVG = `
`;
function capitalize(s) { return s.charAt(0).toUpperCase() + s.slice(1); }
function nameOf(state, color) { return state.players.find((p) => p.color === color).name; }
// Convert a seat to AI mid-game (guest disconnected). Pure state-in/state-out.
function seatToAI(state, color) {
const s = JSON.parse(JSON.stringify(state));
const p = s.players.find((x) => x.color === color);
if (p) { p.isAI = true; s.message = p.name + ' left โ AI plays on'; }
return s;
}
/* ---- Gameplay profiles: per-name stats, XP and achievements ---------------
* Stored in localStorage under one key, keyed by lower-cased player name, so
* stats survive reloads and follow the name across local and online games.
* A game is recorded once, when it finishes (abandoned games don't count). */
const ACHIEVEMENTS = [
{ id: 'first-game', icon: '๐ฒ', title: 'First Roll', desc: 'Play your first game', test: (p) => p.games >= 1 },
{ id: 'first-win', icon: '๐', title: 'Winner', desc: 'Win a game', test: (p) => p.wins >= 1 },
{ id: 'hat-trick', icon: '๐ฉ', title: 'Hat-trick', desc: 'Win 3 games', test: (p) => p.wins >= 3 },
{ id: 'champion', icon: '๐', title: 'Champion', desc: 'Win 10 games', test: (p) => p.wins >= 10 },
{ id: 'veteran', icon: '๐๏ธ', title: 'Veteran', desc: 'Play 25 games', test: (p) => p.games >= 25 },
{ id: 'first-blood', icon: 'โ๏ธ', title: 'First Blood', desc: "Capture an opponent's token", test: (p) => p.captures >= 1 },
{ id: 'hunter', icon: '๐น', title: 'Hunter', desc: 'Capture 25 tokens in total', test: (p) => p.captures >= 25 },
{ id: 'home-run', icon: '๐ ', title: 'Home Run', desc: 'Bring all 4 tokens home in one game', test: (p, g) => g && g.home >= 4 },
{ id: 'untouchable', icon: '๐ก๏ธ', title: 'Untouchable', desc: 'Win without losing a single token', test: (p, g) => g && g.won && g.suffered === 0 },
];
// XP for one finished game: base for playing, bonus by finishing rank, plus
// per-capture and per-token-home rewards.
const XP_RULES = { played: 40, rank: [120, 60, 30, 0], capture: 10, tokenHome: 15 };
// Total XP needed to reach level `l` (L1 100, L2 300, L3 600, L4 1000, ...).
const xpForLevel = (l) => 50 * l * (l + 1);
const levelOf = (xp) => { let l = 0; while (xp >= xpForLevel(l + 1)) l++; return l; };
const Profiles = {
load() { try { return JSON.parse(localStorage.getItem('ludo-profiles')) || {}; } catch (e) { return {}; } },
get(name) { return name ? this.load()[name.trim().toLowerCase()] || null : null; },
// The profile the menu shows: the name that most recently finished a game.
last() { return this.get(localStorage.getItem('ludo-last-profile') || ''); },
/* Record one finished game. `g`: { won, rank, captures, suffered, home }.
* Returns { profile, gained, levelsUp, unlocked } for the win-overlay report. */
record(name, g) {
const all = this.load();
const key = name.trim().toLowerCase();
const p = all[key] || { name: name.trim(), games: 0, wins: 0, captures: 0, tokensHome: 0, xp: 0, ach: [] };
const levelBefore = levelOf(p.xp);
p.games += 1;
if (g.won) p.wins += 1;
p.captures += g.captures;
p.tokensHome += g.home;
const gained = XP_RULES.played + (XP_RULES.rank[g.rank] || 0) +
XP_RULES.capture * g.captures + XP_RULES.tokenHome * g.home;
p.xp += gained;
const unlocked = ACHIEVEMENTS.filter((a) => !p.ach.includes(a.id) && a.test(p, g));
p.ach.push(...unlocked.map((a) => a.id));
all[key] = p;
try {
localStorage.setItem('ludo-profiles', JSON.stringify(all));
localStorage.setItem('ludo-last-profile', key);
} catch (e) { /* storage blocked โ play on without tracking */ }
return { profile: p, gained, levelsUp: levelOf(p.xp) > levelBefore, unlocked };
},
};
/* ---- Global leaderboard (server-backed) ------------------------------------
* Talks to the mcqmojo.com API with ABSOLUTE paths (the hosted page sets a
*
{face || spinning ? (
/* While .rolling, the CSS tumble animation overrides this transform;
* when it's removed the cube transitions into the settled pose. The
* resting tilt keeps two extra faces peeking out, so it reads as 3D. */
{/* .front keeps the rolled value at full brightness while the other
* faces dim โ a fake light that makes the value pop at 40px. */}
{[1, 2, 3, 4, 5, 6].map((f) => (
))}
) : ๐ฒ }
);
}
/* ---- A single token, absolutely positioned over board.svg ---------------- */
function Token({ color, tokenIndex, center, movable, stackIndex, stackSize, lifted, releasing, returning, onClick }) {
const [row, col] = center; // grid-unit centers (0..15)
// Fan out multiple tokens sharing one cell so they don't fully overlap.
const spread = stackSize > 1 ? (stackIndex - (stackSize - 1) / 2) * 0.35 : 0;
const style = {
left: ((col + spread) / GRID) * 100 + '%',
top: (row / GRID) * 100 + '%',
'--fill-colour': HEX[color],
// Movable tokens stack ABOVE everything else in the cell: an opponent
// sharing the square (safe cell / fresh capture landing) must not cover
// the token the player has to click. A token racing home after a capture
// flies over resting tokens but under the (lifted) one that captured it.
zIndex: lifted ? 40 : returning ? 35 : (movable ? 20 : 10) + stackIndex,
};
return (
);
}
/* ---- Player pod: name, home progress, rank medal, and the dice when it's
* this player's turn -------------------------------------------------------- */
const MEDALS = ['๐ฅ', '๐ฅ', '๐ฅ', '4th'];
function PlayerPod({ player, isCurrent, rank, diceProps, youBadge }) {
if (!player.active) return
;
return (
= 0 ? ' finished' : '')}
style={{ '--c': HEX[player.color] }}>
{player.name}
{player.isAI && AI }
{!player.isAI && youBadge && You }
{rank >= 0 && {MEDALS[rank] || rank + 1 + 'th'} }
{player.tokens.map((p, i) => (
{isCurrent && diceProps ?
e.stopPropagation()}>
{profile.name}
Level {lvl} ยท {profile.xp} XP ({xpForLevel(lvl + 1) - profile.xp} to next level)
{ACHIEVEMENTS.map((a) => (
{a.icon}
{a.title}
{a.desc}
))}
Close
);
}
/* Global leaderboard overlay โ top players by XP from the mcqmojo.com API. */
const LB_PERIODS = [['day', 'Today'], ['week', 'Week'], ['month', 'Month'], ['all', 'All time']];
function LeaderboardOverlay({ onClose }) {
const [period, setPeriod] = useState('week');
const [rows, setRows] = useState(null); // null = loading
const [error, setError] = useState(false);
// Highlight rows that are "you": the online name plus the local profile name.
const mine = new Set([
(localStorage.getItem('ludo-name') || '').trim().toLowerCase(),
((Profiles.last() || {}).name || '').trim().toLowerCase(),
]);
useEffect(() => {
let live = true;
setRows(null);
setError(false);
Leaderboard.top(period)
.then((d) => { if (live) setRows(d.rows || []); })
.catch(() => { if (live) setError(true); });
return () => { live = false; };
}, [period]);
return (
e.stopPropagation()}>
๐ Leaderboard
{LB_PERIODS.map(([id, label]) => (
setPeriod(id)}>{label}
))}
{error ? (
Couldn't load the leaderboard โ it's available when playing at
{' '}mcqmojo.com with an internet connection.
) : rows === null ? (
Loading
) : rows.length === 0 ? (
No games recorded yet โ finish a game to get on the board!
) : (
{rows.map((r, i) => (
{i < 3 ? MEDALS[i] : i + 1}
{r.name}
L{levelOf(r.xp)} ยท {r.wins}W
{r.xp} XP
))}
)}
Open the full leaderboard page โ
Close
);
}
/* First-visit welcome: a friendly "here's what this is โ let's play" card.
* Shown once per device (localStorage flag); invited friends skip it โ the
* invite notice on the join form is their welcome. */
function WelcomeOverlay({ onClose }) {
return (
e.stopPropagation()}>
๐ฒ
Welcome to Ludo!
Play the classic board game free โ no sign-up.
๐ค Solo against a smart AI, or pass-and-play
๐ Private online rooms โ share a code with friends
๐ Earn XP, unlock achievements, climb the leaderboard
Let's play ๐ฎ
);
}
function Menu({ notice, inviteCode, onStartLocal, onHost, onJoin }) {
// Arriving via an invite link (?room=CODE) lands straight on the join form.
const [tab, setTab] = useState(inviteCode ? 'online' : 'local');
const [showAch, setShowAch] = useState(false);
const [showLB, setShowLB] = useState(false);
const [showWelcome, setShowWelcome] = useState(() => {
try { return !inviteCode && !localStorage.getItem('ludo-welcomed'); }
catch (e) { return false; }
});
const closeWelcome = () => {
setShowWelcome(false);
try { localStorage.setItem('ludo-welcomed', '1'); } catch (e) {}
};
const profile = Profiles.last();
const [types, setTypes] = useState(PRESETS[0].seats);
const [names, setNames] = useState(['', '', '', '']);
const [myName, setMyName] = useState(localStorage.getItem('ludo-name') || '');
const [roomSize, setRoomSize] = useState(4); // seats in a hosted room (incl. host)
const [joinCode, setJoinCode] = useState(inviteCode || '');
const netOK = window.LudoNet && window.LudoNet.available();
const activeCount = types.filter((t) => t !== 'off').length;
const cycle = (i) => setTypes(types.map((t, j) => (j === i ? SEAT_CYCLE[t] : t)));
const setName = (i, v) => setNames(names.map((n, j) => (j === i ? v : n)));
const startLocal = () => {
const missing = types
.map((t, i) => (t === 'human' && !names[i].trim() ? capitalize(E.COLORS[i]) : null))
.filter(Boolean);
if (missing.length) {
alert('Please enter a name for: ' + missing.join(', '));
return;
}
onStartLocal(types.map((t, i) => ({ type: t, name: names[i].trim() || undefined })));
};
// Blank names are not allowed online โ the name is what friends see.
const requireName = () => {
const n = myName.trim();
if (!n) { alert('Please enter your name first.'); return null; }
localStorage.setItem('ludo-name', n);
return n;
};
// How many seats (host included) the room opens with. Rendered above every
// "Create room" button; join flows never see it โ only the host decides.
const sizePicker = (
Room size:
{[2, 3, 4].map((n) => (
setRoomSize(n)}>
{n} players
))}
);
return (
{['L', 'U', 'D', 'O'].map((ch, i) => (
{ch}
))}
{notice &&
{notice}
}
{profile && (() => {
const lvl = levelOf(profile.xp);
const pct = Math.round(100 * (profile.xp - xpForLevel(lvl)) / (xpForLevel(lvl + 1) - xpForLevel(lvl)));
return (
setShowAch(true)} title="View achievements">
{lvl}
{profile.name}
{profile.games} games ยท {profile.wins} wins ยท {profile.ach.length}/{ACHIEVEMENTS.length} ๐
{profile.xp} XP
);
})()}
{showAch && profile &&
setShowAch(false)} />}
setShowLB(true)}>
๐ Global leaderboard
{showLB && setShowLB(false)} />}
{showWelcome &&
setTab('local')}>
Local game
setTab('online')}>
Online with friends
{tab === 'local' ? (
Tap a color to cycle Human / AI / Off. Humans can enter a name.
{/* Ordered to mirror the board corners: red TL, green TR, blue BL, yellow BR. */}
{['red', 'green', 'blue', 'yellow'].map((color) => {
const i = E.COLORS.indexOf(color);
return (
cycle(i)}>
{color}
{SEAT_LABEL[types[i]]}
{types[i] === 'human' && (
e.stopPropagation()}
onChange={(e) => setName(i, e.target.value)} />
)}
);
})}
{PRESETS.map((p) => (
setTypes(p.seats)}>{p.name}
))}
{activeCount < 2 ? 'Need at least 2 players' : 'Play'}
) : (
One friend creates a room and shares the code; the others join with it.
{!netOK &&
Online play needs an internet connection (PeerJS failed to load). Refresh and try again.
}
{inviteCode && (
๐ You're invited to room {inviteCode} โ enter your name and tap Join.
)}
Your name
setMyName(e.target.value)} />
{/* Invited via link: lead with Join. Otherwise: lead with Create. */}
{inviteCode ? (
{ const n = requireName(); if (n) onJoin(joinCode, n); }}>
Join
or start your own room
{sizePicker}
{ const n = requireName(); if (n) onHost(n, roomSize); }}>
Create room
) : (
{sizePicker}
{ const n = requireName(); if (n) onHost(n, roomSize); }}>
Create room
or join a friend's room
{ const n = requireName(); if (n) onJoin(joinCode, n); }}>
Join
)}
)}
{/* Stand-in for the site header/footer (this page is standalone โ no
* base.html chrome), matching what every other mcqmojo game shows. */}
);
}
/* ============================================================================
* Online lobbies
* ========================================================================== */
function Roster({ roster, myColor }) {
return (
{roster.map((p) => (
{p.name}
{p.host && Host }
{p.color === myColor && You }
))}
Leave the game?
{warning}
Keep playing
Leave game
);
}
/* ============================================================================
* Win overlay with rankings and confetti
* ========================================================================== */
function WinOverlay({ state, canRestart, onRestart, onMenu, xpReport }) {
const [copied, setCopied] = useState(false);
// Brag line: lead with the local player's own XP haul when a human profile
// was recorded, else just the result. (xpReport[0] is the first human seat.)
const rep = xpReport && xpReport[0];
const winnerName = nameOf(state, state.winner);
const iWon = rep && winnerName.trim().toLowerCase() === rep.profile.name.trim().toLowerCase();
const shareMsg = (rep
? (iWon ? 'I just WON a Ludo game' : winnerName + ' beat me at Ludo') +
' and I earned +' + rep.gained + ' XP (Level ' + levelOf(rep.profile.xp) + ')'
: winnerName + ' won our Ludo game') + ' on MCQ Mojo! ๐ฒ Play free:';
const doShare = async () => {
const how = await shareText('Ludo', shareMsg, SITE_GAME);
if (how === 'copied') { setCopied(true); setTimeout(() => setCopied(false), 2000); }
};
const confetti = useRef(null);
if (!confetti.current) {
confetti.current = Array.from({ length: 70 }, (_, i) => ({
left: Math.random() * 100,
delay: Math.random() * 2.4,
dur: 2.6 + Math.random() * 2.4,
color: HEX[E.COLORS[i % 4]],
spin: Math.random() * 720 - 360,
}));
}
return (
{confetti.current.map((c, i) => (
))}
๐
{nameOf(state, state.winner)} wins!
{state.ranking.map((color, i) => (
{MEDALS[i] || i + 1 + 'th'}
))}
{xpReport && xpReport.map((r, i) => (
{r.profile.name}
{r.levelsUp && โฌ Level {levelOf(r.profile.xp)}! }
+{r.gained} XP
{r.unlocked.length > 0 && (
{r.unlocked.map((a) => (
{a.icon} {a.title}
))}
)}
))}
{canRestart
? Play again
: Waiting for the host }
Main menu
โน Menu
{roomCode && {roomCode} }
{state.message}
setMuted(Sound.toggle())}>
{muted ? '๐' : '๐'}
{pod('red')}{pod('green')}
{state.players.map((p) => p.active && p.tokens.map((pos, t) => {
const isAnim = anim && anim.color === p.color && anim.t === t;
const ret = returnAnims && returnAnims.find((a) => a.color === p.color && a.t === t);
const center = ret ? ret.center : isAnim ? anim.center : E.tokenCenter(p.color, t, pos);
const [r, c] = E.tokenCenter(p.color, t, pos);
const stack = cellStacks[r + ',' + c];
const stackIndex = Math.max(0, stack.findIndex((x) => x.color === p.color && x.t === t));
const solo = isAnim || ret; // animating tokens leave their stack
return (
userMove(t)} />
);
}))}
{pod('blue')}{pod('yellow')}
{confirmLeave && state.phase !== 'gameover' && (
setConfirmLeave(false)}
onLeave={() => { if (mode === 'local') LocalSave.clear(); onMenu(); }} />
)}
{state.phase === 'gameover' && (
onMenu()} />
)}
);
}
/* ============================================================================
* Root โ screen switching + owns the network connection
* ========================================================================== */
// Room code from an invite link (?room=CODE), sanitized. Read once at load.
const INVITE_CODE = (() => {
try {
const c = new URLSearchParams(window.location.search).get('room');
const clean = c ? c.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 5) : '';
return clean.length >= 4 ? clean : null;
} catch (e) { return null; }
})();
function App() {
// A saved local game (reload / accidental close) resumes immediately โ
// unless the user arrived via an invite link, which is a clear intent to
// join a friend's room instead. The save stays put either way; it is only
// cleared when that game finishes or the player leaves it via Menu.
const [screen, setScreen] = useState(() => {
if (!INVITE_CODE) {
const save = LocalSave.load();
if (save) return { name: 'local-game', resume: save, key: 'resume' };
}
return { name: 'menu', notice: null };
});
const netRef = useRef(null);
const roomCodeRef = useRef(null);
// Screens rebind these; net.js reads them lazily via this stable proxy.
const handlersRef = useRef(null);
const proxyRef = useRef(null);
if (!proxyRef.current) {
const call = (fn) => (...args) => {
const h = handlersRef.current;
if (h && typeof h[fn] === 'function') h[fn](...args);
};
proxyRef.current = {
onReady: call('onReady'), onMessage: call('onMessage'), onLeave: call('onLeave'),
onOpen: call('onOpen'), onClose: call('onClose'), onError: call('onError'),
};
}
const closeNet = () => {
if (netRef.current) { netRef.current.close(); netRef.current = null; }
handlersRef.current = null;
};
const toMenu = (notice) => { closeNet(); setScreen({ name: 'menu', notice: notice || null }); };
// Menu/lobby screens get a floating theme switch; in-game it sits in the topbar.
const themed = (view) => setScreen({
name: 'online-game', mode: 'host', seats, guests,
myColor: 'red', roomCode: roomCodeRef.current, key: Date.now(),
})}
onCode={(code) => { roomCodeRef.current = code; }}
onExit={() => toMenu()} />);
case 'guest-lobby':
return themed( setScreen({
name: 'online-game', mode: 'guest', seats, myColor,
roomCode: screen.code, key: Date.now(),
})}
onExit={(notice) => toMenu(notice)} />);
case 'online-game':
return setScreen({ name: 'local-game', seats, key: Date.now() })}
onHost={(myName, size) => setScreen({ name: 'host-lobby', myName, size })}
onJoin={(code, myName) => setScreen({ name: 'guest-lobby', code, myName })} />);
}
}
/* The lobbies own creating the connection (they know host vs guest) but must
* route events through the App's stable proxy so the Game screen can take the
* handlers over without reconnecting. */
function HostLobbyBridge({ myName, roomSize, netRef, proxy, handlersRef, onStart, onCode, onExit }) {
const [code, setCode] = useState(null);
const [guests, setGuests] = useState([]);
// The room opens with (roomSize - 1) guest seats; the rest start closed.
// 'ai' = open (a friend can take it; a bot fills it if still empty at start),
// 'off' = closed (no friend can take it, dropped at start).
const [extras, setExtras] = useState(() => {
const ex = {};
GUEST_COLORS.forEach((c, i) => { ex[c] = i < (roomSize || 4) - 1 ? 'ai' : 'off'; });
return ex;
});
const [error, setError] = useState(null);
const [copied, setCopied] = useState(false);
const guestsRef = useRef(guests);
guestsRef.current = guests;
// Invite link: opening it lands friends on the join form with the code filled.
const inviteLink = () =>
window.location.origin + window.location.pathname + '?room=' + code;
const shareLink = async () => {
const url = inviteLink();
// Phones: native share sheet (WhatsApp etc.). Desktop: copy to clipboard โ
// desktop Edge/Chrome also expose navigator.share, but the OS share dialog
// is the wrong experience there, so gate on an actual mobile device.
const isMobile = (navigator.userAgentData && navigator.userAgentData.mobile) ||
/Android|iPhone|iPad|Mobile/i.test(navigator.userAgent);
if (navigator.share && isMobile) {
try { await navigator.share({ title: 'Ludo', text: 'Join my Ludo room ' + code, url }); return; }
catch (e) { if (e && e.name === 'AbortError') return; /* else fall through to copy */ }
}
try {
if (navigator.clipboard && navigator.clipboard.writeText) {
await navigator.clipboard.writeText(url);
} else {
const ta = document.createElement('textarea');
ta.value = url;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
}
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (e) {
alert('Copy this link and send it to your friends:\n' + url);
}
};
// `ex` rides along so guests render the same open-seat plan as the host.
const sendLobby = (list, ex) => {
const r = [{ color: 'red', name: myName, host: true }]
.concat(list.map((g) => ({ color: g.color, name: g.name })));
list.forEach((g) => netRef.current.send(g.id, { t: 'lobby', roster: r, yourColor: g.color, extras: ex }));
};
useEffect(() => {
netRef.current = window.LudoNet.createHost(proxy);
return undefined; // App root closes the connection
}, []);
// Live handlers for the lobby phase.
useEffect(() => {
handlersRef.current = {
onReady: (c) => { setCode(c); onCode(c); },
onError: (err) => setError('Could not open a room (' + ((err && err.type) || 'network') + '). Check your connection.'),
onMessage: (id, msg) => {
if (!msg || msg.t !== 'hello') return;
const list = guestsRef.current;
if (list.some((g) => g.id === id)) return;
const used = list.map((g) => g.color);
// Friends only take OPEN seats โ a 2-player room really holds 2 people.
const color = GUEST_COLORS.find((c) => !used.includes(c) && extras[c] !== 'off');
if (!color) {
netRef.current.send(id, { t: 'full' });
// Let the message flush before dropping the connection, or the guest
// only sees "host closed the room" instead of the real reason.
setTimeout(() => { if (netRef.current) netRef.current.kick(id); }, 400);
return;
}
const name = String(msg.name || 'Player').trim().slice(0, 14) || 'Player';
const next = list.concat([{ id, name, color }]);
setGuests(next);
sendLobby(next, extras);
},
onLeave: (id) => {
const next = guestsRef.current.filter((g) => g.id !== id);
setGuests(next);
sendLobby(next, extras);
},
};
});
const start = () => {
const byColor = {};
guests.forEach((g) => { byColor[g.color] = g; });
const seats = E.COLORS.map((color) => {
if (color === 'red') return { type: 'human', name: myName };
if (byColor[color]) return { type: 'human', name: byColor[color].name };
return { type: extras[color], name: undefined };
});
netRef.current.broadcast({ t: 'start', seats });
onStart(seats, guests);
};
const toggleSeat = (color) => {
const ex = { ...extras, [color]: extras[color] === 'ai' ? 'off' : 'ai' };
setExtras(ex);
sendLobby(guestsRef.current, ex);
};
const roster = [{ color: 'red', name: myName, host: true }]
.concat(guests.map((g) => ({ color: g.color, name: g.name })));
const openColors = GUEST_COLORS.filter((c) => !guests.some((g) => g.color === c));
const botCount = openColors.filter((c) => extras[c] === 'ai').length;
const humanCount = 1 + guests.length;
const activeSeats = humanCount + botCount;
const startLabel = activeSeats < 2
? 'Need at least 2 players'
: 'Start game โ ' + humanCount + (humanCount > 1 ? ' players' : ' player') +
(botCount ? ' + ' + botCount + (botCount > 1 ? ' bots' : ' bot') : '');
return (
Room lobby
{error ? (
{error}
) : (
Room code
{code || 'ยทยทยทยทยท'}
Friends can type this code โ or just send them the link:
{copied ? 'โ Link copied!' : '๐ Share invite link'}
)}
{openColors.length > 0 && (
Empty seats โ friends can grab any open one:
{openColors.map((color) => {
const open = extras[color] !== 'off';
return (
Waiting for a friend
: Seat closed }
toggleSeat(color)}
title={open
? 'This seat becomes a bot if no friend has taken it when you start. Tap to close it instead.'
: 'Closed: no friend or bot can take this seat. Tap to reopen it.'}>
{open ? 'if empty: ๐ค AI' : 'tap to open'}
);
})}
)}
{startLabel}
Cancel
);
}
function GuestLobbyBridge({ code, myName, netRef, proxy, handlersRef, onStart, onExit }) {
const [status, setStatus] = useState('connecting');
const [error, setError] = useState(null);
const [roster, setRoster] = useState([]);
const [extras, setExtras] = useState(null); // host's open-seat plan (display only)
const [myColor, setMyColor] = useState(null);
const myColorRef = useRef(null);
useEffect(() => {
netRef.current = window.LudoNet.joinRoom(code, proxy);
return undefined; // App root closes the connection
}, []);
useEffect(() => {
handlersRef.current = {
onOpen: () => { setStatus('waiting'); netRef.current.send({ t: 'hello', name: myName }); },
// A kick after 'full'/'busy' also closes the connection โ keep the first,
// more specific error instead of overwriting it with this generic one.
onClose: () => { setError((e) => e || 'The host closed the room.'); setStatus('error'); },
onError: (err) => {
setError(err && err.type === 'peer-unavailable'
? 'No room found with code ' + code + '. Check the code and try again.'
: 'Could not connect (' + ((err && err.type) || 'network') + ').');
setStatus('error');
},
onMessage: (msg) => {
if (!msg) return;
if (msg.t === 'lobby') {
setRoster(msg.roster);
setExtras(msg.extras || null);
setMyColor(msg.yourColor);
myColorRef.current = msg.yourColor;
}
else if (msg.t === 'full') { setError('That room is full โ all open seats are taken.'); setStatus('error'); }
else if (msg.t === 'busy') { setError('That game has already started โ ask the host for a new room.'); setStatus('error'); }
else if (msg.t === 'start') onStart(msg.seats, myColorRef.current);
},
};
});
const openColors = GUEST_COLORS.filter((c) => !roster.some((p) => p.color === c));
return (
Room {code}
{status === 'error' ? (
{error}
) : status === 'connecting' ? (
Connecting
) : (
{openColors.length > 0 && (
{openColors.map((color) => {
const open = !extras || extras[color] !== 'off';
return (
Waiting for a friend
: Seat closed }
{open ? 'if empty: ๐ค AI' : 'โ closed'}
);
})}
)}
Waiting for the host to start
)}
onExit()}>Leave
);
}
ReactDOM.createRoot(document.getElementById('root')).render( 
{state.players.map((p) => p.active && p.tokens.map((pos, t) => {
const isAnim = anim && anim.color === p.color && anim.t === t;
const ret = returnAnims && returnAnims.find((a) => a.color === p.color && a.t === t);
const center = ret ? ret.center : isAnim ? anim.center : E.tokenCenter(p.color, t, pos);
const [r, c] = E.tokenCenter(p.color, t, pos);
const stack = cellStacks[r + ',' + c];
const stackIndex = Math.max(0, stack.findIndex((x) => x.color === p.color && x.t === t));
const solo = isAnim || ret; // animating tokens leave their stack
return (