zhongyidian
284302341c
- Implemented functions to manage puzzle progress including checking if residences are started, complete, and unlocked. - Added utility functions to retrieve piece IDs based on residence and route. - Introduced a new TypeScript file for progression management. - Integrated puzzle data configuration and residence data for seamless progression tracking.
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
|
|
import { Image } from '@/components'
|
|
import { usePuzzleStore } from '@/store/puzzleStore'
|
|
import { getResidenceStageUnlocks, isResidenceUnlocked } from '@/config/progression'
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
|
import { useRongdeshengStore } from '@/store/rongdeshengStore'
|
|
|
|
const RongdeshengHome = () => {
|
|
const navigate = useNavigate()
|
|
const { moduleName } = useParams<{ moduleName: string }>()
|
|
|
|
// starName 固定为 rongdesheng
|
|
const starName = 'rongdesheng'
|
|
const lastVisitedPlace = useRongdeshengStore((s) => s.lastVisitedPlace)
|
|
|
|
const puzzles = usePuzzleStore((state) => state.puzzles)
|
|
const isLoaded = usePuzzleStore((state) => state.isLoaded)
|
|
const { dialogueUnlocked, reflectionUnlocked, internalizationUnlocked } =
|
|
getResidenceStageUnlocks(starName, puzzles)
|
|
|
|
useEffect(() => {
|
|
if (isLoaded && !isResidenceUnlocked(starName, puzzles)) {
|
|
navigate('/menu', { replace: true })
|
|
}
|
|
}, [isLoaded, navigate, puzzles, starName])
|
|
|
|
if (!moduleName) return null
|
|
|
|
return (
|
|
<div
|
|
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(`${starName}/底图`),
|
|
}}
|
|
>
|
|
<Image
|
|
className="absolute right-37 top-22"
|
|
src={getStaticImage('components/革命先驱故居-返回')}
|
|
button
|
|
onClick={() => navigate(`/entrance/${moduleName}`)}
|
|
/>
|
|
|
|
<div className="absolute right-20 top-75 flex flex-col space-y-10">
|
|
{/* 对话 */}
|
|
<Image
|
|
button={dialogueUnlocked}
|
|
className={dialogueUnlocked ? undefined : 'opacity-50 grayscale cursor-not-allowed'}
|
|
src={getStaticImage('star/一-解锁')}
|
|
onClick={() => {
|
|
if (!dialogueUnlocked) return
|
|
navigate(`/${moduleName}/${starName}/${lastVisitedPlace || 'place1'}`)
|
|
}}
|
|
/>
|
|
|
|
{/* 体悟（占位） */}
|
|
<Image
|
|
button={reflectionUnlocked}
|
|
className={reflectionUnlocked ? undefined : 'opacity-50 grayscale cursor-not-allowed'}
|
|
src={getStaticImage('star/二-解锁')}
|
|
onClick={() => {
|
|
if (!reflectionUnlocked) return
|
|
navigate(`/${moduleName}/${starName}/reflection`)
|
|
}}
|
|
/>
|
|
|
|
{/* 内化（占位） */}
|
|
<Image
|
|
button={internalizationUnlocked}
|
|
className={
|
|
internalizationUnlocked ? undefined : 'opacity-50 grayscale cursor-not-allowed'
|
|
}
|
|
src={getStaticImage('star/三-解锁')}
|
|
onClick={() => {
|
|
if (!internalizationUnlocked) return
|
|
navigate(`/${moduleName}/${starName}/internalization`)
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RongdeshengHome
|