Merge branch 'FeatureGamesList' into 'main'

Feature games list

See merge request !1

.env.example

+# Example .env file
+
+# Database for connecting to Prisma
+DATABASE_URL="file:./dev.db"
+
+# Some URLs
+TWITCH_AUTH_BASE_URL="https://id.twitch.tv/oauth2"
+IGDB_BASE_URL="https://api.igdb.com/v4"
+IGDB_IMG_BASE_URL="https://images.igdb.com/igdb/image/upload"
+
+# For Authentication
+TWITCH_CLIENT_ID="imdb_client_id"
+TWITCH_CLIENT_SECRET="imdb_auth_id"
\ No newline at end of file

.env.sample

-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-DATABASE_URL="file:./dev.db"
-
-IMDB_CLIENT_ID="imdb-client-id"
-IMDB_AUTH="Bearer imdb-auth-id"
\ No newline at end of file

.gitignore

@@ -25,12 +25,13 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*.local
 .env
+.env*.local
+.env*.production
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+next-env.d.ts
\ No newline at end of file

app/api/games/route.ts

+import { getGames } from "@/lib/igdb";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+    const p = req.nextUrl.searchParams;
+    const games = await getGames(p.get('page') ? parseInt(p.get('page') as string) : undefined);
+    return NextResponse.json(games);
+}
\ No newline at end of file

app/games/Game.tsx

+import { Card, CardContent, Typography } from "@mui/material";
 import Image from "next/image";
 import Link from "next/link";
 
-export default function Game({ id, name, cover }: { id: any, name: any, cover: any }) {
+// this is a single game helper-component, only for design purposes
+export default function Game({ id, name, cover }: { id: number, name: string, cover: { url: string } }) {
     return (
-        <div>
-            <h1>{name}</h1>
+        <Card sx={{ maxWidth: 264 }} variant="outlined" >
             <Link href={`/games/${id}`}>
-                <Image src={"https:" + cover.url} alt={name} width={200} height={200} />
+                <Image src={cover.url} alt={name} width={264} height={374} priority={true} style={{ width: '100%', height: '100%' }} />
             </Link>
-        </div>
+            <CardContent>
+                <Typography noWrap={true}>{name}</Typography>
+            </CardContent>
+        </Card>
     )
-}
+}
\ No newline at end of file

app/games/[gameid]/loading.tsx

