merge main into issue-69 to prepare for sparkle PR

Author: phillipnguyenn

client/documentation/admin-dashboard/members.md

@@ -0,0 +1,17 @@
+## Member Profiles
+
+Profiles of club members can be added and edited at the row 'Member' of the GAME_DEV section on the main admin page.
+
+### Fields
+
+**Name:** Required field for the member's name. A character field (includes letters, numbers and symbols) of maximum length 200 characters.
+
+**Active:** Checkbox to represent whether a member is an active participant in the club. If the checkbox is not ticked then the member's profile will not be displayed on the website.
+
+**Profile Picture:** Optional field to upload a profile picture. Must be an image file, and will display best if the image is at least 128 by 128 px in size. If no profile picture is provided then the member's initials will be displayed instead.
+
+**About:** Optional field for a bio. A character field of maximum length 256 characters.
+
+**Pronouns:** Optional field for the member's pronouns. A character field of maximum length 20 characters.
+
+**Social media links:** Optional section to display links to the member's social media profiles. Requires a link to the profile (character field of maximum length 2083) and, optionally, the profile username (character field of maximum length 200). If a username is not supplied then only a social media icon will be displayed with the link attached, otherwise the username will be placed next to the relevant icon. The type of icon to be displayed (e.g. instagram, linkedin, generic link) is inferred from the social media link provided.

client/package-lock.json

@@ -22,13 +22,13 @@
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-query-devtools": "^5.80.7",
     "autoprefixer": "^10.4.21",
-    "axios": "^1.12.0",
+    "axios": "^1.13.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^12.23.24",
     "is-inside-container": "^1.0.0",
     "lucide-react": "^0.516.0",
-    "next": "15.4.11",
+    "next": "15.5.10",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-social-icons": "^6.25.0",

client/package.json

@@ -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 = {
@@ -54,19 +60,49 @@ export function MemberProfile({ member }: MemberProfileProps) {
               )}
             </div>
             <Image
-              src="/frame.svg"
+              src="/pixel-art-frame.svg"
               alt="golden pixel art frame around profile picture"
-              width={176}
-              height={192}
-              className="z-0 h-48 w-44"
+              width={200}
+              height={200}
+              className="z-10"
             />
           </div>
           <div className="flex w-4/5 flex-col gap-2 rounded-md p-2.5 font-firaCode">
             <div className="flex">
               <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/public/frame.svg

@@ -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>
+  );
+}