92 lines
2.5 KiB
TypeScript
92 lines
2.5 KiB
TypeScript
import { useState } from "react";
|
|
import { Title, Image, Cursor } from "@/components";
|
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import ViseAssemblyDialog from "./scene3/ViseAssemblyDialog";
|
|
|
|
const starName = "huangyanpei";
|
|
|
|
const HuangyanpeiReflectionScene3 = () => {
|
|
const navigate = useNavigate();
|
|
const { moduleName } = useParams<{
|
|
moduleName: string;
|
|
}>();
|
|
|
|
const [showDialog, setShowDialog] = useState(false);
|
|
const [visited, setVisited] = useState<Set<number>>(new Set());
|
|
|
|
if (!moduleName) {
|
|
return null;
|
|
}
|
|
|
|
const progressCount = visited.size;
|
|
const total = 1;
|
|
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(
|
|
`huangyanpei/reflection/scene3/11_001`
|
|
),
|
|
}}
|
|
>
|
|
<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={() => {
|
|
navigate(`/${moduleName}/${starName}/home`);
|
|
}}
|
|
/>
|
|
|
|
{/* 互动展品光标：组装台钳互动 */}
|
|
<Cursor
|
|
className="absolute right-100 bottom-55"
|
|
onClick={() => setShowDialog(true)}
|
|
read={visited.has(1)}
|
|
/>
|
|
|
|
{/* 组装台钳互动弹窗 */}
|
|
<ViseAssemblyDialog
|
|
visible={showDialog}
|
|
onClose={() => setShowDialog(false)}
|
|
onComplete={() => {
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(1);
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
|
|
{completed && (
|
|
<Image
|
|
className="absolute bottom-0 right-4"
|
|
src={getStaticImage("components/place/继续前进")}
|
|
button
|
|
onClick={() => {
|
|
navigate(`/${moduleName}/${starName}/reflection4`);
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HuangyanpeiReflectionScene3;
|