Merge branch 'main' into issue-77-Incorporate_playable_games_into_individual_game_pages

Author: TobbleCobble

client/src/components/main/MemberProfile.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { SocialIcon } from "react-social-icons";
 
 // unused atm, as the member isnt linked a project on the backend
 /* export type MemberProfileProject = {
@@ -15,6 +16,10 @@ export type MemberProfileData = {
   about: string;
   pronouns?: string;
   profile_picture?: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
 };
 
 type MemberProfileProps = {
@@ -66,7 +71,37 @@ export function MemberProfile({ member }: MemberProfileProps) {
               <p className="min-w-fit font-jersey10 text-4xl">{member.name}</p>
               <hr className="ml-5 hidden w-full self-center border-light_2 lg:flex" />
             </div>
-            <p className="text-lg">{member.pronouns}</p>
+            <div className="flex items-center gap-2">
+              {member.social_media && member.social_media.length > 0 && (
+                <div className="w-full">
+                  <div className="mt-2 flex flex-wrap items-center gap-2">
+                    {member.social_media.map((sm) => (
+                      <span
+                        key={sm.link}
+                        className="ml-2 flex items-center gap-1"
+                      >
+                        <SocialIcon
+                          url={sm.link}
+                          style={{ height: 24, width: 24 }}
+                        />
+                        <a
+                          href={sm.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="font-firaCode text-base underline hover:text-primary"
+                        >
+                          {sm.socialMediaUserName}
+                        </a>
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <p className="text-lg">{member.pronouns}</p>
+            </div>
+
             <p>{member.about}</p>
           </div>
         </div>

client/src/components/ui/eventCarousel.tsx

@@ -5,20 +5,50 @@ import { useEffect, useRef, useState } from "react";
 
 import { UiEvent as EventType } from "@/hooks/useEvents";
 
+import { Button } from "./button";
+
 type EventCarouselProps = {
   items: EventType[];
 };
 
 const GAP = 40;
 
+function formatEventDateDisplay(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    const weekday = new Intl.DateTimeFormat("en-US", {
+      weekday: "long",
+    }).format(date);
+    const day = new Intl.DateTimeFormat("en-US", { day: "numeric" }).format(
+      date,
+    );
+    const month = new Intl.DateTimeFormat("en-US", { month: "short" }).format(
+      date,
+    );
+    const time = new Intl.DateTimeFormat("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: true,
+    })
+      .format(date)
+      .replace("AM", "am")
+      .replace("PM", "pm");
+    return `${weekday} ${day} ${month} ${time}`;
+  } catch {
+    return "";
+  }
+}
+
 export default function EventCarousel({ items }: EventCarouselProps) {
   const viewportRef = useRef<HTMLDivElement>(null);
-  const firstItemRef = useRef<HTMLDivElement>(null);
+  const firstItemRef = useRef<HTMLAnchorElement>(null);
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [visibleCount, setVisibleCount] = useState(3);
   const [itemWidth, setItemWidth] = useState(0);
 
+  const isEmpty = items.length === 0;
+
   const maxIndex = Math.max(items.length - visibleCount, 0);
   const slideLeft = () => {
     setCurrentIndex((prev) => Math.max(prev - 1, 0));
@@ -28,16 +58,21 @@ export default function EventCarousel({ items }: EventCarouselProps) {
   };
   const translateX = -(currentIndex * (itemWidth + GAP));
 
-  /* Observe item width */
+  /* Observe item width – re-run when items change so we measure after first item mounts */
   useEffect(() => {
-    if (!firstItemRef.current) return;
-    const observer = new ResizeObserver(() => {
-      const width = firstItemRef.current?.clientWidth ?? 0;
-      setItemWidth(width);
-    });
-    observer.observe(firstItemRef.current);
+    const el = firstItemRef.current;
+    if (!el || items.length === 0) return;
+    const readWidth = () => {
+      requestAnimationFrame(() => {
+        const w = firstItemRef.current?.clientWidth ?? 0;
+        setItemWidth(w);
+      });
+    };
+    readWidth();
+    const observer = new ResizeObserver(readWidth);
+    observer.observe(el);
     return () => observer.disconnect();
-  }, []);
+  }, [items.length]);
 
   useEffect(() => {
     const updateVisibleCount = () => {
@@ -59,28 +94,35 @@ export default function EventCarousel({ items }: EventCarouselProps) {
           <h2 className="font-jersey10 text-4xl tracking-wide text-white">
             Upcoming Events
           </h2>
-
-          <div className="ml-5 flex gap-3 text-lg text-white/60">
-            <ChevronLeft
-              className={`hover:text-white ${
-                currentIndex === 0 ? "opacity-40" : "cursor-pointer"
-              }`}
-              onClick={slideLeft}
-            />
-            <ChevronRight
-              className={`hover:text-white ${
-                currentIndex === maxIndex ? "opacity-40" : "cursor-pointer"
-              }`}
-              onClick={slideRight}
-            />
-          </div>
+          {!isEmpty && (
+            <div className="ml-5 flex gap-3 text-lg text-white/60">
+              <ChevronLeft
+                className={`hover:text-white ${
+                  currentIndex === 0 ? "opacity-40" : "cursor-pointer"
+                }`}
+                onClick={slideLeft}
+              />
+              <ChevronRight
+                className={`hover:text-white ${
+                  currentIndex === maxIndex ? "opacity-40" : "cursor-pointer"
+                }`}
+                onClick={slideRight}
+              />
+            </div>
+          )}
         </div>
 
-        <Link href="/events" className="font-jersey10">
-          See More
-        </Link>
+        {!isEmpty && (
+          <Link href="/events" className="font-jersey10">
+            <Button>See More</Button>
+          </Link>
+        )}
       </div>
 
+      {isEmpty && (
+        <p className="mt-10 px-10 text-sm text-primary">No events available.</p>
+      )}
+
       <div className="mt-10 px-10">
         <div ref={viewportRef} className="overflow-hidden">
           <div
@@ -91,10 +133,11 @@ export default function EventCarousel({ items }: EventCarouselProps) {
             }}
           >
             {items.map((event, index) => (
-              <div
+              <Link
+                href={`/events/${event.id}`}
                 key={event.id}
                 ref={index === 0 ? firstItemRef : undefined}
-                className="w-full flex-shrink-0 md:w-[calc((100%-80px)/3)]"
+                className={`block w-full flex-shrink-0 rounded-xl transition-transform duration-200 ease-in-out hover:scale-110 md:w-[calc((100%-80px)/3)] ${index === 0 ? "origin-left" : ""}`}
               >
                 <div className="relative aspect-[16/9] w-full overflow-hidden rounded-lg">
                   <Image
@@ -105,17 +148,16 @@ export default function EventCarousel({ items }: EventCarouselProps) {
                   />
                 </div>
 
-                <h3 className="mt-6 font-firaCode text-lg font-semibold tracking-wide text-white">
+                <h3 className="mb-2 mt-4 font-jersey10 text-2xl text-white">
                   {event.name}
                 </h3>
 
-                {/* Needs proper processing and laying out */}
-                <p className="text-sm tracking-wide text-white/70">
-                  {event.startTime}
+                <p className="mb-4 text-sm text-primary">
+                  {formatEventDateDisplay(event.date)}
                 </p>
 
                 <div className="mt-3 w-full border-b border-white/20" />
-              </div>
+              </Link>
             ))}
           </div>
         </div>

client/src/hooks/useGames.ts

@@ -7,6 +7,11 @@ type Contributor = {
   member_id: number;
   name: string;
   role: string;
+  social_media?: Array<{
+    socialMediaName: string;
+    link: string;
+    socialMediaUserName: string;
+  }>;
 };
 
 type ApiGame = {

client/src/hooks/useGameshowcase.ts

@@ -6,6 +6,11 @@ import api from "@/lib/api";
 type Contributor = {
   name: string;
   role: string;
+  social_media?: {
+    socialMediaName: string;
+    link: string;
+    socialMediaUserName: string;
+  }[];
 };
 
 type ApiShowcaseGame = {

client/src/hooks/useMember.ts

@@ -7,6 +7,10 @@ type ApiMember = {
   about: string;
   pronouns?: string;
   profile_picture?: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
 };
 
 // return api member, import id number from router, is not enabled if not a number type

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

@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { useRouter } from "next/router";
 import React from "react";
+import { SocialIcon } from "react-social-icons";
 
 import { GameEmbed } from "@/components/ui/GameEmbed";
 import { ItchEmbed } from "@/components/ui/ItchEmbed";
@@ -122,17 +123,29 @@ export default function IndividualGamePage() {
                     Contributors
                   </td>
                   <td className="py-1 text-right sm:py-2">
-                    <div className="grid grid-cols-[auto_auto] gap-x-1 gap-y-1">
+                    <div className="flex flex-col gap-y-1">
                       {game.contributors.map((c) => (
-                        <React.Fragment key={c.member_id}>
+                        <div
+                          key={c.member_id}
+                          className="flex items-center gap-x-2"
+                        >
                           <a
-                            href={`/member/${c.member_id}`}
+                            href={`/members/${c.member_id}`}
                             className="text-primary hover:underline"
                           >
                             {c.name}
                           </a>
-                          <span>{c.role}</span>
-                        </React.Fragment>
+                          {Array.isArray(c.social_media) &&
+                            c.social_media.map((sm) => (
+                              <SocialIcon
+                                key={sm.link}
+                                url={sm.link}
+                                style={{ height: 24, width: 24 }}
+                                title={sm.socialMediaUserName}
+                              />
+                            ))}
+                          <span className="ml-auto">{c.role}</span>
+                        </div>
                       ))}
                     </div>
                   </td>

client/src/pages/games/index.tsx

@@ -125,28 +125,20 @@ export default function HomePage() {
                             <span className="font-semibold text-foreground">
                               {contributor.name}
                             </span>
-                            <span
-                              className="text-foreground"
-                              style={{ marginLeft: 20 }}
-                            >
-                              - {contributor.role}
-                            </span>
-                            {/* Social icons placeholder */}
-                            {/* TODO: Add actual links */}
+                            {/* Social icons from API */}
                             <span className="flex gap-2 text-primary">
-                              {/* Social icons using react-social-icons */}
-                              <SocialIcon
-                                url="https://facebook.com/"
-                                style={{ height: 24, width: 24 }}
-                              />
-                              <SocialIcon
-                                url="https://instagram.com/"
-                                style={{ height: 24, width: 24 }}
-                              />
-                              <SocialIcon
-                                url="https://github.com/"
-                                style={{ height: 24, width: 24 }}
-                              />
+                              {Array.isArray(contributor.social_media) &&
+                                contributor.social_media.map((sm) => (
+                                  <SocialIcon
+                                    key={sm.link}
+                                    url={sm.link}
+                                    style={{ height: 24, width: 24 }}
+                                    title={sm.socialMediaUserName}
+                                  />
+                                ))}
+                            </span>
+                            <span className="ml-auto text-foreground">
+                              - {contributor.role}
                             </span>
                           </li>
                         ))}

client/src/pages/index.tsx

@@ -7,11 +7,18 @@ import {
   eventHighlightCardType,
 } from "@/components/ui/eventHighlightCard";
 import LandingGames from "@/components/ui/landingGames";
-import { placeholderEvents } from "@/placeholderData";
+import { UiEvent, useEvents } from "@/hooks/useEvents";
 
 import { Button } from "../components/ui/button";
 
 export default function Landing() {
+  const { data, isPending, isError, isFetching } = useEvents({
+    type: "upcoming",
+    pageSize: 100,
+  });
+
+  const events: UiEvent[] | undefined = data?.items;
+
   const gameLogoImages = [
     { url: "/godot.png", alt: "Godot Logo", position: "start" },
     { url: "/unity-logo.png", alt: "Unity Logo", position: "end" },
@@ -138,8 +145,20 @@ export default function Landing() {
       </section>
 
       <section className="bg-background px-10 py-20">
-        <EventCarousel items={placeholderEvents} />
+        {isFetching && !isPending && (
+          <span className="text-sm text-gray-400">Loading...</span>
+        )}
+
+        {isPending && <p>Loading events...</p>}
+
+        {isError && (
+          <p className="text-red-500" role="alert">
+            Failed to load events.
+          </p>
+        )}
+        {!isPending && !isError && <EventCarousel items={events ?? []} />}
       </section>
+
       {/* Leaving commented out until styling/design is confirmed. */}
       {/* <section className="bg-background px-4 py-10 md:px-10">
         <div className="flex w-full px-4">