55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import type { QueueDto } from '@/lib/game/save'
|
|
|
|
// TASK STRIP — the save's task queue, fixed bottom-left next to the NEXT TURN button (#44).
|
|
// The array arrives pre-ordered from the snapshot builder (Task 6: ACTIVE block, then PENDING
|
|
// block, each by (queuedAtTurn, id)) — the strip renders it as-is, dimming the PENDING rows,
|
|
// and never fetches or re-sorts. Empty queue → null, no box at all. The shell re-renders it on
|
|
// every refreshAll (Task 7) — a pure display of the array it is handed.
|
|
|
|
export function TaskStrip({ tasks }: { tasks: QueueDto[] }) {
|
|
if (tasks.length === 0) return null
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
left: '1rem',
|
|
bottom: '1rem',
|
|
zIndex: 60, // above the header/footer's 50
|
|
background: 'var(--surface)',
|
|
border: '1px solid var(--border)',
|
|
padding: '0.5rem 0.75rem',
|
|
maxWidth: '26rem',
|
|
}}
|
|
>
|
|
<span style={{ display: 'block', fontSize: '0.6rem', color: 'var(--text-muted)', letterSpacing: '0.12em', marginBottom: '0.3rem' }}>
|
|
ACTIVE TASKS
|
|
</span>
|
|
{tasks.map((t) => (
|
|
<div
|
|
key={t.id}
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
gap: '0.75rem',
|
|
padding: '0.2rem 0',
|
|
opacity: t.status === 'PENDING' ? 0.45 : 1, // dim, don't reorder — the array is the order
|
|
}}
|
|
>
|
|
<span style={{ fontSize: '0.62rem', color: 'var(--text-secondary)', letterSpacing: '0.06em' }}>
|
|
{t.type} // {t.targetLabel}
|
|
</span>
|
|
<span style={{ fontSize: '0.62rem', color: 'var(--text-muted)', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>
|
|
{t.leadName}
|
|
{t.helperNames.length > 0 ? ` +${t.helperNames.join(' +')}` : ''}
|
|
{' — '}
|
|
{t.status === 'ACTIVE' ? `${t.remaining} turn(s) left` : 'queued'}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|