Merge branch 'main' of https://github.com/codersforcauses/game-dev into issue-47-Add_explosions_to_committee_page

Author: Oliverr48

client/src/components/main/MemberProfile.tsx

@@ -20,6 +20,7 @@ export type MemberProfileData = {
     link: string;
     socialMediaUserName: string;
   }[];
+  pk: number;
 };
 
 type MemberProfileProps = {

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

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

client/src/hooks/useMember.ts

@@ -11,6 +11,7 @@ type ApiMember = {
     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";
 import { ExplosionProvider } from "@/contexts/ExplosionContext";
 
@@ -35,9 +34,7 @@ export default function App({ Component, pageProps }: AppProps) {
       <ReactQueryDevtools initialIsOpen={false} />
       <ExplosionProvider>
         <main
-          className={
-            `font-sans ` + fonts.map((font) => font.variable).join(" ")
-          }
+          className={`font-sans ` + fonts.map((font) => font.variable).join(" ")}
         >
           <Navbar />
           <Component {...pageProps} />

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="relative 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>

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 { GameEmbed } from "@/components/ui/GameEmbed";
 import { ItchEmbed } from "@/components/ui/ItchEmbed";
 import { useGame } from "@/hooks/useGames";
 
@@ -51,6 +52,9 @@ export default function IndividualGamePage() {
   const gameTitle = game.name;
   const gameCover = game.gameCover;
   const gameDescription = game.description.split("\n");
+  const gameEmbedID = game.itchGameEmbedID;
+  const gameWidth = game.itchGameWidth;
+  const gameHeight = game.itchGameHeight;
 
   const completionLabels: Record<number, string> = {
     1: "WIP",
@@ -83,16 +87,27 @@ export default function IndividualGamePage() {
   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
-            />
+        <section className="w-full items-center justify-center bg-popover">
+          <div className="mx-auto flex max-w-7xl justify-center p-0 sm:p-8">
+            {gameEmbedID != "0" ? (
+              <div className="m-auto flex overflow-auto">
+                <GameEmbed
+                  embedID={gameEmbedID}
+                  gameWidth={gameWidth}
+                  gameHeight={gameHeight}
+                  gameImage={gameCover}
+                />
+              </div>
+            ) : (
+              <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>
 
@@ -171,9 +186,8 @@ export default function IndividualGamePage() {
         </section>
 
         <section className="mt-8 flex w-full flex-col items-center gap-6">
-          {game.itchEmbedID && (
-            <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
-          )}
+          <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">

client/src/pages/index.tsx

@@ -130,7 +130,7 @@ export default function Landing() {
               width={600}
               height={430}
               alt="placeholder"
-              className="min-w-80 border-[26px] border-accent [clip-path:polygon(20px_20px,calc(100%-20px)_20px,100%_32px,100%_30%,calc(100%-20px)_45%,calc(100%-20px)_calc(100%-8px),80%_calc(100%-8px),75%_calc(100%-20px),20px_calc(100%-20px),0%_60%,0%_30%,20px_25%)]"
+              className="retroBorder min-w-80"
             />
             <Image
               src="/bomb.png"