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

Author: SafetyInObscurity

.github/workflows/ci-backend.yml

@@ -58,6 +58,7 @@ jobs:
         env:
           EMAIL_PORT: 1025
           FRONTEND_URL: http://localhost:3000
+          API_ALLOWED_HOSTS: localhost
         run: poetry run python manage.py migrate
 
       - name: Run tests 🧪
@@ -66,6 +67,7 @@ jobs:
           JWT_SIGNING_KEY: NjMgNmYgNmQgNmQgNzUgNmUgNjkgNzQgNzkgNzMgNzAgNjkgNzIgNjkgNzQgNjYgNmYgNzUgNmUgNjQgNjEgNzQgNjkgNmYgNmU=
           EMAIL_PORT: 1025
           FRONTEND_URL: http://localhost:3000
+          API_ALLOWED_HOSTS: localhost
         run: |
           poetry run python3 -m pip install coverage
           poetry run coverage run manage.py test

client/documentation/admin-dashboard/committee.md

@@ -0,0 +1,13 @@
+## Committee Members
+
+Profiles of the Committee Members of the club that are displayed on the about page.
+
+## Fields
+
+**Id:** Required and unique field for the club member that is on the committee. It is an integer field that corresponds to the raw integer id of a row in the Member table, as a Foreign Key if you know databases.
+
+**Role:** Required and unique field for the specific role in the committee that this member has. It is something known as an Enum (Enumeration), which has a discrete number of custom choices. You can choose from 'President', 'Vice President', 'Secretary', 'Treasurer', 'Marketing', 'Events OCM', 'Projects OCM', and 'Fresher Rep'. Since they must be unique, you can only have 8 objects in the Committee table at a time for now. This can definitely be changed in the future when the committee grows.
+
+## Other Notes
+
+Before making a Committee object in the Committee table, you must make a Member object for the person that's on the committee and then link it through the id (just to clarify)

client/documentation/admin-dashboard/games.md

@@ -0,0 +1,31 @@
+## Games
+
+Pages for games can be added and edited at the row 'Game' of the GAME_DEV section on the main admin page.
+
+### Fields
+
+**Name:** Required field for the game's name. A character field (includes letters, numbers and symbols) of maximum length 200 characters.
+
+**Descripiton:** Required field for the game's description. A text field.
+
+**Completion:** Required field for the game's completion. A multichoice option field with four options including:
+ - "Work in progress (Unplayable)"
+ - "Playable - In Development"
+ - "Beta - Stable but not Final"
+ - "Completed" 
+
+**Active:** Required field for if the game is continued to be being worked on. A boolean field.
+
+**Host URL:** Optional field for the game's host URL. A URL field with a maximum length 2083 characters
+
+**Itch Embed ID:** Optional field for game's embed. If the field is empty the game will display a custom embed ID at the bottom of the page. This value can be gotten from the itch.io page of the game, at the bottom of the page there is an embed button, clicking this will bring up a full embed, the only part needed is the 7 digit number after "https://itch.io/embed/".
+
+**Thumbnail:** Required field for the game's thumbnail. This image is displayed on the game page in place of a game embed or displayed within the game embed before the play button is pressed. Must be an image file.
+
+**Event:** Optional field for the event at which the game was created. Links the game to an event. Foreign key field for an event.
+
+**Itch Game Playable ID:** Optional field for the game's game embed. This ID allows the web version of a game to be played inside the site. This value can be acquired in two ways, either by the developer or through looking in the page source. A developer can get the value by going to the distribution tab of their game and going to the embed game section this will bring up a full embed for the game and the only part needed is the 8 digit number after "https://html-classic.itch.zone/html/". By looking through the page source that link can also be found either in a div or an iframe on the page depending on if the game has been played. **This value is not attainable if there is no web version of the game. hosted on itch.**
+
+**Itch Game Width:** This field is required if the playable field ID is non null. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "width=" and in the page source is found after "data-width=".
+
+**Itch Game Height:** This field is required if the playable field ID is non null. This value is gotten in a similar way to the Itch Game Embed, however for the developer it's the number after "height=" and in the page source is found after "data-height=".

