sort and filters perfectly

app/(content)/(gaming)/games/[gameid]/page.tsx

-import { getGame, getGames } from "@/lib/igdb";
+import { getGame } from "@/lib/igdb";
 import { IGame } from "@/types/igdb-types";
 import Image from "next/image";
 
@@ -10,7 +10,13 @@ export default async function GameDetail({ params }: { params: { gameid: string
         <div>
             <h1>Game Detail</h1>
             <h1>{data[0].name}</h1>
-            <Image src={data[0].cover.url} alt={data[0].name} width={264} height={374} priority={true} style={{ width: 'auto', height: 'auto' }} />
+            <Image
+                src={data[0].cover.url}
+                alt={data[0].name}
+                width={264}
+                height={374}
+                priority={true}
+                style={{ width: 'auto', height: 'auto' }} />
             <p>{data[0].summary}</p>
         </div>
     )

app/(content)/(gaming)/games/page.tsx

-import { InfiniteScrollGames } from "@/components/InfiniteScroll";
+import Sort from "@/components/filter-sort-games";
+import { InfiniteScrollGames } from "@/components/infinity-scroll";
 import SearchInput from "@/components/search-input";
-import Sort from "@/components/sort-games";
 
 // renders a list of games infinitely (presumably)
 export default async function GamesPage() {

app/(content)/(home)/home/page.tsx

-import PostMessageForm from "@/components/PostMessageForm";
+import PostMessageForm from "@/components/post-messages";
 import { prisma } from "@/prisma/db";
 
 export default async function HomePage() {

app/(content)/layout.tsx

@@ -10,8 +10,8 @@ export default async function ContentLayout({
     children,
 }: DashboardLayoutProps) {
     return (
-        <div className="flex min-h-screen flex-col">
-            <div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
+        <div className="flex flex-col min-h-screen">
+            <div className="mx-32 my-6 flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
                 <aside className="hidden w-[200px] flex-col md:flex">
                     <div className="sticky top-0">
                         <DashboardNav items={dashboardConfig.sidebarNav} />

app/api/games/route.ts

+import { platforms } from "@/lib/config/platform";
 import { getGames } from "@/lib/igdb";
+import { EGameCategory, EGameGenres, EGamePlatform } from "@/types/constants";
+import { IPlatformCategrory } from "@/types/igdb-types";
+
 import { NextRequest, NextResponse } from "next/server";
 
 export async function GET(req: NextRequest) {
     const p = req.nextUrl.searchParams;
     try {
         const page = parseInt(p.get('page') as string)
+
         const search = p.get('search')
+        const category = p.get('category')
+        const genre = p.get('genre')
+        const platform = p.get('platform')
+        const sortby = p.get('sortby')
+        const order = p.get('order')
+
+        let filteredPlatforms: EGamePlatform[] | undefined;
+
+        if (platform) {
+            const selectedCategory = platforms.find(
+                (platformCategory: IPlatformCategrory) =>
+                    platformCategory.category === platform
+            );
+            filteredPlatforms = selectedCategory
+                ? selectedCategory.platforms
+                : undefined;
+        }
 
-        const games = await getGames(page, search ? search : '');
+        const games = await getGames(page,
+            search ? search : '',
+            category ? EGameCategory[category as keyof typeof EGameCategory] : undefined,
+            genre ? EGameGenres[genre as keyof typeof EGameGenres] : undefined,
+            filteredPlatforms,
+            sortby ? sortby : '',
+            order ? order : ''
+        );
         return NextResponse.json(games);
     } catch (error) {
         return NextResponse.json(error, { status: 500 });

app/globals.css

 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 47.4% 11.2%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 222.2 47.4% 11.2%;
- 
+
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 100% 50%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 215 20.2% 65.1%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 224 71% 4%;
     --foreground: 213 31% 91%;
- 
+
     --muted: 223 47% 11%;
     --muted-foreground: 215.4 16.3% 56.9%;
- 
+
     --popover: 224 71% 4%;
     --popover-foreground: 215 20.2% 65.1%;
- 
+
     --card: 224 71% 4%;
     --card-foreground: 213 31% 91%;
- 
+
     --border: 216 34% 17%;
     --input: 216 34% 17%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 1.2%;
- 
+
     --secondary: 222.2 47.4% 11.2%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --accent: 216 34% 17%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 63% 31%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --ring: 216 34% 17%;
- 
+
     --radius: 0.5rem;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+}
+
+body {
+  width: 100vw;
+  overflow-x: hidden;
 }
\ No newline at end of file

app/layout.tsx

@@ -27,9 +27,7 @@ export default function RootLayout({
           <Suspense fallback={<SiteLoad />}>
             <ClerkProvider>
               <Providers>
-                <div className="mx-32 my-6">
-                  {children}
-                </div>
+                {children}
               </Providers>
             </ClerkProvider>
           </Suspense>

components/filter-sort-games.tsx

+"use client"
+
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Button } from "./ui/button";
+import { Card } from "./ui/card";
+import { Icons } from "./ui/icons";
+
+export default function Sort() {
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [selectedGenre, setSelectedGenre] = useState('');
+  const [selectedPlatform, setSelectedPlatform] = useState('');
+  const [selectedSortMethod, setSelectedSortMethod] = useState('total_rating_count');
+  const [selectedSortOrder, setSelectedSortOrder] = useState('desc');
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const search = searchParams.get('search');
+
+  const urlParams = {
+    search: search ? `search=${search}` : '',
+    category: selectedCategory ? `category=${selectedCategory}` : '',
+    genre: selectedGenre ? `genre=${selectedGenre}` : '',
+    platform: selectedPlatform ? `platform=${selectedPlatform}` : '',
+    sortMethod: selectedSortMethod ? `sortby=${selectedSortMethod}` : '',
+    sortOrder: selectedSortOrder ? `order=${selectedSortOrder}` : '',
+  };
+
+  const queryParamString = Object.values(urlParams)
+    .filter(Boolean)
+    .map((param, index) => (index === 0 ? `?${param}` : `&${param}`))
+    .join('');
+
+  const queryString = `${queryParamString ? `${queryParamString}` : ''}`;
+
+  const url = `${pathname}${queryString ? `${queryString}` : ''}`;
+
+  useEffect(() => {
+    router.push(url);
+  }, [router, url]);
+
+  function toggleSortOrder() {
+    const newSortOrder = selectedSortOrder === 'desc' ? 'asc' : 'desc';
+    setSelectedSortOrder(newSortOrder);
+  }
+
+  function onReset() {
+    router.replace(pathname + (search ? `?search=${search}` : ''));
+    setSelectedCategory('');
+    setSelectedGenre('');
+    setSelectedPlatform('');
+    setSelectedSortMethod('total_rating_count');
+  }
+
+  return (
+    <Card className="p-6 grid items-start gap-2">
+      <h1>Filter</h1>
+      <Select value={selectedCategory ? selectedCategory : undefined} key={selectedCategory[0]} onValueChange={(value) => setSelectedCategory(value)}>
+        <SelectTrigger className={`w-full ${selectedCategory[0] ? 'font-extrabold' : ''}`}>
+          <SelectValue placeholder="By category..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Category</SelectLabel>
+            <SelectItem value="main_game">Main Game</SelectItem>
+            <SelectItem value="dlc_addon">DLC Addon</SelectItem>
+            <SelectItem value="expansion">Expansion</SelectItem>
+            <SelectItem value="remake">Remake</SelectItem>
+            <SelectItem value="remaster">Remaster</SelectItem>
+            <SelectItem value="port">Port</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      <Select value={selectedGenre ? selectedGenre : undefined} key={selectedGenre[0]} onValueChange={(value) => setSelectedGenre(value)}>
+        <SelectTrigger className={`w-full ${selectedGenre[0] ? 'font-extrabold' : ''}`}>
+          <SelectValue placeholder="By genre..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Genre</SelectLabel>
+            <SelectItem value="fighting">Fighting</SelectItem>
+            <SelectItem value="shooter">Shooter</SelectItem>
+            <SelectItem value="music">Music</SelectItem>
+            <SelectItem value="platform">Platformer</SelectItem>
+            <SelectItem value="puzzle">Puzzle</SelectItem>
+            <SelectItem value="real-time-strategy-rts">Real Time Strategy</SelectItem>
+            <SelectItem value="role-playing-rpg">Role-playing</SelectItem>
+            <SelectItem value="simulator">Simulation</SelectItem>
+            <SelectItem value="sport">Sport</SelectItem>
+            <SelectItem value="turn-based-strategy-tbs">Turn-based strategy</SelectItem>
+            <SelectItem value="tactical">Tactical</SelectItem>
+            <SelectItem value="quiz-trivia">Quiz/Trivia</SelectItem>
+            <SelectItem value="hack-and-slash-beat-em-up">Hack and slash</SelectItem>
+            <SelectItem value="pinball">Pinball</SelectItem>
+            <SelectItem value="adventure">Adventure</SelectItem>
+            <SelectItem value="arcade">Arcade</SelectItem>
+            <SelectItem value="visual-novel">Visual Novel</SelectItem>
+            <SelectItem value="card-and-board-game">Card & Board Game</SelectItem>
+            <SelectItem value="adventure">Adventure</SelectItem>
+            <SelectItem value="moba">Moba</SelectItem>
+            <SelectItem value="point-and-click">Point-and-click</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      <Select value={selectedPlatform ? selectedPlatform : undefined} key={selectedPlatform[0]} onValueChange={(value) => setSelectedPlatform(value)}>
+        <SelectTrigger className={`w-full ${selectedPlatform[0] ? 'font-extrabold' : ''}`}>
+          <SelectValue placeholder="By Platform..." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Platform</SelectLabel>
+            <SelectItem value="pc">PC</SelectItem>
+            <SelectItem value="playstation">Playstation</SelectItem>
+            <SelectItem value="xbox">Xbox</SelectItem>
+            <SelectItem value="nintendo">Nintendo</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+
+      <h1 className="pt-6">Sort by</h1>
+      <div className="flex space-x-2 pb-1">
+        <Select value={selectedSortMethod} onValueChange={(value) => setSelectedSortMethod(value)}>
+          <SelectTrigger className="w-full">
+            <SelectValue placeholder="Rating" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Sorting</SelectLabel>
+              <SelectItem value="name">Name</SelectItem>
+              <SelectItem value="total_rating_count">Rating</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <Button variant="ghost" onClick={toggleSortOrder}>
+          <Icons.arrowdown className={`h-4 w-4 transition-all transform ${selectedSortOrder === 'asc' ? 'rotate-180' : ''}`} />
+        </Button>
+      </div>
+
+      <Button variant="outline" onClick={() => onReset()}>Reset to Default</Button>
+    </Card>
+  )
+}
\ No newline at end of file

components/Game.tsx → components/game-item.tsx

@@ -8,7 +8,13 @@ export default function Game({ id, name, cover }: { id: number, name: string, co
         <Card>
             <Link href={`/games/${id}`}>
                 <div className="rounded-lg flex items-center justify-center overflow-hidden">
-                    <Image src={cover.url} alt={name} width={264} height={374} priority={true} style={{ width: '100%', height: '100%' }} />
+                    <Image
+                        src={cover.url}
+                        alt={name}
+                        width={264}
+                        height={374}
+                        priority={true}
+                        style={{ width: '100%', height: '100%' }} />
                 </div>
             </Link>
             <p className="truncate">{name}</p>

components/InfiniteScroll.tsx → components/infinity-scroll.tsx

 "use client"
 
-import Game from "@/components/Game";
+import Game from "@/components/game-item";
 import { Card } from "@/components/ui/card";
 import { IGame } from "@/types/igdb-types";
 import { useInfiniteQuery } from "@tanstack/react-query";
@@ -9,10 +9,23 @@ import { Fragment } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 
 export function InfiniteScrollGames() {
-    const search = useSearchParams()
-    const searchQuery = search.get('search');
+    const searchParams = useSearchParams()
+
+    const searchQuery = searchParams.get('search');
+    const categoryQuery = searchParams.get('category');
+    const genreQuery = searchParams.get('genre');
+    const platformQuery = searchParams.get('platform');
+    const sortbyQuery = searchParams.get('sortby');
+    const orderQuery = searchParams.get('order');
 
     const searchURL = searchQuery ? `&search=${searchQuery}` : "";
+    const categoryURL = categoryQuery ? `&category=${categoryQuery}` : "";
+    const genreURL = genreQuery ? `&genre=${genreQuery}` : "";
+    const platformURL = platformQuery ? `&platform=${platformQuery}` : "";
+    const sortbyURL = sortbyQuery ? `&sortby=${sortbyQuery}` : "";
+    const orderURL = orderQuery ? `&order=${orderQuery}` : "";
+
+    const params = searchURL + categoryURL + genreURL + platformURL + sortbyURL + orderURL;
 
     const {
         status,
@@ -21,10 +34,9 @@ export function InfiniteScrollGames() {
         fetchNextPage,
         hasNextPage,
     } = useInfiniteQuery(
-        ['infiniteGames', searchQuery],
+        ['infiniteGames', params],
         async ({ pageParam = 1 }) =>
-            await fetch(`/api/games/?page=${pageParam}` + searchURL,
-                { cache: 'no-cache' }
+            await fetch(`/api/games/?page=${pageParam}${params}`,
             ).then((result) => result.json() as Promise<IGame[]>),
         {
             getNextPageParam: (lastPage, pages) => {

components/search-input.tsx

@@ -17,8 +17,13 @@ export default function SearchInput({ className, ...props }: DocsSearchProps) {
     function onSearch(event: React.FormEvent) {
         event.preventDefault()
 
+        if (!searchQuery) {
+            router.push(pathname)
+            return
+        }
+
         const encoededQuery = encodeURIComponent(searchQuery)
-        router.push(`${pathname}?search=${encoededQuery}`)
+        router.push(`${pathname}?search=${encoededQuery}`) // add useSearchParams
     };
 
     return (

components/sort-games.tsx

-"use client"
-
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { useState } from "react";
-import { Card } from "./ui/card";
-
-export default function Sort() {
-  const [select, setSelect] = useState<string>('');
-
-  const handleChange = (event: any) => {
-    const selectedOption = event.target.value as string;
-    setSelect(selectedOption);
-  };
-
-  return (
-    <Card className="p-6 grid items-start gap-2">
-      <Select>
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="Sort by..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Sorting</SelectLabel>
-            <SelectItem value="">Any</SelectItem>
-            <SelectItem value="name">Name</SelectItem>
-            <SelectItem value="rating">Rating</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-
-      <h1 className="pt-3">Filter</h1>
-      <Select>
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="By genre..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Genre</SelectLabel>
-            <SelectItem value="">Any</SelectItem>
-            <SelectItem value="action">Action</SelectItem>
-            <SelectItem value="simulation">Simulation</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-
-      <Select>
-        <SelectTrigger className="w-full">
-          <SelectValue placeholder="By platform..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            <SelectLabel>Platform</SelectLabel>
-            <SelectItem value="">Any</SelectItem>
-            <SelectItem value="pc">PC</SelectItem>
-            <SelectItem value="playstation">Playstation</SelectItem>
-            <SelectItem value="xbox">Xbox</SelectItem>
-            <SelectItem value="nintendo">Nintendo</SelectItem>
-          </SelectGroup>
-        </SelectContent>
-      </Select>
-    </Card>
-  )
-}
\ No newline at end of file

components/ui/icons.tsx

 import {
     AlertTriangle,
+    ArrowDown,
     ArrowRight,
     BellRing,
     Check,
@@ -68,6 +69,7 @@ export const Icons: IconsType = {
     help: HelpCircle, // Help Nav
     sun: SunMedium, // Light Mode Toggle Nav
     moon: Moon, // Dark Mode Toggle Nav
+    arrowdown: ArrowDown, // Descending Sort
     close: X,
     spinner: Loader2,
     chevronLeft: ChevronLeft,

lib/config/platform.ts

+import { EGamePlatform } from "@/types/constants";
+import { IPlatformCategrory } from "@/types/igdb-types";
+
+export const platforms: IPlatformCategrory[] = [
+    {
+        category: 'pc',
+        platforms: [EGamePlatform.win]
+    },
+    {
+        category: 'playstation',
+        platforms: [
+            EGamePlatform.ps,
+            EGamePlatform.ps2,
+            EGamePlatform.ps3,
+            EGamePlatform["ps4--1"],
+            EGamePlatform.ps5,
+            EGamePlatform.psp,
+            EGamePlatform.psvita,
+            EGamePlatform.psvr2,
+            EGamePlatform["playstation-vr"]
+        ]
+    },
+    {
+        category: 'xbox',
+        platforms: [
+            EGamePlatform.xbox,
+            EGamePlatform.xbox360,
+            EGamePlatform.xboxone,
+            EGamePlatform['series-x']
+        ]
+    },
+    {
+        category: 'nintendo',
+        platforms: [
+            EGamePlatform.switch,
+            EGamePlatform.wii,
+            EGamePlatform.wiiu,
+            EGamePlatform['new-nintendo-3ds'],
+            EGamePlatform['3ds'],
+            EGamePlatform.nds,
+            EGamePlatform['nintendo-dsi'],
+            EGamePlatform['nintendo-64dd'],
+            EGamePlatform['nintendo-playstation'],
+            EGamePlatform.ngc,
+            EGamePlatform.n64,
+            EGamePlatform.nes,
+            EGamePlatform.snes,
+            EGamePlatform.gba,
+            EGamePlatform.gbc,
+            EGamePlatform.gb
+        ]
+    }
+];
\ No newline at end of file

lib/igdb.ts

@@ -28,7 +28,7 @@ async function getToken(): Promise<IAuth> {
 }
 
 // fetches the top 200 games with a rating of 96 or higher
-export async function getGames(page: number, search: string): Promise<IGame[]> {
+export async function getGames(page = 1, search?: string, category?: number, genre?: number, platform?: number[], sortby?: string, order?: string): Promise<IGame[]> {
     const auth = await getToken();
     const url = new URL(`${IGDB_BASE_URL}/games`);
 
@@ -40,10 +40,16 @@ export async function getGames(page: number, search: string): Promise<IGame[]> {
             'Client-ID': CLIENT_ID,
             'Authorization': `Bearer ${auth.access_token}`
         },
-        body: `fields name, cover.*; limit ${limit}; offset ${offset};
-                sort total_rating desc; where total_rating_count > 2
-                & cover != null & total_rating != null & rating != null
-                & name ~ *"${search}"*;`
+        body:
+            `fields name, cover.image_id; limit ${limit}; offset ${offset};
+            sort ${sortby ? sortby : "total_rating_count"} ${order ? order : "desc"};
+            where total_rating_count > 3
+            & cover != null & total_rating != null & rating != null & age_ratings != null
+            & name ~ *"${search ? search : ""}"*
+            ${category ? `& category = ${category}` : ""}
+            ${genre ? `& genres = [${genre}]` : ""}
+            ${platform ? `& platforms = (${platform.join(',')})` : ""}
+            ;`
     });
 
     if (!response.ok) {
@@ -72,6 +78,11 @@ export async function getGame(id: number): Promise<IGame[]> {
         },
         body: `fields name, cover.*, summary; where cover != null; where id = ${id};`
     })
+
+    if (!response.ok) {
+        throw new Error(`Error fetching game: ${response.statusText}`);
+    }
+
     const games = await response.json() as IGame[]
 
     games.forEach(game => {

next.config.js

 /** @type {import('next').NextConfig} */
 const nextConfig = {
     images: {
+        unoptimized: true,
         domains: ["images.igdb.com"]
     }
 }

tsconfig.json

 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -20,9 +24,18 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
\ No newline at end of file

types/constants.ts

+export enum EAgeRatingCategory {
+    'ESRB' = 0,
+    'PEGI' = 2,
+    'CERO' = 3,
+    'USK' = 4,
+    'GRAC' = 5,
+    'CLASS_IND' = 6,
+    'ACB' = 7,
+}
+
+export enum EAgeRatingRating {
+    'Three' = 1,
+    'Seven' = 2,
+    'Twelve' = 3,
+    'Sixteen' = 4,
+    'Eighteen' = 5,
+    'RP' = 6,
+    'EC' = 7,
+    'E' = 8,
+    'E10' = 9,
+    'T' = 10,
+    'M' = 11,
+    'AO' = 12,
+    'CERO_A' = 13,
+    'CERO_B' = 14,
+    'CERO_C' = 15,
+    'CERO_D' = 16,
+    'CERO_Z' = 17,
+    'USK_0' = 18,
+    'USK_6' = 19,
+    'USK_12' = 20,
+    'USK_16' = 21,
+    'USK_18' = 22,
+    'GRAC_ALL' = 23,
+    'GRAC_Twelve' = 24,
+    'GRAC_Fifteen' = 25,
+    'GRAC_Eighteen' = 26,
+    'GRAC_TESTING' = 27,
+    'CLASS_IND_L' = 28,
+    'CLASS_IND_Ten' = 29,
+    'CLASS_IND_Twelve' = 30,
+    'CLASS_IND_Fourteen' = 31,
+    'CLASS_IND_Sixteen' = 32,
+    'CLASS_IND_Eighteen' = 33,
+    'ACB_G' = 34,
+    'ACB_PG' = 35,
+    'ACB_M' = 36,
+    'ACB_MA15' = 37,
+    'ACB_R18' = 38,
+    'ACB_RC' = 39,
+}
+
+export enum EGameCategory {
+    'main_game' = 0,
+    'dlc_addon' = 1,
+    'expansion' = 2,
+    'bundle' = 3,
+    'standalone_expansion' = 4,
+    'mod' = 5,
+    'episode' = 6,
+    'season' = 7,
+    'remake' = 8,
+    'remaster' = 9,
+    'expanded_game' = 10,
+    'port' = 11,
+    'fork' = 12,
+    'pack' = 13,
+    'update' = 14,
+}
+
+export enum EGamePlatform {
+    'released' = 0,
+    'alpha' = 2,
+    'beta' = 3,
+    'early_access' = 4,
+    'offline' = 5,
+    'cancelled' = 6,
+    'rumored' = 7,
+    'delisted' = 8,
+}
+
+export enum EGameGenres {
+    'point-and-click' = 2,
+    'fighting' = 4,
+    'shooter' = 5,
+    'music' = 7,
+    'platform' = 8,
+    'puzzle' = 9,
+    'racing' = 10,
+    'real-time-strategy-rts' = 11,
+    'role-playing-rpg' = 12,
+    'simulator' = 13,
+    'sport' = 14,
+    'strategy' = 15,
+    'turn-based-strategy-tbs' = 16,
+    'tactical' = 24,
+    'hack-and-slash-beat-em-up' = 25,
+    'quiz-trivia' = 26,
+    'pinball' = 30,
+    'adventure' = 31,
+    'indie' = 32,
+    'arcade' = 33,
+    'visual-novel' = 34,
+    'card-board-game' = 35,
+    'moba' = 36,
+}
+
+export enum EGamePlatform {
+    'win' = 6,
+    'ps' = 7,
+    'ps2' = 8,
+    'ps3' = 9,
+    'ps4--1' = 48,
+    'ps5' = 167,
+    'psp' = 38,
+    'psvita' = 46,
+    'psvr2' = 390,
+    'playstation-vr' = 165,
+    'xbox' = 11,
+    'xbox360' = 12,
+    'xboxone' = 49,
+    'series-x' = 169,
+    'switch' = 130,
+    'wii' = 5,
+    'wiiu' = 41,
+    'new-nintendo-3ds' = 137,
+    '3ds' = 37,
+    'nds' = 20,
+    'nintendo-dsi' = 159,
+    'nintendo-64dd' = 416,
+    'nintendo-playstation' = 131,
+    'ngc' = 21,
+    'n64' = 4,
+    'nes' = 18,
+    'snes' = 19,
+    'gba' = 24,
+    'gbc' = 22,
+    'gb' = 33,
+}
\ No newline at end of file

types/igdb-types.d.ts

-export enum EAgeRatingCategory {
-    'ESRB' = 0,
-    'PEGI' = 2,
-    'CERO' = 3,
-    'USK' = 4,
-    'GRAC' = 5,
-    'CLASS_IND' = 6,
-    'ACB' = 7,
-}
-
-export enum EAgeRatingRating {
-    'Three' = 1,
-    'Seven' = 2,
-    'Twelve' = 3,
-    'Sixteen' = 4,
-    'Eighteen' = 5,
-    'RP' = 6,
-    'EC' = 7,
-    'E' = 8,
-    'E10' = 9,
-    'T' = 10,
-    'M' = 11,
-    'AO' = 12,
-    'CERO_A' = 13,
-    'CERO_B' = 14,
-    'CERO_C' = 15,
-    'CERO_D' = 16,
-    'CERO_Z' = 17,
-    'USK_0' = 18,
-    'USK_6' = 19,
-    'USK_12' = 20,
-    'USK_16' = 21,
-    'USK_18' = 22,
-    'GRAC_ALL' = 23,
-    'GRAC_Twelve' = 24,
-    'GRAC_Fifteen' = 25,
-    'GRAC_Eighteen' = 26,
-    'GRAC_TESTING' = 27,
-    'CLASS_IND_L' = 28,
-    'CLASS_IND_Ten' = 29,
-    'CLASS_IND_Twelve' = 30,
-    'CLASS_IND_Fourteen' = 31,
-    'CLASS_IND_Sixteen' = 32,
-    'CLASS_IND_Eighteen' = 33,
-    'ACB_G' = 34,
-    'ACB_PG' = 35,
-    'ACB_M' = 36,
-    'ACB_MA15' = 37,
-    'ACB_R18' = 38,
-    'ACB_RC' = 39,
-}
-
-export enum EGameCategory {
-    'main_game' = 0,
-    'dlc_addon' = 1,
-    'expansion' = 2,
-    'bundle' = 3,
-    'standalone_expansion' = 4,
-    'mod' = 5,
-    'episode' = 6,
-    'season' = 7,
-    'remake' = 8,
-    'remaster' = 9,
-    'expanded_game' = 10,
-    'port' = 11,
-    'fork' = 12,
-    'pack' = 13,
-    'update' = 14,
-}
-
-export enum EGameStatus {
-    'released' = 0,
-    'alpha' = 2,
-    'beta' = 3,
-    'early_access' = 4,
-    'offline' = 5,
-    'cancelled' = 6,
-    'rumored' = 7,
-    'delisted' = 8,
-}
-
 export interface IAuth {
     access_token: string;
     expires_in: number;
@@ -87,14 +6,13 @@ export interface IAuth {
 
 export interface IGame {
     id: number;
-    age_ratings: EAgeRatingCategory[];
+    age_ratings: number[];
     aggregrated_rating: number;
     aggregrated_rating_count: number;
     alternative_names: number[];
     artworks: number[];
     bundles: number[];
-    category: EGameCategory;
-    checksum: string;
+    category: number;
     collection: number;
     cover: ICover;
     created_at: number;
@@ -130,7 +48,7 @@ export interface IGame {
     similar_games: number[];
     slug: string;
     standalone_expansions: number[];
-    status: EGameStatus;
+    status: number;
     storyline: string;
     summary: string;
     tags: number[];
@@ -149,11 +67,41 @@ export interface ICover {
     id: number;
     alpha_channel: boolean;
     animated: boolean;
-    checksum: string;
     game: number;
     game_localization: number;
     height: number;
     image_id: string;
     url: string;
     width: number;
+}
+
+export interface IGenre {
+    id: number;
+    created_at: number;
+    name: string;
+    slug: string;
+    updated_at: number;
+    url: string;
+}
+
+export interface IPlatform {
+    id: number;
+    abbreviation: string;
+    alternative_name: string;
+    category: number;
+    created_at: number;
+    generation: number;
+    name: string;
+    platform_logo: number;
+    platform_family: number;
+    slug: string;
+    updated_at: number;
+    url: string;
+    versions: number[];
+    websites: number[];
+}
+
+export interface IPlatformCategrory {
+    category: 'pc' | 'playstation' | 'xbox' | 'nintendo';
+    platforms: EGamePlatform[];
 }
\ No newline at end of file