+// loading component, this renders when loading in /games happens
 export default function Loading() {
     return (
         <div>

app/games/[gameid]/page.tsx

+import { getGame, getGames } from "@/lib/igdb";
+import { IGame } from "@/types/types";
 import Image from "next/image";
 
-type DetailView = {
-    id: number;
-    name: string;
-    cover: { url: string };
-    summary: string;
-}
-
-type DetailViewArray = DetailView[];
-
-
-
-export default async function GameDetail({ params }: { params: any }) {
-    const res = await fetch("https://api.igdb.com/v4/games", {
-        method: 'POST',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
-            'Authorization': `${process.env.IMDB_AUTH}`,
-        },
-        body: `fields name,cover.*,summary; where cover != null; where id = ${params.gameid};`,
-    });
-    const data: DetailViewArray = await res.json()
+// renders a single game detail page
+export default async function GameDetail({ params }: { params: { gameid: string } }) {
+    const data: IGame[] = await getGame(parseInt(params.gameid))
 
     return (
         <div>
-            Game Detail
+            <h1>Game Detail</h1>
             <h1>{data[0].name}</h1>
-            <Image src={"https:" + data[0].cover.url} alt={data[0].name} width={200} height={200} priority />
+            <Image src={data[0].cover.url} alt={data[0].name} width={264} height={374} priority={true} />
             <p>{data[0].summary}</p>
         </div>
     )
 }
+
+// pre-renders static paths for all fetched games for faster page loads
+export async function generateStaticParams() {
+    const games = await getGames()
+
+    return games.map((game) => ({
+        gameid: game.id.toString(),
+    }));
+}
\ No newline at end of file

app/games/loading.tsx

+// root loading component, this renders when any loading happens
 export default function Loading() {
     return (
         <div>

app/games/page.tsx

-import Game from "./Game";
-
-type DetailView = {
-    id: number;
-    name: string;
-    cover: { url: string };
-    summary: string;
-}
+"use client"
 
-type DetailViewArray = DetailView[];
+import { getBaseURL } from "@/lib/utils";
+import { IGame } from "@/types/types";
+import { Grid } from "@mui/material";
+import { Fragment } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useInfiniteQuery } from "react-query";
+import Game from "./Game";
 
-export default async function GamesList() {
-    const res = await fetch("https://api.igdb.com/v4/games", {
-        method: 'POST',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json',
-            'Client-ID': `${process.env.IMDB_CLIENT_ID}`,
-            'Authorization': `${process.env.IMDB_AUTH}`,
-        },
-        body: `fields name,cover.*; limit 40; where cover != null;`,
-    });
-    const data: DetailViewArray = await res.json()
+// renders a list of games infinitely (presumably)
+export default function GamesList() {
+    const {
+        data,
+        error,
+        fetchNextPage,
+        hasNextPage,
+        isFetching,
+        isFetchingNextPage,
+        status,
+    } = useInfiniteQuery(
+        'infiniteGames',
+        async ({ pageParam = 1 }) =>
+            await fetch(
+                `${getBaseURL()}/api/games/?page=${pageParam}`,
+                { cache: 'force-cache', }
+            ).then((result) => result.json() as Promise<IGame[]>),
+        {
+            getNextPageParam: (lastPage, pages) => {
+                return lastPage.length > 0 ? pages.length + 1 : undefined;
+            },
+        }
+    );
 
     return (
-        <div>
-            Games List Page
-            {data.map((game: any) => (
-                <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
-            ))}
-        </div>
+        <>
+            <h1>Games List Page</h1>
+            {status === 'success' && (
+                <InfiniteScroll
+                    dataLength={data?.pages.length * 20}
+                    next={fetchNextPage}
+                    hasMore={hasNextPage ? true : false}
+                    loader={<h4>Loading...</h4>}
+                    endMessage={
+                        <p style={{ textAlign: 'center' }}>
+                            <b>Yay! You have seen it all</b>
+                        </p>
+                    }
+                >
+                    <Grid container spacing={2} justifyContent="center">
+                        {data?.pages.map((page, i) => (
+                            <Fragment key={i}>
+                                {page.map((game: IGame) => (
+                                    <Grid item xs={12} ss={6} sm={4} md={3} lg={2} key={game.id}>
+                                        <Game id={game.id} name={game.name} cover={game.cover} key={game.id} />
+                                    </Grid>
+                                ))}
+                            </Fragment>
+                        ))}
+                    </Grid>
+                </InfiniteScroll>
+            )}
+        </>
     )
-}
+}
\ No newline at end of file

app/layout.tsx

-import { Inter } from 'next/font/google'
+"use client"
 
-const inter = Inter({ subsets: ['latin'] })
+import { Container, CssBaseline, ThemeProvider, createTheme, useMediaQuery } from "@mui/material"
+import { useMemo, useState } from "react"
+import { QueryClient, QueryClientProvider } from "react-query"
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'GameUnity',
+  description: 'Soon',
 }
 
+// this is the root layout for all pages ({children})
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: prefersDarkMode ? 'dark' : 'light',
+        },
+        breakpoints: {
+          values: {
+            xs: 0,
+            ss: 300,
+            sm: 600,
+            md: 900,
+            lg: 1200,
+            xl: 1536,
+          },
+        },
+      }),
+    [prefersDarkMode],
+  );
+
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <body>
+            <Container>
+              {children}
+            </Container>
+          </body>
+        </ThemeProvider>
+      </QueryClientProvider>
     </html>
   )
 }
+
+// custom super small breakpoint for responsive design
+declare module '@mui/material/styles' {
+  interface BreakpointOverrides {
+    ss: true;
+  }
+}
\ No newline at end of file

app/page.tsx

+import Link from "next/link";
+
+// renders home page
 export default function Home() {
   return (
     <main>
       <div>
-        Hello World!
+        <h1>Welcome to GameUnity!</h1>
+        <p>This will be our Home Page and is still WIP</p>
+        <Link href="/games">Games List Progress</Link>
       </div>
     </main>
   )
-}
+}
\ No newline at end of file

lib/igdb.ts

