102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
import { useEffect } from 'react'
|
|
import { getBackgroundImage, getStaticImage } from '@/lib/utils'
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
|
import { Image } from '@/components'
|
|
import { getUserDefine } from '@/lib/utils/api-common'
|
|
import { useChenyunStore, CHENYUN_LESSON_ID, CHENYUN_KEY } from '@/store/chenyunStore'
|
|
|
|
const deserializeVisitedExhibits = (
|
|
data: Record<string, number[]> | undefined
|
|
): Record<string, Set<number>> => {
|
|
if (!data || typeof data !== 'object') return {}
|
|
const visitedExhibits: Record<string, Set<number>> = {}
|
|
for (const [place, exhibits] of Object.entries(data)) {
|
|
visitedExhibits[place] = new Set(Array.isArray(exhibits) ? exhibits : [])
|
|
}
|
|
return visitedExhibits
|
|
}
|
|
|
|
const Chenyun = () => {
|
|
const navigate = useNavigate()
|
|
const { moduleName } = useParams<{
|
|
moduleName: string
|
|
}>()
|
|
|
|
// starName 固定为 chenyun
|
|
const starName = 'chenyun'
|
|
|
|
const lastVisitedPlace = useChenyunStore((state) => state.lastVisitedPlace)
|
|
|
|
useEffect(() => {
|
|
;(async () => {
|
|
try {
|
|
const raw = await getUserDefine(CHENYUN_LESSON_ID, CHENYUN_KEY)
|
|
if (!raw) return
|
|
|
|
const data = JSON.parse(raw) as {
|
|
visitedExhibits?: Record<string, number[]>
|
|
isYinyuanSolved?: boolean
|
|
isMimianSolved?: boolean
|
|
lastVisitedPlace?: string
|
|
}
|
|
|
|
useChenyunStore.setState((prev) => ({
|
|
...prev,
|
|
visitedExhibits: deserializeVisitedExhibits(data.visitedExhibits),
|
|
isYinyuanSolved:
|
|
data.isYinyuanSolved !== undefined ? data.isYinyuanSolved : prev.isYinyuanSolved,
|
|
isMimianSolved:
|
|
data.isMimianSolved !== undefined ? data.isMimianSolved : prev.isMimianSolved,
|
|
lastVisitedPlace:
|
|
data.lastVisitedPlace !== undefined ? data.lastVisitedPlace : prev.lastVisitedPlace,
|
|
}))
|
|
} catch (error) {
|
|
console.error('Failed to load Chenyun store', error)
|
|
}
|
|
})()
|
|
}, [])
|
|
|
|
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
|
|
src={getStaticImage('star/一-解锁')}
|
|
onClick={() => navigate(`/${moduleName}/${starName}/${lastVisitedPlace || 'place1'}`)}
|
|
/>
|
|
{/* 体悟 */}
|
|
<Image
|
|
button
|
|
src={getStaticImage('star/二-解锁')}
|
|
onClick={() => navigate(`/${moduleName}/${starName}/reflection`)}
|
|
/>
|
|
{/* 内化 */}
|
|
<Image
|
|
button
|
|
src={getStaticImage('star/三-解锁')}
|
|
onClick={() => navigate(`/${moduleName}/${starName}/internalization`)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Chenyun
|