Merge pull request #56 from codersforcauses/issue-49-Games_Showcase_Page

Issue 49 games showcase page

Author: SafetyInObscurity

client/next.config.mjs

@@ -13,7 +13,10 @@ const config = {
   },
   outputFileTracingRoot: import.meta.dirname,
   images: {
-    domains: ["localhost"],
+    remotePatterns: [
+      { protocol: 'http', hostname: '127.0.0.1' },
+      { protocol: 'http', hostname: 'localhost' },
+    ],
   },
   // Turns on file change polling for the Windows Dev Container
   // Doesn't work currently for turbopack, so file changes will not automatically update the client.

client/src/components/ui/ItchEmbed.tsx

@@ -0,0 +1,17 @@
+type ItchEmbedProps = {
+  embedID: string;
+  name: string;
+};
+
+export function ItchEmbed({ embedID, name }: ItchEmbedProps) {
+  return (
+    <div className="mb-6 w-full max-w-[552px] px-4 shadow-[0_12px_40px_-16px_hsl(var(--secondary)_/_0.45)] sm:aspect-[552/167] sm:px-0">
+      <iframe
+        className="h-full w-full border-0"
+        src={`https://itch.io/embed/${embedID}?dark=1`}
+        title={name}
+        allowFullScreen
+      />
+    </div>
+  );
+}

client/src/hooks/useGames.ts

@@ -0,0 +1,80 @@
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import api from "@/lib/api";
+
+type Contributor = {
+  member_id: number;
+  name: string;
+  role: string;
+};
+
+type ApiGame = {
+  name: string;
+  description: string;
+  completion: number;
+  active: boolean;
+  hostURL: string;
+  // TO DO: Add support for no itchEmbedID for non-itch games
+  itchEmbedID: string;
+  thumbnail: string | null;
+  event: number | null;
+  contributors: Contributor[];
+};
+
+type UiGame = Omit<ApiGame, "thumbnail"> & {
+  gameCover: string;
+};
+
+/**
+ * Normalizes Next.js router query parameter to a single string ID.
+ * Handles both string and array formats from dynamic routes.
+ */
+function normalizeGameId(
+  gameId: string | string[] | undefined,
+): string | undefined {
+  if (!gameId) return undefined;
+  return typeof gameId === "string" ? gameId : gameId[0];
+}
+
+function transformApiGameToUiGame(data: ApiGame): UiGame {
+  return {
+    ...data,
+    gameCover: data.thumbnail ?? "/game_dev_club_logo.svg",
+  };
+}
+
+/**
+ * Custom hook to fetch a single game by ID.
+ *
+ * @param gameId - game ID from Next.js router query (can be string, string[], or undefined)
+ * @returns React Query result with transformed UI game data
+ *
+ * @example
+ * ```tsx
+ * const { id } = router.query;
+ * const { data: game, isPending, error } = useGame(id);
+ * ```
+ */
+export function useGame(gameId: string | string[] | undefined) {
+  const id = normalizeGameId(gameId);
+
+  return useQuery<ApiGame, AxiosError, UiGame>({
+    queryKey: ["games", id],
+    queryFn: async () => {
+      if (!id) {
+        throw new Error("Game ID is required");
+      }
+      const response = await api.get<ApiGame>(`/games/${id}/`);
+      return response.data;
+    },
+    enabled: !!id,
+    select: transformApiGameToUiGame,
+    retry: (failureCount, error) => {
+      if (error!.response?.status === 404) {
+        return false;
+      }
+      return failureCount < 3;
+    },
+  });
+}

client/src/hooks/useGameshowcase.ts

