feat:孙中山对话前3个场景
This commit is contained in:
zhongyidian committed
1 parent
3129e01257
commit
786f29a2f7
5 files changed
+830
-57
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useRef } from "react";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
@@ -6,8 +6,11 @@ import {
|
||||
Cursor,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
StudyGuideModal,
|
||||
Video,
|
||||
type VideoRef,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const starName = "sunzhongshan";
|
||||
@@ -25,25 +28,38 @@ const SunzhongshanPlace2 = () => {
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
|
||||
null
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
const [guideVisible, setGuideVisible] = useState(false);
|
||||
const [guideStep, setGuideStep] = useState(0);
|
||||
|
||||
// 光标1的对话状态
|
||||
const [guide1Visible, setGuide1Visible] = useState(false);
|
||||
const [guide1Step, setGuide1Step] = useState(0);
|
||||
// 光标1的视频状态
|
||||
const [showVideo1, setShowVideo1] = useState(false);
|
||||
const video1Ref = useRef<VideoRef>(null);
|
||||
|
||||
// 光标4的对话状态
|
||||
const [guide4Visible, setGuide4Visible] = useState(false);
|
||||
const [guide4Step, setGuide4Step] = useState(0);
|
||||
|
||||
// 光标3的视频状态
|
||||
const [showVideo3, setShowVideo3] = useState(false);
|
||||
const video3Ref = useRef<VideoRef>(null);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
|
||||
// if (index === 1) {
|
||||
// setActiveExhibitId(1);
|
||||
// setGuideVisible(true);
|
||||
// setGuideStep(0);
|
||||
// } else {
|
||||
setActiveExhibitId(index);
|
||||
// }
|
||||
};
|
||||
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(step);
|
||||
// 根据不同的展品显示对应的对话，并重置进度
|
||||
if (index === 1) {
|
||||
setGuide1Step(0);
|
||||
setGuide1Visible(true);
|
||||
} else if (index === 4) {
|
||||
setGuide4Step(0);
|
||||
setGuide4Visible(true);
|
||||
}
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
@@ -80,22 +96,25 @@ const SunzhongshanPlace2 = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标1-铁路计划图 */}
|
||||
<Cursor
|
||||
className="absolute left-160 top-114"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
{/* 光标2-陆军大元帅时佩带的指挥刀 */}
|
||||
<Cursor
|
||||
className="absolute left-235 bottom-95"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
/>
|
||||
{/* 光标3-917.9.10孙中山就任中华民国军政府海陆军大元帅留影 */}
|
||||
<Cursor
|
||||
className="absolute left-241.5 top-119"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
/>
|
||||
{/* 光标4-实业计划 */}
|
||||
<Cursor
|
||||
className="absolute right-120 bottom-78"
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
@@ -117,10 +136,31 @@ const SunzhongshanPlace2 = () => {
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
const currentId = activeExhibitId;
|
||||
// 关闭展品框时，重置所有对话的进度并隐藏对话，确保遮罩层正确清理
|
||||
setGuide1Step(0);
|
||||
setGuide1Visible(false);
|
||||
setGuide4Step(0);
|
||||
setGuide4Visible(false);
|
||||
|
||||
// 关闭展品框时，重置对应对话的进度并隐藏对话
|
||||
if (currentId === 1) {
|
||||
// 光标1：关闭窗口后播放视频
|
||||
setActiveExhibitId(null);
|
||||
setShowVideo1(true);
|
||||
return;
|
||||
} else if (currentId === 4) {
|
||||
// 光标4：正常关闭，更新visited状态
|
||||
} else if (currentId === 3) {
|
||||
// 光标3：关闭窗口后播放视频
|
||||
setActiveExhibitId(null);
|
||||
setShowVideo3(true);
|
||||
return;
|
||||
}
|
||||
if (currentId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeExhibitId);
|
||||
next.add(currentId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
@@ -128,22 +168,106 @@ const SunzhongshanPlace2 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* <GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
{/* 光标1的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide1Visible}
|
||||
currentStep={guide1Step}
|
||||
onStepChange={setGuide1Step}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setGuide1Visible(nextVisible);
|
||||
}}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
孙中山先生是如何讨袁护法、捍卫共和的？
|
||||
这张大大的路线图好复杂,上面画满了铁路线,这是孙中山先生规划的吗?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
让我们继续探索孙中山先生讨袁护法、捍卫共和的历程...
|
||||
对!这是中国铁路总公司的路线图。孙中山先生辞去临时大总统后,致力于国家的实业建设。他认为"交通为实业之母,铁路又为交通之母"。要让国家强大,首先要发展实业,投身铁路规划与建设就是其中一项重要实践。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps> */}
|
||||
<GuideStepsItem speaker="guide">
|
||||
旁边这本《实业计划》中译稿手稿,就是他对中国实业发展的整体构想,里面不仅有铁路,还有港口、工厂等规划。这个计划也是孙先生在上海居住期间完成的。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标1的视频 */}
|
||||
{showVideo1 && (
|
||||
<Video
|
||||
ref={video1Ref}
|
||||
src={getPublicPath("video/sunzhongshan/sunzhongshan_05.mp4")}
|
||||
className="fixed inset-0 z-[20000]"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setShowVideo1(false);
|
||||
// 修改cursor状态
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(1);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 光标4的对话 */}
|
||||
<GuideSteps
|
||||
visible={guide4Visible}
|
||||
currentStep={guide4Step}
|
||||
onStepChange={setGuide4Step}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setGuide4Visible(nextVisible);
|
||||
}}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
真是一个宏伟的计划,可是在内忧外患的时局下,实现起来一定很艰难吧?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡日本。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
袁世凯趁机撤销了他"筹办全国铁路全权"的职务,把铁路公司的事权交给了北京政府交通部,公司就这样解散了。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标3的视频 */}
|
||||
{showVideo3 && (
|
||||
<Video
|
||||
ref={video3Ref}
|
||||
src={getPublicPath("video/sunzhongshan/sunzhongshan_05.mp4")}
|
||||
className="fixed inset-0 z-[20000]"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setShowVideo3(false);
|
||||
// 修改cursor状态
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(3);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user