// duel-screen.jsx — GTO Duel mobile game screen (portrait + landscape)
// Exports (to window): DuelScreen
// Dark game theme on top of OctopiPoker tokens (colors_and_type.css).
const DUEL = {
heroCards: ['5s', '5d'],
geoCards: ['Kh', 'Qd'],
flop: ['5c', '6s', 'As'],
turn: '2h',
river: '9d',
};
const SUITS = {
s: { glyph: '\u2660', bg: '#3E4350' },
c: { glyph: '\u2663', bg: '#27BF69' },
d: { glyph: '\u2666', bg: '#4A8DF6' },
h: { glyph: '\u2665', bg: '#E74C3C' },
};
const ACTION_COLORS = {
Check: 'var(--op-action-check)',
Call: 'var(--op-action-check)',
Bet: 'var(--op-bet-2)',
Fold: 'var(--op-action-fold)',
'All-In': 'var(--op-all-in)',
};
const r1 = (x) => Math.round(x * 10) / 10;
// ─────────────────────────────────────────────────────────────
// Game state hook — scripted heads-up demo loop
// ─────────────────────────────────────────────────────────────
function initHand(hp1, hp2) {
return {
street: 0, // 0 flop, 1 turn, 2 river
pot: 16.9,
hero: 52.7, geo: 52.7,
mode: 'A', // A = check/bet/all-in, B = fold/call/all-in
callAmt: 0,
phase: 'hero', // hero | george | over
heroChip: null, geoChip: null,
geoSay: null,
reveal: false,
banner: null,
hp1, hp2,
clockKey: 0,
};
}
function useDuel(mult) {
const [s, setS] = React.useState(() => initHand(1000, 1000));
const ref = React.useRef(s);
ref.current = s;
const timers = React.useRef([]);
React.useEffect(() => () => timers.current.forEach(clearTimeout), []);
const later = (ms, fn) => timers.current.push(setTimeout(fn, ms));
const set = (patch) => setS((p) => ({ ...p, ...patch }));
const board = [...DUEL.flop, ...(s.street >= 1 ? [DUEL.turn] : []), ...(s.street >= 2 ? [DUEL.river] : [])];
const dealNext = () => {
const c = ref.current;
set({ street: c.street + 1, heroChip: null, geoChip: null, geoSay: null, mode: 'A', callAmt: 0, phase: 'hero', clockKey: c.clockKey + 1 });
};
const endHand = (heroWins) => {
const c = ref.current;
const dmg = Math.round(c.pot * 10 * mult);
set({
phase: 'over',
reveal: heroWins ? true : c.reveal,
banner: heroWins
? { title: `You win ${r1(c.pot)} bb`, sub: `George \u2212${dmg} HP`, win: true }
: { title: `George wins ${r1(c.pot)} bb`, sub: `You \u2212${dmg} HP`, win: false },
hp1: heroWins ? c.hp1 : Math.max(0, c.hp1 - dmg),
hp2: heroWins ? Math.max(0, c.hp2 - dmg) : c.hp2,
});
later(3200, () => {
const cc = ref.current;
setS({ ...initHand(cc.hp1, cc.hp2), clockKey: cc.clockKey + 1 });
});
};
const showdown = () => {
set({ reveal: true, geoChip: null, heroChip: null, geoSay: null });
later(700, () => endHand(true)); // pocket fives flop a set — hero holds
};
const afterStreet = () => {
const c = ref.current;
if (c.street >= 2) showdown(); else later(650, dealNext);
};
const heroAct = (kind) => {
const c = ref.current;
if (c.phase !== 'hero' || c.banner) return;
const bet = r1(Math.max(1, c.pot / 3));
if (kind === 'check') {
set({ phase: 'george', heroChip: 'Check' });
if (c.street === 0) {
const gb = r1(Math.max(1, c.pot / 3));
later(1500, () => set({
geoChip: `Bet ${gb} bb`, geoSay: `I'll bet ${gb}.`, geo: r1(ref.current.geo - gb), pot: r1(ref.current.pot + gb),
mode: 'B', callAmt: gb, phase: 'hero', heroChip: null, clockKey: ref.current.clockKey + 1,
}));
} else {
later(1500, () => { set({ geoChip: 'Check', geoSay: 'Check.' }); later(900, afterStreet); });
}
} else if (kind === 'bet') {
set({ phase: 'george', heroChip: `Bet ${bet} bb`, hero: r1(c.hero - bet), pot: r1(c.pot + bet) });
later(1500, () => {
set({ geoChip: `Call ${bet} bb`, geoSay: 'I call.', geo: r1(ref.current.geo - bet), pot: r1(ref.current.pot + bet) });
later(1100, afterStreet);
});
} else if (kind === 'call') {
set({ phase: 'george', heroChip: `Call ${c.callAmt} bb`, hero: r1(c.hero - c.callAmt), pot: r1(c.pot + c.callAmt) });
later(800, afterStreet);
} else if (kind === 'fold') {
set({ phase: 'george', heroChip: 'Fold' });
later(700, () => endHand(false));
} else if (kind === 'allin') {
const amt = c.hero;
set({ phase: 'george', heroChip: 'All-In', hero: 0, pot: r1(c.pot + amt) });
later(1500, () => {
const cc = ref.current;
const callAmt = Math.min(amt, cc.geo);
set({ geoChip: 'Call \u2014 All-In', geoSay: "Call. Let's see it.", geo: r1(cc.geo - callAmt), pot: r1(cc.pot + callAmt), reveal: true });
const left = 2 - cc.street;
for (let i = 1; i <= left; i++) later(900 + i * 900, dealNext);
later(900 + left * 900 + 900, () => endHand(true));
});
}
};
return { s, board, heroAct };
}
// ─────────────────────────────────────────────────────────────
// Atoms
// ─────────────────────────────────────────────────────────────
function PlayingCard({ code, w = 46, lift = false, deal = false, delay = 0, glow = false }) {
const rank = code.slice(0, -1);
const suit = SUITS[code.slice(-1)];
const anims = [];
if (deal) anims.push(`cardDeal 0.5s ${delay}ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards`);
if (glow) anims.push('goldPulse 1.2s ease-in-out infinite');
return (
{rank}
{suit.glyph}
{rank}
);
}
function CardBack({ w = 42 }) {
return (
);
}
function CardSlot({ w = 46 }) {
return (
);
}
function HPBar({ val, max = 1000, h = 18, fontSize = 11, flash = false }) {
return (
{flash &&
}
{val} / {max}
);
}
function Bolt({ size = 12, color = '#ABA2F1' }) {
return (
);
}
function PowerPill() {
return (
0 / 10
);
}
function PowerBar({ val = 0, max = 10, compact = false }) {
const h = compact ? 11 : 14;
return (
{Array.from({ length: max }).map((_, i) => (
))}
{val}/{max}
);
}
function TimebankPill({ value }) {
return (
{value}
TIMEBANK
);
}
function ActionChip({ text }) {
if (!text) return null; const base = text.split(' ')[0].replace(',', '');
const bg = ACTION_COLORS[base] || ACTION_COLORS[text] || 'var(--op-action-fold)';
return (
{text}
);
}
function Avatar({ who, size = 34 }) { if (who === 'geo') {
return (
);
}
return (
U8
);
}
function Badge({ text, gold = false }) {
return (
{text}
);
}
function ThinkingDots() {
return (
{[0, 1, 2].map((i) => (
))}
);
}
function GeoBubble({ text, below = false }) {
const pos = below
? { top: 'calc(100% + 8px)', left: '50%', transform: 'translateX(-50%) rotate(-2deg)' }
: { left: 'calc(50% + 56px)', top: 2, transform: 'rotate(-2deg)' };
return (
{text}
);
}
// ─────────────────────────────────────────────────────────────
// FX — keyframes, particles, confetti, stamp
// ─────────────────────────────────────────────────────────────
function DuelFX() {
return (
);
}
function Confetti() {
const colors = ['#FFDC35', '#FB81CA', '#36C591', '#6C5CE7', '#E9B663', '#50B5FF'];
return (
{Array.from({ length: 20 }, (_, i) => {
const a = (i / 20) * Math.PI * 2;
const r = 90 + (i % 4) * 38;
return (
);
})}
);
}
function AllInFX() {
const sparkColors = ['#FB81CA', '#FF53BA', '#FFD7EC', '#FB81CA'];
return (
{/* dim vignette */}
{/* glow core */}
{/* shockwaves */}
{/* sparks */}
{Array.from({ length: 16 }, (_, i) => (
))}
{/* stamp */}
ALL-IN
{[0, 1, 2].map((i) => (
))}
{running ? t.toFixed(1) : duration.toFixed(1)}s
SHOTCLOCK
);
}
// ─────────────────────────────────────────────────────────────
// Seat panel — player plaque with HP, timebank, power-ups
// ─────────────────────────────────────────────────────────────
function SeatPanel({ who, name, badges, stack, hp, isTurn, showPower, compact = false, fx = true }) {
const prevHp = React.useRef(hp);
const [dmg, setDmg] = React.useState(null);
React.useEffect(() => {
const d = prevHp.current - hp;
prevHp.current = hp;
if (d > 0) {
setDmg(d);
const t = setTimeout(() => setDmg(null), 1300);
return () => clearTimeout(t);
}
return undefined;
}, [hp]);
return (
{fx && dmg && (
−{dmg} HP
)}
{name}
{badges.map((b) => )}
{stack} bb
{showPower
?
:
No power-ups
}
{fx && (
)}
{/* George (top) */}
{s.reveal
? DUEL.geoCards.map((c, i) =>
)
: [0, 1].map((i) =>
)}
D
{s.phase === 'george' && !s.geoChip && !s.banner
?
:
}
{s.geoSay && !s.banner &&
}
{/* board + pot */}
POT
{s.pot} bb
{board.map((c, i) =>
)}
{Array.from({ length: slots }).map((_, i) =>
)}
{/* Hero (bottom) */}
{DUEL.heroCards.map((c) =>
)}
{/* chip flights */}
{flights.map((f) =>
)}
{/* all-in fx */}
{fx && s.heroChip === 'All-In' && !s.banner &&
}
{/* result banner */}
{s.banner && (
{fx && s.banner.win &&
}
{s.banner.title}
{s.banner.sub}
{onFinish && (
)}
)}
{btns.map((b) => (
heroAct(b.kind)} h={h} />
))}
{s.banner ? 'HAND OVER' : yours ? 'YOUR TURN' : "GEORGE'S TURN"}
);
}
function RoundLabel({ mult, center = false }) {
return (
ROUND 1
{mult}× DAMAGE
);
}
// ─────────────────────────────────────────────────────────────
// DuelScreen — root, portrait & landscape layouts
// ─────────────────────────────────────────────────────────────
function DuelScreen({ landscape = false, cfg }) {
const { ring, shot, mult, power } = cfg;
const fx = cfg.fx !== false;
const onExit = cfg.onExit;
const onFinish = cfg.onFinish;
const { s, board, heroAct } = useDuel(mult);
const myTurn = s.phase === 'hero' && !s.banner;
const bg = 'radial-gradient(ellipse 120% 90% at 50% 0%, #1D2030 0%, #12131D 45%, #0B0C13 100%)';
if (landscape) {
return (
{/* top: opponent + round + clock */}
{/* bottom: hero + status + actions */}
);
}
return (
);
}
function FlowBack({ onClick }) {
return (
);
}
Object.assign(window, { DuelScreen });