+import { IAuth, IGame } from "@/types/types"
+import { calculateOffset, getImageURL } from "./utils"
+
+const TWITCH_AUTH_BASE_URL = process.env.TWITCH_AUTH_BASE_URL ?? ''
+const IGDB_BASE_URL = process.env.IGDB_BASE_URL ?? ''
+
+const CLIENT_ID = process.env.TWITCH_CLIENT_ID ?? ''
+const CLIENT_SECRET = process.env.TWITCH_CLIENT_SECRET ?? ''
+
+const limit = 200
+
+let _auth: IAuth
+let _lastUpdate = 0
+
+// fetches a new token if the current one is expired
+async function getToken(): Promise<IAuth> {
+    if (!_auth || Date.now() - _lastUpdate > _auth.expires_in) {
+        const url = new URL(`${TWITCH_AUTH_BASE_URL}/token`)
+        url.searchParams.set('client_id', CLIENT_ID)
+        url.searchParams.set('client_secret', CLIENT_SECRET)
+        url.searchParams.set('grant_type', 'client_credentials')
+
+        const response = await fetch(url, { method: 'POST' })
+        _auth = await response.json() as IAuth
+        _lastUpdate = Date.now()
+    }
+    return _auth
+}
+
+// fetches the top 200 games with a rating of 96 or higher
+export async function getGames(page = 1): Promise<IGame[]> {
+    const auth = await getToken()
+    const url = new URL(`${IGDB_BASE_URL}/games`)
+
+    let offset = calculateOffset(page, limit)
+
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            '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;`
+    })
+    const games = await response.json() as IGame[]
+
+    games.forEach(game => {
+        game.cover.url = getImageURL(game.cover.image_id, 'cover_big')
+    })
+
+    return games
+}
+
+// fetches a single game by id
+export async function getGame(id: number): Promise<IGame[]> {
+    const auth = await getToken()
+    const url = new URL(`${IGDB_BASE_URL}/games`)
+
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Client-ID': CLIENT_ID,
+            'Authorization': `Bearer ${auth.access_token}`
+        },
+        body: `fields name, cover.*, summary; where cover != null; where id = ${id};`
+    })
+    const games = await response.json() as IGame[]
+
+    games.forEach(game => {
+        game.cover.url = getImageURL(game.cover.image_id, 'cover_big')
+    })
+
+    return games
+}
\ No newline at end of file

lib/utils.ts

+const IGDB_IMG_BASE_URL = process.env.IGDB_IMG_BASE_URL ?? ''
+
+// changes the default size of the image to be fetched
+export function getImageURL(hashId: string, size: string): string {
+    return `${IGDB_IMG_BASE_URL}/t_${size}_2x/${hashId}.jpg`
+}
+
+// returns the base url for the current environment, even considering current port
+export function getBaseURL(): string {
+    return process.env.NODE_ENV === 'production'
+        ? process.env.PROD_URL ?? ''
+        : (typeof window !== 'undefined'
+            ? `http://${window.location.hostname}:${window.location.port}`
+            : 'http://localhost:3000')
+}
+
+// calculates the offset for the query
+export function calculateOffset(page: number, limit: number): number {
+    return (page - 1) * limit
+}
\ No newline at end of file

package-lock.json

