57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
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>
|
||
);
|
||
}
|