96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import { useState } from 'react'
|
|
import { de } from '../strings/de'
|
|
import type { BreedingResult } from '../genetics'
|
|
import FarbschlagImage from './FarbschlagImage'
|
|
|
|
function warningText(code: string): string {
|
|
const map = de.genetics.warnings as Record<string, string>
|
|
return map[code] ?? code
|
|
}
|
|
|
|
export interface BreedingResultViewProps {
|
|
result: BreedingResult
|
|
/** Heading shown above the Farbschlag cards. Defaults to "Mögliche Nachkommen". */
|
|
title?: string
|
|
}
|
|
|
|
/**
|
|
* Renders a GEN-1 breeding result: warnings (SCHECKE_LETHAL prominent),
|
|
* offspring grouped byFarbschlag (percent + exact fraction), and a collapsible
|
|
* per-genotype table. Shared by the Genetik page (FEAT-5) and the Wurf
|
|
* workspace (FEAT-3) where it shows the expected distribution for a pairing.
|
|
*/
|
|
export default function BreedingResultView({ result, title }: BreedingResultViewProps) {
|
|
const t = de.pages.genetik
|
|
const [showGenotypes, setShowGenotypes] = useState(false)
|
|
|
|
return (
|
|
<div className="results">
|
|
{result.warnings.length > 0 && (
|
|
<div className="warnings">
|
|
<h4>{t.warningsTitle}</h4>
|
|
{result.warnings.map((w) => (
|
|
<div key={w.code} className="alert alert--warning">
|
|
<span>{warningText(w.code)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<h4>{title ?? t.resultsTitle}</h4>
|
|
{result.byFarbschlag.length === 0 ? (
|
|
<p className="muted">{t.noOffspring}</p>
|
|
) : (
|
|
<>
|
|
<ul className="farbschlag-cards">
|
|
{result.byFarbschlag.map((f) => (
|
|
<li key={f.farbschlag} className="farbschlag-card">
|
|
<FarbschlagImage name={f.farbschlag} />
|
|
<span className="farbschlag-card__name">{f.farbschlag}</span>
|
|
<span className="farbschlag-card__prob">
|
|
{f.probability.percent}
|
|
<small> ({f.probability.text})</small>
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
type="button"
|
|
className="link-btn"
|
|
onClick={() => setShowGenotypes((s) => !s)}
|
|
aria-expanded={showGenotypes}
|
|
>
|
|
{showGenotypes ? t.hideGenotypes : t.showGenotypes}
|
|
</button>
|
|
|
|
{showGenotypes && (
|
|
<table className="genotype-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{t.genotypeLabel}</th>
|
|
<th>{t.genotypePreview}</th>
|
|
<th>{t.probability}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{result.offspring.map((o) => (
|
|
<tr key={o.genotype}>
|
|
<td>
|
|
<code>{o.genotype}</code>
|
|
</td>
|
|
<td>{o.farbschlag}</td>
|
|
<td>
|
|
{o.probability.percent} <small>({o.probability.text})</small>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|