56 lines
2.9 KiB
JavaScript
56 lines
2.9 KiB
JavaScript
import { useMemo } from "react";
|
|
import { EndemicCard } from "./cards/EndemicCard.jsx";
|
|
import { MonsterCard } from "./cards/MonsterCard.jsx";
|
|
import { CopyChecklistItemsButton } from "../CopyChecklistItemsButton.jsx";
|
|
import { MhwildsFilters } from "./MhwildsFilters.jsx";
|
|
import { getFilteredMhwildsItems, getMhwildsFilterKey, getUniqueConditionValues } from "./utils.js";
|
|
|
|
export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
|
|
const isMonsters = category === "monsters";
|
|
const filterKey = getMhwildsFilterKey(category, mhwilds);
|
|
const items = isMonsters ? mhwilds.monsters : mhwilds.endemic;
|
|
const options = (mhwilds.filterOptions?.[category]?.length ? mhwilds.filterOptions[category] : getUniqueConditionValues(items, filterKey, t))
|
|
.filter((value) => value !== "none")
|
|
.sort((a, b) => t(a).localeCompare(t(b), "fr"));
|
|
const visible = useMemo(() => getFilteredMhwildsItems({ category, filterKey, mhwilds, filters, t }), [category, filterKey, mhwilds, filters, t]);
|
|
const label = isMonsters ? t("monsters", { capitalize: true }) : t("endemic_life", { capitalize: true });
|
|
|
|
return (
|
|
<>
|
|
<section className="page-heading game-heading">
|
|
<div>
|
|
<p className="eyebrow">Monster Hunter Wilds</p>
|
|
<div className="game-title-row">
|
|
<h1>{label}</h1>
|
|
<span className="results-count">{visible.length} / {items.length}</span>
|
|
<CopyChecklistItemsButton labels={visible.map((item) => t(item.name, { capitalize: true }))} title={`Copier les ${label.toLowerCase()} visibles pour checklist`} />
|
|
</div>
|
|
<p>{isMonsters ? "Filtrez les monstres par nom et faiblesses, puis consultez leurs dégâts détaillés." : "Filtrez la faune par nom et zones d'apparition."}</p>
|
|
</div>
|
|
<div className="actions">
|
|
<a className={`button ${isMonsters ? "primary" : ""}`} href="#/games/mhwilds/monsters">Monstres</a>
|
|
<a className={`button ${!isMonsters ? "primary" : ""}`} href="#/games/mhwilds/endemic">Faune</a>
|
|
</div>
|
|
</section>
|
|
<section className="game-layout" data-mhwilds-category={category}>
|
|
<aside className="game-filters">
|
|
<MhwildsFilters category={category} filterKey={filterKey} options={options} filters={filters} setFilters={setFilters} t={t} />
|
|
</aside>
|
|
<section className="game-results" aria-live="polite">
|
|
<div className={`game-grid ${isMonsters ? "monster-grid" : "endemic-grid"}`}>
|
|
{visible.length ? visible.map((item) => (
|
|
isMonsters
|
|
? <MonsterCard key={item.name} monster={item} t={t} />
|
|
: <EndemicCard key={item.name} item={item} t={t} />
|
|
)) : (
|
|
<div className="empty">
|
|
<h2>Aucun résultat</h2>
|
|
<p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|