21 lines
1.3 KiB
TypeScript
21 lines
1.3 KiB
TypeScript
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>;
|
|
}
|