diff --git a/src/assets/images/sunzhongshan/reflection/scene3/窃窃私语.png b/src/assets/images/sunzhongshan/reflection/scene3/窃窃私语.png new file mode 100644 index 0000000..049c90b Binary files /dev/null and b/src/assets/images/sunzhongshan/reflection/scene3/窃窃私语.png differ diff --git a/src/assets/images/sunzhongshan/reflection/线索提示.png b/src/assets/images/sunzhongshan/reflection/线索提示.png new file mode 100644 index 0000000..534bf0b Binary files /dev/null and b/src/assets/images/sunzhongshan/reflection/线索提示.png differ diff --git a/src/components/guide/StudyGuideModal.tsx b/src/components/guide/StudyGuideModal.tsx index 0cdd651..db1e2c0 100644 --- a/src/components/guide/StudyGuideModal.tsx +++ b/src/components/guide/StudyGuideModal.tsx @@ -74,7 +74,7 @@ export const StudyGuideModal = ({ {/* 文本内容 */}
-
+
{/* 题干卡片 */} -
+
{title}
+ + {/* 答案反馈 */} + {error && ( +
+ {error} +
+ )}
{/* 选项区域 - 可滚动 */} -
+
{ - if (isSelected || isDisabled) return; - ( - e.currentTarget as HTMLDivElement - ).style.backgroundImage = - getBackgroundImage("components/quiz/选中"); - (e.currentTarget as HTMLDivElement).style.filter = ""; - }} - onMouseLeave={(e) => { - if (isSelected || isDisabled) return; - ( - e.currentTarget as HTMLDivElement - ).style.backgroundImage = getBackgroundImage( - "components/quiz/未选择" - ); - (e.currentTarget as HTMLDivElement).style.filter = - "brightness(0.96)"; - }} > {option.label}
@@ -206,14 +192,7 @@ const MultipleChoiceQuizPanel = ({
{/* 提交按钮和错误信息 - 固定在底部，不滚动 */} -
- {/* 答案反馈 */} - {error && ( -
- {error} -
- )} - +
{/* 提交按钮 */}
diff --git a/src/components/layout/quiz/SingleChoiceQuizPanel.tsx b/src/components/layout/quiz/SingleChoiceQuizPanel.tsx index 50459d7..4e911b9 100644 --- a/src/components/layout/quiz/SingleChoiceQuizPanel.tsx +++ b/src/components/layout/quiz/SingleChoiceQuizPanel.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; import { SingleChoice } from "@/components"; -import { getBackgroundImage } from "@/lib/utils"; import type { SingleChoiceQuizPanelProps } from "./types"; /** @@ -87,12 +86,19 @@ const SingleChoiceQuizPanel = ({ >
{/* 题干卡片 */} -
+
{title}
+ + {/* 答案反馈 */} + {error && ( +
+ {error} +
+ )}
{/* 选项区域 */} -
+
handleOptionClick(option.value)} >
{ - if (isSelected || disabled) return; - (e.currentTarget as HTMLDivElement).style.backgroundImage = - getBackgroundImage("components/quiz/选中"); - (e.currentTarget as HTMLDivElement).style.filter = ""; - }} - onMouseLeave={(e) => { - if (isSelected || disabled) return; - (e.currentTarget as HTMLDivElement).style.backgroundImage = - getBackgroundImage("components/quiz/未选择"); - (e.currentTarget as HTMLDivElement).style.filter = - "brightness(0.96)"; - }} + className={`w-[1500px] flex items-center p-4 text-[28px] leading-relaxed rounded-tr-[50px] rounded-bl-4xl transition-all duration-150 ${ + disabled + ? "opacity-60 cursor-not-allowed" + : "cursor-pointer" + } ${ + isSelected + ? "bg-[#d4a574] text-[#5c3e2e]" + : "bg-[#d7b888] text-[#5c3e2e] hover:bg-gradient-to-r from-[#ddf3e1] to-[#fbdd97]" + }`} > {option.label}
)} /> - - {/* 答案反馈 */} - {error && ( -
- {error} -
- )}
diff --git a/src/pages/huangyanpei/reflection/scene1.tsx b/src/pages/huangyanpei/reflection/scene1.tsx index 9f70818..f341931 100644 --- a/src/pages/huangyanpei/reflection/scene1.tsx +++ b/src/pages/huangyanpei/reflection/scene1.tsx @@ -140,7 +140,7 @@ const HuangyanpeiReflectionScene1 = () => { { setShowSuccessAlert(false); setGameCompleted(true); diff --git a/src/pages/huangyanpei/reflection/scene3/ViseAssemblyDialog.tsx b/src/pages/huangyanpei/reflection/scene3/ViseAssemblyDialog.tsx index da7ecef..d148bc5 100644 --- a/src/pages/huangyanpei/reflection/scene3/ViseAssemblyDialog.tsx +++ b/src/pages/huangyanpei/reflection/scene3/ViseAssemblyDialog.tsx @@ -76,9 +76,9 @@ const ViseAssemblyDialog = ({ // 转换为 DragFill 的 options const options = useMemo( () => [ - { value: "A", label: "A" }, - { value: "B", label: "B" }, - { value: "C", label: "C" }, + { value: "A", label: "丝杠和丝杆" }, + { value: "B", label: "活动钳口" }, + { value: "C", label: "固定钳口和基座" }, ], [] ); @@ -339,15 +339,24 @@ const ViseAssemblyDialog = ({ : "hover:scale-110 opacity-100" )} > -
- {option.value} +
+
+
+ {option.value} +
+ {`零件${option.value}`} +
+
+
+ {option.label} +
+
- {`零件${option.value}`}
); }} diff --git a/src/pages/luxun/reflection/scene3.tsx b/src/pages/luxun/reflection/scene3.tsx index f43f8b8..8d1f065 100644 --- a/src/pages/luxun/reflection/scene3.tsx +++ b/src/pages/luxun/reflection/scene3.tsx @@ -22,6 +22,7 @@ const LuxunReflectionScene3 = () => { const [completedQuiz2, setCompletedQuiz2] = useState(false); // 题目2是否完成 const [showSummary, setShowSummary] = useState(false); // 是否显示总结 const [completionGuideVisible, setCompletionGuideVisible] = useState(false); // 通关提示对话是否显示 + const [completionGuideFinished, setCompletionGuideFinished] = useState(false); // 通关提示对话是否已完成 const allCompleted = completedQuiz1 && completedQuiz2; const progress = (completedQuiz1 ? 1 : 0) + (completedQuiz2 ? 1 : 0); @@ -263,6 +264,18 @@ const LuxunReflectionScene3 = () => {
+ {/* 继续前进按钮 - 只在通关提示对话结束后显示 */} + {completionGuideFinished && ( + { + navigate(`/${moduleName}/${starName}/home`); + }} + /> + )} + {/* 题目1：家国情怀 */} { onVisibleChange={(visible) => { if (!visible) { setCompletionGuideVisible(false); + setCompletionGuideFinished(true); // 对话关闭后标记为已完成 } }} showMask={false} diff --git a/src/pages/sunzhongshan/place/place1.tsx b/src/pages/sunzhongshan/place/place1.tsx index f623e45..e0efa31 100644 --- a/src/pages/sunzhongshan/place/place1.tsx +++ b/src/pages/sunzhongshan/place/place1.tsx @@ -358,9 +358,9 @@ const SunzhongshanPlace1 = () => { { { {showVideo3 && (
+ + {/* 学习引导弹窗 */} + + 同学你好，欢迎来到跨越时空 - 体悟学习模块！ + {"\n\n"} + 本模块包含三个推理小游戏，场景学习顺序不分先后，三个场景全部学习完后方能完成本模块的学习，那么现在就请你开始体验吧。 +
); }; diff --git a/src/pages/sunzhongshan/reflection/scene1.tsx b/src/pages/sunzhongshan/reflection/scene1.tsx index 767b479..3593b51 100644 --- a/src/pages/sunzhongshan/reflection/scene1.tsx +++ b/src/pages/sunzhongshan/reflection/scene1.tsx @@ -5,14 +5,18 @@ import { ClueHintModal, ClueBookModal, flyToAnimation, + Video, + StudyGuideModal, } from "@/components"; import { SuccessAlert } from "@/components/layout"; -import { getBackgroundImage, getStaticImage } from "@/lib/utils"; +import { SingleChoiceQuizPanel } from "@/components/layout/quiz"; +import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils"; import { useClueStore } from "@/store/clueStore"; import type { ClueHint } from "@/components/clue"; const starName = "sunzhongshan"; const sceneId = `${starName}/reflection/scene1`; +const GUIDE_STORAGE_KEY = `${sceneId}-guide-shown`; // 线索配置 - 根据实际图片调整位置 const clueConfigs: ClueHint[] = [ @@ -68,6 +72,15 @@ const SunzhongshanReflectionScene1 = () => { const [showClueBook, setShowClueBook] = useState(false); const [showSuccessAlert, setShowSuccessAlert] = useState(false); const [successAlertContent, setSuccessAlertContent] = useState(""); + const [showVideo, setShowVideo] = useState(true); + const [showGuide, setShowGuide] = useState(false); + const [showQuiz1, setShowQuiz1] = useState(false); + const [showQuiz2, setShowQuiz2] = useState(false); + const [showQuiz3, setShowQuiz3] = useState(false); + const [showCompleteGuide, setShowCompleteGuide] = useState(false); + const [pendingQuiz, setPendingQuiz] = useState< + "quiz2" | "quiz3" | "complete" | null + >(null); const { collectClue, isClueCollected } = useClueStore(); const containerRef = useRef(null); @@ -111,21 +124,22 @@ const SunzhongshanReflectionScene1 = () => { duration: 1200, onComplete: () => { // 动画完成后的回调 - setSuccessAlertContent("恭喜您，获得该线索！"); + setSuccessAlertContent("获得该线索！快去线索簿查看详细信息吧！"); setShowSuccessAlert(true); }, }); } }; - // 处理背包点击 - 先收集线索1，然后打开线索提示框 + // 处理背包点击 - 只收集线索1，不打开线索提示框 const handleBackpackClick = () => { const clue1Id = `${sceneId}/clue1`; const clue1Name = "线索1"; - // 如果线索1已收集，直接打开线索提示框 + // 如果线索1已收集，显示提示 if (isClueCollected(clue1Id)) { - setShowClueHint(true); + setSuccessAlertContent("该线索已收集"); + setShowSuccessAlert(true); return; } @@ -143,16 +157,85 @@ const SunzhongshanReflectionScene1 = () => { targetPosition: "center", duration: 1200, onComplete: () => { - // 动画完成后，打开线索提示框 - // setShowClueHint(true); + // 动画完成后显示成功提示 + setSuccessAlertContent("获得该线索！快去线索簿查看详细信息吧！"); + setShowSuccessAlert(true); }, }); - } else { - // 如果 ref 不可用，直接打开线索提示框 - setShowClueHint(true); } }; + // 处理线索提示按钮点击 - 打开线索提示框 + const handleClueHintClick = () => { + setShowClueHint(true); + }; + + // 处理视频播放结束 + const handleVideoEnd = () => { + setShowVideo(false); + // 检查是否需要显示学习引导 + const hasShownGuide = localStorage.getItem(GUIDE_STORAGE_KEY); + if (!hasShownGuide) { + setShowGuide(true); + } + }; + + // 处理学习引导关闭 + const handleGuideClose = () => { + setShowGuide(false); + localStorage.setItem(GUIDE_STORAGE_KEY, "true"); + }; + + // 检查是否所有线索都已收集 + const areAllCluesCollected = () => { + return clueConfigs.every((clue) => isClueCollected(clue.id)); + }; + + // 处理线索簿关闭 + const handleClueBookClose = () => { + setShowClueBook(false); + // 如果所有线索都已收集，显示题目1 + if (areAllCluesCollected()) { + setShowQuiz1(true); + } + }; + + // 处理题目1提交 + const handleQuiz1Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz1(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + setPendingQuiz("quiz2"); + } + }; + + // 处理题目2提交 + const handleQuiz2Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz2(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + setPendingQuiz("quiz3"); + } + }; + + // 处理题目3提交 + const handleQuiz3Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz3(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + // 设置待显示的完成提示 + setPendingQuiz("complete"); + } + }; + + // 处理完成提示关闭 + const handleCompleteGuideClose = () => { + setShowCompleteGuide(false); + }; + // 获取线索图片 const getClueImage = (clueId: string) => { const clueNumber = clueId.split("clue")[1]; @@ -182,6 +265,19 @@ const SunzhongshanReflectionScene1 = () => { backgroundImage: getBackgroundImage(`${starName}/reflection/scene1/bg`), }} > + {/* 视频播放 - 覆盖在页面内容之上 */} + {showVideo && ( +
+
+ )} {/* 关闭按钮 */} { {/* 右下角-功能处 */}
+ { name: c.name, collected: isClueCollected(c.id), }))} - onClose={() => setShowClueBook(false)} + onClose={handleClueBookClose} getClueImage={getClueImage} getClueDetailImage={getClueDetailImage} /> @@ -297,12 +398,112 @@ const SunzhongshanReflectionScene1 = () => { onContinue={() => { setShowSuccessAlert(false); setSuccessAlertContent(""); + // 检查是否有待显示的题目或完成提示 + if (pendingQuiz === "quiz2") { + setShowQuiz2(true); + setPendingQuiz(null); + } else if (pendingQuiz === "quiz3") { + setShowQuiz3(true); + setPendingQuiz(null); + } else if (pendingQuiz === "complete") { + setShowCompleteGuide(true); + setPendingQuiz(null); + } }} onClose={() => { setShowSuccessAlert(false); setSuccessAlertContent(""); + // 检查是否有待显示的题目或完成提示 + if (pendingQuiz === "quiz2") { + setShowQuiz2(true); + setPendingQuiz(null); + } else if (pendingQuiz === "quiz3") { + setShowQuiz3(true); + setPendingQuiz(null); + } else if (pendingQuiz === "complete") { + setShowCompleteGuide(true); + setPendingQuiz(null); + } }} /> + + {/* 学习引导弹窗 */} + + 同学你好，欢迎来到二十世纪初的上海。辛亥革命之后，民主共和的观念深入人心。 + 面对中外反动势力，社会各界更广泛地行动起来，以各自的方式争取着民主自由和国家尊严。 + {"\n"} + 请探索周围环境，拨开时局迷雾，与奋进求索的仁人志士们一同探寻中国革命的前路。本游戏需要在场景中找出4条线索，并回答正确所有问题后才能完成本游戏探索。 + + + {/* 题目1：今天的日期是？ */} + + + {/* 题目2：今天的日记写什么呢？ */} + + + {/* 题目3：作为五四运动的见证者、参与者,你觉得中国革命有望通过怎样的方式实现? */} + + + {/* 完成提示弹窗 */} + + 完成本游戏探索！快去体验其他故事吧！ +
); }; diff --git a/src/pages/sunzhongshan/reflection/scene2.tsx b/src/pages/sunzhongshan/reflection/scene2.tsx index a8824f5..792e6d9 100644 --- a/src/pages/sunzhongshan/reflection/scene2.tsx +++ b/src/pages/sunzhongshan/reflection/scene2.tsx @@ -5,14 +5,18 @@ import { ClueHintModal, ClueBookModal, flyToAnimation, + Video, + StudyGuideModal, } from "@/components"; import { SuccessAlert } from "@/components/layout"; -import { getBackgroundImage, getStaticImage } from "@/lib/utils"; +import { SingleChoiceQuizPanel } from "@/components/layout/quiz"; +import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils"; import { useClueStore } from "@/store/clueStore"; import type { ClueHint } from "@/components/clue"; const starName = "sunzhongshan"; const sceneId = `${starName}/reflection/scene2`; +const GUIDE_STORAGE_KEY = `${sceneId}-guide-shown`; // 线索配置 - 根据实际图片调整位置 const clueConfigs: ClueHint[] = [ @@ -78,6 +82,15 @@ const SunzhongshanReflectionScene2 = () => { const [showClueBook, setShowClueBook] = useState(false); const [showSuccessAlert, setShowSuccessAlert] = useState(false); const [successAlertContent, setSuccessAlertContent] = useState(""); + const [showVideo, setShowVideo] = useState(true); + const [showGuide, setShowGuide] = useState(false); + const [showQuiz1, setShowQuiz1] = useState(false); + const [showQuiz2, setShowQuiz2] = useState(false); + const [showQuiz3, setShowQuiz3] = useState(false); + const [showCompleteGuide, setShowCompleteGuide] = useState(false); + const [pendingQuiz, setPendingQuiz] = useState< + "quiz2" | "quiz3" | "complete" | null + >(null); const { collectClue, isClueCollected } = useClueStore(); const containerRef = useRef(null); @@ -121,21 +134,22 @@ const SunzhongshanReflectionScene2 = () => { duration: 1200, onComplete: () => { // 动画完成后的回调 - setSuccessAlertContent("恭喜您，获得该线索！"); + setSuccessAlertContent("获得该线索！快去线索簿查看详细信息吧！"); setShowSuccessAlert(true); }, }); } }; - // 处理背包点击 - 先收集线索1，然后打开线索提示框 + // 处理背包点击 - 只收集线索1，不打开线索提示框 const handleBackpackClick = () => { const clue1Id = `${sceneId}/clue1`; const clue1Name = "线索1"; - // 如果线索1已收集，直接打开线索提示框 + // 如果线索1已收集，显示提示 if (isClueCollected(clue1Id)) { - setShowClueHint(true); + setSuccessAlertContent("该线索已收集"); + setShowSuccessAlert(true); return; } @@ -153,16 +167,85 @@ const SunzhongshanReflectionScene2 = () => { targetPosition: "center", duration: 1200, onComplete: () => { - // 动画完成后，打开线索提示框 - setShowClueHint(true); + // 动画完成后显示成功提示 + setSuccessAlertContent("获得该线索！快去线索簿查看详细信息吧！"); + setShowSuccessAlert(true); }, }); - } else { - // 如果 ref 不可用，直接打开线索提示框 - setShowClueHint(true); } }; + // 处理线索提示按钮点击 - 打开线索提示框 + const handleClueHintClick = () => { + setShowClueHint(true); + }; + + // 处理视频播放结束 + const handleVideoEnd = () => { + setShowVideo(false); + // 检查是否需要显示学习引导 + const hasShownGuide = localStorage.getItem(GUIDE_STORAGE_KEY); + if (!hasShownGuide) { + setShowGuide(true); + } + }; + + // 处理学习引导关闭 + const handleGuideClose = () => { + setShowGuide(false); + localStorage.setItem(GUIDE_STORAGE_KEY, "true"); + }; + + // 检查是否所有线索都已收集 + const areAllCluesCollected = () => { + return clueConfigs.every((clue) => isClueCollected(clue.id)); + }; + + // 处理线索簿关闭 + const handleClueBookClose = () => { + setShowClueBook(false); + // 如果所有线索都已收集，显示题目1 + if (areAllCluesCollected()) { + setShowQuiz1(true); + } + }; + + // 处理题目1提交 + const handleQuiz1Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz1(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + setPendingQuiz("quiz2"); + } + }; + + // 处理题目2提交 + const handleQuiz2Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz2(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + setPendingQuiz("quiz3"); + } + }; + + // 处理题目3提交 + const handleQuiz3Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz3(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + // 设置待显示的完成提示 + setPendingQuiz("complete"); + } + }; + + // 处理完成提示关闭 + const handleCompleteGuideClose = () => { + setShowCompleteGuide(false); + }; + // 获取线索图片 const getClueImage = (clueId: string) => { const clueNumber = clueId.split("clue")[1]; @@ -196,6 +279,19 @@ const SunzhongshanReflectionScene2 = () => { backgroundImage: getBackgroundImage(`${starName}/reflection/scene2/bg`), }} > + {/* 视频播放 - 覆盖在页面内容之上 */} + {showVideo && ( +
+
+ )} {/* 关闭按钮 */} { {/* 右下角-功能处 */}
+ { name: c.name, collected: isClueCollected(c.id), }))} - onClose={() => setShowClueBook(false)} + onClose={handleClueBookClose} getClueImage={getClueImage} getClueDetailImage={getClueDetailImage} /> @@ -311,12 +412,111 @@ const SunzhongshanReflectionScene2 = () => { onContinue={() => { setShowSuccessAlert(false); setSuccessAlertContent(""); + // 检查是否有待显示的题目或完成提示 + if (pendingQuiz === "quiz2") { + setShowQuiz2(true); + setPendingQuiz(null); + } else if (pendingQuiz === "quiz3") { + setShowQuiz3(true); + setPendingQuiz(null); + } else if (pendingQuiz === "complete") { + setShowCompleteGuide(true); + setPendingQuiz(null); + } }} onClose={() => { setShowSuccessAlert(false); setSuccessAlertContent(""); + // 检查是否有待显示的题目或完成提示 + if (pendingQuiz === "quiz2") { + setShowQuiz2(true); + setPendingQuiz(null); + } else if (pendingQuiz === "quiz3") { + setShowQuiz3(true); + setPendingQuiz(null); + } else if (pendingQuiz === "complete") { + setShowCompleteGuide(true); + setPendingQuiz(null); + } }} /> + + {/* 学习引导弹窗 */} + + 1921年7月，中国共产党第一次全国代表大会在上海召开，中国革命的面貌自此焕然一新。 + {"\n"} + 1921-1923的两年间，你顺利完成了一、二年级的在校学习任务，并在三年级进入工厂实习。身为学子，你专注于业务精进，同时亦非常关注时局的变化。一些同学和工友加入了党组织，你也对此心生向往。本游戏需要在场景中找出5条线索，并回答正确所有问题后才能完成本游戏探索。 + + + {/* 题目1：当下无产阶级工人运动面对的敌人主要有哪些? */} + + + {/* 题目2：今天的日记写什么呢? */} + + + {/* 题目3：当下无产阶级工人运动面临困境,你觉得谁可以成为工人们的朋友? */} + + + {/* 完成提示弹窗 */} + + 1922年夏到1924年初，李大钊来到上海，在宣传革命思想的同时与孙中山进行了数次会面，为改组国民党和促成第一次国共合作作出了巨大贡献。 + 1924年1月，中国国民党第一次全国代表大会在广州召开，孙中山重新解释了三民主义，事实上确立了联俄、联共、扶助农工三大政策。李大钊、毛泽东等10名共产党员当选为中国国民党第一届中央执行委员会委员或候补委员。国民党一大的召开标志着第一次国共合作的正式形成。 +
); }; diff --git a/src/pages/sunzhongshan/reflection/scene3.tsx b/src/pages/sunzhongshan/reflection/scene3.tsx index e994a24..17158ac 100644 --- a/src/pages/sunzhongshan/reflection/scene3.tsx +++ b/src/pages/sunzhongshan/reflection/scene3.tsx @@ -5,14 +5,19 @@ import { ClueHintModal, ClueBookModal, flyToAnimation, + Video, + StudyGuideModal, + Cursor, } from "@/components"; -import { SuccessAlert } from "@/components/layout"; -import { getBackgroundImage, getStaticImage } from "@/lib/utils"; +import { SuccessAlert, ErrorAlert } from "@/components/layout"; +import { SingleChoiceQuizPanel } from "@/components/layout/quiz"; +import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils"; import { useClueStore } from "@/store/clueStore"; import type { ClueHint } from "@/components/clue"; const starName = "sunzhongshan"; const sceneId = `${starName}/reflection/scene3`; +const GUIDE_STORAGE_KEY = `${sceneId}-guide-shown`; // 线索配置 - 根据实际图片调整位置 const clueConfigs: ClueHint[] = [ @@ -20,10 +25,10 @@ const clueConfigs: ClueHint[] = [ id: `${sceneId}/clue1`, name: "线索1", position: { - top: "20%", - left: "65%", - width: "0%", - height: "0%", + top: "38%", + left: "8%", + width: "24%", + height: "60%", }, }, { @@ -50,10 +55,10 @@ const clueConfigs: ClueHint[] = [ id: `${sceneId}/clue4`, name: "线索4", position: { - top: "30%", - left: "40%", - width: "8%", - height: "12%", + top: "75%", + left: "95.5%", + width: "0%", + height: "0%", }, }, ]; @@ -68,6 +73,21 @@ const SunzhongshanReflectionScene3 = () => { const [showClueBook, setShowClueBook] = useState(false); const [showSuccessAlert, setShowSuccessAlert] = useState(false); const [successAlertContent, setSuccessAlertContent] = useState(""); + const [showErrorAlert, setShowErrorAlert] = useState(false); + const [errorAlertContent, setErrorAlertContent] = useState(""); + const [showVideo, setShowVideo] = useState(true); + const [showGuide, setShowGuide] = useState(false); + const [showQuiz1, setShowQuiz1] = useState(false); + const [showQuiz2, setShowQuiz2] = useState(false); + const [showQuiz3, setShowQuiz3] = useState(false); + const [showCompleteGuide, setShowCompleteGuide] = useState(false); + const [pendingQuiz, setPendingQuiz] = useState< + "quiz2" | "quiz3" | "complete" | null + >(null); + // 场景切换：true 表示 bg 场景，false 表示"窃窃私语"场景 + const [isMainScene, setIsMainScene] = useState(false); + // 控制 Cursor 显示：获取线索1后显示，点击后进入主场景 + const [showCursor, setShowCursor] = useState(false); const { collectClue, isClueCollected } = useClueStore(); const containerRef = useRef(null); @@ -111,13 +131,135 @@ const SunzhongshanReflectionScene3 = () => { duration: 1200, onComplete: () => { // 动画完成后的回调 - setSuccessAlertContent("恭喜您，获得该线索！"); + setSuccessAlertContent("获得该线索！快去线索簿查看详细信息吧！"); + setShowSuccessAlert(true); + + // 如果是在"窃窃私语"场景收集了线索1，显示 Cursor + if (!isMainScene && clueId === `${sceneId}/clue1`) { + setShowCursor(true); + } + }, + }); + } + }; + + // 处理背包点击 - 只收集线索4，不打开线索提示框 + const handleBackpackClick = () => { + // 如果不在主场景，提示需要先获取线索1 + if (!isMainScene) { + setErrorAlertContent(showCursor ? "该线索已收集" : "请先获取线索1"); + setShowErrorAlert(true); + return; + } + + const clue4Id = `${sceneId}/clue4`; + const clue4Name = "线索4"; + + // 如果线索4已收集，显示提示 + if (isClueCollected(clue4Id)) { + setSuccessAlertContent("该线索已收集"); + setShowSuccessAlert(true); + return; + } + + // 收集线索4 + collectClue(clue4Id, clue4Name); + + // 获取线索4的 ref + const clue4Ref = getClueRef(clue4Id); + + // 执行飞行动画 + if (clue4Ref.current && clueBookButtonRef.current) { + flyToAnimation({ + fromRef: clue4Ref as React.RefObject, + toRef: clueBookButtonRef as React.RefObject, + targetPosition: "center", + duration: 1200, + onComplete: () => { + // 动画完成后显示成功提示 + setSuccessAlertContent("获得该线索！快去线索簿查看详细信息吧！"); setShowSuccessAlert(true); }, }); } }; + // 处理线索提示按钮点击 - 打开线索提示框 + const handleClueHintClick = () => { + setShowClueHint(true); + }; + + // 处理视频播放结束 + const handleVideoEnd = () => { + setShowVideo(false); + // 检查是否需要显示学习引导 + const hasShownGuide = localStorage.getItem(GUIDE_STORAGE_KEY); + if (!hasShownGuide) { + setShowGuide(true); + } + }; + + // 处理学习引导关闭 + const handleGuideClose = () => { + setShowGuide(false); + localStorage.setItem(GUIDE_STORAGE_KEY, "true"); + }; + + // 检查是否所有线索都已收集 + const areAllCluesCollected = () => { + return clueConfigs.every((clue) => isClueCollected(clue.id)); + }; + + // 处理线索簿关闭 + const handleClueBookClose = () => { + setShowClueBook(false); + // 如果所有线索都已收集，显示题目1 + if (areAllCluesCollected()) { + setShowQuiz1(true); + } + }; + + // 处理题目1提交 + const handleQuiz1Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz1(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + setPendingQuiz("quiz2"); + } + }; + + // 处理题目2提交 - 两个选项都正确 + const handleQuiz2Submit = (_value: string, _isCorrect: boolean) => { + // 题目2的两个选项都正确，所以总是成功 + setShowQuiz2(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + setPendingQuiz("quiz3"); + }; + + // 处理题目3提交 + const handleQuiz3Submit = (_value: string, isCorrect: boolean) => { + if (isCorrect) { + setShowQuiz3(false); + setSuccessAlertContent("回答正确!"); + setShowSuccessAlert(true); + // 设置待显示的完成提示 + setPendingQuiz("complete"); + } + }; + + // 处理完成提示关闭 + const handleCompleteGuideClose = () => { + setShowCompleteGuide(false); + }; + + // 处理 Cursor 点击 - 切换到主场景 + const handleCursorClick = () => { + setShowCursor(false); + setIsMainScene(true); + }; + // 获取线索图片 const getClueImage = (clueId: string) => { const clueNumber = clueId.split("clue")[1]; @@ -139,14 +281,45 @@ const SunzhongshanReflectionScene3 = () => { }); }, [isClueCollected]); + // 如果线索1已收集但还在"窃窃私语"场景，显示 Cursor + useEffect(() => { + const clue1Id = `${sceneId}/clue1`; + if (!isMainScene && isClueCollected(clue1Id)) { + setShowCursor(true); + } + }, [isMainScene, isClueCollected]); + + // 根据当前场景决定背景图片和显示的线索 + const currentBackground = isMainScene + ? getBackgroundImage(`${starName}/reflection/scene3/bg`) + : getBackgroundImage(`${starName}/reflection/scene3/窃窃私语`); + + // 根据当前场景过滤线索：窃窃私语场景只显示线索1，主场景显示线索2、3、4 + const visibleClues = isMainScene + ? clueConfigs.filter((clue) => clue.id !== `${sceneId}/clue1`) + : clueConfigs.filter((clue) => clue.id === `${sceneId}/clue1`); + return (
+ {/* 视频播放 - 覆盖在页面内容之上 */} + {showVideo && ( +
+
+ )} {/* 关闭按钮 */} { }} /> + {/* Cursor - 获取线索1后显示，点击进入主场景 */} + {showCursor && !isMainScene && ( + + )} + {/* 线索点击区域 */} - {clueConfigs.map((clue) => { + {visibleClues.map((clue) => { const isCollected = isClueCollected(clue.id); const clueRef = getClueRef(clue.id); return ( @@ -214,10 +397,15 @@ const SunzhongshanReflectionScene3 = () => { {/* 右下角-功能处 */}
+ setShowClueHint(true)} + onClick={handleBackpackClick} />
{ {/* 线索提示窗 */} setShowClueHint(false)} sourceContainerRef={containerRef} /> @@ -249,7 +441,7 @@ const SunzhongshanReflectionScene3 = () => { name: c.name, collected: isClueCollected(c.id), }))} - onClose={() => setShowClueBook(false)} + onClose={handleClueBookClose} getClueImage={getClueImage} getClueDetailImage={getClueDetailImage} /> @@ -262,12 +454,122 @@ const SunzhongshanReflectionScene3 = () => { onContinue={() => { setShowSuccessAlert(false); setSuccessAlertContent(""); + // 检查是否有待显示的题目或完成提示 + if (pendingQuiz === "quiz2") { + setShowQuiz2(true); + setPendingQuiz(null); + } else if (pendingQuiz === "quiz3") { + setShowQuiz3(true); + setPendingQuiz(null); + } else if (pendingQuiz === "complete") { + setShowCompleteGuide(true); + setPendingQuiz(null); + } }} onClose={() => { setShowSuccessAlert(false); setSuccessAlertContent(""); + // 检查是否有待显示的题目或完成提示 + if (pendingQuiz === "quiz2") { + setShowQuiz2(true); + setPendingQuiz(null); + } else if (pendingQuiz === "quiz3") { + setShowQuiz3(true); + setPendingQuiz(null); + } else if (pendingQuiz === "complete") { + setShowCompleteGuide(true); + setPendingQuiz(null); + } }} /> + + {/* 错误提示弹窗 */} + setShowErrorAlert(false)} + zIndex={10001} + onMaskClick={() => setShowErrorAlert(false)} + /> + + {/* 学习引导弹窗 */} + + 后来,学校建立了中国社会主义青年团团支部,你积极靠拢,成为一名光荣的团员。 + 国共合作大背景下,国民革命正在如火如荼地开展,北伐也在积极酝酿之中。你在自己的岗位上认真工作,也密切关注着时局和两党动态。 + {"\n"} + 本游戏需要在场景中找出4条线索,并回答正确所有问题后才能完成本游戏探索。 + + + {/* 题目1：冯玉祥发动"北京政变"后邀请孙中山北上共商国是,各界对此事的看法如何? */} + + + {/* 题目2：今天的日记写什么呢? */} + + + {/* 题目3：毅然北上赴会的孙中山先生,为争取国家和平统一作出了哪些努力? */} + + + {/* 完成提示弹窗 */} + + 辛亥革命拉开了中国完全意义上的近代民族民主革命的序幕。北洋军阀首领袁世凯窃取革命成果后，各地军阀势力对内割据混战，对外出卖国家利益，在政治上谋求专制和独裁，俨然成为民族独立、民主政治、民生幸福之路上的头号绊脚石。 + 为了改变这一时期的困局，孙中山尝试过高举护法旗帜，两度领导护法运动；与新生的中国共产党展开合作，与无产阶级工农群众共建起统一战线；为了团结一切可以团结的力量，调动一切可以调动的因素，在生命最后的日子里抱病北上，一路不遗余力地向社会各界宣传反帝反封建主张。他经历了太多挫折，却始终以“行”求“知”。 +
); };