@@ -8,22 +8,24 @@
       "name": "project_ss23",
       "version": "0.1.0",
       "dependencies": {
-        "@clerk/nextjs": "^4.17.1",
+        "@clerk/nextjs": "^4.17.3",
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
-        "@mui/material": "^5.12.3",
-        "@types/node": "20.1.0",
+        "@mui/material": "^5.13.0",
+        "@types/node": "20.1.4",
         "@types/react": "18.2.6",
         "@types/react-dom": "18.2.4",
         "eslint": "8.40.0",
-        "eslint-config-next": "13.4.1",
-        "next": "13.4.1",
+        "eslint-config-next": "13.4.2",
+        "next": "13.4.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-infinite-scroll-component": "^6.1.0",
+        "react-query": "^3.39.3",
         "typescript": "5.0.4"
       },
       "devDependencies": {
-        "prisma": "^4.13.0"
+        "prisma": "^4.14.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -251,9 +253,9 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@clerk/nextjs": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.17.1.tgz",
-      "integrity": "sha512-v6UPYUkwktUmZT01nJFWQvrWSyVJx6CYa/KVHo6gmSTyUFX7p7Tpfoknq1VCvqp6DCHdbJC1uHbXmjUd4AhwBQ==",
+      "version": "4.17.3",
+      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-4.17.3.tgz",
+      "integrity": "sha512-H6Yi9GB9odTSw5KnZjO7mtLAjuaFuBN72kUDhnjTdIQWqHL0I1+Ut+jWAZTNf2w/ocRlpuw2BxNBlcAus5Bg+A==",
       "dependencies": {
         "@clerk/backend": "^0.18.0",
         "@clerk/clerk-react": "^4.15.4",
@@ -516,9 +518,9 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.128",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.128.tgz",
-      "integrity": "sha512-wub3wxNN+hUp8hzilMlXX3sZrPo75vsy1cXEQpqdTfIFlE9HprP1jlulFiPg5tfPst2OKmygXr2hhmgvAKRrzQ==",
+      "version": "5.0.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.0.tgz",
+      "integrity": "sha512-ap+juKvt8R8n3cBqd/pGtZydQ4v2I/hgJKnvJRGjpSh3RvsvnDHO4rXov8MHQlH6VqpOekwgilFLGxMZjNTucA==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
         "@emotion/is-prop-valid": "^1.2.0",
@@ -553,26 +555,26 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.12.3.tgz",
-      "integrity": "sha512-yiJZ+knaknPHuRKhRk4L6XiwppwkAahVal3LuYpvBH7GkA2g+D9WLEXOEnNYtVFUggyKf6fWGLGnx0iqzkU5YA==",
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.13.0.tgz",
+      "integrity": "sha512-5nXz2k8Rv2ZjtQY6kXirJVyn2+ODaQuAJmXSJtLDUQDKWp3PFUj6j3bILqR0JGOs9R5ejgwz3crLKsl6GwjwkQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.12.3",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.12.3.tgz",
-      "integrity": "sha512-xNmKlrEN4HsTaKFNLZfc7ie7CXx2YqEeO//hsXZx2p3MGtDdeMr2sV3jC4hsFs57RhQlF79weY7uVvC8xSuVbg==",
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.0.tgz",
+      "integrity": "sha512-ckS+9tCpAzpdJdaTF+btF0b6mF9wbXg/EVKtnoAWYi0UKXoXBAVvEUMNpLGA5xdpCdf+A6fPbVUEHs9TsfU+Yw==",
       "dependencies": {
         "@babel/runtime": "^7.21.0",
-        "@mui/base": "5.0.0-alpha.128",
-        "@mui/core-downloads-tracker": "^5.12.3",
+        "@mui/base": "5.0.0-beta.0",
+        "@mui/core-downloads-tracker": "^5.13.0",
         "@mui/system": "^5.12.3",
         "@mui/types": "^7.2.4",
         "@mui/utils": "^5.12.3",
-        "@types/react-transition-group": "^4.4.5",
+        "@types/react-transition-group": "^4.4.6",
         "clsx": "^1.2.1",
         "csstype": "^3.1.2",
         "prop-types": "^15.8.1",
@@ -747,22 +749,22 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@next/env": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.1.tgz",
-      "integrity": "sha512-eD6WCBMFjLFooLM19SIhSkWBHtaFrZFfg2Cxnyl3vS3DAdFRfnx5TY2RxlkuKXdIRCC0ySbtK9JXXt8qLCqzZg=="
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.4.2.tgz",
+      "integrity": "sha512-Wqvo7lDeS0KGwtwg9TT9wKQ8raelmUxt+TQKWvG/xKfcmDXNOtCuaszcfCF8JzlBG1q0VhpI6CKaRMbVPMDWgw=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.1.tgz",
-      "integrity": "sha512-tVPS/2FKlA3ANCRCYZVT5jdbUKasBU8LG6bYqcNhyORDFTlDYa4cAWQJjZ7msIgLwMQIbL8CAsxrOL8maa/4Lg==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.4.2.tgz",
+      "integrity": "sha512-ZeFWgrxwckxTpYM+ANeUL9E7LOGPbZKmI94LJIjbDU69iEIgqd4WD0l2pVbOJMr/+vgoZmJ9Dx1m0WJ7WScXHA==",
       "dependencies": {
         "glob": "7.1.7"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.1.tgz",
-      "integrity": "sha512-eF8ARHtYfnoYtDa6xFHriUKA/Mfj/cCbmKb3NofeKhMccs65G6/loZ15a6wYCCx4rPAd6x4t1WmVYtri7EdeBg==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.4.2.tgz",
+      "integrity": "sha512-6BBlqGu3ewgJflv9iLCwO1v1hqlecaIH2AotpKfVUEzUxuuDNJQZ2a4KLb4MBl8T9/vca1YuWhSqtbF6ZuUJJw==",
       "cpu": [
         "arm64"
       ],
@@ -775,9 +777,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.1.tgz",
-      "integrity": "sha512-7cmDgF9tGWTgn5Gw+vP17miJbH4wcraMHDCOHTYWkO/VeKT73dUWG23TNRLfgtCNSPgH4V5B4uLHoZTanx9bAw==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.4.2.tgz",
+      "integrity": "sha512-iZuYr7ZvGLPjPmfhhMl0ISm+z8EiyLBC1bLyFwGBxkWmPXqdJ60mzuTaDSr5WezDwv0fz32HB7JHmRC6JVHSZg==",
       "cpu": [
         "x64"
       ],
@@ -790,9 +792,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.1.tgz",
-      "integrity": "sha512-qwJqmCri2ie8aTtE5gjTSr8S6O8B67KCYgVZhv9gKH44yvc/zXbAY8u23QGULsYOyh1islWE5sWfQNLOj9iryg==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.4.2.tgz",
+      "integrity": "sha512-2xVabFtIge6BJTcJrW8YuUnYTuQjh4jEuRuS2mscyNVOj6zUZkom3CQg+egKOoS+zh2rrro66ffSKIS+ztFJTg==",
       "cpu": [
         "arm64"
       ],
@@ -805,9 +807,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.1.tgz",
-      "integrity": "sha512-qcC54tWNGDv/VVIFkazxhqH1Bnagjfs4enzELVRlUOoJPD2BGJTPI7z08pQPbbgxLtRiu8gl2mXvpB8WlOkMeA==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.4.2.tgz",
+      "integrity": "sha512-wKRCQ27xCUJx5d6IivfjYGq8oVngqIhlhSAJntgXLt7Uo9sRT/3EppMHqUZRfyuNBTbykEre1s5166z+pvRB5A==",
       "cpu": [
         "arm64"
       ],
@@ -820,9 +822,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.1.tgz",
-      "integrity": "sha512-9TeWFlpLsBosZ+tsm/rWBaMwt5It9tPH8m3nawZqFUUrZyGRfGcI67js774vtx0k3rL9qbyY6+3pw9BCVpaYUA==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.4.2.tgz",
+      "integrity": "sha512-NpCa+UVhhuNeaFVUP1Bftm0uqtvLWq2JTm7+Ta48+2Uqj2mNXrDIvyn1DY/ZEfmW/1yvGBRaUAv9zkMkMRixQA==",
       "cpu": [
         "x64"
       ],
@@ -835,9 +837,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.1.tgz",
-      "integrity": "sha512-sNDGaWmSqTS4QRUzw61wl4mVPeSqNIr1OOjLlQTRuyInxMxtqImRqdvzDvFTlDfdeUMU/DZhWGYoHrXLlZXe6A==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.4.2.tgz",
+      "integrity": "sha512-ZWVC72x0lW4aj44e3khvBrj2oSYj1bD0jESmyah3zG/3DplEy/FOtYkMzbMjHTdDSheso7zH8GIlW6CDQnKhmQ==",
       "cpu": [
         "x64"
       ],
@@ -850,9 +852,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.1.tgz",
-      "integrity": "sha512-+CXZC7u1iXdLRudecoUYbhbsXpglYv8KFYsFxKBPn7kg+bk7eJo738wAA4jXIl8grTF2mPdmO93JOQym+BlYGA==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.4.2.tgz",
+      "integrity": "sha512-pLT+OWYpzJig5K4VKhLttlIfBcVZfr2+Xbjra0Tjs83NQSkFS+y7xx+YhCwvpEmXYLIvaggj2ONPyjbiigOvHQ==",
       "cpu": [
         "arm64"
       ],
@@ -865,9 +867,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.1.tgz",
-      "integrity": "sha512-vIoXVVc7UYO68VwVMDKwJC2+HqAZQtCYiVlApyKEeIPIQpz2gpufzGxk1z3/gwrJt/kJ5CDZjlhYDCzd3hdz+g==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.4.2.tgz",
+      "integrity": "sha512-dhpiksQCyGca4WY0fJyzK3FxMDFoqMb0Cn+uDB+9GYjpU2K5//UGPQlCwiK4JHxuhg8oLMag5Nf3/IPSJNG8jw==",
       "cpu": [
         "ia32"
       ],
@@ -880,9 +882,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.1.tgz",
-      "integrity": "sha512-n8V5ImLQZibKTu10UUdI3nIeTLkliEXe628qxqW9v8My3BAH2a7H0SaCqkV2OgqFnn8sG1wxKYw9/SNJ632kSA==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.4.2.tgz",
+      "integrity": "sha512-O7bort1Vld00cu8g0jHZq3cbSTUNMohOEvYqsqE10+yfohhdPHzvzO+ziJRz4Dyyr/fYKREwS7gR4JC0soSOMw==",
       "cpu": [
         "x64"
       ],
@@ -991,9 +993,9 @@
       }
     },
     "node_modules/@prisma/engines": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.13.0.tgz",
-      "integrity": "sha512-HrniowHRZXHuGT9XRgoXEaP2gJLXM5RMoItaY2PkjvuZ+iHc0Zjbm/302MB8YsPdWozAPHHn+jpFEcEn71OgPw==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-4.14.0.tgz",
+      "integrity": "sha512-PDNlhP/1vyTgmNyiucGqGCdXIp7HIkkvKO50si3y3PcceeHvqtiKPaH1iJdz63jCWMVMbj2MElSxXPOeBvEVIQ==",
       "dev": true,
       "hasInstallScript": true
     },
@@ -1076,9 +1078,9 @@
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
     },
     "node_modules/@types/node": {
-      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.1.0.tgz",
-      "integrity": "sha512-O+z53uwx64xY7D6roOi4+jApDGFg0qn6WHcxe5QeqjMaTezBO/mxdfFXIVAVVyNWKx84OmPB3L8kbVYOTeN34A=="
+      "version": "20.1.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.1.4.tgz",
+      "integrity": "sha512-At4pvmIOki8yuwLtd7BNHl3CiWNbtclUbNtScGx4OHfBd4/oWoJC8KRCIxXwkdndzhxOsPXihrsOoydxBjlE9Q=="
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.2",
@@ -1533,6 +1535,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/bundle-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-3.0.0.tgz",
@@ -1855,6 +1872,11 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2091,11 +2113,11 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.1.tgz",
-      "integrity": "sha512-ajuxjCkW1hvirr0EQZb3/B/bFH52Z7CT89uCtTcICFL9l30i5c8hN4p0LXvTjdOXNPV5fEDcxBgGHgXdzTj1/A==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.4.2.tgz",
+      "integrity": "sha512-zjLJ9B9bbeWSo5q+iHfdt8gVYyT+y2BpWDfjR6XMBtFRSMKRGjllDKxnuKBV1q2Y/QpwLM2PXHJTMRyblCmRAg==",
       "dependencies": {
-        "@next/eslint-plugin-next": "13.4.1",
+        "@next/eslint-plugin-next": "13.4.2",
         "@rushstack/eslint-patch": "^1.1.3",
         "@typescript-eslint/parser": "^5.42.0",
         "eslint-import-resolver-node": "^0.3.6",
@@ -3296,6 +3318,11 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3440,6 +3467,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -3465,6 +3501,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -3519,6 +3560,14 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -3542,11 +3591,11 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
     "node_modules/next": {
-      "version": "13.4.1",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.4.1.tgz",
-      "integrity": "sha512-JBw2kAIyhKDpjhEWvNVoFeIzNp9xNxg8wrthDOtMctfn3EpqGCmW0FSviNyGgOSOSn6zDaX48pmvbdf6X2W9xA==",
+      "version": "13.4.2",
+      "resolved": "https://registry.npmjs.org/next/-/next-13.4.2.tgz",
+      "integrity": "sha512-aNFqLs3a3nTGvLWlO9SUhCuMUHVPSFQC0+tDNGAsDXqx+WJDFSbvc233gOJ5H19SBc7nw36A9LwQepOJ2u/8Kg==",
       "dependencies": {
-        "@next/env": "13.4.1",
+        "@next/env": "13.4.2",
         "@swc/helpers": "0.5.1",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
@@ -3561,15 +3610,15 @@
         "node": ">=16.8.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.4.1",
-        "@next/swc-darwin-x64": "13.4.1",
-        "@next/swc-linux-arm64-gnu": "13.4.1",
-        "@next/swc-linux-arm64-musl": "13.4.1",
-        "@next/swc-linux-x64-gnu": "13.4.1",
-        "@next/swc-linux-x64-musl": "13.4.1",
-        "@next/swc-win32-arm64-msvc": "13.4.1",
-        "@next/swc-win32-ia32-msvc": "13.4.1",
-        "@next/swc-win32-x64-msvc": "13.4.1"
+        "@next/swc-darwin-arm64": "13.4.2",
+        "@next/swc-darwin-x64": "13.4.2",
+        "@next/swc-linux-arm64-gnu": "13.4.2",
+        "@next/swc-linux-arm64-musl": "13.4.2",
+        "@next/swc-linux-x64-gnu": "13.4.2",
+        "@next/swc-linux-x64-musl": "13.4.2",
+        "@next/swc-win32-arm64-msvc": "13.4.2",
+        "@next/swc-win32-ia32-msvc": "13.4.2",
+        "@next/swc-win32-x64-msvc": "13.4.2"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -3746,6 +3795,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3947,13 +4001,13 @@
       }
     },
     "node_modules/prisma": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.13.0.tgz",
-      "integrity": "sha512-L9mqjnSmvWIRCYJ9mQkwCtj4+JDYYTdhoyo8hlsHNDXaZLh/b4hR0IoKIBbTKxZuyHQzLopb/+0Rvb69uGV7uA==",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-4.14.0.tgz",
+      "integrity": "sha512-+5dMl1uxMQb4RepndY6AwR9xi1cDcaGFICu+ws6/Nmgt93mFPNj8tYxSfTdmfg+rkNrUId9rk/Ac2vTgLe/oXA==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "@prisma/engines": "4.13.0"
+        "@prisma/engines": "4.14.0"
       },
       "bin": {
         "prisma": "build/index.js",
@@ -4047,11 +4101,47 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-infinite-scroll-component": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
+      "integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
+      "dependencies": {
+        "throttle-debounce": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -4088,6 +4178,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -4587,6 +4682,14 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
     },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/titleize": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz",
@@ -4734,6 +4837,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",

package.json

@@ -9,21 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@clerk/nextjs": "^4.17.1",
+    "@clerk/nextjs": "^4.17.3",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.12.3",
-    "@types/node": "20.1.0",
+    "@mui/material": "^5.13.0",
+    "@types/node": "20.1.4",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "eslint": "8.40.0",
-    "eslint-config-next": "13.4.1",
-    "next": "13.4.1",
+    "eslint-config-next": "13.4.2",
+    "next": "13.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-query": "^3.39.3",
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "prisma": "^4.13.0"
+    "prisma": "^4.14.0"
   }
 }

