change json format & add diablo4

website/src/features/games/mhwilds/MhwildsFilters.jsx

@@ -3,7 +3,7 @@ import { assetPath } from "./utils.js";
 
 export function MhwildsFilters({ category, filterKey, options, filters, setFilters, t }) {
   const activeFilters = filters[category];
-  const selected = new Set(activeFilters[filterKey]);
+  const selected = new Set(activeFilters[filterKey] || []);
   const logicLabel = activeFilters.logic === "or" ? t("or", { capitalize: true }) : t("and", { capitalize: true });
   const updateCategory = (updater) => setFilters((state) => ({ ...state, [category]: updater(state[category]) }));
 

website/src/features/games/mhwilds/MhwildsListing.jsx

@@ -2,15 +2,17 @@ import { useMemo } from "react";
 import { EndemicCard } from "./cards/EndemicCard.jsx";
 import { MonsterCard } from "./cards/MonsterCard.jsx";
 import { MhwildsFilters } from "./MhwildsFilters.jsx";
-import { getFilteredMhwildsItems, getUniqueConditionValues } from "./utils.js";
+import { getFilteredMhwildsItems, getMhwildsFilterKey, getUniqueConditionValues } from "./utils.js";
 
 export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
   const isMonsters = category === "monsters";
-  const filterKey = isMonsters ? "weaknesses" : "locations";
+  const filterKey = getMhwildsFilterKey(category, mhwilds);
   const items = isMonsters ? mhwilds.monsters : mhwilds.endemic;
-  const options = getUniqueConditionValues(items, filterKey, t);
-  const visible = useMemo(() => getFilteredMhwildsItems({ category, mhwilds, filters, t }), [category, mhwilds, filters, t]);
-  const label = isMonsters ? t("monsters", { capitalize: true }) : t("endemic life", { capitalize: true });
+  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 (
     <>

website/src/features/games/mhwilds/cards/DamageTable.jsx

@@ -1,16 +1,23 @@
 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;
 
-  const columns = Object.keys(rows[0]);
-
   return (
     <div className="damage-table-wrap legacy-scrollbar">
       <table className="damage-table">
         <thead>
           <tr>
-            {columns.map((column) => (
+            {COLUMNS.map((column) => (
               <th key={column}>
                 {column === "name" ? "" : <img src={assetPath(column)} alt={t(column, { capitalize: true })} title={t(column, { capitalize: true })} />}
               </th>
@@ -20,10 +27,10 @@ export function DamageTable({ rows, t }) {
         <tbody>
           {rows.map((row, rowIndex) => (
             <tr key={`${row.name}-${rowIndex}`}>
-              {columns.map((column) => column === "name" ? (
-                <td key={column} title={t(row[column], { capitalize: true })}>{t(row[column], { capitalize: true })}</td>
+              {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(`${row[column]}-stars`)} alt={`${row[column]} étoiles`} /></td>
+                <td key={column}><img src={assetPath(`${hitzoneValue(row, column)}-stars`)} alt={`${hitzoneValue(row, column)} étoiles`} /></td>
               ))}
             </tr>
           ))}

website/src/features/games/mhwilds/cards/EndemicCard.jsx

@@ -4,7 +4,10 @@ import { assetPath, getConditionValues, normalizeText } from "../utils.js";
 export function EndemicCard({ item, t }) {
   const locations = getConditionValues(item.locations);
   const description = t(item.description);
-  const hasDescription = normalizeText(description) && normalizeText(description) !== normalizeText("à compléter");
+  const normalizedDescription = normalizeText(description);
+  const hasDescription = normalizedDescription
+    && normalizedDescription !== normalizeText("à compléter")
+    && normalizedDescription !== normalizeText("to be completed");
 
   return (
     <article className="mhwilds-card endemic-card">

website/src/features/games/mhwilds/cards/MonsterCard.jsx

@@ -45,7 +45,7 @@ export function MonsterCard({ monster, t }) {
             <p className="eyebrow">Détails</p>
             <h2>{t(monster.name, { capitalize: true })}</h2>
           </div>
-          <DamageTable rows={monster.damage || []} t={t} />
+          <DamageTable rows={monster.hitzones || []} t={t} />
         </div>
       </div>
     </article>

website/src/features/games/mhwilds/utils.js

@@ -1,7 +1,7 @@
 const MHWILDS_IMG_PATH = "/static/img/mhwilds";
 
 export function assetPath(name) {
-  return encodeURI(`${MHWILDS_IMG_PATH}/${name}.png`);
+  return encodeURI(`${MHWILDS_IMG_PATH}/${String(name || "").replace(/_/g, " ")}.png`);
 }
 
 export function normalizeText(value) {
@@ -18,11 +18,16 @@ export function getUniqueConditionValues(items, property, translate) {
     .sort((a, b) => translate(a).localeCompare(translate(b), "fr"));
 }
 
-export function getFilteredMhwildsItems({ category, mhwilds, filters, t }) {
+export function getMhwildsFilterKey(category, mhwilds) {
+  const optionKey = mhwilds.filterOptionKeys?.[category];
+  if (optionKey === "elements") return "weaknesses";
+  return optionKey || (category === "monsters" ? "weaknesses" : "locations");
+}
+
+export function getFilteredMhwildsItems({ category, filterKey, mhwilds, filters, t }) {
   const items = category === "monsters" ? mhwilds.monsters : mhwilds.endemic;
   const activeFilters = filters[category];
-  const filterKey = category === "monsters" ? "weaknesses" : "locations";
-  const selected = activeFilters[filterKey];
+  const selected = activeFilters[filterKey] || [];
   const search = normalizeText(activeFilters.name);
 
   return items.filter((item) => {