Merge branch 'main' into issue-94-members_documentation

Author: belledw

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,11 @@ export type MemberProfileData = {
   about: string;
   pronouns?: string;
   profile_picture?: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
+  pk: number;
 };
 
 type MemberProfileProps = {
@@ -66,7 +72,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/GameEmbed.tsx

@@ -0,0 +1,61 @@
+// notes:
+//  - width and height don't match itch.io, making games look smaller
+//  - you can just embed from itch.io, but only the developer can get the embed link as far as i can tell
+//  - would need to save embed link, width and height to db
+//  - this method is reliant on itch.io staying up and not changing anything
+//  - would want a play button so it doesn't autoload (especially for bigger more intense games)
+import Image from "next/image";
+import React, { useState } from "react";
+
+import { Button } from "./button";
+
+type GameEmbedProps = {
+  embedID: string;
+  gameWidth: number;
+  gameHeight: number;
+  gameImage: string;
+};
+
+export function GameEmbed({
+  embedID,
+  gameWidth,
+  gameHeight,
+  gameImage,
+}: GameEmbedProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  return (
+    <div
+      className={`retroBorder flex items-center justify-center bg-background`}
+      style={{ width: gameWidth + 26 * 2, height: gameHeight + 26 * 2 }}
+    >
+      {!isPlaying ? (
+        <div>
+          <Image
+            src={gameImage}
+            alt="Game Cover"
+            width={gameWidth}
+            height={gameHeight}
+            className="absolute translate-x-[-50%] translate-y-[calc(-50%)] blur-sm"
+            style={{ width: "auto", height: gameHeight - 52 }}
+          />
+          <Button
+            onClick={() => setIsPlaying(!isPlaying)}
+            size={"lg"}
+            className="absolute translate-x-[-50%] translate-y-[calc(-50%)] text-3xl"
+          >
+            Play
+          </Button>
+        </div>
+      ) : (
+        <div>
+          <iframe
+            src={`https://itch.io/embed-upload/${embedID}?color=110e1a`}
+            width={gameWidth}
+            height={gameHeight}
+          ></iframe>
+        </div>
+      )}
+    </div>
+  );
+}

client/src/hooks/useCommittee.ts

@@ -8,6 +8,11 @@ export type ApiMember = {
   profile_picture: string;
   pronouns: string;
   about: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
+  pk: number;
 };
 
 export function useCommittee() {

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 = {
@@ -19,6 +24,9 @@ type ApiGame = {
   itchEmbedID: string;
   thumbnail: string | null;
   event: number | null;
+  itchGameEmbedID: string;
+  itchGameWidth: number;
+  itchGameHeight: number;
   contributors: Contributor[];
 };
 

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,11 @@ type ApiMember = {
   about: string;
   pronouns?: string;
   profile_picture?: string;
+  social_media?: {
+    link: string;
+    socialMediaUserName: string;
+  }[];
+  pk: number;
 };
 
 // return api member, import id number from router, is not enabled if not a number type

client/src/pages/_app.tsx

@@ -5,7 +5,6 @@ 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 Footer from "@/components/main/Footer";
 import Navbar from "@/components/main/Navbar";
 
 const fontSans = FontSans({
@@ -37,7 +36,6 @@ export default function App({ Component, pageProps }: AppProps) {
       >
         <Navbar />
         <Component {...pageProps} />
-        <Footer />
       </main>
     </QueryClientProvider>
   );

client/src/pages/about.tsx

@@ -1,13 +1,13 @@
 import Image from "next/image";
+import Link from "next/link";
 
 import { ApiMember, useCommittee } from "@/hooks/useCommittee";
 
 export default function AboutPage() {
   const { data: committee, isPending, error, isError } = useCommittee();
 
-  const topRow: ApiMember[] = [];
-  const bottomRow: ApiMember[] = [];
-  //lists that will be populated with member objects in the committee
+  const committeeList: ApiMember[] = [];
+  //List that will be populated with member objects in the committee
   const roleOrder = [
     "President",
     "Vice President",
@@ -44,9 +44,7 @@ export default function AboutPage() {
               <Image
                 src="/landing_placeholder.png"
                 alt="/landing_placeholder.png"
-                width={128}
-                height={128}
-                className="h-[90%] w-[90%]"
+                fill={true}
               />
             </div>
           </div>
@@ -61,23 +59,63 @@ export default function AboutPage() {
     </>
   );
 
+  function committeeImage(profilePic: string) {
+    return (
+      <div className="relative h-[8.75rem] w-[8.25rem] overflow-hidden">
+        <Image
+          src={profilePic === null ? "/landing_placeholder.png" : profilePic}
+          alt="/landing_placeholder.png"
+          fill
+          className="object-cover object-center"
+        />
+      </div>
+    );
+  }
+
+  function committeePortrait(committeeMember: ApiMember, id: number) {
+    return (
+      <>
+        <div className="relative flex h-56 w-56 items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
+          {committeeMember.pk === 0 ? (
+            committeeImage(committeeMember.profile_picture)
+          ) : (
+            <Link href={`/members/${committeeMember.pk}`}>
+              {committeeImage(committeeMember.profile_picture)}
+            </Link>
+          )}
+        </div>
+        <div className="text-md max-w-56 pl-3 text-left font-firaCode leading-tight">
+          <p className="inline-block text-white">
+            <text className="inline-block bg-card px-2 py-1">
+              {committeeMember.pk === 0 ? (
+                <>{committeeMember.name}</>
+              ) : (
+                <Link href={`/members/${committeeMember.pk}`}>
+                  {committeeMember.name}
+                </Link>
+              )}
+            </text>
+            <text className="inline-block bg-card px-2 py-1 empty:hidden">
+              {committeeMember.pronouns}
+            </text>
+          </p>
+          <p className="inline-block bg-card px-2 py-1 text-primary">
+            {roleOrder[id]}
+          </p>
+        </div>
+      </>
+    );
+  }
+
   if (isPending) {
     for (let i = 0; i < 8; i++) {
-      if (i < 4) {
-        topRow.push({
-          name: "Loading...",
-          pronouns: "",
-          profile_picture: "/landing_placeholder.png",
-          about: "",
-        });
-      } else {
-        bottomRow.push({
-          name: "Loading...",
-          pronouns: "",
-          profile_picture: "/landing_placeholder.png",
-          about: "",
-        });
-      }
+      committeeList.push({
+        name: "Loading...",
+        pronouns: "",
+        profile_picture: "/landing_placeholder.png",
+        about: "",
+        pk: 0,
+      });
     }
   } else if (isError) {
     const errorMessage =
@@ -97,80 +135,23 @@ export default function AboutPage() {
     );
   } else {
     for (let i = 0; i < 8; i++) {
-      if (i < 4) {
-        topRow.push(committee[i]);
-      } else {
-        bottomRow.push(committee[i]);
-      }
+      committeeList.push(committee[i]);
     }
   }
 
   return (
     <main className="min-h-screen bg-background">
       {about}
       {/* Portraits Section - DARK - Full Width */}
-      <section className="w-full bg-background px-6 py-10 pt-16 md:px-10">
+      <section className="w-full bg-background px-6 py-10 pb-20 pt-16 md:px-10">
         <div className="mx-auto max-w-6xl">
-          {/* Top row - 4 Presidents */}
           <div className="flex flex-wrap justify-center gap-6 md:gap-10">
-            {topRow.map((member, idx) => (
+            {committeeList.map((member, idx) => (
               <div
                 key={`top-${idx}`}
                 className="flex flex-col items-start gap-0"
               >
-                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
-                  <Image
-                    src={
-                      member.profile_picture === null
-                        ? "/landing_placeholder.png"
-                        : member.profile_picture
-                    }
-                    alt="/landing_placeholder.png"
-                    width={108}
-                    height={108}
-                    className="h-[7.25rem] w-[6.75rem]"
-                  />
-                </div>
-                <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
-                  <p className="inline-block bg-card px-2 py-1 text-white">
-                    {member.name} {member.pronouns}
-                  </p>
-                  <p className="inline-block bg-card px-2 py-1 text-primary">
-                    {roleOrder[idx]}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Bottom row - 4 other roles */}
-          <div className="mt-10 flex flex-wrap justify-center gap-6 md:gap-10">
-            {bottomRow.map((member, idx) => (
-              <div
-                key={`bottom-${idx}`}
-                className="flex flex-col items-start gap-0"
-              >
-                <div className="relative flex h-[11.25rem] w-[11.25rem] items-center justify-center bg-[url('/pixel-art-frame.svg')] bg-contain bg-center bg-no-repeat">
-                  <Image
-                    src={
-                      member.profile_picture === null
-                        ? "/landing_placeholder.png"
-                        : member.profile_picture
-                    }
-                    alt="/landing_placeholder.png"
-                    width={108}
-                    height={108}
-                    className="h-[7.25rem] w-[6.75rem]"
-                  />
-                </div>
-                <div className="w-[11.25rem] pl-3 text-left font-firaCode text-[0.5rem] leading-tight">
-                  <p className="inline-block bg-card px-2 py-1 text-white">
-                    {member.name} {member.pronouns}
-                  </p>
-                  <p className="inline-block bg-card px-2 py-1 text-primary">
-                    {roleOrder[4 + idx]}
-                  </p>
-                </div>
+                {committeePortrait(member, idx)}
               </div>
             ))}
           </div>