/**
 * 图传中央的胜负横幅：一边归零之后，画面正中显示「胜利」或「击败」。
 *
 * # 为什么这次放在正中
 *
 * 命中反馈那一套刻意避开正中（伤害数字放在准星旁），因为被打中的那一下恰恰最需要看着
 * 准星。**胜负不是那种信息**：它是一局的结束，此刻不再需要瞄准；反过来说，它是这一屏
 * 上唯一还重要的事，放在角上会让人错过整场比赛的结论。
 *
 * # 它一直显示到血量被重置
 *
 * 不做 3 秒淡出：淡出之后屏幕上就再没有"这局结束了"的痕迹，截图、回放、现场的争议都
 * 无从对照。血量被重置（长按 BOOT / 下一局开始）时它自己消失——那个动作本来就是
 * "这局翻篇了"。
 *
 * 用词是两边各说各的：赢的一边看到「胜利」，输的一边看到「击败」。同时归零显示「平局」，
 * 因为那时候任何一边显示"胜利"都是错的。
 */

import type { MatchOutcome } from "../lib/types";

interface Props {
  /** 从这一边看的结论。两边都活着时是 null，什么都不显示。 */
  outcome: MatchOutcome | null;
  /** 我这一边的名字。 */
  mine: string;
  /** 对手的名字。 */
  theirs: string;
}

const WORD: Record<MatchOutcome, string> = {
  victory: "胜利",
  defeat: "击败",
  draw: "平局",
};

export function MatchBanner({ outcome, mine, theirs }: Props) {
  if (!outcome) return null;

  const caption =
    outcome === "victory"
      ? `击败 ${theirs}`
      : outcome === "defeat"
        ? `被 ${theirs} 击败`
        : "双方装甲板同时归零";

  return (
    <div className={`match-banner match-banner--${outcome}`} role="status">
      <div className="match-banner__card">
        <span className="match-banner__team">{mine}</span>
        <span className="match-banner__word">{WORD[outcome]}</span>
        <span className="match-banner__caption">{caption}</span>
      </div>
    </div>
  );
}