feat:碎片完善
This commit is contained in:
zhongyidian committed
1 parent
ec7e8e2bd2
commit
046501705f
74 files changed
+1602
-172
No files matched your search
@@ -0,0 +1,252 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { cn, getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { usePuzzleStore } from "@/store/puzzleStore";
|
||||
import { getPuzzlePieceLayout } from "@/config/puzzleLayout";
|
||||
import { getPuzzlePieceData } from "@/config/puzzleData";
|
||||
import { Image } from "@/components";
|
||||
|
||||
export interface PuzzleSystemProps {
|
||||
/** 是否可见 */
|
||||
visible: boolean;
|
||||
/** 关闭回调 */
|
||||
onClose: () => void;
|
||||
/** 故居名称，如 'chenyun' */
|
||||
residence: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 拼图系统组件
|
||||
* - 全屏弹窗，显示拼图碎片
|
||||
* - 4x4网格布局（16块碎片）
|
||||
* - 已解锁显示正常图片，未解锁显示遮罩
|
||||
* - 点击碎片可跳转到对应页面
|
||||
*/
|
||||
const PuzzleSystem = ({ visible, onClose, residence }: PuzzleSystemProps) => {
|
||||
const navigate = useNavigate();
|
||||
const { moduleName } = useParams<{ moduleName: string }>();
|
||||
const { isPuzzleUnlocked, getPuzzleCollectProgress } = usePuzzleStore();
|
||||
const [selectedPiece, setSelectedPiece] = useState<number | null>(null);
|
||||
|
||||
// 当弹窗关闭时重置选中状态
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
setSelectedPiece(null);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
if (!visible) return null;
|
||||
|
||||
// 背景图片
|
||||
const backgroundImage = getStaticImage("puzzle/底图");
|
||||
|
||||
// 处理碎片点击
|
||||
const handlePieceClick = (pieceId: number) => {
|
||||
const isUnlocked = isPuzzleUnlocked(residence, pieceId);
|
||||
|
||||
if (isUnlocked) {
|
||||
// 显示选中效果，更新详情框
|
||||
setSelectedPiece(pieceId);
|
||||
} else {
|
||||
// 未解锁的碎片，可以显示提示或不做任何操作
|
||||
// 暂时不做处理，或者可以添加提示
|
||||
}
|
||||
};
|
||||
|
||||
// 处理前往按钮点击
|
||||
const handleGoToPage = () => {
|
||||
if (moduleName && selectedPiece) {
|
||||
// console.log(residence, selectedPiece, moduleName);
|
||||
// const route = getPuzzleRoute(residence, selectedPiece, moduleName);
|
||||
// console.log(route);
|
||||
const route = selectedPieceData?.route;
|
||||
if (route) {
|
||||
navigate(`/${moduleName}/${residence}/${route}`);
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取当前选中碎片的数据
|
||||
const selectedPieceData = selectedPiece
|
||||
? getPuzzlePieceData(residence, selectedPiece)
|
||||
: null;
|
||||
|
||||
// 生成16块碎片（1-16）
|
||||
const pieces = Array.from({ length: 16 }, (_, i) => i + 1);
|
||||
|
||||
// 获取收集进度
|
||||
const collectProgress = getPuzzleCollectProgress(residence);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center"
|
||||
style={{
|
||||
background: "rgba(0, 0, 0, 0.8)",
|
||||
}}
|
||||
onClick={(e) => {
|
||||
// 点击背景关闭
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* 背景图片 */}
|
||||
<div
|
||||
className="relative w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: `url(${backgroundImage})`,
|
||||
}}
|
||||
>
|
||||
{/* 关闭按钮 */}
|
||||
<Image
|
||||
className="absolute right-8 top-8 z-10"
|
||||
src={getStaticImage("components/关闭")}
|
||||
alt="关闭"
|
||||
button
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* 收集进度 */}
|
||||
<div
|
||||
className="absolute left-1/2 -translate-x-1/2 top-8 z-10 w-[708px] h-[107px] px-12 flex justify-between items-center"
|
||||
style={{ backgroundImage: getBackgroundImage("puzzle/收集进度") }}
|
||||
>
|
||||
<div className="relative">
|
||||
<span
|
||||
className={cn(
|
||||
"text-white text-2xl font-bold",
|
||||
"[text-shadow:_-4px_-4px_0_#ae6400,_4px_-4px_0_#ae6400,_-4px_4px_0_#ae6400,_4px_4px_0_#ae6400,_-5px_0_0_#ae6400,_5px_0_0_#ae6400,_0_-5px_0_#ae6400,_0_5px_0_#ae6400,_0_0_20px_rgba(255,215,0,1),_0_0_40px_rgba(255,215,0,0.8),_0_0_60px_rgba(255,215,0,0.5)]"
|
||||
)}
|
||||
>
|
||||
陈云故居碎片
|
||||
</span>
|
||||
<img
|
||||
className="absolute -top-10 left-0 -z-10"
|
||||
src={getStaticImage("puzzle/碎片装饰")}
|
||||
alt="碎片装饰"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-[#490000] text-4xl font-bold">
|
||||
{/* 收集进度 */}
|
||||
{collectProgress.toFixed(2) == "1.00"
|
||||
? "已集齐"
|
||||
: `收集进度${collectProgress.toFixed(2)}%`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 完整拼图底图 - 作为背景显示所有碎片拼好的样子 */}
|
||||
<div className="absolute inset-0 flex justify-end">
|
||||
<div className="flex items-center gap-4 px-6 pt-40">
|
||||
<div className="w-200 h-200 perspective-[1000px]">
|
||||
{/* 拼图容器 - 使用绝对定位，根据配置放置每个碎片 */}
|
||||
<div className="relative h-full transform-3d rotate-x-20 -rotate-y-0 -rotate-z-0 scale-85">
|
||||
{pieces.map((pieceId) => {
|
||||
const isUnlocked = isPuzzleUnlocked(residence, pieceId);
|
||||
const layout = getPuzzlePieceLayout(residence, pieceId);
|
||||
|
||||
// 碎片图片路径
|
||||
const pieceImage = getStaticImage(
|
||||
`puzzle/${residence}/${pieceId}`
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={pieceId}
|
||||
className={`absolute transition-all ${
|
||||
isUnlocked
|
||||
? "cursor-pointer hover:scale-105 hover:z-99 z-10"
|
||||
: "cursor-not-allowed z-0"
|
||||
}`}
|
||||
style={{
|
||||
left: layout.position.x,
|
||||
top: layout.position.y,
|
||||
}}
|
||||
onClick={() => handlePieceClick(pieceId)}
|
||||
>
|
||||
<div className="relative">
|
||||
{/* 碎片图片 - 始终显示，未解锁的用CSS变黑 */}
|
||||
<img
|
||||
src={pieceImage}
|
||||
alt={`碎片 ${pieceId}`}
|
||||
style={{
|
||||
filter: isUnlocked ? "" : `brightness(0.3) `,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 选中效果遮罩 - 只对已解锁的碎片显示 */}
|
||||
{/* {isSelected && isUnlocked && (
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none z-10"
|
||||
style={{
|
||||
backgroundImage: `url(${selectedMaskImage})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
}}
|
||||
/>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2xl h-200">
|
||||
{selectedPieceData && (
|
||||
<div
|
||||
className="w-[657px] h-[776px] bg-no-repeat bg-cover p-10 text-center"
|
||||
style={{
|
||||
backgroundImage: getBackgroundImage("puzzle/详情框"),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
{selectedPieceData && (
|
||||
<div
|
||||
className={cn(
|
||||
"text-white text-5xl font-bold whitespace-nowrap mt-6 h-20 space-y-4",
|
||||
"[text-shadow:_-4px_-4px_0_#ae6400,_4px_-4px_0_#ae6400,_-4px_4px_0_#ae6400,_4px_4px_0_#ae6400,_-5px_0_0_#ae6400,_5px_0_0_#ae6400,_0_-5px_0_#ae6400,_0_5px_0_#ae6400,_0_0_20px_rgba(255,215,0,1),_0_0_40px_rgba(255,215,0,0.8),_0_0_60px_rgba(255,215,0,0.5)]"
|
||||
)}
|
||||
>
|
||||
{/* 空格换行 */}
|
||||
{selectedPieceData.title
|
||||
.split(" ")
|
||||
.map((word: string, index: number) => (
|
||||
<div key={index}>
|
||||
{word}
|
||||
{index <
|
||||
selectedPieceData.title.split(" ").length - 1 &&
|
||||
" "}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* 对应页面图片 */}
|
||||
<div className="max-h-[500px] min-h-[400px] flex items-center justify-center">
|
||||
<img
|
||||
src={getStaticImage(
|
||||
`puzzle/${selectedPieceData.detailImage}`
|
||||
)}
|
||||
alt={selectedPieceData.title}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
{/* 前往按钮 */}
|
||||
{selectedPieceData && (
|
||||
<Image
|
||||
src={getStaticImage("puzzle/点击前往浏览")}
|
||||
alt="前往按钮"
|
||||
button
|
||||
onClick={handleGoToPage}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PuzzleSystem;
|
||||
Reference in new issue
Block a user