181 lines
6.3 KiB
TypeScript
181 lines
6.3 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
ExhibitOverlay,
|
|
Title,
|
|
Image,
|
|
Cursor,
|
|
GuideSteps,
|
|
GuideStepsItem,
|
|
StudyGuideModal,
|
|
} from "@/components";
|
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
// starName 固定为 chenyun
|
|
const starName = "chenyun";
|
|
|
|
// 展品 ID 与资源路径映射
|
|
const exhibitSrcMap: Record<1 | 2, string> = {
|
|
1: "chenyun/place2/场景2展品1",
|
|
2: "chenyun/place2/场景2展品2",
|
|
};
|
|
|
|
// 展品描述映射
|
|
const exhibitDescriptionMap: Record<1 | 2, string> = {
|
|
1: "",
|
|
2: "同学你看，这里有一幅陈云提写的颜安小学。陈云在青浦县乙种商业学校学习了一个多月后，又因经济困难不得不辍学回家。多亏当地知识分子、颜安小学校长杜枢，他免费保荐陈云入颜安小学高小部读书。颜安小学实行的新式教育开阔了陈云的视野，五四运动后，颜安小学师生积极投入反帝爱国运动，为陈云日后加入中国共产党埋下了思想的种子。",
|
|
};
|
|
const ChenyunPlace2 = () => {
|
|
const navigate = useNavigate();
|
|
const { moduleName } = useParams<{
|
|
moduleName: string;
|
|
}>();
|
|
|
|
// 当前激活展品 ID，只存 ID 做唯一标识
|
|
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
|
|
// 已浏览展品 ID 集合
|
|
const [visited, setVisited] = useState<Set<number>>(new Set());
|
|
// GuideSteps 显示状态
|
|
const [guideVisible, setGuideVisible] = useState(false);
|
|
// GuideSteps 当前步骤
|
|
const [guideStep, setGuideStep] = useState(0);
|
|
// 学习引导弹窗显示状态
|
|
const [showGuideModal, setShowGuideModal] = useState(true);
|
|
|
|
const handleOpenExhibit = (index: 1 | 2) => {
|
|
if (index === 1) {
|
|
// 展品1：点击时同时打开展品和引导对话，从第1步开始
|
|
setActiveExhibitId(1);
|
|
setGuideVisible(true);
|
|
setGuideStep(0);
|
|
} else {
|
|
// 展品2：直接打开
|
|
setActiveExhibitId(index);
|
|
}
|
|
};
|
|
|
|
// 监听GuideSteps步骤变化，仅同步当前步骤
|
|
const handleGuideStepChange = (step: number) => {
|
|
setGuideStep(step);
|
|
};
|
|
|
|
const progressCount = visited.size;
|
|
const total = 2;
|
|
const completed = progressCount >= total;
|
|
const subtitle = completed
|
|
? "探索陈云就读过的学校(已完成)"
|
|
: `探索陈云就读过的学校(${progressCount}/${total})`;
|
|
const subtitleClassName = completed
|
|
? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
|
|
: undefined;
|
|
return (
|
|
<div
|
|
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(`chenyun/place2/场景2`),
|
|
}}
|
|
>
|
|
{/* 标题 */}
|
|
<Title
|
|
title="水乡少年·艰辛成长"
|
|
subtitle={subtitle}
|
|
subtitleClassName={subtitleClassName}
|
|
className="absolute top-10 left-1/2 -translate-x-1/2"
|
|
/>
|
|
|
|
{/* 返回上一章 */}
|
|
<Image
|
|
className="absolute right-5 top-5"
|
|
src={getStaticImage("components/离开")}
|
|
button
|
|
onClick={() => {
|
|
if (moduleName && starName) {
|
|
navigate(`/${moduleName}/${starName}/place1`);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* 展品1 */}
|
|
<Cursor
|
|
className="absolute left-100 top-100"
|
|
onClick={() => handleOpenExhibit(1)}
|
|
read={visited.has(1)}
|
|
/>
|
|
{/* 展品2 */}
|
|
<Cursor
|
|
className="absolute left-210 top-100"
|
|
onClick={() => handleOpenExhibit(2)}
|
|
read={visited.has(2)}
|
|
/>
|
|
|
|
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
|
{completed && (
|
|
<Image
|
|
className="absolute bottom-0 right-160"
|
|
src={getStaticImage("chenyun/place2/继续前进2")}
|
|
button
|
|
onClick={() => {
|
|
navigate(`/${moduleName}/${starName}/place3`);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 遮罩层 */}
|
|
<ExhibitOverlay
|
|
visible={activeExhibitId !== null}
|
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
|
description={
|
|
activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
|
|
}
|
|
autoPlayDescription={activeExhibitId === 1}
|
|
onClose={() => {
|
|
if (activeExhibitId !== null) {
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(activeExhibitId);
|
|
return next;
|
|
});
|
|
}
|
|
setActiveExhibitId(null);
|
|
}}
|
|
/>
|
|
|
|
{/* 展品1的引导对话 */}
|
|
<GuideSteps
|
|
visible={guideVisible}
|
|
onVisibleChange={setGuideVisible}
|
|
currentStep={guideStep}
|
|
onStepChange={handleGuideStepChange}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem speaker="student">
|
|
那陈云爷爷是怎么有机会到图中的青浦县乙种商业学校读书的呀？
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
因为家贫，初小读完的陈云便辍学在家。后在舅母亲戚的资助下，陈云才到青浦县乙种商业学校学习珠算和记账的，他在很短时间里就基本掌握了珠算，还初步学会写账，这为陈云日后从事经济工作打下了基础。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
陈云在党内以“铁算盘”著称，他在经济工作中能熟练使用算盘，就得益于少年时在青浦县立乙种商业学校的学习。
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
|
|
{/* 对话结束后的学习引导 */}
|
|
<StudyGuideModal
|
|
visible={showGuideModal}
|
|
onContinue={() => setShowGuideModal(false)}
|
|
ailgn="left"
|
|
>
|
|
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
|
{"\n"}
|
|
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
|
{"\n"}
|
|
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
|
</StudyGuideModal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChenyunPlace2;
|