// duel-lobby.jsx — GTO Duel match setup / lobby screen (portrait + landscape split).
// Exports (to window): DuelLobby({ mode, setMode, onStart, onProfile, landscape })
function VsRow({ mode, big = true }) {
const left = mode === 'ai' ? 'YOU' : 'PLAYER 1';
const right = mode === 'ai' ? 'AI' : 'PLAYER 2';
const sub = mode === 'ai' ? 'ADVANCED' : null;
const fs = big ? 20 : 18;
return (
{left}
VS
{right}
{sub && {sub}}
);
}
function SettingRow({ title, desc, on, onChange }) {
return (
);
}
function Gear({ size = 22 }) {
return (
);
}
function LobbySlider({ label, value, set, min, max, step, fmt }) {
return (
);
}
function NumberBox({ value, set, w = 70 }) {
return (
set(e.target.value)} style={{
width: w, boxSizing: 'border-box', textAlign: 'center',
background: 'rgba(10,11,17,0.55)', border: '1px solid rgba(255,255,255,0.14)', borderRadius: 8,
padding: '11px 6px', fontFamily: 'var(--op-font-ui)', fontWeight: 700, fontSize: 15, color: '#fff', outline: 'none',
}} />
);
}
function DistTier({ title, d, on }) {
const cell = (label, key) => (
{label}
on(key, x)} w="100%" />
);
return (
{title}
From decision
on('from', x)} w={58} />
{cell('Heal', 'heal')}{cell('Shield', 'shield')}{cell('Offensive', 'off')}
);
}
const ADV_DEFAULTS = {
hp: 1000, rounds: 20, decTime: 25, bank: 60, threshold: 5,
dist: {
early: { from: 0, heal: 0.6, shield: 0.2, off: 0.2 },
mid: { from: 30, heal: 0.4, shield: 0.2, off: 0.4 },
late: { from: 60, heal: 0.2, shield: 0.2, off: 0.6 },
},
};
function AdvancedSettings() {
const [v, setV] = React.useState(ADV_DEFAULTS);
const set = (k, val) => setV((s) => ({ ...s, [k]: val }));
const setDist = (tier, key, val) => setV((s) => ({ ...s, dist: { ...s.dist, [tier]: { ...s.dist[tier], [key]: val } } }));
return (
Match
set('hp', x)} min={200} max={2000} step={50} />
set('rounds', x)} min={5} max={40} step={1} fmt={(x) => `${x} decisions`} />
set('decTime', x)} min={5} max={60} step={1} fmt={(x) => `${x}s`} />
set('bank', x)} min={0} max={120} step={5} fmt={(x) => `${x}s`} />
Power-up streak threshold
Tier 1 at 5, tier 2 at multiples (10, 15, …)
set('threshold', x)} w={70} />
Power-up distribution
setDist('early', k, x)} />
setDist('mid', k, x)} />
setDist('late', k, x)} />
);
}
function DuelLobby({ mode, setMode, onStart, onProfile, landscape }) {
const [gameType, setGameType] = React.useState('MTT, 8-Max');
const [stage, setStage] = React.useState('Chip EV');
const [street, setStreet] = React.useState('Postflop');
const [difficulty, setDifficulty] = React.useState('Advanced');
const [p1, setP1] = React.useState('Player 1');
const [p2, setP2] = React.useState('Player 2');
const [rng, setRng] = React.useState(false);
const [timer, setTimer] = React.useState(true);
const [advanced, setAdvanced] = React.useState(false);
const diffStars = { Beginner: 1, Intermediate: 2, Advanced: 3, Expert: 4, GTO: 5 };
const subtitle = mode === 'ai'
? 'Play a single-player match against an AI opponent. Each mistake takes HP. Last one standing wins.'
: 'Two players, one screen. Take turns making GTO decisions — each mistake costs HP. Last one standing wins.';
const profileBtn = (
);
const gearBtn = ;
const tutorialBtn = (
);
const startBtn = (
);
const scenarioCard = (
Scenario
);
const settingsCard = (
Match Settings
{mode === 'ai' ? (
} />
) : (
)}
);
// ---------- Landscape: split rail (brand + actions) | scrolling settings ----------
if (landscape) {
const sidebar = (
{profileBtn}{gearBtn}
{tutorialBtn}{startBtn}
);
return (
{advanced ? : (
{scenarioCard}
{settingsCard}
)}
);
}
// ---------- Portrait ----------
const header = (
);
const footer = (
{tutorialBtn}{startBtn}
);
return (
{advanced ? : (
{scenarioCard}
{settingsCard}
)}
);
}
Object.assign(window, { DuelLobby });