client/documentation/pages/about-committee.md

@@ -0,0 +1,11 @@
+## About/Committee Page
+
+Has a description of the club, it's aim's etc, along with a big feature photo, intended to be a group photo of the committee or a big event? Then below is a display of all the current committee members of the club, showing name, role and pronouns.
+
+## Hardcoded content to be modified by committee members
+
+The club description and feature photo are the only things hardcoded into the website's front-end. Starting from the root directory of this website's source, this code to modify can be found in /client/src/pages/about.tsx
+
+## Other Notes
+
+The Committee Members are always displayed in the same order on the about page, which is the order mentioned in admin-dashboard/committee.md. If a certain Committee object can't be retreived, a placeholder Committee Member portrait will be displayed to maintain the same order.

client/package-lock.json

@@ -2,17 +2,12 @@
 import { motion } from "framer-motion";
 import {
   Calendar,
-  Clock,
   Gamepad2,
-  Handshake,
   Heart,
   Home,
-  Link as LucideLink,
   Map,
   Palette,
-  Pencil,
   Sparkles,
-  Upload,
   Users,
 } from "lucide-react";
 import Image from "next/image";
@@ -23,15 +18,19 @@ import { useRef } from "react";
 import LinksList from "@/components/ui/LinksList";
 import NetworkCanvas from "@/components/ui/NetworkCanvas";
 import SocialIconButton from "@/components/ui/SocialIconButton";
-import { social_media } from "@/gamedev-metadata.json";
 
 export interface ListLink {
   label: string;
   href: string;
   icon: ReactNode;
 }
 
