Refactor PK page and add Trellis setup

2026-06-30 21:03:33 +08:00
parent 908bad097c
commit 1d566bd3c0
119 changed files with 17053 additions and 538 deletions
@@ -0,0 +1,56 @@
+import { RotateCcw } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { pkPageCursorClass } from "../constants";
+import type { Team } from "../types";
+
+type Winner = Team | "draw";
+
+type EndScreenProps = {
+  winner: Winner;
+  scoreRed: number;
+  scoreBlue: number;
+  onRestart: () => void;
+};
+
+export function EndScreen({ winner, scoreRed, scoreBlue, onRestart }: EndScreenProps) {
+  return (
+    <main
+      className={cn(
+        pkPageCursorClass,
+        "pk-end-stage mx-auto grid min-h-[calc(100vh-60px)] max-w-5xl place-items-center px-4 py-4",
+      )}
+    >
+      <section className="pk-end-card w-full rounded-[28px] bg-white p-[clamp(28px,6vw,72px)] text-center shadow-soft">
+        <div className="pk-end-visual mb-5 text-[clamp(72px,10vw,118px)] leading-none">{winner === "draw" ? "🤝" : "🏆"}</div>
+        <h1 className="pk-end-title text-[clamp(32px,5vw,54px)] font-black text-rose-500">PK结束！</h1>
+        <p
+          className={cn(
+            "pk-end-result mt-4 text-[clamp(26px,4vw,44px)] font-black",
+            winner === "red" && "text-red-600",
+            winner === "blue" && "text-blue-600",
+            winner === "draw" && "text-amber-500",
+          )}
+        >
+          {winner === "red" ? "🔴 红队获胜！" : winner === "blue" ? "🔵 蓝队获胜！" : "平局！势均力敌！"}
+        </p>
+        <div className="pk-end-score-grid mx-auto mt-8 grid max-w-lg grid-cols-2 gap-4">
+          <div className="pk-end-score-card rounded-lg bg-red-50 p-5 text-red-700">
+            <div className="font-bold">红队</div>
+            <div className="pk-end-score text-4xl font-black">{scoreRed}</div>
+          </div>
+          <div className="pk-end-score-card rounded-lg bg-blue-50 p-5 text-blue-700">
+            <div className="font-bold">蓝队</div>
+            <div className="pk-end-score text-4xl font-black">{scoreBlue}</div>
+          </div>
+        </div>
+        <button
+          onClick={onRestart}
+          className="pk-end-button mt-8 inline-flex items-center gap-2 rounded-full bg-rose-500 px-10 py-4 text-lg font-bold text-white shadow-lg transition hover:bg-rose-600"
+        >
+          <RotateCcw className="size-5" />
+          再来一局
+        </button>
+      </section>
+    </main>
+  );
+}