69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import type { CombatLogEntry } from '../game'
|
|
import { RematchControls, ResultLogToggle } from './RewardPanels'
|
|
|
|
type ResultAction = {
|
|
label: string
|
|
onClick: () => void
|
|
className?: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
type ResultRematch = {
|
|
visible: boolean
|
|
requested: boolean
|
|
message: string
|
|
onRematch: () => void
|
|
}
|
|
|
|
export function ResultScreen({
|
|
eyebrow,
|
|
title,
|
|
children,
|
|
log,
|
|
showLog,
|
|
onToggleLog,
|
|
rematch,
|
|
actions,
|
|
}: {
|
|
eyebrow: string
|
|
title: string
|
|
children?: ReactNode
|
|
log?: CombatLogEntry[]
|
|
showLog?: boolean
|
|
onToggleLog?: () => void
|
|
rematch?: ResultRematch
|
|
actions?: ResultAction[]
|
|
}) {
|
|
return (
|
|
<div className="result-screen">
|
|
<div>
|
|
<p className="eyebrow">{eyebrow}</p>
|
|
<h2>{title}</h2>
|
|
{children}
|
|
{log && onToggleLog && (
|
|
<ResultLogToggle log={log} showEndLog={Boolean(showLog)} onToggle={onToggleLog} />
|
|
)}
|
|
{rematch?.visible && (
|
|
<RematchControls
|
|
requested={rematch.requested}
|
|
message={rematch.message}
|
|
onRematch={rematch.onRematch}
|
|
/>
|
|
)}
|
|
{actions?.map((action) => (
|
|
<button
|
|
className={action.className}
|
|
disabled={action.disabled}
|
|
key={action.label}
|
|
onClick={action.onClick}
|
|
type="button"
|
|
>
|
|
{action.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|