feat(ui): action queue list, cancel, disabled states, and hints
This commit is contained in:
ginnoir
+96
-22
@@ -1,38 +1,112 @@
|
||||
import { content } from '../content';
|
||||
import { useState } from 'react';
|
||||
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. */
|
||||
/** Action list with queue, cancel, disabled states, and story hints/tooltips. */
|
||||
export function ActionPanel() {
|
||||
const activeActionId = useGameStore((state) => state.activeActionId);
|
||||
const actionProgress = useGameStore((state) => state.actionProgress);
|
||||
const actions = useGameStore((s) => s.actions);
|
||||
const activeActionId = useGameStore((s) => s.activeActionId);
|
||||
const actionProgress = useGameStore((s) => s.actionProgress);
|
||||
const queuedActionIds = useGameStore((s) => s.queuedActionIds);
|
||||
const queuedActionNames = useGameStore((s) => s.queuedActionNames);
|
||||
const prefs = useGameStore((s) => s.prefs);
|
||||
const [openInfoId, setOpenInfoId] = useState<string | null>(null);
|
||||
|
||||
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) => {
|
||||
{actions.map((action) => {
|
||||
const isActive = action.id === activeActionId;
|
||||
const isDisabled = !action.available && !isActive;
|
||||
const summaryParts = [
|
||||
action.costsSummary ? `Cost: ${action.costsSummary}` : null,
|
||||
action.yieldsSummary ? `Yield: ${action.yieldsSummary}` : null,
|
||||
].filter(Boolean);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={action.id}
|
||||
onClick={() => gameRuntime.enqueueAction(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"
|
||||
/>
|
||||
<div key={action.id} className="relative flex gap-1">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isDisabled}
|
||||
title={prefs.actionDetailMode === 'hover' ? action.storyTooltip : undefined}
|
||||
onClick={() => gameRuntime.enqueueAction(action.id)}
|
||||
className={`relative w-full overflow-hidden rounded-lg border px-4 py-3 text-left transition-colors ${
|
||||
isDisabled
|
||||
? 'cursor-not-allowed border-slate-800 bg-slate-900/40 opacity-50'
|
||||
: 'border-slate-700 bg-slate-800/70 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 flex-col gap-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-slate-100">{action.name}</span>
|
||||
<span className="text-slate-400 text-xs">
|
||||
{isActive
|
||||
? 'running…'
|
||||
: isDisabled
|
||||
? (action.disabledReason ?? 'unavailable')
|
||||
: 'start'}
|
||||
</span>
|
||||
</div>
|
||||
{summaryParts.length > 0 ? (
|
||||
<p className="text-slate-500 text-xs">{summaryParts.join(' · ')}</p>
|
||||
) : null}
|
||||
{prefs.actionDetailMode === 'inline' && action.storyHint ? (
|
||||
<p className="text-slate-400 text-xs">{action.storyHint}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</button>
|
||||
{prefs.actionDetailMode === 'info-button' && action.storyTooltip ? (
|
||||
<div className="relative shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Details for ${action.name}`}
|
||||
aria-expanded={openInfoId === action.id}
|
||||
onClick={() => setOpenInfoId(openInfoId === action.id ? null : action.id)}
|
||||
className="flex h-full items-center rounded-lg border border-slate-700 bg-slate-800/70 px-2 text-slate-400 transition-colors hover:border-amber-500/60 hover:text-slate-200"
|
||||
title={action.storyTooltip}
|
||||
>
|
||||
ⓘ
|
||||
</button>
|
||||
{openInfoId === action.id ? (
|
||||
<div
|
||||
role="tooltip"
|
||||
className="absolute top-full right-0 z-10 mt-1 max-w-xs rounded-lg border border-slate-600 bg-slate-900 p-3 text-slate-300 text-xs shadow-lg"
|
||||
>
|
||||
{action.storyTooltip}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : 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>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{queuedActionNames.length > 0 ? (
|
||||
<ol aria-label="Action queue" className="mt-2 flex flex-col gap-1">
|
||||
{queuedActionNames.map((name, index) => (
|
||||
<li
|
||||
key={queuedActionIds[index]}
|
||||
className="flex items-center justify-between rounded border border-slate-700 bg-slate-900/60 px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="text-slate-300">{name}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Cancel ${name}`}
|
||||
onClick={() => gameRuntime.cancelQueuedAction(index)}
|
||||
className="rounded px-2 py-0.5 text-slate-400 transition-colors hover:bg-slate-800 hover:text-amber-400"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user