diff --git a/src/renderer/src/pages/catalogue/game-item.tsx b/src/renderer/src/pages/catalogue/game-item.tsx index 06f30998..8fb4c1b6 100644 --- a/src/renderer/src/pages/catalogue/game-item.tsx +++ b/src/renderer/src/pages/catalogue/game-item.tsx @@ -1,11 +1,12 @@ import { Badge } from "@renderer/components"; import { buildGameDetailsPath } from "@renderer/helpers"; -import { useRepacks } from "@renderer/hooks"; +import { useAppSelector, useRepacks } from "@renderer/hooks"; import { steamUrlBuilder } from "@shared"; import { useMemo } from "react"; import { useNavigate } from "react-router-dom"; import "./game-item.scss"; +import { useTranslation } from "react-i18next"; export interface GameItemProps { game: any; @@ -14,14 +15,34 @@ export interface GameItemProps { export function GameItem({ game }: GameItemProps) { const navigate = useNavigate(); + const { i18n } = useTranslation(); + + const { steamGenres } = useAppSelector((state) => state.catalogueSearch); + const { getRepacksForObjectId } = useRepacks(); const repacks = getRepacksForObjectId(game.objectId); + const language = i18n.language.split("-")[0]; + const uniqueRepackers = useMemo(() => { return Array.from(new Set(repacks.map((repack) => repack.repacker))); }, [repacks]); + const genres = useMemo(() => { + return game.genres?.map((genre) => { + const index = steamGenres["en"].findIndex( + (steamGenre) => steamGenre === genre + ); + + if (steamGenres[language] && steamGenres[language][index]) { + return steamGenres[language][index]; + } + + return genre; + }); + }, [game.genres, language, steamGenres]); + return (