// duel-result.jsx — GTO Duel match result screen (portrait + landscape split).
// Exports (to window): DuelResult({ onPlayAgain, onViewProfile, landscape })
function HPChart({ w = 330, h = 150 }) {
const padL = 30, padB = 18, padT = 8, padR = 8;
const innerW = w - padL - padR, innerH = h - padT - padB;
const maxX = 5, maxHP = 1000;
const X = (x) => padL + (x / maxX) * innerW;
const Y = (v) => padT + (1 - v / maxHP) * innerH;
const hero = [[0, 1000], [3.6, 1000], [4.0, 940], [4.4, 760], [4.7, 470], [4.9, 180], [5, 0]];
const opp = [[0, 1000], [5, 1000]];
const toPath = (pts) => pts.map((p, i) => `${i ? 'L' : 'M'}${X(p[0]).toFixed(1)} ${Y(p[1]).toFixed(1)}`).join(' ');
const grid = [0, 250, 500, 750, 1000];
return (
);
}
function CompareRow({ label, you, ai, youWin, aiWin }) {
return (
{label}
{you}{youWin && ' \uD83C\uDFC6'}
{ai}{aiWin && ' \uD83C\uDFC6'}
);
}
function GradePill({ text, tone }) {
const tones = {
blunder: { bg: 'rgba(231,76,60,0.16)', fg: '#EC7265' },
aggressive: { bg: 'rgba(233,154,40,0.16)', fg: '#E9B663' },
tight: { bg: 'rgba(80,181,255,0.16)', fg: '#50B5FF' },
};
const t = tones[tone] || tones.blunder;
return {text};
}
function RKV({ k, v, vColor = '#fff' }) {
return (
);
}
function MistakeCard({ row }) {
return (
#{row.n}
on
);
}
function Legend({ color, label }) {
return (
{label}
);
}
function SummaryStat({ label, value, sub, color = '#fff', border }) {
return (
{label}
{value}
{sub}
);
}
const MISTAKES = [
{ n: 5, hand: ['7h', 'Qc'], board: ['2c', '3d', 'Kd'], facing: 'No action', correct: 'Check', picked: 'Bet 57.58', direction: 'Too aggressive', grade: 'Blunder', tone: 'blunder', size: '14.4% pot' },
];
function DuelResult({ onPlayAgain, onViewProfile, landscape }) {
const win = false; // demo: opponent wins
const outcomeTitle = (
{win ? 'You win' : 'Opponent wins'}
);
const endReason = End reason: ko
;
const playAgainBtn = (
);
const viewProfileBtn = (
);
const youStat = ;
const aiStat = ;
const accStat = ;
const blunderStat = ;
const chartBlock = (
);
const compareBlock = (
Match comparison
Stat
You
AI
);
const mistakeBlock = (
Mistake Log
{MISTAKES.map((m) => )}
);
// ---------- Landscape: split rail (outcome + summary + actions) | scrolling detail ----------
if (landscape) {
const sidebar = (
{outcomeTitle}{endReason}
{youStat}{aiStat}{accStat}{blunderStat}
{playAgainBtn}{viewProfileBtn}
);
return (
{chartBlock}
{compareBlock}
{mistakeBlock}
);
}
// ---------- Portrait ----------
const header = (
{outcomeTitle}{endReason}
);
const footer = (
{playAgainBtn}{viewProfileBtn}
);
return (
{youStat}{aiStat}
{chartBlock}
{compareBlock}
{mistakeBlock}
);
}
Object.assign(window, { DuelResult });