update and polish

2026-02-08 17:06:59 +01:00
parent 81a53e441e
commit fcd8cadf43
18 changed files with 915 additions and 354 deletions
@@ -0,0 +1,113 @@
+"use client";
+
+import React from "react";
+import { t } from "@/content/locales";
+
+interface VictoryScreenProps {
+  credits: number;
+  onRestart: () => void;
+}
+
+export default function VictoryScreen({
+  credits,
+  onRestart,
+}: VictoryScreenProps) {
+  const creditsBlue = "#4bd5ee";
+
+  return (
+    <div className="fixed inset-0 z-[120] 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))
+            `,
+            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))
+            `,
+            backgroundSize: "450px 450px",
+            backgroundRepeat: "repeat",
+          }}
+        />
+      </div>
+
+      <div
+        className="absolute inset-0 opacity-10"
+        style={{
+          background: `radial-gradient(circle at center, ${creditsBlue} 0%, transparent 70%)`,
+        }}
+      />
+
+      <div
+        className="max-w-2xl w-full mx-4 relative z-10 text-center space-y-8 p-10 border-2 rounded-2xl bg-black/80 backdrop-blur-sm shadow-[0_0_50px_rgba(0,0,0,0.5)]"
+        style={{ borderColor: creditsBlue }}
+      >
+        <div className="space-y-2">
+          <h1 className="font-starjedi text-6xl" style={{ color: creditsBlue }}>
+            {t.VICTORY.TITLE}
+          </h1>
+          <p
+            className="font-mono tracking-[0.3em] uppercase text-xs opacity-70"
+            style={{ color: creditsBlue }}
+          >
+            {t.VICTORY.SUBTITLE}
+          </p>
+        </div>
+
+        <div
+          className="space-y-6 leading-relaxed"
+          style={{ color: creditsBlue }}
+        >
+          <div className="space-y-2">
+            <p className="text-sm tracking-wider font-medium uppercase">
+              {t.VICTORY.MESSAGE}
+            </p>
+            <p className="text-4xl font-black tracking-tighter">
+              {credits.toLocaleString()} CR
+            </p>
+          </div>
+
+          <div
+            className="text-[10px] py-4 border-y border-opacity-20 inline-block px-8 tracking-[0.2em] uppercase italic"
+            style={{ borderColor: creditsBlue }}
+          >
+            The galaxy will remember your name.
+          </div>
+        </div>
+
+        <div className="pt-6">
+          <button
+            onClick={onRestart}
+            className="px-12 py-5 border-2 font-black uppercase tracking-[0.3em] transition-all hover:text-black active:scale-95"
+            style={{
+              borderColor: creditsBlue,
+              color: creditsBlue,
+            }}
+            onMouseOver={(e) => {
+              e.currentTarget.style.backgroundColor = creditsBlue;
+              e.currentTarget.style.color = "black";
+            }}
+            onMouseOut={(e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.color = creditsBlue;
+            }}
+          >
+            {t.VICTORY.BUTTON}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}