types/types.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;
+    token_type: 'bearer';
+}
+
+export interface IGame {
+    id: number;
+    age_ratings: EAgeRatingCategory[];
+    aggregrated_rating: number;
+    aggregrated_rating_count: number;
+    alternative_names: number[];
+    artworks: number[];
+    bundles: number[];
+    category: EGameCategory;
+    checksum: string;
+    collection: number;
+    cover: ICover;
+    created_at: number;
+    dlcs: number[];
+    expanded_games: number[];
+    expansions: number[];
+    external_games: number[];
+    first_release_date: number;
+    follows: number;
+    forks: number[];
+    franchise: number;
+    franchises: number[];
+    game_engines: number[];
+    game_localizations: number[];
+    game_modes: number[];
+    genres: number[];
+    hypes: number;
+    involved_companies: number[];
+    keywords: number[];
+    language_supports: number[];
+    multiplayer_modes: number[];
+    name: string;
+    parent_game: string;
+    platforms: number[];
+    player_perspectives: number[];
+    ports: number[];
+    rating: number;
+    rating_count: number;
+    release_dates: number[];
+    remakes: number[];
+    remasters: number[];
+    screenshots: number[];
+    similar_games: number[];
+    slug: string;
+    standalone_expansions: number[];
+    status: EGameStatus;
+    storyline: string;
+    summary: string;
+    tags: number[];
+    themes: number[];
+    total_rating: number;
+    total_rating_count: number;
+    updated_at: number;
+    url: string;
+    version_parent: number;
+    version_title: string;
+    videos: number[];
+    websites: number[];
+}
+
+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;
+}
\ No newline at end of file