Issue 80 and 81: Art in Game Showcase and Individual Game Pages

client/src/components/ui/GameArtCarousel.tsx

@@ -0,0 +1,124 @@
+// This carousel is for Artworks to be displayed in the Gameshowcase
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+
+import type { UiArtwork } from "@/hooks/useGames";
+
+// import { UiEvent as EventType } from "@/hooks/useEvents";
+
+type GameArtCarouselProps = {
+  items: UiArtwork[];
+};
+
+const GAP = 20;
+const maxItemsPerPage = 4;
+
+export default function GameArtCarousel({ items }: GameArtCarouselProps) {
+  const firstItemRef = useRef<HTMLDivElement>(null);
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [itemWidth, setItemWidth] = useState(0);
+  const [visibleCount, setVisibleCount] = useState(maxItemsPerPage);
+
+  const maxIndex = Math.max(items.length - visibleCount, 0);
+
+  const slideLeft = () => {
+    setCurrentIndex((prev) => Math.max(prev - 1, 0));
+  };
+
+  const slideRight = () => {
+    setCurrentIndex((prev) => Math.min(prev + 1, maxIndex));
+  };
+
+  const translateX = -(currentIndex * (itemWidth + GAP));
+
+  useEffect(() => {
+    if (!firstItemRef.current) return;
+
+    const observer = new ResizeObserver(() => {
+      const width = firstItemRef.current?.clientWidth ?? 0;
+      setItemWidth(width);
+    });
+
+    observer.observe(firstItemRef.current);
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const updateVisibleCount = () => {
+      if (window.innerWidth < 768) {
+        setVisibleCount(1);
+      } else {
+        setVisibleCount(maxItemsPerPage);
+      }
+    };
+
+    updateVisibleCount();
+    window.addEventListener("resize", updateVisibleCount);
+
+    return () => window.removeEventListener("resize", updateVisibleCount);
+  }, []);
+
+  return (
+    <div className="container mx-auto py-10">
+      <div className="relative">
+        {/* LEFT ARROW */}
+        <button
+          onClick={slideLeft}
+          disabled={currentIndex === 0}
+          className="absolute left-[-50px] top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-dark_3 text-white shadow-md hover:bg-accent disabled:opacity-30"
+        >
+          <ChevronLeft size={30} />
+        </button>
+
+        {/* VIEWPORT */}
+        <div className="overflow-hidden">
+          <div
+            className="flex transition-transform duration-300 ease-out"
+            style={{
+              gap: GAP,
+              transform: `translateX(${translateX}px)`,
+            }}
+          >
+            {items.map((art, index) => (
+              <div
+                key={art.id}
+                ref={index === 0 ? firstItemRef : undefined}
+                className="flex-shrink-0"
+                style={{
+                  width: `calc((100% - ${(visibleCount - 1) * GAP}px) / ${visibleCount})`,
+                }}
+              >
+                <Link href={`/artwork/${art.id}`}>
+                  <div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg">
+                    <Image
+                      src={art.image}
+                      alt={art.name}
+                      fill
+                      className="object-cover"
+                    />
+                  </div>
+                </Link>
+
+                <h3 className="mt-4 text-lg text-white">{art.name}</h3>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* RIGHT ARROW */}
+        <button
+          onClick={slideRight}
+          disabled={currentIndex === maxIndex}
+          className="absolute right-[-50px] top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-dark_3 text-white shadow-md hover:bg-accent disabled:opacity-30"
+        >
+          <ChevronRight size={30} />
+        </button>
+      </div>
+    </div>
+  );
+}

client/src/hooks/useGames.ts

@@ -14,6 +14,21 @@ type Contributor = {
   }>;
 };
 
+export type UiArtwork = {
+  id: number;
+  name: string;
+  image: string;
+  sourceGameId: number;
+};
+
+export type ApiArtworks = {
+  art_id: number;
+  name: string;
+  media: string;
+  active: boolean;
+  source_game_id: number;
+};
+
 type ApiGame = {
   name: string;
   description: string;
@@ -28,10 +43,12 @@ type ApiGame = {
   itchGameWidth: number;
   itchGameHeight: number;
   contributors: Contributor[];
+  artworks: ApiArtworks[];
 };
 
-type UiGame = Omit<ApiGame, "thumbnail"> & {
+type UiGame = Omit<ApiGame, "thumbnail" | "artworks"> & {
   gameCover: string;
+  artworks: UiArtwork[];
 };
 
 /**
@@ -49,6 +66,12 @@ function transformApiGameToUiGame(data: ApiGame): UiGame {
   return {
     ...data,
     gameCover: data.thumbnail ?? "/game_dev_club_logo.svg",
+    artworks: data.artworks.map((a) => ({
+      id: a.art_id,
+      name: a.name,
+      image: a.media,
+      sourceGameId: a.source_game_id,
+    })),
   };
 }
 

client/src/hooks/useGameshowcase.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 
+import type { ApiArtworks, UiArtwork } from "@/hooks/useGames";
 import api from "@/lib/api";
 
 type Contributor = {
@@ -20,15 +21,18 @@ type ApiShowcaseGame = {
   game_description: string;
   contributors: Contributor[];
   game_cover_thumbnail?: string | null;
+  artworks: ApiArtworks[];
 };
 
-type UiShowcaseGame = Omit<ApiShowcaseGame, "game_cover_thumbnail"> & {
+type UiShowcaseGame = Omit<
+  ApiShowcaseGame,
+  "game_cover_thumbnail" | "artworks"
+> & {
   gameCover: string;
+  artworks: UiArtwork[];
 };
 
-function getGameCoverUrl(
-  game_cover_thumbnail: string | null | undefined,
-): string {
+function getMediaUrl(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
@@ -40,7 +44,13 @@ function getGameCoverUrl(
 function transformApiShowcaseGameToUi(data: ApiShowcaseGame): UiShowcaseGame {
   return {
     ...data,
-    gameCover: getGameCoverUrl(data.game_cover_thumbnail),
+    gameCover: getMediaUrl(data.game_cover_thumbnail),
+    artworks: data.artworks.map((a) => ({
+      id: a.art_id,
+      name: a.name,
+      image: getMediaUrl(a.media),
+      sourceGameId: a.source_game_id,
+    })),
   };
 }
 

client/src/pages/_app.tsx

@@ -5,8 +5,8 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { AppProps } from "next/app";
 import { Fira_Code, Inter as FontSans, Jersey_10 } from "next/font/google";
 
-import Navbar from "@/components/main/Navbar";
 import Footer from "@/components/main/Footer";
+import Navbar from "@/components/main/Navbar";
 import { ExplosionProvider } from "@/contexts/ExplosionContext";
 
 const fontSans = FontSans({

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

@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import React from "react";
 import { SocialIcon } from "react-social-icons";
 
+import GameArtCarousel from "@/components/ui/GameArtCarousel";
 import { GameEmbed } from "@/components/ui/GameEmbed";
 import { ItchEmbed } from "@/components/ui/ItchEmbed";
 import { useGame } from "@/hooks/useGames";
@@ -67,22 +68,6 @@ export default function IndividualGamePage() {
 
   // 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">
@@ -191,21 +176,7 @@ export default function IndividualGamePage() {
           <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>
-            ))}
+            <GameArtCarousel items={game.artworks || []} />
           </div>
         </section>
       </main>