102 lines
3.9 KiB
TypeScript
102 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { t } from "@/content/locales";
|
|
|
|
interface StartScreenProps {
|
|
onStart: () => void;
|
|
}
|
|
|
|
export default function StartScreen({ onStart }: StartScreenProps) {
|
|
return (
|
|
<div className="fixed inset-0 z-[110] flex items-center justify-center bg-black overflow-hidden">
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div
|
|
className="absolute inset-0 opacity-30"
|
|
style={{
|
|
backgroundImage: `
|
|
radial-gradient(1px 1px at 20px 30px, #fff, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1px 1px at 40px 70px, #fff, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1px 1px at 50px 160px, #ddd, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1px 1px at 90px 40px, #fff, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1px 1px at 130px 80px, #fff, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1px 1px at 160px 120px, #ddd, 100%, rgba(0,0,0,0))
|
|
`,
|
|
backgroundSize: "200px 200px",
|
|
backgroundRepeat: "repeat",
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="absolute inset-0 opacity-50"
|
|
style={{
|
|
backgroundImage: `
|
|
radial-gradient(1.5px 1.5px at 100px 150px, #fff, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1.5px 1.5px at 300px 400px, #ddd, 100%, rgba(0,0,0,0)),
|
|
radial-gradient(1.5px 1.5px at 500px 100px, #fff, 100%, rgba(0,0,0,0))
|
|
`,
|
|
backgroundSize: "450px 450px",
|
|
backgroundRepeat: "repeat",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_#eab308_0%,_transparent_70%)]" />
|
|
|
|
<div className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border-2 border-yellow-500 rounded-2xl bg-black/80 backdrop-blur-sm shadow-[0_0_50px_rgba(0,0,0,0.5)]">
|
|
<div className="space-y-2">
|
|
<h1 className="font-starjedi text-6xl text-yellow-500">
|
|
{t.UI.GAME_TITLE}
|
|
</h1>
|
|
<p className="text-yellow-500 font-mono tracking-[0.3em] uppercase text-xs">
|
|
{t.START_SCREEN.SUBTITLE}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6 text-yellow-500 leading-relaxed">
|
|
<p className="text-sm tracking-wider font-medium">
|
|
{t.START_SCREEN.INTRO_TEXT}
|
|
<span className="block mt-1 text-yellow-500 font-black">
|
|
{t.START_SCREEN.MISSION_HIGHLIGHT}
|
|
</span>
|
|
</p>
|
|
|
|
<ul className="text-[10px] space-y-3 inline-block text-left border-l-2 border-yellow-500/50 pl-6 tracking-[0.2em]">
|
|
<li>
|
|
• <strong>{t.START_SCREEN.FEATURE_NAV_TITLE}</strong>{" "}
|
|
<span className="opacity-70">
|
|
{t.START_SCREEN.FEATURE_NAV_DESC}
|
|
</span>
|
|
</li>
|
|
<li>
|
|
• <strong>{t.START_SCREEN.FEATURE_RISK_TITLE}</strong>{" "}
|
|
<span className="opacity-70">
|
|
{t.START_SCREEN.FEATURE_RISK_DESC}
|
|
</span>
|
|
</li>
|
|
<li>
|
|
• <strong>{t.START_SCREEN.FEATURE_COMBAT_TITLE}</strong>{" "}
|
|
<span className="opacity-70">
|
|
{t.START_SCREEN.FEATURE_COMBAT_DESC}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="pt-6">
|
|
<button
|
|
onClick={onStart}
|
|
className="px-12 py-5 border-2 border-yellow-500 text-yellow-500 font-black uppercase tracking-[0.3em] transition-all hover:bg-yellow-500 hover:text-black active:scale-95 shadow-[0_0_20px_rgba(234,179,8,0.2)]"
|
|
>
|
|
{t.UI.START_BUTTON}
|
|
</button>
|
|
|
|
<p className="mt-6 text-[9px] text-yellow-500/70 uppercase tracking-[0.3em]">
|
|
{t.START_SCREEN.FOOTER_ENGINE}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|