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.
91 lines
2.1 KiB
TypeScript
91 lines
2.1 KiB
TypeScript
import { RouterProvider } from 'react-router-dom'
|
|
import { Suspense, useEffect } from 'react'
|
|
import router from './router'
|
|
import { ScaleProvider, useScale } from './contexts/ScaleContext'
|
|
import { RotateHint } from './components/RotateHint'
|
|
import { HintHost } from './components'
|
|
import { useUserStore } from './store'
|
|
import { getUserDefine } from '@/lib/utils/api-common'
|
|
import {
|
|
usePuzzleStore,
|
|
deserializePuzzles,
|
|
PUZZLE_LESSON_ID,
|
|
PUZZLE_KEY,
|
|
} from '@/store/puzzleStore'
|
|
|
|
/**
|
|
* 应用内容组件
|
|
* 使用 useScale 获取缩放样式
|
|
*/
|
|
function AppContent() {
|
|
const { scaleStyle } = useScale()
|
|
const setCourseInfo = useUserStore((state) => state.setCourseInfo)
|
|
|
|
useEffect(() => {
|
|
const params = new URLSearchParams(window.location.search)
|
|
const courseId = params.get('courseid')
|
|
const uid = params.get('uid')
|
|
|
|
if (courseId || uid) {
|
|
setCourseInfo({
|
|
courseId: courseId ?? null,
|
|
uid: uid ?? null,
|
|
})
|
|
}
|
|
}, [setCourseInfo])
|
|
|
|
useEffect(() => {
|
|
;(async () => {
|
|
try {
|
|
const raw = await getUserDefine(PUZZLE_LESSON_ID, PUZZLE_KEY)
|
|
if (raw) {
|
|
const data = JSON.parse(raw) as { puzzles?: Record<string, number[]> }
|
|
if (data.puzzles) {
|
|
usePuzzleStore.setState((prev) => ({
|
|
...prev,
|
|
puzzles: deserializePuzzles(data.puzzles),
|
|
}))
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load puzzle store', e)
|
|
} finally {
|
|
usePuzzleStore.getState().setLoaded(true)
|
|
}
|
|
})()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<div className="relative w-screen h-screen overflow-hidden">
|
|
<div
|
|
style={{
|
|
...scaleStyle,
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<RouterProvider router={router} />
|
|
<HintHost />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
<RotateHint />
|
|
</>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* 应用根组件
|
|
* ScaleProvider 自动处理所有缩放逻辑
|
|
*/
|
|
function App() {
|
|
return (
|
|
<ScaleProvider>
|
|
<AppContent />
|
|
</ScaleProvider>
|
|
)
|
|
}
|
|
|
|
export default App
|