61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { BoothConfig } from "@/types/booth";
|
||
|
|
import { useI18n } from "@/lib/i18n";
|
||
|
|
import { MascotGuide } from "@/components/MascotGuide";
|
||
|
|
|
||
|
|
interface StandbyScreenProps {
|
||
|
|
config: BoothConfig;
|
||
|
|
onStart: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const StandbyScreen: React.FC<StandbyScreenProps> = ({
|
||
|
|
config,
|
||
|
|
onStart,
|
||
|
|
}) => {
|
||
|
|
const { labels } = config;
|
||
|
|
const { t, language } = useI18n();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={onStart}
|
||
|
|
className="relative flex-1 flex flex-col items-center justify-between px-3 py-2 sm:px-6 sm:py-4 cursor-pointer select-none overflow-hidden"
|
||
|
|
>
|
||
|
|
{/* Center Hero Character - Clean 3D Mascot */}
|
||
|
|
<div className="my-auto flex flex-col items-center text-center z-10 space-y-2 sm:space-y-3 px-2 max-w-sm">
|
||
|
|
{/* Title & Subtitle with Stylized Typography */}
|
||
|
|
<div className="space-y-0.5">
|
||
|
|
<h2 className={`text-2xl sm:text-3xl md:text-4xl font-black text-amber-100 tracking-wider drop-shadow-[0_4px_12px_rgba(0,0,0,0.95)] ${language === 'en' ? 'font-cinzel' : 'font-dojo'}`}>
|
||
|
|
{t(labels.welcomeTitle)}
|
||
|
|
</h2>
|
||
|
|
<p className="text-amber-400/95 font-semibold text-[11px] sm:text-xs tracking-widest uppercase drop-shadow-[0_2px_4px_rgba(0,0,0,0.9)]">
|
||
|
|
{t(labels.welcomeSubtitle)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Floating 3D Karate Ghost Mascot with Comic Speech Bubble */}
|
||
|
|
<MascotGuide
|
||
|
|
pose="bow"
|
||
|
|
size="lg"
|
||
|
|
speechPosition="top"
|
||
|
|
className="my-1"
|
||
|
|
speechText={{
|
||
|
|
en: "Osu! Welcome to our dojo! Strike your fiercest martial arts pose & become an epic Shanghai legend!",
|
||
|
|
zh: "押忍！欢迎来到道馆！摆出你最帅气的武道姿势，成为魔都万圣传奇！",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Halloween Game Action Button */}
|
||
|
|
<div className="z-10 w-full flex flex-col items-center pb-1">
|
||
|
|
<button
|
||
|
|
onClick={onStart}
|
||
|
|
className="w-full max-w-[210px] sm:max-w-[240px] py-2 sm:py-2.5 px-4 game-btn-gold font-extrabold text-xs sm:text-sm tracking-wider flex items-center justify-center space-x-2 text-center select-none uppercase font-cinzel shadow-lg"
|
||
|
|
>
|
||
|
|
<span>{t(labels.welcomeCta)}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|