42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
// Rôle : affiche les hitzones d'un monstre sous forme de tableau compact.
|
|
import { assetPath } from "../utils.js";
|
|
|
|
const PHYSICAL_COLUMNS = ["cut", "blunt", "ammo"];
|
|
const ELEMENTAL_COLUMNS = ["fire", "water", "thunder", "ice", "dragon"];
|
|
const COLUMNS = ["name", ...PHYSICAL_COLUMNS, ...ELEMENTAL_COLUMNS];
|
|
|
|
function hitzoneValue(row, column) {
|
|
if (column === "name") return row.name;
|
|
return row.physical?.[column] ?? row.elemental?.[column];
|
|
}
|
|
|
|
export function DamageTable({ rows, t }) {
|
|
if (!rows.length) return null;
|
|
|
|
return (
|
|
<div className="damage-table-wrap legacy-scrollbar">
|
|
<table className="damage-table">
|
|
<thead>
|
|
<tr>
|
|
{COLUMNS.map((column) => (
|
|
<th key={column}>
|
|
{column === "name" ? "" : <img src={assetPath(column)} alt={t(column, { capitalize: true })} title={t(column, { capitalize: true })} />}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row, rowIndex) => (
|
|
<tr key={`${row.name}-${rowIndex}`}>
|
|
{COLUMNS.map((column) => column === "name" ? (
|
|
<td key={column} title={t(row.name, { capitalize: true })}>{t(row.name, { capitalize: true })}</td>
|
|
) : (
|
|
<td key={column}><img src={assetPath(`${hitzoneValue(row, column)}-stars`)} alt={`${hitzoneValue(row, column)} étoiles`} /></td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|