change json format & add diablo4

website/src/main.jsx

@@ -594,10 +594,29 @@ function App() {
   const [siteContent, setSiteContent] = useState(DEFAULT_SITE_CONTENT);
   const [games, setGames] = useState([]);
   const [gamesError, setGamesError] = useState("");
-  const [mhwilds, setMhwilds] = useState({ loaded: false, loading: false, error: "", translations: {}, monsters: [], endemic: [] });
+  const [mhwilds, setMhwilds] = useState({
+    loaded: false,
+    loading: false,
+    error: "",
+    translations: {},
+    monsters: [],
+    endemic: [],
+    filterOptions: { monsters: [], endemic: [] },
+    filterOptionKeys: { monsters: "", endemic: "" }
+  });
+  const [diablo4, setDiablo4] = useState({
+    loaded: false,
+    loading: false,
+    error: "",
+    affixes: [],
+    filterOptions: { affixes: [] },
+    categoryMap: {},
+    filterOptionKeys: { affixes: "" }
+  });
   const [filters, setFilters] = useState({
     monsters: { name: "", weaknesses: [], logic: "and" },
-    endemic: { name: "", locations: [], logic: "and" }
+    endemic: { name: "", locations: [], logic: "and" },
+    diablo4: { name: "", categories: [], logic: "and" }
   });
   const [confirmModal, setConfirmModal] = useState(null);
   const [createModal, setCreateModal] = useState(null);
@@ -636,19 +655,68 @@ function App() {
         endemicResponse.json(),
         translationsResponse.json()
       ]);
+      const monsterFilterKey = Object.keys(monstersJson).find((key) => key !== "monsters") || "";
+      const endemicFilterKey = Object.keys(endemicJson).find((key) => key !== "endemicLife" && key !== "aquaticLife") || "";
       setMhwilds({
         loaded: true,
         loading: false,
         error: "",
         translations,
         monsters: monstersJson.monsters || [],
-        endemic: [...(endemicJson.endemicLife || []), ...(endemicJson.aquaticLife || [])]
+        endemic: [...(endemicJson.endemicLife || []), ...(endemicJson.aquaticLife || [])],
+        filterOptions: {
+          monsters: monstersJson[monsterFilterKey] || [],
+          endemic: endemicJson[endemicFilterKey] || []
+        },
+        filterOptionKeys: {
+          monsters: monsterFilterKey,
+          endemic: endemicFilterKey
+        }
       });
-    }).catch((error) => setMhwilds({ loaded: true, loading: false, error: error.message, translations: {}, monsters: [], endemic: [] }));
+    }).catch((error) => setMhwilds({
+      loaded: true,
+      loading: false,
+      error: error.message,
+      translations: {},
+      monsters: [],
+      endemic: [],
+      filterOptions: { monsters: [], endemic: [] },
+      filterOptionKeys: { monsters: "", endemic: "" }
+    }));
   }, [route, mhwilds.loaded, mhwilds.loading]);
 
+  useEffect(() => {
+    if (!route.startsWith("/games/diablo4") || diablo4.loaded || diablo4.loading) return;
+    setDiablo4((state) => ({ ...state, loading: true }));
+    fetch("/data/diablo4/affixes_types.json")
+      .then(async (response) => {
+        if (!response.ok) throw new Error("Impossible de charger les données Diablo IV.");
+        const payload = await response.json();
+        const filterKey = Object.keys(payload).find((key) => key !== "affixes") || "";
+        const categories = payload[filterKey] || [];
+        setDiablo4({
+          loaded: true,
+          loading: false,
+          error: "",
+          affixes: payload.affixes || [],
+          filterOptions: { affixes: categories },
+          categoryMap: Object.fromEntries(categories.map((category) => [category.id, category])),
+          filterOptionKeys: { affixes: filterKey }
+        });
+      })
+      .catch((error) => setDiablo4({
+        loaded: true,
+        loading: false,
+        error: error.message,
+        affixes: [],
+        filterOptions: { affixes: [] },
+        categoryMap: {},
+        filterOptionKeys: { affixes: "" }
+      }));
+  }, [route, diablo4.loaded, diablo4.loading]);
+
   const t = (key, { capitalize = false } = {}) => {
-    const value = mhwilds.translations[key] || key;
+    const value = mhwilds.translations[key] || String(key || "").replace(/_/g, " ");
     return capitalize ? value.charAt(0).toUpperCase() + value.slice(1) : value;
   };
   const getGame = (gameId) => games.find((item) => item.id === gameId);
@@ -829,6 +897,7 @@ function App() {
         games={games}
         gamesError={gamesError}
         mhwilds={mhwilds}
+        diablo4={diablo4}
         filters={filters}
         setFilters={setFilters}
         t={t}