feat:完善孙中山
This commit is contained in:
zhongyidian committed
1 parent
b3d30100da
commit
ec7e8e2bd2
14 files changed
+846
-135
No files matched your search
@@ -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<HTMLDivElement>(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 && (
|
||||
<div className="fixed inset-0 z-[9999] bg-black">
|
||||
<Video
|
||||
src={getPublicPath(`video/${starName}/sunzhongshan_10.mp4`)}
|
||||
className="w-full h-full"
|
||||
onEnded={handleVideoEnd}
|
||||
autoPlay={true}
|
||||
showSkipButton={true}
|
||||
onSkip={handleVideoEnd}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{/* 关闭按钮 */}
|
||||
<Image
|
||||
className="absolute right-0 top-0 z-10"
|
||||
@@ -249,6 +345,11 @@ const SunzhongshanReflectionScene1 = () => {
|
||||
|
||||
{/* 右下角-功能处 */}
|
||||
<div className="absolute right-6 bottom-12 flex flex-col items-center gap-4 z-10">
|
||||
<Image
|
||||
src={getStaticImage(`${starName}/reflection/线索提示`)}
|
||||
button
|
||||
onClick={handleClueHintClick}
|
||||
/>
|
||||
<Image
|
||||
src={getStaticImage(`${starName}/reflection/背包`)}
|
||||
button
|
||||
@@ -284,7 +385,7 @@ const SunzhongshanReflectionScene1 = () => {
|
||||
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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导弹窗 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuide}
|
||||
onContinue={handleGuideClose}
|
||||
zIndex={10000}
|
||||
>
|
||||
同学你好，欢迎来到二十世纪初的上海。辛亥革命之后，民主共和的观念深入人心。
|
||||
面对中外反动势力，社会各界更广泛地行动起来，以各自的方式争取着民主自由和国家尊严。
|
||||
{"\n"}
|
||||
请探索周围环境，拨开时局迷雾，与奋进求索的仁人志士们一同探寻中国革命的前路。本游戏需要在场景中找出4条线索，并回答正确所有问题后才能完成本游戏探索。
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 题目1：今天的日期是？ */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz1}
|
||||
title="今天的日期是?"
|
||||
options={[
|
||||
{ value: "A", label: "A: 1919年5月5日" },
|
||||
{ value: "B", label: "B: 1921年5月5日" },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage="回答错误,请你再仔细思考一下吧。"
|
||||
onSubmit={handleQuiz1Submit}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 题目2：今天的日记写什么呢？ */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz2}
|
||||
title="今天的日记写什么呢?"
|
||||
options={[
|
||||
{
|
||||
value: "A",
|
||||
label:
|
||||
"今天路过莫利爱路29号,旁观了中国国民党党部举行的庆祝活动。得知孙中山先生重整旗鼓,预备再度联合西南军阀进行二次护法。思及1918年第一次护法运动的失败,隐隐为孙先生此番努力感到忧虑。",
|
||||
},
|
||||
{
|
||||
value: "B",
|
||||
label:
|
||||
"参加了中华职业学校同学为庆祝广州军政府成立、孙中山在广州就任非常大总统而组织的活动,深感革命成功有望。",
|
||||
},
|
||||
]}
|
||||
correctAnswer="A"
|
||||
errorMessage="回答错误,请你再仔细思考一下吧。"
|
||||
onSubmit={handleQuiz2Submit}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 题目3：作为五四运动的见证者、参与者,你觉得中国革命有望通过怎样的方式实现? */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz3}
|
||||
title="作为五四运动的见证者、参与者,你觉得中国革命有望通过怎样的方式实现?"
|
||||
options={[
|
||||
{
|
||||
value: "A",
|
||||
label: "A: 团结强大的军阀,共举民主共和旗帜",
|
||||
},
|
||||
{
|
||||
value: "B",
|
||||
label: "B: 团结各族各界群众,建立广泛的革命统一战线",
|
||||
},
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage="回答错误,请你再仔细思考一下吧。"
|
||||
onSubmit={handleQuiz3Submit}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 完成提示弹窗 */}
|
||||
<StudyGuideModal
|
||||
visible={showCompleteGuide}
|
||||
onContinue={handleCompleteGuideClose}
|
||||
zIndex={10002}
|
||||
verticalAlign="center"
|
||||
>
|
||||
完成本游戏探索！快去体验其他故事吧！
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user