Release Healer Man 0.1.37

src/ui/DpsMeterWidget.tsx

@@ -0,0 +1,20 @@
+import type { CSSProperties } from "react";
+import type { DpsMeterSnapshot } from "../game/dpsMeter";
+import "./dpsMeter.css";
+
+export function DpsMeterWidget({ snapshot, width, compact = false }: {
+  snapshot: DpsMeterSnapshot; width?: number | null; compact?: boolean;
+}) {
+  const number = (value: number) => Math.round(value).toLocaleString();
+  return <section className={`dps-meter ${compact ? "dps-meter--compact" : ""}`} aria-label="DPS meter"
+    style={{ "--dps-meter-width": `${width ?? 230}px` } as CSSProperties}>
+    <header><strong>DPS</strong><small>{snapshot.rows.length === 0 ? "Waiting for combat" : snapshot.active ? "Current fight" : "Last fight"}</small>
+      <span>{Math.floor(snapshot.durationSeconds / 60)}:{String(Math.floor(snapshot.durationSeconds % 60)).padStart(2, "0")}</span></header>
+    {snapshot.rows.length > 0 ? <ol>{snapshot.rows.map((row) => <li key={row.id}
+      title={`${row.name}: ${number(row.dps)} DPS · ${number(row.total)} damage`}
+      style={{ "--dps-color": row.color } as CSSProperties}>
+      <i style={{ width: `${row.percent}%` }} aria-hidden="true" /><span>{row.name}</span><b>{number(row.dps)}</b>
+    </li>)}</ol> : <p>Damage dealt per second</p>}
+    {snapshot.rows.length > 0 && <footer><span>Party · {number(snapshot.totalDamage)} damage</span><b>{number(snapshot.totalDps)} DPS</b></footer>}
+  </section>;
+}