37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
||
|
||
import { toBeatCells, toSparkline } from "@/lib/pace/beatmap";
|
||
|
||
interface BeatMapProps {
|
||
beatMap: number[];
|
||
}
|
||
|
||
// 爽点节拍图（UX §6.4）：beat_map(int 序列) → ▁▃▅ 柱状条。
|
||
// 渲染为定高柱（CSS height%），同时给文本 sparkline 作无障碍标签（a11y §10）。
|
||
// 静态高度，无动画 → 天然尊重 prefers-reduced-motion。
|
||
export function BeatMap({ beatMap }: BeatMapProps) {
|
||
const cells = toBeatCells(beatMap);
|
||
if (cells.length === 0) {
|
||
return <span className="text-xs text-ink-soft">无节拍数据</span>;
|
||
}
|
||
const spark = toSparkline(beatMap);
|
||
return (
|
||
<div className="max-w-full overflow-x-auto pb-1">
|
||
<div
|
||
className="flex h-12 min-w-full items-end gap-0.5"
|
||
role="img"
|
||
aria-label={`爽点节拍图 ${spark}`}
|
||
>
|
||
{cells.map((cell, i) => (
|
||
<div
|
||
key={i}
|
||
className="min-w-[4px] flex-1 rounded-t bg-cinnabar/70"
|
||
style={{ height: `${cell.heightPct}%` }}
|
||
title={`第${i + 1}拍 强度${cell.value}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|