@cs2dak/react 0.2.0

package/src/components/RoundTimeline.tsx

@@ -0,0 +1,35 @@
+import type { TimelineEvent } from "@cs2dak/contract";
+import { useState } from "react";
+
+export interface RoundTimelineProps {
+  events: TimelineEvent[];
+  initialLimit?: number;
+}
+
+export function RoundTimeline({ events, initialLimit = 120 }: RoundTimelineProps) {
+  const [expanded, setExpanded] = useState(false);
+  const visibleEvents = expanded ? events : events.slice(0, initialLimit);
+  const hiddenCount = events.length - visibleEvents.length;
+
+  return (
+    <div className="dak-timeline">
+      {visibleEvents.map((event) => (
+        <div className="dak-timeline-row" key={event.id}>
+          <span className="dak-badge">R{event.roundNumber}</span>
+          <span className="dak-mono dak-muted">{event.clockLabel}</span>
+          <span>{event.label}</span>
+        </div>
+      ))}
+      {hiddenCount > 0 && (
+        <button className="dak-timeline-more" type="button" onClick={() => setExpanded(true)}>
+          展开剩余 {hiddenCount} 条事件
+        </button>
+      )}
+      {expanded && events.length > initialLimit && (
+        <button className="dak-timeline-more" type="button" onClick={() => setExpanded(false)}>
+          收起到前 {initialLimit} 条
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/ScoreboardTable.test.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { PlayerScoreboardRow } from "@cs2dak/contract";
+import { ScoreboardTable } from "./ScoreboardTable";
+
+// The component only reads a handful of fields; cast a minimal fixture rather
+// than reconstruct the full (large) scoreboard schema.
+const rows = [
+  {
+    steamId64: "76561198000000001",
+    name: "Alice",
+    teamKey: "teamA",
+    accountRR: 1.234,
+    rr: 1.1,
+    kills: 20,
+    deaths: 14,
+    assists: 5,
+    adr: 88.5,
+    kast: 72,
+    headshotPercent: 55,
+    entryKills: 4,
+    tradeKills: 3,
+    awpKills: 2,
+    utilityDamage: 120,
+  },
+] as unknown as PlayerScoreboardRow[];
+
+describe("ScoreboardTable", () => {
+  it("renders plain rows when no onPlayerClick is given", () => {
+    const html = renderToStaticMarkup(React.createElement(ScoreboardTable, { rows }));
+    expect(html).toContain("Alice");
+    expect(html).not.toContain("dak-row-clickable");
+    expect(html).not.toContain('role="button"');
+    expect(html).not.toContain("tabindex");
+  });
+
+  it("marks rows interactive when onPlayerClick is provided", () => {
+    const html = renderToStaticMarkup(
+      React.createElement(ScoreboardTable, { rows, onPlayerClick: () => {} }),
+    );
+    expect(html).toContain("dak-row-clickable");
+    expect(html).toContain('role="button"');
+    expect(html).toContain('tabindex="0"');
+    expect(html).toContain("查看 Alice 详情");
+  });
+});

package/src/components/ScoreboardTable.tsx

@@ -0,0 +1,80 @@
+import type { PlayerScoreboardRow, TeamKey } from "@cs2dak/contract";
+
+export interface ScoreboardTableProps {
+  rows: PlayerScoreboardRow[];
+  /**
+   * When provided, each player row becomes clickable (mouse + keyboard) and
+   * reports the clicked player's steamId64. Lets an embedding app (RivalHub,
+   * CS2-insight-agent) wire up navigation without forking this component.
+   */
+  onPlayerClick?: (steamId64: string) => void;
+}
+
+function teamColor(teamKey: TeamKey): string {
+  return teamKey === "teamA" ? "var(--dak-accent)" : "var(--dak-accent-b)";
+}
+
+export function ScoreboardTable({ rows, onPlayerClick }: ScoreboardTableProps) {
+  return (
+    <table className="dak-table">
+      <thead>
+        <tr>
+          <th>选手</th>
+          <th>V2 RR</th>
+          <th>RR</th>
+          <th>K</th>
+          <th>D</th>
+          <th>A</th>
+          <th>ADR</th>
+          <th>KAST</th>
+          <th>HS</th>
+          <th>首杀</th>
+          <th>补枪</th>
+          <th>AWP</th>
+          <th>道具伤害</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => (
+          <tr
+            key={row.steamId64}
+            className={onPlayerClick ? "dak-row-clickable" : undefined}
+            onClick={onPlayerClick ? () => onPlayerClick(row.steamId64) : undefined}
+            onKeyDown={
+              onPlayerClick
+                ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      onPlayerClick(row.steamId64);
+                    }
+                  }
+                : undefined
+            }
+            tabIndex={onPlayerClick ? 0 : undefined}
+            role={onPlayerClick ? "button" : undefined}
+            aria-label={onPlayerClick ? `查看 ${row.name} 详情` : undefined}
+          >
+            <td>
+              <span className="dak-team-chip">
+                <span className="dak-team-dot" style={{ background: teamColor(row.teamKey) }} />
+                <span>{row.name}</span>
+              </span>
+            </td>
+            <td className="dak-mono dak-rr">{row.accountRR.toFixed(3)}</td>
+            <td className="dak-mono dak-rr">{row.rr.toFixed(2)}</td>
+            <td className="dak-mono">{row.kills}</td>
+            <td className="dak-mono">{row.deaths}</td>
+            <td className="dak-mono">{row.assists}</td>
+            <td className="dak-mono">{row.adr.toFixed(1)}</td>
+            <td className="dak-mono">{row.kast.toFixed(1)}%</td>
+            <td className="dak-mono">{row.headshotPercent.toFixed(0)}%</td>
+            <td className="dak-mono">{row.entryKills}</td>
+            <td className="dak-mono">{row.tradeKills}</td>
+            <td className="dak-mono">{row.awpKills}</td>
+            <td className="dak-mono">{row.utilityDamage}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export { MatchWorkspace, AdminQaWorkspace } from "./components/MatchWorkspace";
+export { DemoAnalysisDashboard } from "./components/DemoAnalysisDashboard";
+export { ScoreboardTable } from "./components/ScoreboardTable";
+export { RoundTimeline } from "./components/RoundTimeline";
+export { EconomyPanel } from "./components/EconomyPanel";
+export { EconomyConversionPanel } from "./components/EconomyConversionPanel";
+export { HeatmapCanvas } from "./components/HeatmapCanvas";
+export { KillFeed } from "./components/KillFeed";
+export { QaReportPanel } from "./components/QaReportPanel";