Unifying art branches

client/documentation/admin-dashboard/committee.md

@@ -1,6 +1,6 @@
 ## Committee Members
 
-URL: `/admin/game_dev/committee/add/`
+URL: `/admin/game_dev/committee/`
 
 Profiles of the Committee Members of the club that are displayed on the about page `/about`.
 

client/documentation/admin-dashboard/contributors.md

@@ -0,0 +1,30 @@
+## Contributors
+
+Models that associate a member object with another certain object as a contributor to it. There are two types:
+
+## Game Contributor
+URL: `/admin/game_dev/gamecontributor/`
+A model that will associate a certain member with having contributed to a certain game. A Game Contributor object will be represented under the 'Contributors' section of a game's page as the name of the member who contributed.
+
+## Fields
+
+**Game:** Required field for the game that the contributor is for. It is an integer field that corresponds to the raw integer id of a Game object in the Game table, known as a Foreign Key.
+
+**Member:** Required field for the member that is the contributor to the specified game. It is an integer field that corresponds to the raw integer id of a Member object in the Member table, known as a Foreign Key.
+
+**Role:** Required character field for the description of the role that the person played in contributing to the game. Maximum length of 100 characters
+
+## Other Notes
+
+You will see a little magnifying glass when selecting a Game and Member, click on it to see their respective table and be able choose the integer id's using the desired details. Though none of the individual fields are a primary key, the actual primary key is the unique (Game, Member) pair that each object forms.
+
+
+## Art Contributor
+* This can be found inline inside of an art entry, e.g. `/admin/game_dev/art/1/change/`.
+A model that will associate a certain member with having contributed to a certain artwork.
+
+## Fields
+
+**Member:** Required field for the member that is the contributor to the specified artwork. It is an integer field that corresponds to the raw integer id of a Member object in the Member table, known as a Foreign Key.
+
+**Role:** Required character field for the description of the role that the person played in contributing to the artwork. Maximum length of 100 characters

client/documentation/admin-dashboard/events.md

@@ -0,0 +1,23 @@
+## Events
+
+URL: `/admin/game_dev/event/add`
+
+Event instances that are displayed on the landing and events pages
+
+## Fields
+
+**Name:** Required character field for the event's name.
+
+**Date:** Required field for the event date and time. Must be a valid date and time. Uses either ISO 8601 format (YYYY-MM-DDTHH:MM:SSZ) or American format (MM-DD-YYYY HH:MM) for date and time representation.
+
+**Description:** Optional character field for a description of the event.
+
+**Publication Date:** Required field for the date the event is published. Uses either ISO 8601 format (YYYY-MM-DDTHH:MM:SSZ) or American format (MM-DD-YYYY HH:MM) for date and time representation.
+
+**Cover Image:** Optional field to upload a cover image for the event, which will otherwise display the event's name.
+
+**Location:** Required field for the event location.
+
+## Other Notes
+
+An Event object can referenced in a Game object's 'Event' field, which is also a foreign key. On the events page, events will either show up under past or upcoming depending on their date, and each Event object can be directly routed to at /events/{id} (integer uid).

client/next.config.mjs

@@ -1,12 +1,6 @@
-// import os from "node:os";
-// import isInsideContainer from "is-inside-container";
-
-// const isWindowsDevContainer = () =>
-//   os.release().toLowerCase().includes("microsoft") && isInsideContainer();
-
 /** @type {import('next').NextConfig} */
 
-const config = {
+const nextConfig = {
   reactStrictMode: true,
   turbopack: {
     root: import.meta.dirname,
@@ -27,4 +21,4 @@ const config = {
   // : undefined,
 };
 
-export default config;
+export default nextConfig;

client/src/components/ui/ContributorsList.tsx

@@ -0,0 +1,36 @@
+import Link from "next/link";
+
+import { ArtContributor } from "@/types/art-contributor";
+
+interface ContributorsListProps {
+  contributors: ArtContributor[];
+}
+
+export default function ContributorsList({
+  contributors,
+}: ContributorsListProps) {
+  if (contributors.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="font-jersey10 text-2xl text-accent">Contributors</div>
+      <div className="relative flex flex-col gap-1">
+        {contributors.map((contributor) => (
+          <div key={contributor.id}>
+            <Link
+              href={`/members/${contributor.member_id}`}
+              className="text-accent hover:underline"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {contributor.member_name}
+            </Link>
+            {" - "}
+            <span>{contributor.role}</span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

client/src/components/ui/GameArtCarousel.tsx

@@ -0,0 +1,122 @@
+// 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";
+
+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>
+  );
+}