feat:鲁迅添加引导
This commit is contained in:
zhongyidian committed
1 parent
e8dc5d4b95
commit
3129e01257
26 files changed
+951
-86
No files matched your search
@@ -1,7 +1,18 @@
|
||||
import { ExhibitOverlay, Image, Title, Cursor } from "@/components";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Image,
|
||||
Title,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
SingleChoiceQuizPanel,
|
||||
Video,
|
||||
} from "@/components";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
|
||||
// starName 固定为 luxun
|
||||
const starName = "luxun";
|
||||
@@ -13,18 +24,50 @@ const exhibitSrcMap: Record<1 | 2 | 3, string> = {
|
||||
3: "luxun/place4/展品13",
|
||||
};
|
||||
|
||||
const quizDefaultError = "请结合刚刚的旁白内容，再思考一下吧！";
|
||||
const quizExplanations: Record<string, string> = {
|
||||
A: "陈独秀与鲁迅有思想交往，但他并未在这间“红色庇护所”中避难、与鲁迅夜谈革命议题。",
|
||||
B: "恭喜你，选对啦。",
|
||||
C: "李大钊于1927年牺牲，时间上不符合这间客房被用作“红色庇护所”的背景。",
|
||||
D: "周恩来虽长期在上海从事革命活动，但并未在这里避难并与鲁迅夜谈。",
|
||||
};
|
||||
|
||||
const LuxunPlace5 = () => {
|
||||
const navigate = useNavigate();
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
// 学习引导弹窗
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
const [introGuideVisible, setIntroGuideVisible] = useState(false);
|
||||
const [introGuideStep, setIntroGuideStep] = useState(0);
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
|
||||
null
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// 光标2的题目状态
|
||||
const [quizVisible, setQuizVisible] = useState(false);
|
||||
const [quizError, setQuizError] = useState(quizDefaultError);
|
||||
const [successAlertVisible, setSuccessAlertVisible] = useState(false);
|
||||
|
||||
// 光标3的引导对话状态
|
||||
const [guide3Visible, setGuide3Visible] = useState(false);
|
||||
const [guide3Step, setGuide3Step] = useState(0);
|
||||
|
||||
// 结尾视频与对话
|
||||
const [showEndingVideo, setShowEndingVideo] = useState(false);
|
||||
const [endingGuideVisible, setEndingGuideVisible] = useState(false);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
||||
if (index === 3) {
|
||||
setActiveExhibitId(3);
|
||||
setGuide3Visible(true);
|
||||
setGuide3Step(0);
|
||||
return;
|
||||
}
|
||||
setActiveExhibitId(index);
|
||||
};
|
||||
|
||||
@@ -83,10 +126,11 @@ const LuxunPlace5 = () => {
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage("luxun/place4/离开")}
|
||||
src={getStaticImage("components/place/继续前进")}
|
||||
button
|
||||
onClick={() => {
|
||||
navigate(`/${moduleName}/${starName}/home`);
|
||||
// 完成后先播放视频，不立即跳转页面
|
||||
setShowEndingVideo(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@@ -94,17 +138,183 @@ const LuxunPlace5 = () => {
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
description={
|
||||
activeExhibitId === 1
|
||||
? '"鲁迅是莱谟斯，是野兽的奶汁所喂养大的，是封建宗法社会的逆子，是绅士阶级的贰臣，而同时也是一些浪漫谛克的革命家的诤友！"'
|
||||
: activeExhibitId === 2
|
||||
? '"人生得一知己足矣，斯世当以同怀视之"'
|
||||
: undefined
|
||||
}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeExhibitId);
|
||||
return next;
|
||||
});
|
||||
if (activeExhibitId === 2) {
|
||||
setActiveExhibitId(null);
|
||||
setQuizVisible(true);
|
||||
return;
|
||||
}
|
||||
if (activeExhibitId === 3) {
|
||||
// 对话关闭时再标记已读
|
||||
setActiveExhibitId(null);
|
||||
return;
|
||||
}
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (activeExhibitId !== null) {
|
||||
next.add(activeExhibitId);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导结束后的对话 */}
|
||||
<GuideSteps
|
||||
visible={introGuideVisible}
|
||||
onVisibleChange={setIntroGuideVisible}
|
||||
currentStep={introGuideStep}
|
||||
onStepChange={setIntroGuideStep}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
你说的是这间小小的客房吗，这里为什么会被称为"红色庇护所"呢?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
你可别小看这间仅6平方米的客房，在白色恐怖笼罩的1933年至1936年，这里是很多共产党人的"安全港湾"。1933年，瞿秋白夫妇第三次到鲁迅家避难，就秘密住进了这里。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
当时反动派到处搜捕共产党人，鲁迅冒着生命危险掩护他们，两人常彻夜长谈。瞿秋白的夫人杨之华回忆道："秋白和鲁迅在一起，往往感觉夜太短。深刻的友谊的交谈，从政治到文艺，从实际到理论，从希腊到莫斯科，轻松，愉快，活泼。"
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标2的题目 */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={quizVisible}
|
||||
title="上海鲁迅故居三楼客房被称为“红色庇护所”，以下哪位共产党人曾在此避难并与鲁迅探讨革命议题"
|
||||
options={[
|
||||
{ value: "A", label: "陈独秀" },
|
||||
{ value: "B", label: "瞿秋白" },
|
||||
{ value: "C", label: "李大钊" },
|
||||
{ value: "D", label: "周恩来" },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage={quizError}
|
||||
onSubmit={(value, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setQuizError(quizDefaultError);
|
||||
setQuizVisible(false);
|
||||
setSuccessAlertVisible(true);
|
||||
}
|
||||
}}
|
||||
onWrongSelect={(value) => {
|
||||
const explanation = quizExplanations[value];
|
||||
if (explanation) {
|
||||
setQuizError(explanation);
|
||||
return explanation;
|
||||
}
|
||||
setQuizError(quizDefaultError);
|
||||
return quizDefaultError;
|
||||
}}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 光标2的成功提示 */}
|
||||
<SuccessAlert
|
||||
visible={successAlertVisible}
|
||||
content="1933年，瞿秋白夫妇第三次到鲁迅家避难，就住进了这间仅6平方米的客房，与鲁迅常常彻夜长谈革命与文学。"
|
||||
onContinue={() => {
|
||||
setSuccessAlertVisible(false);
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(2);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标3的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guide3Visible}
|
||||
onVisibleChange={(visible) => {
|
||||
setGuide3Visible(visible);
|
||||
if (!visible) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(3);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
}}
|
||||
currentStep={guide3Step}
|
||||
onStepChange={setGuide3Step}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
除了瞿秋白，还有其他共产党人来过这里吗
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
当然！1936年4月，中共中央特派员冯雪峰到上海开展工作，也先住进了这间客房。冯雪峰把红军长征胜利、遵义会议召开的消息告诉鲁迅，还带来了毛泽东同志提出的抗日民族统一战线主张。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
鲁迅听后格外振奋，激动地说"我做一个小兵还是胜任的，用笔！"，这句话也成了他晚年投身抗日救亡运动的誓言。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 结尾视频播放 */}
|
||||
{showEndingVideo && (
|
||||
<Video
|
||||
src={getPublicPath("video/luxun/luxun_06.mp4")}
|
||||
className="fixed inset-0 z-[20000]"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setEndingGuideVisible(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 视频结束后的结束语对话 */}
|
||||
<GuideSteps
|
||||
visible={endingGuideVisible}
|
||||
onVisibleChange={(visible) => {
|
||||
setShowEndingVideo(false);
|
||||
setEndingGuideVisible(visible);
|
||||
if (!visible && moduleName) {
|
||||
// 对话结束后返回鲁迅首页
|
||||
navigate(`/${moduleName}/${starName}/home`);
|
||||
}
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={20010}
|
||||
>
|
||||
<GuideStepsItem speaker="guide">
|
||||
我们已经了解了鲁迅居住在上海大陆新村9号时的重要事件。接下来，请你接过先生手中的“笔”，走出上海，跨越时空，追寻他从绍兴三味书屋到上海的创作足迹——解锁每个地标背后的故事，填充文字里的时代线索...
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
在互动中，读懂先生笔墨间的温度与力量。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 学习引导 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => {
|
||||
setShowGuideModal(false);
|
||||
setIntroGuideVisible(true);
|
||||
setIntroGuideStep(0);
|
||||
}}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user