39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
 
|
import { formatBytes, formatDuration } from "@/lib/format";
|
||
|
|
import { KEY_BINDINGS } from "@/lib/pinball/keyBindings";
|
||
|
|
import type { TableInfo } from "@/lib/pinball/types";
|
||
|
|
|
||
|
|
export interface GameInfoPanelProps {
|
||
|
|
tableInfo: TableInfo;
|
||
|
|
loadTimeMs: number | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function GameInfoPanel({ tableInfo, loadTimeMs }: GameInfoPanelProps) {
|
||
|
|
return (
|
||
|
|
<div className="w-72 space-y-4 rounded border border-chrome/30 bg-ash/95 p-4 font-mono text-sm text-paper shadow-xl">
|
||
|
|
<div>
|
||
|
|
<div className="text-xs tracking-widest text-chrome">TABLE</div>
|
||
|
|
<div className="truncate text-arc">{tableInfo.name}</div>
|
||
|
|
</div>
|
||
|
|
<dl className="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
|
||
|
|
<dt className="text-chrome">Source</dt>
|
||
|
|
<dd>{tableInfo.isDemo ? "Bundled demo" : "Your upload"}</dd>
|
||
|
|
<dt className="text-chrome">Size</dt>
|
||
|
|
<dd>{tableInfo.isDemo ? "—" : formatBytes(tableInfo.sizeBytes)}</dd>
|
||
|
|
<dt className="text-chrome">Load time</dt>
|
||
|
|
<dd>{loadTimeMs !== null ? formatDuration(loadTimeMs) : "—"}</dd>
|
||
|
|
</dl>
|
||
|
|
<div>
|
||
|
|
<div className="mb-1 text-xs tracking-widest text-chrome">CONTROLS</div>
|
||
|
|
<ul className="space-y-1 text-xs">
|
||
|
|
{KEY_BINDINGS.map((binding) => (
|
||
|
|
<li key={binding.action} className="flex justify-between gap-2">
|
||
|
|
<span className="text-chrome">{binding.action}</span>
|
||
|
|
<span className="text-paper">{binding.keys}</span>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|