@cs2dak/react 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Starfie1d
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# @cs2dak/react
+
+English | 简体中文
+
+Previewable React components for `DemoViewModel`. Components are product-neutral and styled through `theme.css`, using a RivalHub-inspired dark tactical language without importing RivalHub code.
+
+面向 `DemoViewModel` 的可预览 React 组件。组件不绑定 RivalHub、Next.js 或数据库，默认主题参考 RivalHub 的深色赛事运营设计语言。

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@cs2dak/react",
+  "version": "0.2.0",
+  "type": "module",
+  "license": "MIT",
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme.css": "./src/theme.css"
+  },
+  "dependencies": {
+    "lucide-react": "^0.468.0",
+    "@cs2dak/core": "0.2.0",
+    "@cs2dak/contract": "0.2.0",
+    "@cs2dak/maps": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/DemoAnalysisDashboard.tsx

@@ -0,0 +1,178 @@
+import type { DemoViewModel } from "@cs2dak/contract";
+import { Activity, Crosshair, Gauge, ListChecks, Map, ShieldAlert, Table2 } from "lucide-react";
+import { useMemo, useState, type ReactNode } from "react";
+import { EconomyPanel } from "./EconomyPanel";
+import { HeatmapCanvas } from "./HeatmapCanvas";
+import { QaReportPanel } from "./QaReportPanel";
+import { RoundTimeline } from "./RoundTimeline";
+import { ScoreboardTable } from "./ScoreboardTable";
+
+export interface DemoAnalysisDashboardProps {
+  model: DemoViewModel;
+}
+
+type ViewKey = "overview" | "rounds" | "spatial" | "qa";
+
+export function DemoAnalysisDashboard({ model }: DemoAnalysisDashboardProps) {
+  const [view, setView] = useState<ViewKey>("overview");
+  const topPlayer = model.scoreboard[0];
+  const economySwing = useMemo(
+    () => model.economy.reduce((max, point) => Math.max(max, Math.abs(point.advantage)), 0),
+    [model.economy]
+  );
+
+  return (
+    <main className="dak-shell">
+      <div className="dak-workspace">
+        <header className="dak-header">
+          <div>
+            <div className="dak-eyebrow">CS2 Demo Analysis Kit</div>
+            <h1 className="dak-title">{model.title}</h1>
+            <p className="dak-subtitle">{model.subtitle}</p>
+          </div>
+          <div className="dak-scoreblock">
+            <div className="dak-scoreline">{model.scoreline}</div>
+            <div className="dak-mapline">{model.map.name}</div>
+          </div>
+        </header>
+
+        <section className="dak-kpi-strip">
+          <Metric icon={<Gauge size={16} />} label="最高 V2 RR" value={topPlayer ? topPlayer.accountRR.toFixed(3) : "0.000"} detail={topPlayer?.name ?? "暂无选手"} />
+          <Metric icon={<Crosshair size={16} />} label="最高 ADR" value={topPlayer ? topPlayer.adr.toFixed(1) : "0.0"} detail="来自伤害统计" />
+          <Metric icon={<Activity size={16} />} label="最大装备差" value={`$${economySwing.toLocaleString()}`} detail={`${model.economy.length} 回合`} />
+          <Metric icon={<ShieldAlert size={16} />} label="数据检查" value={model.qa.summary.issueCount.toString()} detail={model.qa.ok ? "通过" : "需要检查"} />
+        </section>
+
+        <nav className="dak-tabs" aria-label="Analysis views">
+          <TabButton active={view === "overview"} icon={<Table2 size={16} />} label="总览" onClick={() => setView("overview")} />
+          <TabButton active={view === "rounds"} icon={<ListChecks size={16} />} label="回合" onClick={() => setView("rounds")} />
+          <TabButton active={view === "spatial"} icon={<Map size={16} />} label="地图" onClick={() => setView("spatial")} />
+          <TabButton active={view === "qa"} icon={<ShieldAlert size={16} />} label="检查" onClick={() => setView("qa")} />
+        </nav>
+
+        {view === "overview" && (
+          <div className="dak-grid">
+            <section className="dak-stack">
+              <Panel title="选手数据 / RR">
+              <ScoreboardTable rows={model.scoreboard} />
+              </Panel>
+              <Panel title="经济走势">
+              <EconomyPanel
+                points={model.economy}
+                teamAName={model.teams.teamA.name}
+                teamBName={model.teams.teamB.name}
+              />
+              </Panel>
+            </section>
+
+            <aside className="dak-stack">
+              <Panel title="地图热力图">
+                <HeatmapCanvas map={model.map} points={model.heatmap} />
+              </Panel>
+              <Panel title="回合事件">
+              <RoundTimeline events={model.timeline} />
+              </Panel>
+            </aside>
+          </div>
+        )}
+
+        {view === "rounds" && (
+          <div className="dak-grid dak-grid-even">
+            <Panel title="回合事件">
+              <RoundTimeline events={model.timeline} />
+            </Panel>
+            <Panel title="选手回合明细">
+              <div className="dak-roundfact-list">
+                {model.playerRoundFacts.slice(0, 80).map((fact) => (
+                  <div className="dak-roundfact-row" key={`${fact.roundNumber}-${fact.steamId64}`}>
+                    <span className="dak-badge">R{fact.roundNumber}</span>
+                    <span>{fact.name}</span>
+                    <span className="dak-muted">{sideLabel(fact.side)} · {economyLabel(fact.economyType)}</span>
+                    <span className="dak-mono">{fact.kills}/{fact.deaths}/{fact.assists}</span>
+                    <span className="dak-tags">{fact.kastTags.length > 0 ? fact.kastTags.map(kastLabel).join("、") : "无贡献回合"}</span>
+                  </div>
+                ))}
+              </div>
+            </Panel>
+          </div>
+        )}
+
+        {view === "spatial" && (
+          <div className="dak-grid dak-grid-even">
+            <Panel title="热力图">
+              <HeatmapCanvas map={model.map} points={model.heatmap} />
+            </Panel>
+            <Panel title="经济走势">
+              <EconomyPanel points={model.economy} teamAName={model.teams.teamA.name} teamBName={model.teams.teamB.name} />
+            </Panel>
+          </div>
+        )}
+
+        {view === "qa" && (
+          <Panel title="数据检查">
+            <QaReportPanel report={model.qa} />
+          </Panel>
+        )}
+      </div>
+    </main>
+  );
+}
+
+function sideLabel(side: string) {
+  return side === "t" ? "进攻方" : "防守方";
+}
+
+function economyLabel(type: string | null) {
+  const labels: Record<string, string> = {
+    pistol: "手枪局",
+    eco: "ECO",
+    semi: "半起",
+    force: "强起",
+    full: "长枪",
+    conversion: "长枪"
+  };
+  return type ? labels[type] ?? type : "未知经济";
+}
+
+function kastLabel(tag: string) {
+  const labels: Record<string, string> = {
+    kill: "击杀",
+    assist: "助攻",
+    survive: "存活",
+    trade: "被补枪"
+  };
+  return labels[tag] ?? tag;
+}
+
+function Metric({ icon, label, value, detail }: { icon: ReactNode; label: string; value: string; detail: string }) {
+  return (
+    <div className="dak-metric">
+      <div className="dak-metric-icon">{icon}</div>
+      <div>
+        <div className="dak-metric-label">{label}</div>
+        <div className="dak-metric-value">{value}</div>
+        <div className="dak-metric-detail">{detail}</div>
+      </div>
+    </div>
+  );
+}
+
+function TabButton({ active, icon, label, onClick }: { active: boolean; icon: ReactNode; label: string; onClick: () => void }) {
+  return (
+    <button className={active ? "dak-tab dak-tab-active" : "dak-tab"} type="button" onClick={onClick}>
+      {icon}
+      <span>{label}</span>
+    </button>
+  );
+}
+
+function Panel({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <section className="dak-panel">
+      <div className="dak-panel-header">
+        <h2 className="dak-panel-title">{title}</h2>
+      </div>
+      <div className="dak-panel-body">{children}</div>
+    </section>
+  );
+}

package/src/components/EconomyConversionPanel.tsx

@@ -0,0 +1,54 @@
+import type { EconomyConversion } from "@cs2dak/core";
+import { economyLabelCn } from "@cs2dak/core";
+
+export interface EconomyConversionPanelProps {
+  /** One team's per-economy-type conversion (from buildEconomyConversion). */
+  stats: EconomyConversion;
+  teamName: string;
+}
+
+export function EconomyConversionPanel({ stats, teamName }: EconomyConversionPanelProps) {
+  const entries = Object.entries(stats).sort(([, a], [, b]) => b.winRate - a.winRate);
+
+  if (entries.length === 0) {
+    return (
+      <div className="dak-econ-conv" aria-label={`${teamName} 经济转化率`}>
+        <p className="dak-empty">暂无经济数据</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="dak-econ-conv" aria-label={`${teamName} 经济转化率`}>
+      <table className="dak-table">
+        <thead>
+          <tr>
+            <th>经济类型</th>
+            <th>回合</th>
+            <th>胜</th>
+            <th>胜率</th>
+            <th className="dak-econ-conv-bar-col">胜率条</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map(([economy, s]) => (
+            <tr key={economy}>
+              <td>{economyLabelCn(economy)}</td>
+              <td className="dak-mono">{s.played}</td>
+              <td className="dak-mono">{s.won}</td>
+              <td className="dak-mono">{(s.winRate * 100).toFixed(1)}%</td>
+              <td className="dak-econ-conv-bar-col">
+                <div className="dak-winrate-bar">
+                  <div
+                    className="dak-winrate-fill"
+                    style={{ width: `${Math.round(s.winRate * 100)}%` }}
+                  />
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/EconomyPanel.tsx

@@ -0,0 +1,158 @@
+import type { EconomyPoint } from "@cs2dak/contract";
+
+export interface EconomyPanelProps {
+  points: EconomyPoint[];
+  teamAName: string;
+  teamBName: string;
+}
+
+const width = 760;
+const height = 260;
+const pad = { left: 48, right: 18, top: 24, bottom: 34 };
+const economyLabels = {
+  pistol: "手枪",
+  eco: "Eco",
+  semi: "半起",
+  force: "强起",
+  full: "长枪",
+  conversion: "长枪"
+} as const;
+const economyColors = {
+  pistol: "rgba(255, 198, 77, 0.18)",
+  eco: "rgba(104, 115, 129, 0.18)",
+  semi: "rgba(73, 182, 255, 0.16)",
+  force: "rgba(255, 122, 33, 0.18)",
+  full: "rgba(83, 215, 126, 0.16)",
+  conversion: "rgba(83, 215, 126, 0.16)"
+} as const;
+
+const upsetLabels: Record<string, string> = {
+  eco: "ECO翻",
+  semi: "半起翻",
+  force: "强起翻"
+};
+
+const upsetColors: Record<string, string> = {
+  eco: "rgba(255,84,114,0.9)",
+  semi: "rgba(73,182,255,0.9)",
+  force: "rgba(255,122,33,0.9)"
+};
+
+function getUpsetType(point: EconomyPoint): "eco" | "semi" | "force" | null {
+  const winnerEco = point.winnerTeamKey === "teamA" ? point.teamAEconomy : point.teamBEconomy;
+  const loserEco  = point.winnerTeamKey === "teamA" ? point.teamBEconomy : point.teamAEconomy;
+  if (winnerEco !== "eco" && winnerEco !== "semi" && winnerEco !== "force") return null;
+  if (loserEco !== "full" && loserEco !== "conversion") return null;
+  return winnerEco;
+}
+
+export function EconomyPanel({ points, teamAName, teamBName }: EconomyPanelProps) {
+  const maxValue = Math.max(1, ...points.flatMap((point) => [point.teamA, point.teamB]));
+  const xFor = (index: number) => pad.left + (index / Math.max(points.length - 1, 1)) * (width - pad.left - pad.right);
+  const yFor = (value: number) => pad.top + (1 - value / maxValue) * (height - pad.top - pad.bottom);
+  const pathFor = (team: "teamA" | "teamB") =>
+    points.map((point, index) => `${index === 0 ? "M" : "L"}${xFor(index)},${yFor(point[team])}`).join(" ");
+
+  return (
+    <div style={{ overflowX: "auto" }}>
+      <svg className="dak-chart" viewBox={`0 0 ${width} ${height}`} role="img" aria-label="经济走势">
+        {points.map((point, index) => (
+          <g key={point.roundNumber}>
+            <rect
+              x={xFor(index) - 8}
+              y={pad.top}
+              width={16}
+              height={(height - pad.top - pad.bottom) / 2}
+              fill={economyColors[point.teamAEconomy]}
+            />
+            <rect
+              x={xFor(index) - 8}
+              y={pad.top + (height - pad.top - pad.bottom) / 2}
+              width={16}
+              height={(height - pad.top - pad.bottom) / 2}
+              fill={economyColors[point.teamBEconomy]}
+            />
+            <text x={xFor(index)} y={height - 10} textAnchor="middle" fill="var(--dak-fg-dim)" fontSize="10">
+              R{point.roundNumber}
+            </text>
+          </g>
+        ))}
+        {[0, 0.5, 1].map((ratio) => (
+          <g key={ratio}>
+            <line
+              x1={pad.left}
+              x2={width - pad.right}
+              y1={yFor(maxValue * ratio)}
+              y2={yFor(maxValue * ratio)}
+              stroke="var(--dak-border)"
+            />
+            <text x={pad.left - 8} y={yFor(maxValue * ratio) + 4} textAnchor="end" fill="var(--dak-fg-dim)" fontSize="10">
+              {Math.round(maxValue * ratio)}
+            </text>
+          </g>
+        ))}
+        <path d={pathFor("teamA")} fill="none" stroke="var(--dak-accent)" strokeWidth="3" />
+        <path d={pathFor("teamB")} fill="none" stroke="var(--dak-accent-b)" strokeWidth="3" />
+        {points.map((point, index) => {
+          const upsetType = getUpsetType(point);
+          if (!upsetType) return null;
+          return (
+            <g key={`upset-${point.roundNumber}`}>
+              <circle cx={xFor(index)} cy={pad.top / 2} r={5} fill={upsetColors[upsetType]} />
+            </g>
+          );
+        })}
+      </svg>
+      <UpsetSummary points={points} />
+      <div className="dak-muted">
+        <span style={{ color: "var(--dak-accent)" }}>{teamAName}</span>
+        {" / "}
+        <span style={{ color: "var(--dak-accent-b)" }}>{teamBName}</span>
+        {" 每回合装备价值；背景色为每队经济类型"}
+      </div>
+      <div className="dak-economy-legend" aria-label="经济类型图例">
+        {(Object.keys(economyLabels) as Array<keyof typeof economyLabels>).map((type) => (
+          <span key={type}><i style={{ background: economyColors[type] }} />{economyLabels[type]}</span>
+        ))}
+      </div>
+      <div className="dak-economy-rounds">
+        {points.map((point) => {
+          const upsetType = getUpsetType(point);
+          return (
+            <div
+              className={`dak-economy-round${upsetType ? " dak-economy-round-upset" : ""}`}
+              key={point.roundNumber}
+            >
+              <b>R{point.roundNumber}</b>
+              {upsetType && (
+                <span className={`dak-upset-badge dak-upset-badge-${upsetType}`}>
+                  {upsetLabels[upsetType]}
+                </span>
+              )}
+              <span className={point.winnerTeamKey === "teamA" ? "dak-economy-winner" : undefined}>{teamAName}: {economyLabels[point.teamAEconomy]}</span>
+              <span className={point.winnerTeamKey === "teamB" ? "dak-economy-winner" : undefined}>{teamBName}: {economyLabels[point.teamBEconomy]}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function UpsetSummary({ points }: { points: EconomyPoint[] }) {
+  const counts = { eco: 0, semi: 0, force: 0 };
+  for (const point of points) {
+    const t = getUpsetType(point);
+    if (t) counts[t]++;
+  }
+  const total = counts.eco + counts.semi + counts.force;
+  if (total === 0) return null;
+  return (
+    <div className="dak-economy-upsets">
+      <span className="dak-panel-eyebrow">翻盘回合</span>
+      {counts.eco > 0 && <span className="dak-upset-chip dak-upset-chip-eco">ECO翻 ×{counts.eco}</span>}
+      {counts.semi > 0 && <span className="dak-upset-chip dak-upset-chip-semi">半起翻 ×{counts.semi}</span>}
+      {counts.force > 0 && <span className="dak-upset-chip dak-upset-chip-force">强起翻 ×{counts.force}</span>}
+    </div>
+  );
+}