69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { Sparkles, Loader2, Flame } from "lucide-react";
|
|
import { BoothConfig } from "@/types/booth";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { MascotGuide } from "@/components/MascotGuide";
|
|
|
|
interface LoadingScreenProps {
|
|
config: BoothConfig;
|
|
currentStepMessage?: string;
|
|
}
|
|
|
|
export const LoadingScreen: React.FC<LoadingScreenProps> = ({
|
|
config,
|
|
currentStepMessage,
|
|
}) => {
|
|
const { t } = useI18n();
|
|
const [progress, setProgress] = useState(15);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 92) return prev;
|
|
return prev + Math.floor(Math.random() * 8) + 3;
|
|
});
|
|
}, 700);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative flex-1 flex flex-col items-center justify-center p-6 text-center select-none overflow-hidden">
|
|
{/* Animated Center Karate Ghost & Ki-Sphere */}
|
|
<div className="relative mb-4 flex flex-col items-center">
|
|
<MascotGuide
|
|
pose="punch"
|
|
size="md"
|
|
speechPosition="top"
|
|
speechText={{
|
|
en: "KIAI! Gathering dojo ki and pumpkin magic...",
|
|
zh: "气合！正在汇聚道馆灵气与南瓜魔法...",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<h2 className="text-xl sm:text-2xl font-black text-white tracking-wide mb-2 drop-shadow-[0_2px_0_#090314]">
|
|
{t(config.labels.processingTitle)}
|
|
</h2>
|
|
|
|
<p className="text-xs sm:text-sm text-purple-200 max-w-xs mb-6 font-medium leading-relaxed drop-shadow">
|
|
{currentStepMessage || t(config.labels.processingSubtitle)}
|
|
</p>
|
|
|
|
{/* Chunky Progress Bar */}
|
|
<div className="w-full max-w-xs h-6 rounded-full bg-black/60 border-2 border-black p-1 shadow-inner relative overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full bg-gradient-to-r from-amber-400 via-orange-500 to-cyan-400 transition-all duration-300 shadow-[0_0_15px_rgba(251,191,36,0.6)]"
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
|
|
<span className="text-[11px] font-black text-amber-300 mt-2 tracking-wider">
|
|
{progress}% · {t({ en: "MARTIAL MAGIC BREWING", zh: "武道气合凝聚中" })}
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|