yuanzonghao
a1b6848688
Verify imgRef.current === el before firing onImageReady, so a late-resolving decode from a prior <img> element cannot trigger the gate prematurely. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
774 lines
31 KiB
TypeScript
774 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
|
|
import {
|
|
DialogueHistoryModal,
|
|
type DialogueHistoryItem,
|
|
} from "@/components/DialogueHistoryModal";
|
|
import type { Beat, BeatChoice, Orientation } from "@infiplot/types";
|
|
|
|
export type Phase =
|
|
| "loading-first" // first scene not yet rendered
|
|
| "ready" // current beat is interactive
|
|
| "vision-thinking" // background click → waiting on vision verdict
|
|
| "inserting-beat" // vision-driven beat being generated
|
|
| "transitioning"; // changing scenes (cache miss or speculative wait)
|
|
|
|
const SHADOW =
|
|
"0 1px 0 rgba(45,24,16,0.05), 0 36px 64px -28px rgba(45,24,16,0.25), 0 8px 18px -6px rgba(45,24,16,0.10)";
|
|
|
|
const DEFAULT_CHAR_MS = 28;
|
|
const MIN_CHAR_MS = 30;
|
|
// Voice playback speed multiplier. >1 speeds up the (somewhat slow) MiMo voice
|
|
// while preserving pitch. Typewriter pacing is divided by the same factor.
|
|
const SPEECH_RATE = 1.2;
|
|
// If audio metadata never arrives within this window, give up waiting and
|
|
// let the typewriter run at default speed.
|
|
const AUDIO_WAIT_TIMEOUT_MS = 2500;
|
|
|
|
// ── Typewriter hook ────────────────────────────────────────────────────
|
|
// Returns the progressively-revealed text, a `done` flag, and a `skip()` that
|
|
// instantly completes the current text. Reset is keyed by `resetKey` (the beat
|
|
// id) rather than the text, so a new beat whose line happens to match the
|
|
// previous one still replays from scratch.
|
|
//
|
|
// When `targetDurationMs` is provided we space characters to span that audio
|
|
// duration, keeping text and voice in lockstep. While `waitForAudio` is true
|
|
// and we don't yet know a duration, the typewriter holds (so text doesn't
|
|
// race ahead of an audio that's still loading).
|
|
function useTypewriter(
|
|
text: string,
|
|
resetKey: string,
|
|
opts: { targetDurationMs?: number; waitForAudio: boolean } = {
|
|
waitForAudio: false,
|
|
},
|
|
): { shown: string; done: boolean; skip: () => void } {
|
|
const { targetDurationMs, waitForAudio } = opts;
|
|
const [displayed, setDisplayed] = useState("");
|
|
const [prevKey, setPrevKey] = useState(resetKey);
|
|
const timer = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
// Sticky once the player has skipped this beat: prevents a late-arriving
|
|
// audio metadata event from re-triggering the effect and replaying the text.
|
|
const skippedRef = useRef(false);
|
|
|
|
// Render-phase reset (React "adjust state on prop change" pattern): when the
|
|
// beat changes, drop the old progress before this render commits.
|
|
if (resetKey !== prevKey) {
|
|
setPrevKey(resetKey);
|
|
setDisplayed("");
|
|
skippedRef.current = false;
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!text) return;
|
|
// `=== undefined` (not `!targetDurationMs`): 0 means "audio failed or
|
|
// timed out — run at default speed". The original truthy check stalled
|
|
// the typewriter forever on those fallback paths.
|
|
if (waitForAudio && targetDurationMs === undefined) return;
|
|
// If the player skipped, settle on the full text and don't restart even
|
|
// when audio metadata arrives late and re-triggers this effect.
|
|
if (skippedRef.current) {
|
|
setDisplayed(text);
|
|
return;
|
|
}
|
|
|
|
const speed =
|
|
targetDurationMs && text.length > 0
|
|
? Math.max(MIN_CHAR_MS, targetDurationMs / text.length)
|
|
: DEFAULT_CHAR_MS;
|
|
|
|
let i = 0;
|
|
timer.current = setInterval(() => {
|
|
i += 1;
|
|
setDisplayed(text.slice(0, i));
|
|
if (i >= text.length && timer.current) {
|
|
clearInterval(timer.current);
|
|
timer.current = null;
|
|
}
|
|
}, speed);
|
|
return () => {
|
|
if (timer.current) clearInterval(timer.current);
|
|
timer.current = null;
|
|
};
|
|
}, [resetKey, text, targetDurationMs, waitForAudio]);
|
|
|
|
const skip = useCallback(() => {
|
|
if (timer.current) {
|
|
clearInterval(timer.current);
|
|
timer.current = null;
|
|
}
|
|
skippedRef.current = true;
|
|
setDisplayed(text);
|
|
}, [text]);
|
|
|
|
// During the throwaway render where the beat just changed, `displayed` still
|
|
// holds the previous beat's text — coerce it to empty so nothing stale shows.
|
|
const shown = resetKey === prevKey ? displayed : "";
|
|
const done = text.length === 0 || shown.length >= text.length;
|
|
return { shown, done, skip };
|
|
}
|
|
|
|
// ── Choice button ──────────────────────────────────────────────────────
|
|
function ChoiceButton({
|
|
index,
|
|
label,
|
|
disabled,
|
|
disabledTitle,
|
|
vertical,
|
|
onClick,
|
|
}: {
|
|
index: number;
|
|
label: string;
|
|
disabled: boolean;
|
|
disabledTitle?: string;
|
|
vertical: boolean;
|
|
onClick: () => void;
|
|
}) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
title={disabledTitle}
|
|
onClick={onClick}
|
|
className={`group relative ${vertical ? "w-full" : "flex-1 min-w-0"} px-4 py-3 text-left transition-all duration-200
|
|
disabled:opacity-45 disabled:cursor-not-allowed`}
|
|
style={{
|
|
background: "rgba(20, 14, 8, 0.68)",
|
|
border: "1.5px solid rgba(180, 140, 80, 0.65)",
|
|
borderRadius: "6px",
|
|
backdropFilter: "blur(8px)",
|
|
WebkitBackdropFilter: "blur(8px)",
|
|
boxShadow: "0 2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(200,165,90,0.12)",
|
|
}}
|
|
>
|
|
<span
|
|
className="absolute inset-0 rounded-[5px] opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none"
|
|
style={{
|
|
background: "rgba(180,140,60,0.10)",
|
|
border: "1.5px solid rgba(200,165,90,0.85)",
|
|
}}
|
|
/>
|
|
<span className="relative flex items-baseline gap-2">
|
|
<span
|
|
className={`shrink-0 font-serif num ${vertical ? "text-[13px]" : "text-[11px]"}`}
|
|
style={{ color: "rgba(195,155,75,0.9)" }}
|
|
>
|
|
{index + 1}.
|
|
</span>
|
|
<span
|
|
className={`font-serif leading-snug ${vertical ? "text-[15px]" : "text-[13px] md:text-[14px]"}`}
|
|
style={{ color: "rgba(245,235,210,0.95)" }}
|
|
>
|
|
{label}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// ── Main component ─────────────────────────────────────────────────────
|
|
export function PlayCanvas({
|
|
imageUrl,
|
|
audioSrc,
|
|
muted,
|
|
phase,
|
|
beat,
|
|
pendingClick,
|
|
onBackgroundClick,
|
|
onAdvance,
|
|
onSelectChoice,
|
|
onFreeformInput,
|
|
fullViewport = false,
|
|
orientation = "landscape",
|
|
playerName,
|
|
visionClickEnabled = true,
|
|
onOpenSettings,
|
|
onImageReady,
|
|
aboveCanvas,
|
|
aboveCanvasLeft,
|
|
belowCanvas,
|
|
dialogueHistory = [],
|
|
disabledChoiceIds = [],
|
|
freeformDisabled = false,
|
|
}: {
|
|
imageUrl: string | null;
|
|
audioSrc: string | null;
|
|
muted: boolean;
|
|
phase: Phase;
|
|
beat: Beat | null;
|
|
pendingClick: { x: number; y: number } | null;
|
|
onBackgroundClick: (click: { x: number; y: number }) => void;
|
|
onAdvance: () => void;
|
|
onSelectChoice: (choice: BeatChoice) => void;
|
|
onFreeformInput?: (text: string) => void;
|
|
fullViewport?: boolean;
|
|
// 会话锁定的图片朝向。"portrait" 时整图铺满视口（object-fit:cover）、选项竖排、字号放大。
|
|
orientation?: Orientation;
|
|
playerName?: string;
|
|
// 选择节点点击背景是否触发识图。关闭时背景点击保持静默，用户只能点选项。
|
|
visionClickEnabled?: boolean;
|
|
onOpenSettings?: () => void;
|
|
onImageReady?: () => void;
|
|
// 渲染在图片正上方、右对齐的 slot（画面外、紧贴右上角）。
|
|
aboveCanvas?: ReactNode;
|
|
// 渲染在图片正上方、左对齐的 slot（画面外、紧贴左上角），与 aboveCanvas 水平镜像。
|
|
aboveCanvasLeft?: ReactNode;
|
|
// 渲染在图片正下方、右对齐的 slot（画面外、紧贴右下角），与 aboveCanvas 垂直镜像。
|
|
belowCanvas?: ReactNode;
|
|
dialogueHistory?: DialogueHistoryItem[];
|
|
disabledChoiceIds?: readonly string[];
|
|
freeformDisabled?: boolean;
|
|
}) {
|
|
const imgRef = useRef<HTMLImageElement>(null);
|
|
const audioRef = useRef<HTMLAudioElement>(null);
|
|
const [historyOpen, setHistoryOpen] = useState(false);
|
|
const [freeformOpen, setFreeformOpen] = useState(false);
|
|
const [freeformText, setFreeformText] = useState("");
|
|
const freeformInputRef = useRef<HTMLInputElement>(null);
|
|
const displaySpeaker = (s: string | undefined) =>
|
|
s === "你" && playerName ? playerName : s;
|
|
const [audioDurationMs, setAudioDurationMs] = useState<number | undefined>(
|
|
undefined,
|
|
);
|
|
|
|
const isChoiceBeat = beat?.next.type === "choice";
|
|
const choices: BeatChoice[] = isChoiceBeat
|
|
? (beat!.next as { type: "choice"; choices: BeatChoice[] }).choices
|
|
: [];
|
|
const disabledChoices = new Set(disabledChoiceIds);
|
|
|
|
const displayBody = beat?.speaker ? beat.line ?? "" : beat?.narration ?? "";
|
|
const { shown: typedBody, done: typingDone, skip: skipTypewriter } =
|
|
useTypewriter(displayBody, beat?.id ?? "", {
|
|
targetDurationMs: audioDurationMs,
|
|
waitForAudio: Boolean(audioSrc),
|
|
});
|
|
|
|
// ── Audio source change ──────────────────────────────────────────────
|
|
// Reset duration when audio source changes; if loading takes too long,
|
|
// unblock the typewriter via timeout so text doesn't stall.
|
|
useEffect(() => {
|
|
setAudioDurationMs(undefined);
|
|
if (!audioSrc) return;
|
|
const timer = setTimeout(() => {
|
|
setAudioDurationMs((prev) => prev ?? 0);
|
|
}, AUDIO_WAIT_TIMEOUT_MS);
|
|
return () => clearTimeout(timer);
|
|
}, [audioSrc]);
|
|
|
|
// ── Mute toggle ───────────────────────────────────────────────────────
|
|
useEffect(() => {
|
|
const el = audioRef.current;
|
|
if (!el) return;
|
|
el.muted = muted;
|
|
el.playbackRate = SPEECH_RATE;
|
|
if (!muted && audioSrc && el.paused) {
|
|
el.play().catch(() => {
|
|
// autoplay blocked — silent until next interaction
|
|
});
|
|
}
|
|
}, [muted, audioSrc]);
|
|
|
|
function handleAudioMetadata() {
|
|
const el = audioRef.current;
|
|
if (!el) return;
|
|
el.playbackRate = SPEECH_RATE;
|
|
// Effective playback time is shorter once sped up — keep the typewriter in sync.
|
|
const ms = Number.isFinite(el.duration)
|
|
? (el.duration * 1000) / SPEECH_RATE
|
|
: 0;
|
|
setAudioDurationMs(ms > 0 ? ms : 0);
|
|
if (!muted) {
|
|
el.play().catch(() => {
|
|
// autoplay blocked
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleAudioError() {
|
|
// Treat as zero duration so the typewriter runs at default speed.
|
|
setAudioDurationMs(0);
|
|
}
|
|
|
|
function handleImageClick(e: React.MouseEvent<HTMLImageElement>) {
|
|
if (phase !== "ready" || !beat) return;
|
|
if (!typingDone) {
|
|
skipTypewriter();
|
|
return;
|
|
}
|
|
if (beat.next.type === "continue") {
|
|
onAdvance();
|
|
return;
|
|
}
|
|
if (freeformDisabled || !visionClickEnabled || !imgRef.current) return;
|
|
const el = imgRef.current;
|
|
const rect = el.getBoundingClientRect();
|
|
let x: number;
|
|
let y: number;
|
|
if (orientation === "portrait") {
|
|
const nw = el.naturalWidth || 1024;
|
|
const nh = el.naturalHeight || 1792;
|
|
const scale = Math.max(rect.width / nw, rect.height / nh);
|
|
const dispW = nw * scale;
|
|
const dispH = nh * scale;
|
|
x = (e.clientX - rect.left + (dispW - rect.width) / 2) / dispW;
|
|
y = (e.clientY - rect.top + (dispH - rect.height) / 2) / dispH;
|
|
} else {
|
|
x = (e.clientX - rect.left) / rect.width;
|
|
y = (e.clientY - rect.top) / rect.height;
|
|
}
|
|
onBackgroundClick({
|
|
x: Math.max(0, Math.min(1, x)),
|
|
y: Math.max(0, Math.min(1, y)),
|
|
});
|
|
}
|
|
|
|
// Card swallows its own clicks so they never fall through to the image's
|
|
// vision (识图) trigger: while typing a click completes the text, a continue
|
|
// beat advances, and a choice beat stays inert (player must pick an option).
|
|
function handleCardClick() {
|
|
if (phase !== "ready" || !beat) return;
|
|
if (!typingDone) {
|
|
skipTypewriter();
|
|
return;
|
|
}
|
|
if (beat.next.type === "continue") onAdvance();
|
|
}
|
|
|
|
const interactive = phase === "ready" && !!imageUrl;
|
|
const imageClickable =
|
|
interactive &&
|
|
(!typingDone ||
|
|
beat?.next.type === "continue" ||
|
|
(visionClickEnabled && !freeformDisabled));
|
|
const dimmed = phase === "transitioning";
|
|
|
|
const portrait = orientation === "portrait";
|
|
const intrinsicW = portrait ? 1024 : 1792;
|
|
const intrinsicH = portrait ? 1792 : 1024;
|
|
|
|
// Portrait (mobile) always fills the whole viewport with object-fit:cover so
|
|
// the 9:16 image matches the exact device/window — no letterbox. Landscape
|
|
// keeps the prior contain-style sizing so the full 16:9 frame stays visible.
|
|
const sizeStyle: React.CSSProperties = portrait
|
|
? { width: "100%", height: "100%", objectFit: "cover" }
|
|
: fullViewport
|
|
? { width: "100%", height: "100%", objectFit: "contain" }
|
|
: { width: "100%", height: "100%" };
|
|
|
|
const canvasStyle: React.CSSProperties = portrait
|
|
? { width: "100vw", height: "100dvh" }
|
|
: {
|
|
width: fullViewport
|
|
? "min(100vw, calc(100dvh * 16 / 9))"
|
|
: "min(96vw, calc((100dvh - 200px) * 16 / 9))",
|
|
aspectRatio: "16 / 9",
|
|
maxHeight: fullViewport ? "100dvh" : "calc(100dvh - 200px)",
|
|
};
|
|
|
|
const placeholderStyle: React.CSSProperties = portrait
|
|
? { width: "100vw", height: "100dvh" }
|
|
: {
|
|
width: fullViewport
|
|
? "min(100vw, calc(100dvh * 16 / 9))"
|
|
: "min(96vw, calc((100dvh - 200px) * 16 / 9))",
|
|
};
|
|
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-col items-center ${fullViewport ? "w-full h-full justify-center" : "w-full"}`}
|
|
>
|
|
{/* Hidden audio element — voice playback for the current beat */}
|
|
{audioSrc && (
|
|
<audio
|
|
key={audioSrc.slice(-48)}
|
|
ref={audioRef}
|
|
src={audioSrc}
|
|
preload="auto"
|
|
onLoadedMetadata={handleAudioMetadata}
|
|
onError={handleAudioError}
|
|
className="hidden"
|
|
/>
|
|
)}
|
|
|
|
{imageUrl ? (
|
|
<div
|
|
className="relative"
|
|
style={{ ...canvasStyle, boxShadow: fullViewport ? "none" : SHADOW }}
|
|
>
|
|
{/* The stable wrapper owns the frame size. Keeping overlay geometry
|
|
independent of <img> decode/source swaps prevents controls from
|
|
jumping when a newly generated image is committed. */}
|
|
<img
|
|
key={imageUrl}
|
|
ref={imgRef}
|
|
src={imageUrl}
|
|
width={intrinsicW}
|
|
height={intrinsicH}
|
|
alt="Generated scene"
|
|
onClick={handleImageClick}
|
|
draggable={false}
|
|
onLoad={() => {
|
|
if (!onImageReady) return;
|
|
const el = imgRef.current;
|
|
if (!el) { onImageReady(); return; }
|
|
const notify = () => { if (imgRef.current === el) onImageReady(); };
|
|
el.decode().then(notify, notify);
|
|
}}
|
|
className={`block select-none animate-fade-in transition-opacity duration-700 ease-out ${
|
|
imageClickable ? "cursor-pointer" : interactive ? "cursor-default" : "cursor-wait"
|
|
} ${dimmed ? "opacity-40" : "opacity-100"}`}
|
|
style={sizeStyle}
|
|
/>
|
|
|
|
{!fullViewport && (
|
|
<div className="absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-clay-900/12 to-transparent pointer-events-none" />
|
|
)}
|
|
|
|
{/* 画面正上方右对齐的 slot —— 用 bottom-full + right-0 让它整体浮在图片之外、紧贴右上角 */}
|
|
{!fullViewport && aboveCanvas && (
|
|
<div className="absolute bottom-full right-0 mb-2 flex items-center gap-2">
|
|
{aboveCanvas}
|
|
</div>
|
|
)}
|
|
{!fullViewport && aboveCanvasLeft && (
|
|
<div className="absolute bottom-full left-0 mb-2 flex items-center gap-2">
|
|
{aboveCanvasLeft}
|
|
</div>
|
|
)}
|
|
{!fullViewport && belowCanvas && (
|
|
<div className="absolute top-full right-0 mt-2 flex items-center gap-2">
|
|
{belowCanvas}
|
|
</div>
|
|
)}
|
|
|
|
{beat && (
|
|
<div
|
|
className="absolute inset-0 flex flex-col justify-end pointer-events-none select-none"
|
|
style={
|
|
portrait
|
|
? { paddingBottom: "env(safe-area-inset-bottom)" }
|
|
: undefined
|
|
}
|
|
>
|
|
{historyOpen && (
|
|
<DialogueHistoryModal
|
|
items={dialogueHistory}
|
|
portrait={portrait}
|
|
onClose={() => setHistoryOpen(false)}
|
|
playerName={playerName}
|
|
/>
|
|
)}
|
|
|
|
{choices.length > 0 && (
|
|
<div
|
|
className={`pointer-events-auto px-[3%] pb-[1.5%] flex items-stretch ${
|
|
portrait
|
|
? "vn-scrollbar flex-col gap-2 max-h-[45dvh] overflow-y-auto"
|
|
: "gap-[1.5%]"
|
|
}`}
|
|
>
|
|
{freeformOpen && onFreeformInput ? (
|
|
/* ── Expanded: full-width input replaces all choices ── */
|
|
<div
|
|
className="flex-1 flex items-center gap-2"
|
|
style={{
|
|
background: "rgba(20, 14, 8, 0.68)",
|
|
border: "1.5px solid rgba(180, 140, 80, 0.65)",
|
|
borderRadius: "6px",
|
|
backdropFilter: "blur(8px)",
|
|
WebkitBackdropFilter: "blur(8px)",
|
|
boxShadow: "0 2px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(200,165,90,0.12)",
|
|
padding: "8px 12px",
|
|
}}
|
|
>
|
|
<input
|
|
ref={freeformInputRef}
|
|
value={freeformText}
|
|
onChange={(e) => setFreeformText(e.target.value.slice(0, 50))}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.nativeEvent.isComposing && freeformText.trim() && phase === "ready") {
|
|
onFreeformInput(freeformText.trim());
|
|
setFreeformOpen(false);
|
|
setFreeformText("");
|
|
} else if (e.key === "Escape") {
|
|
setFreeformOpen(false);
|
|
setFreeformText("");
|
|
}
|
|
}}
|
|
placeholder="输入你想说的或想做的..."
|
|
maxLength={50}
|
|
autoFocus
|
|
className="flex-1 min-w-0 bg-transparent border-none outline-none font-serif text-[14px] placeholder:text-[rgba(200,185,155,0.50)]"
|
|
style={{ color: "rgba(245,235,210,0.95)" }}
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={!freeformText.trim() || phase !== "ready"}
|
|
onClick={() => {
|
|
if (freeformText.trim()) {
|
|
onFreeformInput(freeformText.trim());
|
|
setFreeformOpen(false);
|
|
setFreeformText("");
|
|
}
|
|
}}
|
|
className="shrink-0 flex items-center justify-center w-8 h-8 rounded-sm transition-colors disabled:opacity-30"
|
|
style={{ color: "rgba(195,155,75,0.9)" }}
|
|
>
|
|
<i className="fa-solid fa-paper-plane text-[12px]" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setFreeformOpen(false); setFreeformText(""); }}
|
|
className="shrink-0 flex items-center justify-center w-8 h-8 rounded-sm transition-colors"
|
|
style={{ color: "rgba(200,185,155,0.55)" }}
|
|
>
|
|
<i className="fa-solid fa-xmark text-[13px]" />
|
|
</button>
|
|
</div>
|
|
) : (
|
|
/* ── Collapsed: normal choices + small freeform trigger ── */
|
|
<>
|
|
{choices.map((choice, i) => (
|
|
<ChoiceButton
|
|
key={choice.id}
|
|
index={i}
|
|
label={choice.label}
|
|
disabled={phase !== "ready" || disabledChoices.has(choice.id)}
|
|
disabledTitle={disabledChoices.has(choice.id) ? "分享剧情未包含这条分支" : undefined}
|
|
vertical={portrait}
|
|
onClick={() => onSelectChoice(choice)}
|
|
/>
|
|
))}
|
|
{onFreeformInput && !freeformDisabled && (
|
|
<button
|
|
type="button"
|
|
disabled={phase !== "ready"}
|
|
onClick={() => {
|
|
setFreeformOpen(true);
|
|
requestAnimationFrame(() => freeformInputRef.current?.focus());
|
|
}}
|
|
className="group shrink-0 flex items-center justify-center transition-all duration-200 disabled:opacity-50 disabled:cursor-wait"
|
|
style={{
|
|
background: "rgba(20, 14, 8, 0.45)",
|
|
border: "1.5px dashed rgba(180, 140, 80, 0.40)",
|
|
borderRadius: "6px",
|
|
backdropFilter: "blur(8px)",
|
|
WebkitBackdropFilter: "blur(8px)",
|
|
width: portrait ? "100%" : "42px",
|
|
padding: portrait ? "10px 16px" : "0",
|
|
}}
|
|
title="自由输入"
|
|
>
|
|
<span
|
|
className="opacity-0 group-hover:opacity-100 absolute inset-0 rounded-[5px] transition-opacity duration-200 pointer-events-none"
|
|
style={{
|
|
background: "rgba(180,140,60,0.08)",
|
|
border: "1.5px dashed rgba(200,165,90,0.70)",
|
|
}}
|
|
/>
|
|
{portrait ? (
|
|
<span className="relative flex items-center gap-2">
|
|
<i
|
|
className="fa-solid fa-pen-to-square text-[11px]"
|
|
style={{ color: "rgba(195,155,75,0.60)" }}
|
|
/>
|
|
<span
|
|
className="font-serif text-[13px]"
|
|
style={{ color: "rgba(200,185,155,0.70)" }}
|
|
>
|
|
自由输入
|
|
</span>
|
|
</span>
|
|
) : (
|
|
<i
|
|
className="fa-solid fa-pen-to-square text-[12px] relative"
|
|
style={{ color: "rgba(195,155,75,0.55)" }}
|
|
/>
|
|
)}
|
|
</button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{(beat.narration || beat.line) && (
|
|
<div
|
|
className="pointer-events-auto mx-[2%] mb-[2%] px-[3%] py-[2.2%] relative"
|
|
onClick={handleCardClick}
|
|
style={{
|
|
background: "rgba(14, 10, 6, 0.72)",
|
|
border: "1.5px solid rgba(175, 138, 72, 0.60)",
|
|
borderRadius: "6px",
|
|
backdropFilter: "blur(10px)",
|
|
WebkitBackdropFilter: "blur(10px)",
|
|
boxShadow:
|
|
"0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(200,165,90,0.10)",
|
|
}}
|
|
>
|
|
<span
|
|
className="absolute top-[6px] left-[8px] text-[10px] opacity-40 pointer-events-none"
|
|
style={{ color: "rgba(195,155,75,1)" }}
|
|
aria-hidden
|
|
>
|
|
✦
|
|
</span>
|
|
<span
|
|
className="absolute top-[6px] right-[8px] text-[10px] opacity-40 pointer-events-none"
|
|
style={{ color: "rgba(195,155,75,1)" }}
|
|
aria-hidden
|
|
>
|
|
✦
|
|
</span>
|
|
|
|
{beat.speaker && (
|
|
<p
|
|
className={`font-serif smallcaps mb-[0.6em] ${
|
|
portrait ? "text-[13px]" : "text-[11px] md:text-[12px]"
|
|
}`}
|
|
style={{ color: "rgba(205,165,90,0.92)" }}
|
|
>
|
|
{displaySpeaker(beat.speaker)}
|
|
</p>
|
|
)}
|
|
|
|
<p
|
|
className={`font-serif leading-[1.85] ${
|
|
portrait ? "text-[16px]" : "text-[13px] md:text-[15px]"
|
|
}`}
|
|
style={{ color: "rgba(245,235,210,0.95)" }}
|
|
>
|
|
{typedBody}
|
|
{beat.speaker && beat.narration && (
|
|
<span
|
|
className={`block mt-[0.5em] italic transition-opacity duration-300 ${
|
|
portrait ? "text-[14px]" : "text-[12px] md:text-[13px]"
|
|
} ${typingDone ? "opacity-100" : "opacity-0"}`}
|
|
style={{ color: "rgba(200,185,155,0.78)" }}
|
|
aria-hidden={!typingDone}
|
|
>
|
|
{beat.narration}
|
|
</span>
|
|
)}
|
|
</p>
|
|
|
|
{typingDone && beat.next.type === "continue" && (
|
|
<span
|
|
className={`absolute bottom-[6px] ${onOpenSettings ? "right-[74px]" : "right-[42px]"} text-[10px] animate-slow-pulse`}
|
|
style={{ color: "rgba(195,155,75,0.7)" }}
|
|
aria-hidden
|
|
>
|
|
▼
|
|
</span>
|
|
)}
|
|
|
|
{onOpenSettings && (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onOpenSettings();
|
|
}}
|
|
className="absolute bottom-[6px] right-[8px] flex h-7 w-7 items-center justify-center text-[rgba(195,155,75,0.78)] transition-colors hover:text-[rgba(245,235,210,0.96)]"
|
|
aria-label="打开设置"
|
|
title="设置"
|
|
>
|
|
<i className="fa-solid fa-gear text-[12px]" />
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setHistoryOpen(true);
|
|
}}
|
|
className={`absolute bottom-[6px] ${
|
|
onOpenSettings ? "right-[40px]" : "right-[8px]"
|
|
} flex h-7 w-7 items-center justify-center text-[rgba(195,155,75,0.78)] transition-colors hover:text-[rgba(245,235,210,0.96)]`}
|
|
aria-label="打开剧情回溯"
|
|
title="剧情回溯"
|
|
>
|
|
<i className="fa-solid fa-clock-rotate-left text-[12px]" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{(phase === "transitioning" || phase === "inserting-beat") && (
|
|
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<p className="text-[10px] smallcaps text-cream-50/70 animate-slow-pulse">
|
|
{phase === "transitioning"
|
|
? "AI · 正 · 在 · 描 · 画 · 下 · 一 · 幕"
|
|
: "AI · 正 · 在 · 想 · 你 · 看 · 到 · 了 · 什 · 么"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{pendingClick && (
|
|
<>
|
|
<div
|
|
className="absolute rounded-full border border-ember-500 pointer-events-none"
|
|
style={{
|
|
left: `${pendingClick.x * 100}%`,
|
|
top: `${pendingClick.y * 100}%`,
|
|
transform: "translate(-50%, -50%)",
|
|
width: 30,
|
|
height: 30,
|
|
animation:
|
|
"infiplot-ripple 1.6s cubic-bezier(0.16,1,0.3,1) infinite",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute rounded-full pointer-events-none"
|
|
style={{
|
|
left: `${pendingClick.x * 100}%`,
|
|
top: `${pendingClick.y * 100}%`,
|
|
transform: "translate(-50%, -50%)",
|
|
width: 11,
|
|
height: 11,
|
|
background: "#D97A2E",
|
|
boxShadow:
|
|
"0 0 0 3px rgba(251,247,240,0.95), 0 0 14px rgba(217,122,46,0.55)",
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div
|
|
className={`relative bg-cream-200 flex flex-col items-center justify-center gap-4 ${
|
|
portrait ? "" : "aspect-video"
|
|
}`}
|
|
style={{ ...placeholderStyle, boxShadow: fullViewport ? "none" : SHADOW }}
|
|
>
|
|
<div className="w-1.5 h-1.5 bg-clay-500 rounded-full animate-slow-pulse" />
|
|
<p className="text-[9px] smallcaps text-clay-500 animate-slow-pulse">
|
|
正 · 在 · 绘 · 制 · 第 · 一 · 幕
|
|
</p>
|
|
{/* 加载占位也挂同一对 slot，让右上 / 左上的操作按钮在第一帧就出现 */}
|
|
{!fullViewport && aboveCanvas && (
|
|
<div className="absolute bottom-full right-0 mb-2 flex items-center gap-2">
|
|
{aboveCanvas}
|
|
</div>
|
|
)}
|
|
{!fullViewport && aboveCanvasLeft && (
|
|
<div className="absolute bottom-full left-0 mb-2 flex items-center gap-2">
|
|
{aboveCanvasLeft}
|
|
</div>
|
|
)}
|
|
{!fullViewport && belowCanvas && (
|
|
<div className="absolute top-full right-0 mt-2 flex items-center gap-2">
|
|
{belowCanvas}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|