@@ -0,0 +1,55 @@
+import { useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+
+import api from "@/lib/api";
+
+type Contributor = {
+  name: string;
+  role: string;
+};
+
+type ApiShowcaseGame = {
+  game_id: number;
+  game_name: string;
+  description: string;
+  game_description: string;
+  contributors: Contributor[];
+  game_cover_thumbnail?: string | null;
+};
+
+type UiShowcaseGame = Omit<ApiShowcaseGame, "game_cover_thumbnail"> & {
+  gameCover: string;
+};
+
+function getGameCoverUrl(
+  game_cover_thumbnail: string | null | undefined,
+): string {
+  if (!game_cover_thumbnail) return "/game_dev_club_logo.svg";
+  if (game_cover_thumbnail.startsWith("http")) return game_cover_thumbnail;
+  // Use environment variable for Django backend base URL
+  const apiBaseUrl =
+    process.env.NEXT_PUBLIC_API_BASE_URL || "http://localhost:8000";
+  return `${apiBaseUrl}${game_cover_thumbnail}`;
+}
+
+function transformApiShowcaseGameToUi(data: ApiShowcaseGame): UiShowcaseGame {
+  return {
+    ...data,
+    gameCover: getGameCoverUrl(data.game_cover_thumbnail),
+  };
+}
+
+export function useGameshowcase() {
+  return useQuery<ApiShowcaseGame[], AxiosError, UiShowcaseGame[]>({
+    queryKey: ["showcaseGames"],
+    queryFn: async () => {
+      const res = await api.get<ApiShowcaseGame[]>("/gameshowcase/");
+      return res.data;
+    },
+    select: (data) => data.map(transformApiShowcaseGameToUi),
+    retry: (failureCount, error) => {
+      if (error?.response?.status === 404) return false;
+      return failureCount < 3;
+    },
+  });
+}

client/src/pages/games/[id].tsx

@@ -0,0 +1,188 @@
+import Image from "next/image";
+import { useRouter } from "next/router";
+import React from "react";
+
+import { ItchEmbed } from "@/components/ui/ItchEmbed";
+import { useGame } from "@/hooks/useGames";
+
+export default function IndividualGamePage() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  const {
+    data: game,
+    isPending,
+    error,
+    isError,
+  } = useGame(router.isReady ? id : undefined);
+
+  if (isPending) {
+    return (
+      <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
+        <p>Loading Game...</p>
+      </main>
+    );
+  }
+
+  if (isError) {
+    const errorMessage =
+      error?.response?.status === 404
+        ? "Game not found."
+        : "Failed to Load Game";
+
+    return (
+      <main className="mx-auto min-h-screen max-w-6xl px-6 py-16 md:px-20">
+        <p className="text-red-500" role="alert">
+          {errorMessage}
+        </p>
+      </main>
+    );
+  }
+
+  if (!game) {
+    return (
+      <main className="mx-auto min-h-dvh max-w-6xl px-6 py-16 md:px-20">
+        <p>No Game data available.</p>
+      </main>
+    );
+  }
+
+  const gameTitle = game.name;
+  const gameCover = game.gameCover;
+  const gameDescription = game.description.split("\n");
+
+  const completionLabels: Record<number, string> = {
+    1: "WIP",
+    2: "Playable Dev",
+    3: "Beta",
+    4: "Completed",
+  };
+
+  const devStage = completionLabels[game.completion] ?? "Stage Unknown";
+
+  // TODO ADD EVENT
+  const event = "Game Jam November 2025";
+  // TODO ADD ARTIMAGES
+  const artImages: { src: string; alt: string }[] = [];
+  // const artImages = [
+  //   {
+  //     src: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Minecraft_Zombie.png/120px-Minecraft_Zombie.png",
+  //     alt: "Minecraft Zombie",
+  //   },
+  //   {
+  //     src: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Minecraft_Enderman.png/120px-Minecraft_Enderman.png",
+  //     alt: "Minecraft Enderman",
+  //   },
+  //   {
+  //     src: "https://upload.wikimedia.org/wikipedia/en/thumb/1/17/Minecraft_explore_landscape.png/375px-Minecraft_explore_landscape.png",
+  //     alt: "Minecraft Landscape",
+  //   },
+  // ];
+
+  return (
+    <div className="min-h-screen bg-background font-sans text-foreground">
+      <main>
+        <section className="w-full bg-popover">
+          <div className="mx-auto max-w-7xl p-0 sm:p-8">
+            <Image
+              src={gameCover}
+              alt="Game Cover"
+              width={800}
+              height={800}
+              className="max-h-[60vh] w-full object-cover sm:mx-auto sm:h-auto sm:max-h-[60vh] sm:rounded-2xl sm:object-contain"
+              priority
+            />
+          </div>
+        </section>
+
+        <section className="mx-auto max-w-7xl px-4 py-6 sm:px-8 sm:py-8 lg:px-24 lg:py-12">
+          <h1 className="mb-6 text-center font-jersey10 text-5xl font-bold tracking-wide text-primary sm:mb-10 sm:text-6xl">
+            {gameTitle}
+          </h1>
+          <div className="mb-6 w-full max-w-full sm:float-right sm:mb-4 sm:ml-8 sm:w-96">
+            <table className="w-full min-w-[220px] border-collapse border-spacing-0 text-sm sm:text-base">
+              <tbody>
+                <tr className="border-b-2 border-gray-300">
+                  <td className="py-1 pr-2 text-muted-foreground sm:py-2">
+                    Contributors
+                  </td>
+                  <td className="py-1 text-right sm:py-2">
+                    <div className="grid grid-cols-[auto_auto] gap-x-1 gap-y-1">
+                      {game.contributors.map((c) => (
+                        <React.Fragment key={c.member_id}>
+                          <a
+                            href={`/member/${c.member_id}`}
+                            className="text-primary hover:underline"
+                          >
+                            {c.name}
+                          </a>
+                          <span>{c.role}</span>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  </td>
+                </tr>
+                <tr className="border-b-2 border-gray-300">
+                  <td className="py-1 pr-2 text-muted-foreground sm:py-2">
+                    Development Stage
+                  </td>
+                  <td className="py-1 text-right sm:py-2">{devStage}</td>
+                </tr>
+                <tr className="border-b-2 border-gray-300">
+                  <td className="py-1 pr-2 text-muted-foreground sm:py-2">
+                    Host Site
+                  </td>
+                  <td className="py-1 text-right sm:py-2">
+                    <a
+                      href={game.hostURL}
+                      className="text-primary underline hover:underline"
+                    >
+                      {game.hostURL}
+                    </a>
+                  </td>
+                </tr>
+                <tr>
+                  <td className="py-1 pr-2 text-muted-foreground sm:py-2">
+                    Event
+                  </td>
+                  <td className="py-1 text-right sm:py-2">{event}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <ul className="space-y-3 text-base leading-8 sm:text-lg lg:text-xl">
+            {gameDescription.map((desc, i) => (
+              <li key={i}>{desc}</li>
+            ))}
+          </ul>
+        </section>
+
+        <section className="mt-8 flex w-full flex-col items-center gap-6">
+          {game.itchEmbedID && (
+            <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
+          )}
+          <h2 className="font-jersey10 text-5xl text-primary">ARTWORK</h2>
+
+          <div className="mx-auto mb-6 flex h-auto w-full max-w-4xl flex-col items-center gap-4 px-4 sm:flex-row sm:justify-center sm:gap-6 sm:px-6 md:h-60">
+            {artImages.map((img) => (
+              <div
+                key={img.src}
+                className="h-48 w-full overflow-hidden rounded-lg bg-popover shadow-md sm:h-60 sm:w-1/3"
+              >
+                <Image
+                  key={img.alt}
+                  src={img.src}
+                  alt={img.alt}
+                  width={240}
+                  height={240}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+      {/* <Footer /> */}
+    </div>
+  );
+}