From e6d5f6d3e37b7794379f48e6113d2df3d0607358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20Akg=C3=BCl?= <s86116@bht-berlin.de>
Date: Wed, 7 Jun 2023 21:21:44 +0200
Subject: [PATCH] games page
---
.../(gaming)/games/[gameid]/page.tsx | 28 +++++++++--
lib/config/dashboard.ts | 50 +++++++++----------
lib/igdb.ts | 4 +-
types/igdb-types.d.ts | 4 +-
4 files changed, 52 insertions(+), 34 deletions(-)
diff --git a/app/(content)/(gaming)/games/[gameid]/page.tsx b/app/(content)/(gaming)/games/[gameid]/page.tsx
index 489cb49..514228f 100644
--- a/app/(content)/(gaming)/games/[gameid]/page.tsx
+++ b/app/(content)/(gaming)/games/[gameid]/page.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { getGame } from "@/lib/igdb";
import { IGame } from "@/types/igdb-types";
@@ -7,7 +8,6 @@ import Image from "next/image";
export default async function GameDetail({ params }: { params: { gameid: string } }) {
const data: IGame[] = await getGame(parseInt(params.gameid))
- // onvert unix timestamp to date in this format: Feb 25, 2022
const date = new Date(data[0].first_release_date * 1000).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
@@ -15,7 +15,6 @@ export default async function GameDetail({ params }: { params: { gameid: string
})
const companies = data[0].involved_companies.map((company) => {
- // put a comma between each company
if (company !== data[0].involved_companies[0]) {
return `, ${company.company.name}`
}
@@ -47,13 +46,32 @@ export default async function GameDetail({ params }: { params: { gameid: string
</Card>
</div>
<div className="ml-6 md:ml-12 grid items-start gap-2">
- <h1>{data[0].name}</h1>
- <h1>released on {date} by {companies}</h1>
+ <h1 className="text-2xl font-bold">{data[0].name}</h1>
+ <h1>released on{' '}
+ <span className="font-semibold">{date}</span> by{' '}
+ <span className="font-semibold">{companies}</span>
+ </h1>
<h1>{data[0].summary}</h1>
+ <div className="mt-6 ">
+ <h1>Genres</h1>
+ <div className="flex flex-wrap gap-2">
+ {data[0].genres.map((genre, i) => {
+ return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{genre.name}</Button>
+ })}
+ </div>
+ </div>
+ <div className="mt-6">
+ <h1>Platforms</h1>
+ <div className="flex flex-wrap gap-2">
+ {data[0].platforms.map((platform, i) => {
+ return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{platform.name}</Button>
+ })}
+ </div>
+ </div>
</div>
</div>
<div className="px-6 md:px-12">
- <div className='mt-6 border-b border-gray-400 dark:border-gray-200 ' />
+ <div className="border-b border-gray-400 dark:border-gray-200" />
{/* comments */}
</div>
</Card>
diff --git a/lib/config/dashboard.ts b/lib/config/dashboard.ts
index 45cdb56..aaf550c 100644
--- a/lib/config/dashboard.ts
+++ b/lib/config/dashboard.ts
@@ -12,35 +12,35 @@ export const dashboardConfig: DashboardConfig = {
href: "/games",
icon: "gamepad2",
},
- {
- title: "Communities",
- href: "/communities",
- icon: "messagecircle",
- },
- {
- title: "Notifications",
- href: "/notifications",
- icon: "bellring",
- },
- {
- title: "Followers",
- href: "/followers",
- icon: "users",
- },
+ // {
+ // title: "Communities",
+ // href: "/communities",
+ // icon: "messagecircle",
+ // },
+ // {
+ // title: "Notifications",
+ // href: "/notifications",
+ // icon: "bellring",
+ // },
+ // {
+ // title: "Followers",
+ // href: "/followers",
+ // icon: "users",
+ // },
{
title: "My Profile",
href: "",
icon: "user",
},
- {
- title: "Settings",
- href: "/settings",
- icon: "settings",
- },
- {
- title: "Help",
- href: "/help",
- icon: "help",
- },
+ // {
+ // title: "Settings",
+ // href: "/settings",
+ // icon: "settings",
+ // },
+ // {
+ // title: "Help",
+ // href: "/help",
+ // icon: "help",
+ // },
],
}
\ No newline at end of file
diff --git a/lib/igdb.ts b/lib/igdb.ts
index daa3d78..a3f26bf 100644
--- a/lib/igdb.ts
+++ b/lib/igdb.ts
@@ -78,8 +78,8 @@ export async function getGame(id: number): Promise<IGame[]> {
'Authorization': `Bearer ${auth.access_token}`
},
body:
- `fields *, cover.image_id, screenshots.image_id, involved_companies.company.name;
- where total_rating_count > 3
+ `fields *, cover.image_id, screenshots.image_id, involved_companies.company.name, genres.name, platforms.name;
+ limit 1; where total_rating_count > 3
& cover != null & total_rating != null & rating != null & age_ratings != null
& id = ${id};`
})
diff --git a/types/igdb-types.d.ts b/types/igdb-types.d.ts
index c18bc05..9f2d9db 100644
--- a/types/igdb-types.d.ts
+++ b/types/igdb-types.d.ts
@@ -28,7 +28,7 @@ export interface IGame {
game_engines: number[];
game_localizations: number[];
game_modes: number[];
- genres: number[];
+ genres: IGenre[];
hypes: number;
involved_companies: IInvolvedCompany[];
keywords: number[];
@@ -36,7 +36,7 @@ export interface IGame {
multiplayer_modes: number[];
name: string;
parent_game: string;
- platforms: number[];
+ platforms: IPlatform[];
player_perspectives: number[];
ports: number[];
rating: number;
--
GitLab