343 lines
13 KiB
TypeScript
343 lines
13 KiB
TypeScript
import { useState, useEffect } from 'react'
|
||
import { useNavigate, useParams } from 'react-router-dom'
|
||
import { Image, StudyGuideModal } from '@/components'
|
||
import SuccessAlert from '@/components/layout/alert/success-alert'
|
||
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
|
||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||
import { useLuxunStore, saveLuxunStore } from '@/store/luxunStore'
|
||
|
||
const starName = 'luxun'
|
||
|
||
// 城市配置 - 根据效果图调整位置
|
||
// 布局：北京(上) -> 上海(中上) -> 绍兴(中) -> 广州(左下) -> 厦门(右下)
|
||
const cityConfig = [
|
||
{
|
||
id: 1,
|
||
name: '绍兴',
|
||
location: '绍兴三味书屋',
|
||
imagePath: 'luxun/reflection/scene1/绍兴',
|
||
position: { top: '65%', left: '65%' }, // 中间
|
||
iconPosition: { top: '0%', left: '0%' },
|
||
time: '1892年-1898年',
|
||
description: '少年鲁迅在此求学，为《从百草园到三味书屋》埋下创作种子。',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '北京',
|
||
location: '北京八道湾胡同',
|
||
imagePath: 'luxun/reflection/scene1/北京',
|
||
position: { top: '14%', left: '62%' }, // 顶部
|
||
iconPosition: { top: '43%', left: '0%' },
|
||
time: '1919-1923年',
|
||
description: '鲁迅参与新文化运动的核心时期，《阿Q正传》等经典作品在此酝酿创作。',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '厦门',
|
||
location: '厦门大学',
|
||
imagePath: 'luxun/reflection/scene1/厦门',
|
||
position: { top: '83%', left: '78%' }, // 右下
|
||
iconPosition: { top: '16%', left: '40%' },
|
||
time: '1926年9-12月',
|
||
description: '鲁迅应邀前往厦门大学任教，期间写下多篇批判现实的杂文，关注底层民众命运。',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '广州',
|
||
location: '广州白云楼',
|
||
imagePath: 'luxun/reflection/scene1/广州',
|
||
position: { top: '88%', left: '35%' }, // 左下
|
||
iconPosition: { top: '16%', left: '30%' },
|
||
time: '1927年3-9月',
|
||
description: '先生在此整理旧作，思考民族觉醒之路，《朝花夕拾》部分篇章定稿于此。',
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '上海',
|
||
location: '上海鲁迅故居',
|
||
imagePath: 'luxun/reflection/scene1/上海',
|
||
position: { top: '48%', left: '70%' }, // 中上
|
||
iconPosition: { top: '0%', left: '0%' },
|
||
time: '1933-1936年',
|
||
description:
|
||
'鲁迅晚年定居地，先生在此写下《故事新编》等作品，与进步文人并肩，以文字为刃批判黑暗。',
|
||
},
|
||
]
|
||
|
||
const LuxunReflectionScene1 = () => {
|
||
const navigate = useNavigate()
|
||
const { moduleName } = useParams<{
|
||
moduleName: string
|
||
}>()
|
||
|
||
//碎片动画触发方法
|
||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||
const { setReflectionRoute } = useLuxunStore()
|
||
|
||
// 已点击的城市ID集合
|
||
const [clickedCities, setClickedCities] = useState<Set<number>>(new Set())
|
||
// 是否显示成功提示（全部完成时）
|
||
const [showSuccessAlert, setShowSuccessAlert] = useState(false)
|
||
// 当前显示的城市提示ID（单个地点点击后）
|
||
const [currentCityAlertId, setCurrentCityAlertId] = useState<number | null>(null)
|
||
// 是否全部完成
|
||
const [allCompleted, setAllCompleted] = useState(false)
|
||
// 学习引导对话是否显示
|
||
const [showGuideModal, setShowGuideModal] = useState(true)
|
||
|
||
const progress = clickedCities.size
|
||
// 当前应当点亮的城市索引（按照 cityConfig 顺序）
|
||
const nextCityIndex = progress
|
||
const nextCityId = cityConfig[nextCityIndex]?.id
|
||
const totalTasks = cityConfig.length
|
||
|
||
// 检查是否全部完成
|
||
useEffect(() => {
|
||
if (progress === totalTasks && !allCompleted) {
|
||
setAllCompleted(true)
|
||
}
|
||
}, [progress, totalTasks, allCompleted])
|
||
|
||
const handleCityClick = (cityId: number) => {
|
||
// 仅允许按照 cityConfig 顺序点击
|
||
if (clickedCities.has(cityId)) return // 已点击过的不再处理
|
||
if (cityId !== nextCityId) return // 不是当前应点击的城市则不响应
|
||
|
||
setClickedCities((prev) => {
|
||
const next = new Set(prev)
|
||
next.add(cityId)
|
||
return next
|
||
})
|
||
|
||
// 显示当前城市的成功提示
|
||
setCurrentCityAlertId(cityId)
|
||
}
|
||
|
||
const handleSuccessAlertClose = () => {
|
||
setShowSuccessAlert(false)
|
||
}
|
||
|
||
const handleCityAlertClose = () => {
|
||
const cityId = currentCityAlertId
|
||
setCurrentCityAlertId(null)
|
||
|
||
// 如果关闭的是最后一个城市（上海鲁迅故居，id=5），则显示全部完成的提示
|
||
const lastCity = cityConfig[cityConfig.length - 1]
|
||
if (lastCity && cityId === lastCity.id) {
|
||
triggerPuzzleAnimation(14)
|
||
setShowSuccessAlert(true)
|
||
}
|
||
}
|
||
|
||
// 获取当前显示的城市信息
|
||
const currentCity = currentCityAlertId
|
||
? cityConfig.find((city) => city.id === currentCityAlertId)
|
||
: null
|
||
|
||
return (
|
||
<div
|
||
className="flex justify-between w-full h-full bg-cover bg-center bg-no-repeat gap-8 relative"
|
||
style={{
|
||
backgroundImage: getBackgroundImage(`${starName}/reflection/scene1/底图`),
|
||
}}
|
||
>
|
||
{/* 离开按钮 */}
|
||
<Image
|
||
className="absolute right-5 top-5 z-10"
|
||
src={getStaticImage(`${starName}/reflection/scene1/离开`)}
|
||
button
|
||
onClick={() => {
|
||
if (moduleName && starName) {
|
||
navigate(`/${moduleName}/${starName}/home`)
|
||
}
|
||
}}
|
||
/>
|
||
|
||
{/* 左侧：鲁迅的文学足迹 - 地图区域 */}
|
||
<div className="w-[45%] relative">
|
||
{/* 地图容器 */}
|
||
<div className="relative w-full h-full">
|
||
{cityConfig.map((city) => {
|
||
const isClicked = clickedCities.has(city.id)
|
||
const isNext = city.id === nextCityId
|
||
return (
|
||
<div
|
||
key={city.id}
|
||
className="absolute flex flex-col items-center cursor-pointer hover:scale-110 transition-all duration-300"
|
||
style={{
|
||
top: city.position.top,
|
||
left: city.position.left,
|
||
transform: 'translate(-50%, -50%)',
|
||
}}
|
||
onClick={() => handleCityClick(city.id)}
|
||
>
|
||
{/* 城市图片容器 */}
|
||
<div className="relative">
|
||
<img
|
||
src={getStaticImage(city.imagePath)}
|
||
alt={city.name}
|
||
className={`transition-all duration-300 ${
|
||
isClicked ? 'brightness-100' : 'brightness-50 grayscale'
|
||
}`}
|
||
style={{
|
||
filter: isClicked ? 'none' : 'grayscale(100%) brightness(0.5)',
|
||
}}
|
||
/>
|
||
|
||
{/* 点击图标和提示 - 覆盖在城市图片上 */}
|
||
<div
|
||
className="absolute -translate-x-full -translate-y-full flex flex-col items-center z-10 pointer-events-none"
|
||
style={{
|
||
left: city.iconPosition.left,
|
||
top: city.iconPosition.top,
|
||
}}
|
||
>
|
||
{/* 点一点提示 - 始终显示 */}
|
||
{/* 仅对当前应点击的城市显示点一点提示 */}
|
||
{!isClicked && isNext && (
|
||
<div className="flex items-center">
|
||
<img
|
||
src={getStaticImage(`${starName}/reflection/scene1/鲁迅体悟改版点一点`)}
|
||
alt="点一点"
|
||
/>
|
||
<img
|
||
className="animate-finger-bounce scale-y-[-1]"
|
||
src={getStaticImage(`${starName}/reflection/scene1/鲁迅体悟点一点图标`)}
|
||
alt="点一点图标"
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 导航栏 */}
|
||
<div className="absolute top-5 left-[37%] w-80 space-y-4 z-99">
|
||
{/* 任务1点亮图标 */}
|
||
<div className="text-4xl font-bold h-16 cursor-pointer"></div>
|
||
{/* 任务2漫集美学 */}
|
||
<div
|
||
className="text-4xl font-bold h-16 cursor-pointer relative"
|
||
onClick={() => {
|
||
if (moduleName && allCompleted) {
|
||
setReflectionRoute('reflection2')
|
||
saveLuxunStore()
|
||
navigate(`/${moduleName}/${starName}/reflection2`)
|
||
}
|
||
}}
|
||
>
|
||
{/* 任务完成后显示点一点图标 */}
|
||
{allCompleted && (
|
||
<div className="absolute -right-20 top-1/2 flex items-center gap-2 z-10 pointer-events-none">
|
||
<img
|
||
className="animate-finger-bounce scale-x-[-1]"
|
||
src={getStaticImage(`${starName}/reflection/scene1/鲁迅体悟点一点图标`)}
|
||
alt="点一点图标"
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{/* 任务3学习精神 */}
|
||
<div className="text-4xl font-bold h-16 cursor-pointer"></div>
|
||
</div>
|
||
|
||
{/* 右侧区域 */}
|
||
<div className="flex-1 relative">
|
||
{/* 任务进度 */}
|
||
<div className="absolute top-5 left-[24%] w-[445px] h-55 flex justify-center items-center">
|
||
<span className="text-white text-[54px] font-bold [text-shadow:_0px_0px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921]">
|
||
{allCompleted ? '任务进度已完成' : `任务进度：(${progress}/${totalTasks})`}
|
||
</span>
|
||
</div>
|
||
{/* 任务展示窗口 */}
|
||
<div className="absolute bottom-0 right-7 w-[995px] h-[728px] font-bold text-6xl px-10 py-10 ">
|
||
{allCompleted ? (
|
||
// 全部完成后显示详细信息
|
||
<div className="space-y-10 h-full overflow-y-auto custom-scrollbar">
|
||
{cityConfig.map((city) => (
|
||
<div key={city.id} className="space-y-2">
|
||
<div className="text-red-600 text-3xl flex items-end gap-6">
|
||
<div>{city.location}</div>
|
||
<div className="text-gray-600 text-2xl font-normal">{city.time}</div>
|
||
</div>
|
||
<div className="text-black text-2xl font-normal leading-relaxed">
|
||
{city.description}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="space-y-16">
|
||
{
|
||
// 未完成时显示任务列表
|
||
cityConfig.map((city, index) => {
|
||
const isCompleted = clickedCities.has(city.id)
|
||
return (
|
||
<div key={city.id} className={isCompleted ? 'text-green-600' : ''}>
|
||
{index + 1}.{city.location}
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 单个地点点击成功提示弹窗 */}
|
||
{currentCity && (
|
||
<SuccessAlert
|
||
visible={true}
|
||
title=""
|
||
// title={`你找到了${currentCity.location}！`}
|
||
content={`${currentCity.time}，\n${currentCity.description}`}
|
||
onClose={handleCityAlertClose}
|
||
onContinue={handleCityAlertClose}
|
||
/>
|
||
)}
|
||
|
||
{/* 全部完成成功提示弹窗 */}
|
||
<SuccessAlert
|
||
visible={showSuccessAlert}
|
||
title="你找到了鲁迅创作的足迹，接下来，填充文字里的故事吧！"
|
||
onClose={handleSuccessAlertClose}
|
||
onContinue={handleSuccessAlertClose}
|
||
/>
|
||
{/* 学习引导对话 */}
|
||
{/* <GuideSteps
|
||
visible={guideVisible}
|
||
onVisibleChange={setGuideVisible}
|
||
showMask={false}
|
||
highlightSelectors={[]}
|
||
zIndex={10000}
|
||
>
|
||
<GuideStepsItem speaker="guide">
|
||
跟着先生的脚步, 解锁文字里的温度与力量!
|
||
</GuideStepsItem>
|
||
<GuideStepsItem speaker="guide">
|
||
请根据年代由远及近的顺序，依“手指提示”点亮先生的创作足迹，解锁更多的故事背景！
|
||
</GuideStepsItem>
|
||
</GuideSteps> */}
|
||
<StudyGuideModal
|
||
visible={showGuideModal}
|
||
onContinue={() => {
|
||
setShowGuideModal(false)
|
||
}}
|
||
audioSrc={getPublicPath('audio/luxun/mp3_luxun_31.mp3')}
|
||
contentPaddingLeft="2em"
|
||
// firstLineIndent="2em"
|
||
>
|
||
{`同学你好，欢迎来到“跨越时空·体悟”学习模块！
|
||
请登陆“时空回溯・亲历时代”体验仓，下一站：1892年，绍兴三味书屋。
|
||
请按照年代由远及近的顺序，依“手指提示”，点亮先生的创作足迹，解锁更多故事背景！时空门已开，请做好准备吧！`}
|
||
</StudyGuideModal>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default LuxunReflectionScene1
|