-const quickLinks: ListLink[] = [
+type socialMedia = {
+  url: string;
+  alt_text: string;
+};
+
+/*const quickLinks: ListLink[] = [
   {
     label: "Join the Club",
     href: "#",
@@ -44,7 +43,7 @@ const quickLinks: ListLink[] = [
   },
   { label: "Upcoming Jams", href: "#", icon: <Clock className="h-4 w-4" /> },
   { label: "Resources", href: "#", icon: <Pencil className="h-4 w-4" /> },
-];
+];*/
 
 // Main navigation links (ideally should be shared with Navbar)
 export const mainLinks: ListLink[] = [
@@ -67,6 +66,25 @@ export const mainLinks: ListLink[] = [
   },
 ];
 
+const socialMedia: socialMedia[] = [
+  {
+    url: "https://www.facebook.com/people/Game-Development-UWA/61576948012356/",
+    alt_text: "Facebook",
+  },
+  {
+    url: "https://discord.com/invite/JvnuVyMUff",
+    alt_text: "Discord",
+  },
+  {
+    url: "https://www.instagram.com/gamedevelopmentuwa",
+    alt_text: "Instagram",
+  },
+  {
+    url: "https://game-development-uwa.itch.io/",
+    alt_text: "Itch.io",
+  },
+];
+
 export default function Footer() {
   const footerRef = useRef<HTMLElement | null>(null);
   return (
@@ -77,7 +95,7 @@ export default function Footer() {
       >
         <div className="relative z-10 border-t border-purple-500/20">
           <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
-            <div className="mb-12 grid grid-cols-1 gap-8 lg:grid-cols-3">
+            <div className="mb-12 grid grid-cols-1 gap-8 lg:grid-cols-2">
               <div className="space-y-4 lg:col-span-1">
                 <div className="group flex items-center gap-4">
                   <motion.div
@@ -110,42 +128,33 @@ export default function Footer() {
                       Game Development
                     </h3>
                     <p className="font-jersey10 text-lg text-gray-400">
-                      Create • Play • Inspire
+                      Design • Create • Play
                     </p>
                   </div>
                 </div>
-                <a
-                  href="mailto:UWAgamedev@gmail.com"
-                  className="block font-jersey10 text-xl text-gray-300 transition-colors hover:text-purple-400"
-                >
-                  UWAgamedev@gmail.com
+                <a className="block font-jersey10 text-xl text-gray-300 transition-colors hover:text-purple-400">
+                  Email coming soon!
                 </a>
                 <p className="font-jersey10 text-xl leading-relaxed text-gray-300/80">
-                  Building the next generation of game developers at UWA game
-                  development club
+                  Building the next generation of game developers!
                 </p>
                 <div className="flex gap-3 pt-2">
-                  {Object.entries(social_media).map(
-                    ([platform, data], index) => (
-                      <SocialIconButton
-                        key={index}
-                        url={data.url}
-                        socialMediaName={platform}
-                      />
-                    ),
-                  )}
+                  {socialMedia.map((data) => (
+                    <SocialIconButton
+                      key={data.alt_text}
+                      url={data.url}
+                      altText={data.alt_text}
+                    />
+                  ))}
                 </div>
               </div>
-              <LinksList
-                title="Quick Links"
-                titleIcon={<LucideLink className="h-4 w-4 text-accent" />}
-                links={quickLinks}
-              />
-              <LinksList
-                title="Explore"
-                titleIcon={<Map className="h-4 w-4 text-purple-400" />}
-                links={mainLinks}
-              />
+              <div className="justify-center lg:flex">
+                <LinksList
+                  title="Explore"
+                  titleIcon={<Map className="h-4 w-4 text-purple-400" />}
+                  links={mainLinks}
+                />
+              </div>
             </div>
             <div className="relative my-8">
               <div className="absolute inset-0 flex items-center">
@@ -158,30 +167,36 @@ export default function Footer() {
               </div>
             </div>
             <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
-              <div className="flex items-center gap-2 font-jersey10 text-xl text-gray-400">
-                <span>© {new Date().getFullYear()} CFC Game Dev</span>
-                <span className="text-purple-500">•</span>
-                <span>All rights reserved</span>
+              <div className="flex items-center gap-2 font-jersey10 text-xl text-gray-400 sm:w-48 lg:w-80">
+                <div>
+                  © {new Date().getFullYear()} CFC ~ GDUWA
+                  <span className="mx-2 text-purple-500">•</span>
+                  All rights reserved
+                </div>
               </div>
-              <Link
-                href=""
-                className="group flex -translate-x-[52px] items-center gap-2.5 rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-pink-500/10 px-4 py-2 transition-all duration-300 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/20"
-                onClick={() => window.open("/Constitution-V1.pdf")}
-              >
-                <span className="font-jersey10 text-xl text-gray-300 transition-colors group-hover:text-white">
-                  Constitution
-                </span>
-              </Link>
-              <div className="flex items-center gap-2 font-jersey10 text-xl text-gray-400">
-                Made with
-                <motion.div
-                  animate={{ scale: [1, 1.2, 1] }}
-                  transition={{ duration: 1.5, repeat: Infinity }}
+              <div className="flex justify-center sm:w-48 lg:w-80">
+                <Link
+                  href=""
+                  className="group flex w-fit items-center gap-2.5 rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-500/10 to-pink-500/10 px-4 py-2 transition-all duration-300 hover:border-purple-500/40 hover:shadow-lg hover:shadow-purple-500/20"
+                  onClick={() => window.open("/Constitution-V1.pdf")}
                 >
-                  <Heart className="h-4 w-4 fill-current text-red-500" />
-                </motion.div>
-                in Perth, UWA
+                  <div className="font-jersey10 text-xl text-gray-300 transition-colors group-hover:text-white">
+                    Constitution
+                  </div>
+                </Link>
               </div>
+              <span className="flex items-center justify-end gap-2 font-jersey10 text-xl text-gray-400 sm:w-48 lg:w-80">
+                <pre className="gap-2 font-jersey10 text-xl">
+                  Made with
+                  <motion.span
+                    animate={{ scale: [1, 1.2, 1] }}
+                    transition={{ duration: 1.5, repeat: Infinity }}
+                  >
+                    <Heart className="mx-2 inline h-4 w-4 fill-current text-red-500" />
+                  </motion.span>
+                  in UWA, Perth
+                </pre>
+              </span>
             </div>
           </div>
         </div>