39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { content } from '../content';
|
|
import { gameRuntime } from '../state/runtime';
|
|
import { useGameStore } from '../state/store';
|
|
|
|
/** Action list — a start button per action, with a progress bar on the active one. */
|
|
export function ActionPanel() {
|
|
const activeActionId = useGameStore((state) => state.activeActionId);
|
|
const actionProgress = useGameStore((state) => state.actionProgress);
|
|
|
|
return (
|
|
<section aria-label="Actions" className="flex flex-col gap-2">
|
|
<h2 className="font-medium text-slate-300 text-sm uppercase tracking-wide">Actions</h2>
|
|
{content.actions.map((action) => {
|
|
const isActive = action.id === activeActionId;
|
|
return (
|
|
<button
|
|
type="button"
|
|
key={action.id}
|
|
onClick={() => gameRuntime.startAction(action.id)}
|
|
className="relative overflow-hidden rounded-lg border border-slate-700 bg-slate-800/70 px-4 py-3 text-left transition-colors hover:border-amber-500/60 hover:bg-slate-800"
|
|
>
|
|
{isActive ? (
|
|
<div
|
|
className="absolute inset-y-0 left-0 bg-amber-500/15"
|
|
style={{ width: `${Math.round(actionProgress * 100)}%` }}
|
|
aria-hidden="true"
|
|
/>
|
|
) : null}
|
|
<div className="relative flex items-center justify-between">
|
|
<span className="font-medium text-slate-100">{action.name}</span>
|
|
<span className="text-slate-400 text-xs">{isActive ? 'running…' : 'start'}</span>
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</section>
|
|
);
|
|
}
|