249 lines
8.6 KiB
TypeScript
249 lines
8.6 KiB
TypeScript
import { useState, useEffect, useMemo, useCallback } from "react";
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { cn, getStaticImage } from "@/lib/utils";
|
|
import { Image, StudyGuideModal } from "@/components";
|
|
import { SuccessAlert, ErrorAlert } from "@/components/layout";
|
|
|
|
export interface ChoiceDialog1Props {
|
|
/** 是否可见 */
|
|
visible?: boolean;
|
|
/** 关闭回调 */
|
|
onClose?: () => void;
|
|
/** 选择回调 */
|
|
onSelect?: (choice: "读书" | "没出息" | "女子不能上学") => void;
|
|
}
|
|
|
|
/**
|
|
* 第一个选择弹窗：人物和三个选择
|
|
* - 使用蒙版遮罩作为背景
|
|
* - 显示人物10_004和三个选择选项
|
|
*/
|
|
const ChoiceDialog1 = ({
|
|
visible = true,
|
|
onClose,
|
|
onSelect,
|
|
}: ChoiceDialog1Props) => {
|
|
const maskSrc = getStaticImage("components/蒙版遮罩");
|
|
const backSrc = getStaticImage("components/关闭");
|
|
const characterSrc = getStaticImage("huangyanpei/reflection/scene2/10_004");
|
|
const choice1Src = getStaticImage("huangyanpei/reflection/scene2/10_005");
|
|
const choice2Src = getStaticImage("huangyanpei/reflection/scene2/10_006");
|
|
const choice3Src = getStaticImage("huangyanpei/reflection/scene2/10_007");
|
|
|
|
const [mounted, setMounted] = useState(false);
|
|
const [showGuide, setShowGuide] = useState(false);
|
|
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
|
const [showErrorAlert, setShowErrorAlert] = useState(false);
|
|
|
|
// SSR 兼容
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (visible) {
|
|
setShowGuide(true);
|
|
setShowSuccessAlert(false);
|
|
setShowErrorAlert(false);
|
|
} else {
|
|
setShowGuide(false);
|
|
}
|
|
}, [visible]);
|
|
|
|
const handleClose = useCallback(
|
|
(e: React.MouseEvent<HTMLImageElement>) => {
|
|
e.stopPropagation();
|
|
onClose?.();
|
|
},
|
|
[onClose]
|
|
);
|
|
|
|
const handleChoiceClick = useCallback(
|
|
(choice: "读书" | "没出息" | "女子不能上学") => {
|
|
if (choice === "读书") {
|
|
setShowGuide(false);
|
|
setShowSuccessAlert(true);
|
|
onSelect?.(choice);
|
|
} else {
|
|
setShowErrorAlert(true);
|
|
}
|
|
},
|
|
[onSelect]
|
|
);
|
|
|
|
// 样式
|
|
const overlayStyle = useMemo<React.CSSProperties>(
|
|
() => ({
|
|
position: "fixed",
|
|
inset: 0,
|
|
zIndex: 9999,
|
|
pointerEvents: "none",
|
|
}),
|
|
[]
|
|
);
|
|
|
|
if (!mounted) return null;
|
|
|
|
const content = (
|
|
<AnimatePresence>
|
|
{visible && (
|
|
<motion.div
|
|
key="choice-dialog-1"
|
|
style={overlayStyle}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3, ease: "easeInOut" }}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"fixed inset-0 flex flex-col items-center justify-center",
|
|
"bg-black/70"
|
|
)}
|
|
style={{ pointerEvents: "auto" }}
|
|
>
|
|
{/* 背景蒙版 */}
|
|
{maskSrc && (
|
|
<Image
|
|
src={maskSrc}
|
|
className="absolute inset-0 w-full h-full object-cover select-none pointer-events-none"
|
|
aria-hidden
|
|
/>
|
|
)}
|
|
|
|
<StudyGuideModal
|
|
visible={showGuide}
|
|
onContinue={() => setShowGuide(false)}
|
|
verticalAlign="center"
|
|
>
|
|
黄校长来考你啦！他设计这所学校，就是为了让学生摆脱旧观念，你知道是哪种吗？
|
|
</StudyGuideModal>
|
|
|
|
{/* 返回按钮 */}
|
|
{onClose && (
|
|
<Image
|
|
src={backSrc}
|
|
onClick={handleClose}
|
|
alt="返回"
|
|
className="absolute top-5 right-5 z-20"
|
|
button
|
|
/>
|
|
)}
|
|
|
|
{/* 内容区域 */}
|
|
<div className="relative z-10 w-full h-full flex items-center justify-between px-20">
|
|
{/* 人物 - 左侧 */}
|
|
<div className="flex-shrink-0">
|
|
<img src={characterSrc} alt="人物" />
|
|
</div>
|
|
|
|
{/* 三个选择选项 - 右侧水平排列 */}
|
|
<div className="flex items-center justify-center gap-16 flex-1">
|
|
{/* 选择A：读书 */}
|
|
<div
|
|
className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
|
|
onClick={() => handleChoiceClick("读书")}
|
|
>
|
|
{/* 标签A */}
|
|
<div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
|
|
A
|
|
</div>
|
|
{/* 图标 */}
|
|
<img src={choice1Src} alt="读书" className="mb-3" />
|
|
{/* 文字说明 */}
|
|
<div className="text-black text-4xl text-center leading-relaxed font-bold">
|
|
读书只为
|
|
<br />
|
|
升官发财
|
|
</div>
|
|
</div>
|
|
|
|
{/* 选择B：没出息 */}
|
|
<div
|
|
className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
|
|
onClick={() => handleChoiceClick("没出息")}
|
|
>
|
|
{/* 标签B */}
|
|
<div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
|
|
B
|
|
</div>
|
|
{/* 图标 */}
|
|
<img src={choice2Src} alt="没出息" className="mb-3" />
|
|
{/* 文字说明 */}
|
|
<div className="text-black text-4xl text-center leading-relaxed font-bold">
|
|
手工劳作
|
|
<br />
|
|
没出息
|
|
</div>
|
|
</div>
|
|
|
|
{/* 选择C：女子不能上学 */}
|
|
<div
|
|
className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
|
|
onClick={() => handleChoiceClick("女子不能上学")}
|
|
>
|
|
{/* 标签C */}
|
|
<div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
|
|
C
|
|
</div>
|
|
{/* 图标 */}
|
|
<img src={choice3Src} alt="女子不能上学" className="mb-3" />
|
|
{/* 文字说明 */}
|
|
<div className="text-black text-4xl text-center leading-relaxed font-bold">
|
|
女子
|
|
<br />
|
|
不能上学
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<SuccessAlert
|
|
visible={showSuccessAlert}
|
|
title="任务1 正确反馈"
|
|
content="答对啦！黄先生说“教育要为国家培养实干人才”，浦东中学就是要教大家学真本事，不是只为当官。"
|
|
onContinue={() => {
|
|
setShowSuccessAlert(false);
|
|
onClose?.();
|
|
}}
|
|
onClose={() => {
|
|
setShowSuccessAlert(false);
|
|
onClose?.();
|
|
}}
|
|
/>
|
|
|
|
<ErrorAlert
|
|
visible={showErrorAlert}
|
|
text="不对哦~黄先生虽然反对歧视女子、轻视手工，但创办浦东中学的核心是打破“读书只为当官”的旧思想，再选一次吧！"
|
|
onClose={() => setShowErrorAlert(false)}
|
|
/>
|
|
|
|
<SuccessAlert
|
|
visible={showSuccessAlert}
|
|
content="答对啦！黄先生说“教育要为国家培养实干人才”，浦东中学就是要教大家学真本事，不是只为当官。"
|
|
onContinue={() => {
|
|
setShowSuccessAlert(false);
|
|
onClose?.();
|
|
}}
|
|
onClose={() => {
|
|
setShowSuccessAlert(false);
|
|
onClose?.();
|
|
}}
|
|
/>
|
|
|
|
<ErrorAlert
|
|
visible={showErrorAlert}
|
|
text="不对哦~黄先生虽然反对歧视女子、轻视手工，但创办浦东中学的核心是打破“读书只为当官”的旧思想，再选一次吧！"
|
|
onClose={() => setShowErrorAlert(false)}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
|
|
return content;
|
|
};
|
|
|
|
export default ChoiceDialog1;
|