)}
{mood === 'realistic' && }
{/* Real AI-generated image — fades in on top of the placeholder once loaded */}
{imageUrl && (
{ e.currentTarget.style.display = 'none'; }}
/>
)}
{/* Subtle spinner while generation is in flight */}
{imageLoading && !imageUrl && (
)}
{label && !hideLabel && (
{label}
)}
{caption && !hideCaption && (
{caption}
)}
);
}
// ── Picker ────────────────────────────────────────────────────────────────
// `onEdit` is optional; when provided, each card gets a small ✎ button
// that opens the animal editor instead of picking the animal.
// `onAdd` is optional; when provided, a "➕ Add fighter" tile appears
// first in the grid.
function Picker({ items, onPick, onClose, onEdit, onAdd, title, columns = 7 }) {
const F = useF();
const T = useT();
const lang = useLang();
return (
setZoomed(true) : undefined}
title={hasPortrait ? 'Открыть целиком' : undefined}
style={{
width: 180, height: 180, borderRadius: theme.cardRadius,
background: theme.bg2, border: `1px solid ${theme.line}`,
overflow: 'hidden', position: 'relative',
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: hasPortrait && !busyPortrait ? 'zoom-in' : 'default',
}}>
{hasPortrait ? (
// Small preview uses `cover` — same crop as on the fighter
// slot, so the user sees what the portrait will look like
// in-game. Clicking opens the full uncropped image below.
) : (
{animal.emoji}
{T.noPortraitYet}
)}
{busyPortrait && (
)}
{/* Reference photo strip: either an "attach" button or a
thumbnail with a remove ✕. Sits between the portrait
preview and the regenerate button so the user sees the
reference will be used in the next regen. */}
{reference ? (
{T.reference}
{reference.name}
) : (
)}
{/* Traits */}
{error && (
⚠ {error}
)}
{/* Destructive action sits at the very bottom, dimmed, behind a
confirm dialog, so it can't be tapped by accident. */}
{onDelete && (
)}
{/* Zoomed full-image overlay — `contain` so the whole portrait is
visible, including any margin the model left around the creature. */}
{zoomed && hasPortrait && (
);
}
// ── Script mode: short loading screen while the LLM writes the script ───
function ScriptLoading({ a, b, error, onCancel }) {
const F = useF();
const T = useT();
return (
{a?.emoji || '?'}
VS
{b?.emoji || '?'}
{!error && (
<>
✍️ {T.writingScript}…
{T.scriptHint}
)}
{error && (
<>
⚠ {error}
)}
);
}
// ── Script mode: preview screen with title, synopsis and 3 prompts ───────
function ScriptPreview({ script, a, b, regening, error, onGo, onRegen, onCancel }) {
const F = useF();
const T = useT();
return (
{/* Header */}
{a?.emoji}
vs
{b?.emoji}
📜 {T.scriptPreviewTitle}
{/* Scrollable script content */}
{script.title}
{T.scriptSynopsis}:
{script.synopsis}
{script.frames.map((frame, i) => (
{T.scriptFrame(i)} · {frame.stage}
{frame.prompt}
))}
{error && (
⚠ {error}
)}
{/* Action bar */}
);
}
// ── Loading screen shown while the 3 AI frames are still generating ──────
// `ready` is a map { start, mid, end } where each value is true once that
// frame has finished generating.
function LoadingScreen({ a, b, countA, countB, ready, onClose }) {
const F = useF();
const T = useT();
const stages = ['start', 'mid', 'end'];
const readyCount = stages.filter((s) => ready[s]).length;
return (
{/* Two creature emojis with a vs in the middle, gently swaying. */}
{a?.emoji || '?'}
{countA > 1 && (
×{countA}
)}
VS
{b?.emoji || '?'}
{countB > 1 && (
×{countB}
)}
{T.preparingFrames}…
{/* Three labeled rows — one per frame, with status icon.
Frame 1 generates first (the "anchor"), frames 2 & 3 can only start
after frame 1 is done — so until then they are visually "queued"
rather than spinning. */}
{stages.map((s, i) => {
const status =
ready[s] ? 'done'
: s === 'start' ? 'active'
: ready.start ? 'active'
: 'queued';
const isDone = status === 'done';
const isActive = status === 'active';
const isQueued = status === 'queued';
return (
{isDone && (
✓
)}
{isActive && (
)}
{isQueued && (
⏱
)}
{T.frameNames[i]}
);
})}
{T.framesReady(readyCount)}
);
}
// ── Result slideshow ──────────────────────────────────────────────────────
function ResultView({ fightId, a, b, countA, countB, location, outcome, vote, violence, lang, onReset, onGallery }) {
const F = useF();
const T = useT();
const [frame, setFrame] = React.useState(0);
const [videoState, setVideoState] = React.useState('idle');
const stages = ['start', 'mid', 'end'];
// fightId tri-state:
// number → save succeeded, we can request images
// false → save failed, skip AI and show the placeholder slideshow
// null → still saving, keep showing the loading screen
const hasServerFight = typeof fightId === 'number';
const saveFailed = fightId === false;
// Fetch the three AI images in parallel as soon as we have a server-side
// fight id. We then wait until ALL three are done (success or fail) before
// revealing the slideshow — that way the kid can swipe through frames
// instantly instead of catching them mid-load.
//
// Why we start in the "loading even without a fightId" state: the POST to
// /api/fights happens in parallel with setPhase('result') (which fires after
// a 400ms tween). On a slow network the user lands on this view before the
// fight has a server id — without this default the gating below would
// immediately fall through to the placeholder slideshow.
const [images, setImages] = React.useState({ start: null, mid: null, end: null });
const [loading, setLoading] = React.useState({ start: true, mid: true, end: true });
React.useEffect(() => {
if (!hasServerFight) return;
let cancelled = false;
// Reset state on every fightId change — covers both the initial null→id
// transition and the (rare) refetch case.
setImages({ start: null, mid: null, end: null });
setLoading({ start: true, mid: true, end: true });
stages.forEach((stage) => {
fetch(`/api/fights/${fightId}/images?stage=${stage}`, { method: 'POST' })
.then((r) => (r.ok ? r.json() : Promise.reject(new Error('http ' + r.status))))
.then((payload) => {
if (cancelled) return;
setImages((prev) => ({ ...prev, [stage]: payload.url }));
setLoading((prev) => ({ ...prev, [stage]: false }));
})
.catch((err) => {
if (cancelled) return;
console.warn(`[images] ${stage} failed:`, err.message);
setLoading((prev) => ({ ...prev, [stage]: false }));
});
});
return () => { cancelled = true; };
}, [fightId]);
// Gating: show the loading screen until every image request has settled
// (success or fail). If the fight failed to save, fall through immediately
// to the placeholder slideshow.
const ready = { start: !!images.start, mid: !!images.mid, end: !!images.end };
const allDone = saveFailed || (hasServerFight && stages.every((s) => !loading[s]));
if (!allDone) {
return (
);
}
const captions = lang === 'ru'
? ['Они встретились', 'Бой в разгаре', outcome.winner === 'draw' ? 'Ничья' : `Победил ${(outcome.winner === 'A' ? a : b).name_ru}`]
: ['They meet', 'The clash', outcome.winner === 'draw' ? "It's a draw" : `${(outcome.winner === 'A' ? a : b).name_en} wins`];
const frameLabels = lang === 'ru'
? ['Кадр 1 · начало', 'Кадр 2 · схватка', 'Кадр 3 · финал']
: ['Frame 1 · opening', 'Frame 2 · clash', 'Frame 3 · finale'];
const goTo = (i) => { setFrame(i); };
const prev = () => goTo(Math.max(0, frame - 1));
const next = () => goTo(Math.min(stages.length - 1, frame + 1));
return (
{frame === stages.length - 1 && (
)}
);
}
// ── Gallery ───────────────────────────────────────────────────────────────
function Gallery({ gallery, onClose, onOpen }) {
const F = useF();
const T = useT();
const lang = useLang();
return (
{T.archive}
· {T.battleN(gallery.length)}
{gallery.length === 0 ? (
{T.noFightsYet}
) : (
{gallery.map((g) => {
// Optimistic entries (still saving) have a string id like 'tmp-…'.
// They can't be replayed yet because images need a real server id.
const clickable = typeof g.id === 'number' && !!onOpen;
return (
);
})}