From bdc5a16edfecb68e2a44225426d0cc8c0c061a3e Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Tue, 27 Jan 2026 03:51:54 +0000
Subject: [PATCH 1/9] basic implementation of embedded game

---
 client/src/components/main/Footer.tsx | 190 --------------------------
 client/src/pages/_app.tsx             |   2 -
 client/src/pages/embedDemo.tsx        |  23 ++++
 3 files changed, 23 insertions(+), 192 deletions(-)
 create mode 100644 client/src/pages/embedDemo.tsx

diff --git a/client/src/components/main/Footer.tsx b/client/src/components/main/Footer.tsx
index 656d39c5..e69de29b 100644
--- a/client/src/components/main/Footer.tsx
+++ b/client/src/components/main/Footer.tsx
@@ -1,190 +0,0 @@
-"use client";
-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";
-import Link from "next/link";
-import type { ReactNode } from "react";
-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[] = [
-  {
-    label: "Join the Club",
-    href: "#",
-    icon: <Handshake className="h-4 w-4" />,
-  },
-  {
-    label: "Submit Your Game",
-    href: "#",
-    icon: <Upload className="h-4 w-4" />,
-  },
-  { 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[] = [
-  { label: "Home", href: "/", icon: <Home className="h-4 w-4" /> },
-  { label: "About Us", href: "/about", icon: <Users className="h-4 w-4" /> },
-  {
-    label: "Events",
-    href: "/events",
-    icon: <Calendar className="h-4 w-4" />,
-  },
-  {
-    label: "Games Showcase",
-    href: "/games",
-    icon: <Gamepad2 className="h-4 w-4" />,
-  },
-  {
-    label: "Artwork",
-    href: "/artwork",
-    icon: <Palette className="h-4 w-4" />,
-  },
-];
-
-export default function Footer() {
-  const footerRef = useRef<HTMLElement | null>(null);
-  return (
-    <footer ref={footerRef}>
-      <NetworkCanvas
-        className="h-full w-full"
-        frameClasses="bg-gradient-to-r from-secondary/25 to-secondary-foreground/25"
-      >
-        <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="space-y-4 lg:col-span-1">
-                <div className="group flex items-center gap-4">
-                  <motion.div
-                    className="relative flex-shrink-0"
-                    whileHover={{ scale: 1.05 }}
-                    transition={{ type: "spring", stiffness: 400, damping: 17 }}
-                  >
-                    <Image
-                      src="/navbar_arr.png"
-                      alt="CFC Game Development Logo"
-                      width={70}
-                      height={94}
-                      className="object-contain"
-                      priority
-                    />
-                    <motion.div
-                      className="absolute -bottom-1 -right-1"
-                      animate={{ scale: [1, 1.2, 1], rotate: [0, 180, 360] }}
-                      transition={{
-                        duration: 3,
-                        repeat: Infinity,
-                        ease: "easeInOut",
-                      }}
-                    >
-                      <Sparkles className="h-4 w-4 text-yellow-400" />
-                    </motion.div>
-                  </motion.div>
-                  <div>
-                    <h3 className="bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text font-jersey10 text-4xl font-bold text-transparent text-white">
-                      Game Development
-                    </h3>
-                    <p className="font-jersey10 text-lg text-gray-400">
-                      Create • Play • Inspire
-                    </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>
-                <p className="font-jersey10 text-xl leading-relaxed text-gray-300/80">
-                  Building the next generation of game developers at UWA game
-                  development club
-                </p>
-                <div className="flex gap-3 pt-2">
-                  {Object.entries(social_media).map(
-                    ([platform, data], index) => (
-                      <SocialIconButton
-                        key={index}
-                        url={data.url}
-                        socialMediaName={platform}
-                      />
-                    ),
-                  )}
-                </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>
-            <div className="relative my-8">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-purple-500/20" />
-              </div>
-              <div className="relative flex justify-center">
-                <span className="bg-slate-950/50 px-4">
-                  <Gamepad2 className="h-5 w-5 text-purple-400" />
-                </span>
-              </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>
-              <Link
-                href="/constitution"
-                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"
-              >
-                <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 }}
-                >
-                  <Heart className="h-4 w-4 fill-current text-red-500" />
-                </motion.div>
-                in Perth, UWA
-              </div>
-            </div>
-          </div>
-        </div>
-      </NetworkCanvas>
-    </footer>
-  );
-}
diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
index ca3770d2..eb476768 100644
--- a/client/src/pages/_app.tsx
+++ b/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>
   );
diff --git a/client/src/pages/embedDemo.tsx b/client/src/pages/embedDemo.tsx
new file mode 100644
index 00000000..1965cdbd
--- /dev/null
+++ b/client/src/pages/embedDemo.tsx
@@ -0,0 +1,23 @@
+// 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)
+
+export default function GamePage() {
+  return (
+    <div>
+      <section className="flex w-full justify-center bg-muted px-12 py-10">
+        <div className="h-[670px] w-[1000px]">
+          <iframe
+            src="https://itch.io/embed-upload/16152845?color=110e1a"
+            width="1000"
+            height="670"
+            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%)]"
+          ></iframe>
+        </div>
+      </section>
+    </div>
+  );
+}

From 4c5183bf21a93ebe2edfd8a529ba778ee8b172da Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Sat, 31 Jan 2026 07:36:58 +0000
Subject: [PATCH 2/9] basic game embed for game pages

---
 client/src/components/ui/GameEmbed.tsx | 48 ++++++++++++++++++++++++++
 client/src/pages/embedDemo.tsx         | 23 ------------
 client/src/pages/games/[id].tsx        | 11 +++++-
 3 files changed, 58 insertions(+), 24 deletions(-)
 create mode 100644 client/src/components/ui/GameEmbed.tsx
 delete mode 100644 client/src/pages/embedDemo.tsx

diff --git a/client/src/components/ui/GameEmbed.tsx b/client/src/components/ui/GameEmbed.tsx
new file mode 100644
index 00000000..37209274
--- /dev/null
+++ b/client/src/components/ui/GameEmbed.tsx
@@ -0,0 +1,48 @@
+// 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 React, { useState } from "react";
+
+type GameEmbedProps = {
+  embedID: string;
+  gameWidth: number;
+  gameHeight: number;
+};
+
+export function GameEmbed({ embedID, gameWidth, gameHeight }: GameEmbedProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  return (
+    <div>
+      <section
+        className={
+          "flex items-center justify-center border-[26px] border-accent p-2 [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%)]"
+        }
+        style={{ width: gameWidth, height: gameHeight }}
+      >
+        {!isPlaying ? (
+          <button
+            onClick={() => setIsPlaying(!isPlaying)}
+            className="rounded-sm bg-accent px-7 py-3"
+            aria-label="Play"
+          >
+            <div>Play</div>
+          </button>
+        ) : (
+          <div>
+            <iframe
+              src={`https://itch.io/embed-upload/${embedID}?color=110e1a`}
+              width={gameWidth}
+              height={gameHeight}
+              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%)]"
+            ></iframe>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
diff --git a/client/src/pages/embedDemo.tsx b/client/src/pages/embedDemo.tsx
deleted file mode 100644
index 1965cdbd..00000000
--- a/client/src/pages/embedDemo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// 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)
-
-export default function GamePage() {
-  return (
-    <div>
-      <section className="flex w-full justify-center bg-muted px-12 py-10">
-        <div className="h-[670px] w-[1000px]">
-          <iframe
-            src="https://itch.io/embed-upload/16152845?color=110e1a"
-            width="1000"
-            height="670"
-            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%)]"
-          ></iframe>
-        </div>
-      </section>
-    </div>
-  );
-}
diff --git a/client/src/pages/games/[id].tsx b/client/src/pages/games/[id].tsx
index a83c5102..070150bb 100644
--- a/client/src/pages/games/[id].tsx
+++ b/client/src/pages/games/[id].tsx
@@ -2,6 +2,7 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import React from "react";
 
+import { GameEmbed } from "@/components/ui/GameEmbed";
 import { ItchEmbed } from "@/components/ui/ItchEmbed";
 import { useGame } from "@/hooks/useGames";
 
@@ -159,8 +160,16 @@ export default function IndividualGamePage() {
 
         <section className="mt-8 flex w-full flex-col items-center gap-6">
           {game.itchEmbedID && (
-            <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
+            <div>
+              <GameEmbed
+                embedID={game.itchEmbedID}
+                gameWidth={960}
+                gameHeight={620}
+              />
+              <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
+            </div>
           )}
+
           <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">

From 87eeae6c1b3610efc1517c4dbd978a3881606320 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Wed, 4 Feb 2026 08:01:00 +0000
Subject: [PATCH 3/9] added gameEmbed data to backend

---
 client/src/hooks/useGames.ts                  |  3 ++
 client/src/pages/games/[id].tsx               | 11 ++++---
 client/src/placeholderData.ts                 |  9 +++++
 server/game_dev/admin.py                      |  3 +-
 ...ameembedid_game_itchgameheight_and_more.py | 33 +++++++++++++++++++
 server/game_dev/models.py                     | 14 ++++++++
 server/game_dev/serializers.py                |  3 +-
 7 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 server/game_dev/migrations/0010_game_itchgameembedid_game_itchgameheight_and_more.py

diff --git a/client/src/hooks/useGames.ts b/client/src/hooks/useGames.ts
index 27f9bc17..9172f6e6 100644
--- a/client/src/hooks/useGames.ts
+++ b/client/src/hooks/useGames.ts
@@ -19,6 +19,9 @@ type ApiGame = {
   itchEmbedID: string;
   thumbnail: string | null;
   event: number | null;
+  itchGameEmbedID: string;
+  itchGameWidth: number;
+  itchGameHeight: number;
   contributors: Contributor[];
 };
 
diff --git a/client/src/pages/games/[id].tsx b/client/src/pages/games/[id].tsx
index 070150bb..9f7dc646 100644
--- a/client/src/pages/games/[id].tsx
+++ b/client/src/pages/games/[id].tsx
@@ -51,6 +51,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",
@@ -159,12 +162,12 @@ export default function IndividualGamePage() {
         </section>
 
         <section className="mt-8 flex w-full flex-col items-center gap-6">
-          {game.itchEmbedID && (
+          {gameEmbedID != "0" && (
             <div>
               <GameEmbed
-                embedID={game.itchEmbedID}
-                gameWidth={960}
-                gameHeight={620}
+                embedID={gameEmbedID}
+                gameWidth={gameWidth}
+                gameHeight={gameHeight}
               />
               <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
             </div>
diff --git a/client/src/placeholderData.ts b/client/src/placeholderData.ts
index 07262246..8a996da7 100644
--- a/client/src/placeholderData.ts
+++ b/client/src/placeholderData.ts
@@ -56,6 +56,9 @@ export const placeholderGames = [
     hostURL: "/",
     itchEmbedID: "1",
     thumbnail: "/landing_placeholder.png",
+    itchGameEmbedID: 0,
+    itchGameWidth: 0,
+    itchGameHeight: 0,
     event: 1,
   },
   {
@@ -67,6 +70,9 @@ export const placeholderGames = [
     hostURL: "/",
     itchEmbedID: "1",
     thumbnail: "/landing_placeholder.png",
+    itchGameEmbedID: 0,
+    itchGameWidth: 0,
+    itchGameHeight: 0,
     event: 1,
   },
   {
@@ -78,6 +84,9 @@ export const placeholderGames = [
     hostURL: "/",
     itchEmbedID: "1",
     thumbnail: "/landing_placeholder.png",
+    itchGameEmbedID: 0,
+    itchGameWidth: 0,
+    itchGameHeight: 0,
     event: 1,
   },
 ];
diff --git a/server/game_dev/admin.py b/server/game_dev/admin.py
index ff6fcf2c..6f4bdbae 100644
--- a/server/game_dev/admin.py
+++ b/server/game_dev/admin.py
@@ -20,7 +20,8 @@ class GameShowcaseAdmin(admin.ModelAdmin):
 
 
 class GamesAdmin(admin.ModelAdmin):
-    list_display = ("id", "name", "description", "completion", "active", "hostURL", "itchEmbedID", "thumbnail", "event")
+    list_display = ("id", "name", "description", "completion", "active", "hostURL", "itchEmbedID", "thumbnail", "itchGameEmbedID", "itchGameWidth",
+                    "itchGameHeight", "event")
     search_fields = ["name", "description"]
 
 
diff --git a/server/game_dev/migrations/0010_game_itchgameembedid_game_itchgameheight_and_more.py b/server/game_dev/migrations/0010_game_itchgameembedid_game_itchgameheight_and_more.py
new file mode 100644
index 00000000..3421ce96
--- /dev/null
+++ b/server/game_dev/migrations/0010_game_itchgameembedid_game_itchgameheight_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 5.1.15 on 2026-02-04 07:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0009_merge_20260131_1044"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="game",
+            name="itchGameEmbedID",
+            field=models.PositiveBigIntegerField(
+                blank=True,
+                default=0,
+                help_text="If a game has a web demo stored on itch.io, please enter the embed ID",
+                null=True,
+            ),
+        ),
+        migrations.AddField(
+            model_name="game",
+            name="itchGameHeight",
+            field=models.PositiveBigIntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name="game",
+            name="itchGameWidth",
+            field=models.PositiveBigIntegerField(default=0),
+        ),
+    ]
diff --git a/server/game_dev/models.py b/server/game_dev/models.py
index 8b81b7bd..c45cee05 100644
--- a/server/game_dev/models.py
+++ b/server/game_dev/models.py
@@ -64,6 +64,20 @@ class CompletionStatus(models.IntegerChoices):
     thumbnail = models.ImageField(upload_to="games/", null=True)
     event = models.ForeignKey(Event, on_delete=models.SET_NULL, null=True, blank=True)
 
+    itchGameEmbedID = models.PositiveBigIntegerField(
+        default=None,
+        null=True,
+        blank=True,
+        help_text="If a game has a web demo stored on itch.io, please enter the embed ID"
+    )
+
+    itchGameWidth = models.PositiveBigIntegerField(
+        default=0
+    )
+    itchGameHeight = models.PositiveBigIntegerField(
+        default=0
+    )
+
     def __str__(self):
         return str(self.name)
 
diff --git a/server/game_dev/serializers.py b/server/game_dev/serializers.py
index a9e5c811..f432e10c 100644
--- a/server/game_dev/serializers.py
+++ b/server/game_dev/serializers.py
@@ -35,7 +35,8 @@ class GamesSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Game
-        fields = ('id', 'name', 'description', 'completion', 'active', 'hostURL', 'itchEmbedID', 'thumbnail', 'event', "contributors")
+        fields = ('id', 'name', 'description', 'completion', 'active', 'hostURL', 'itchEmbedID', 'thumbnail', 'event', 'itchGameEmbedID',
+                  'itchGameWidth', 'itchGameHeight', "contributors")
 
 
 # Contributor serializer for name and role

From 1f704d051c97000c8d8feeb4542f46efc3ee2cc7 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Thu, 5 Feb 2026 06:47:25 +0000
Subject: [PATCH 4/9] playable game can replace image

---
 client/src/components/ui/GameEmbed.tsx        | 50 +++++++++----------
 client/src/pages/games/[id].tsx               | 39 ++++++++-------
 .../migrations/0011_merge_20260205_1434.py    | 13 +++++
 3 files changed, 57 insertions(+), 45 deletions(-)
 create mode 100644 server/game_dev/migrations/0011_merge_20260205_1434.py

diff --git a/client/src/components/ui/GameEmbed.tsx b/client/src/components/ui/GameEmbed.tsx
index 37209274..e44522ad 100644
--- a/client/src/components/ui/GameEmbed.tsx
+++ b/client/src/components/ui/GameEmbed.tsx
@@ -17,32 +17,30 @@ export function GameEmbed({ embedID, gameWidth, gameHeight }: GameEmbedProps) {
   const [isPlaying, setIsPlaying] = useState(false);
 
   return (
-    <div>
-      <section
-        className={
-          "flex items-center justify-center border-[26px] border-accent p-2 [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%)]"
-        }
-        style={{ width: gameWidth, height: gameHeight }}
-      >
-        {!isPlaying ? (
-          <button
-            onClick={() => setIsPlaying(!isPlaying)}
-            className="rounded-sm bg-accent px-7 py-3"
-            aria-label="Play"
-          >
-            <div>Play</div>
-          </button>
-        ) : (
-          <div>
-            <iframe
-              src={`https://itch.io/embed-upload/${embedID}?color=110e1a`}
-              width={gameWidth}
-              height={gameHeight}
-              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%)]"
-            ></iframe>
-          </div>
-        )}
-      </section>
+    <div
+      className={
+        "flex items-center justify-center border-[26px] border-accent bg-background p-2 [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%)]"
+      }
+      style={{ width: gameWidth, height: gameHeight }}
+    >
+      {!isPlaying ? (
+        <button
+          onClick={() => setIsPlaying(!isPlaying)}
+          className="rounded-sm bg-accent px-7 py-3"
+          aria-label="Play"
+        >
+          <div>Play</div>
+        </button>
+      ) : (
+        <div>
+          <iframe
+            src={`https://itch.io/embed-upload/${embedID}?color=110e1a`}
+            width={gameWidth}
+            height={gameHeight}
+            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%)]"
+          ></iframe>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/client/src/pages/games/[id].tsx b/client/src/pages/games/[id].tsx
index 9f7dc646..72bc4eb8 100644
--- a/client/src/pages/games/[id].tsx
+++ b/client/src/pages/games/[id].tsx
@@ -86,16 +86,26 @@ export default function IndividualGamePage() {
   return (
     <div className="min-h-screen bg-background font-sans text-foreground">
       <main>
-        <section className="w-full bg-popover">
+        <section className="w-full items-center justify-center 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
-            />
+            {gameEmbedID != "0" ? (
+              <div className="flex justify-center">
+                <GameEmbed
+                  embedID={gameEmbedID}
+                  gameWidth={gameWidth}
+                  gameHeight={gameHeight}
+                />
+              </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>
 
@@ -162,16 +172,7 @@ export default function IndividualGamePage() {
         </section>
 
         <section className="mt-8 flex w-full flex-col items-center gap-6">
-          {gameEmbedID != "0" && (
-            <div>
-              <GameEmbed
-                embedID={gameEmbedID}
-                gameWidth={gameWidth}
-                gameHeight={gameHeight}
-              />
-              <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
-            </div>
-          )}
+          <ItchEmbed embedID={game.itchEmbedID} name={gameTitle} />
 
           <h2 className="font-jersey10 text-5xl text-primary">ARTWORK</h2>
 
diff --git a/server/game_dev/migrations/0011_merge_20260205_1434.py b/server/game_dev/migrations/0011_merge_20260205_1434.py
new file mode 100644
index 00000000..99940f57
--- /dev/null
+++ b/server/game_dev/migrations/0011_merge_20260205_1434.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.15 on 2026-02-05 06:34
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0010_game_itchgameembedid_game_itchgameheight_and_more"),
+        ("game_dev", "0010_merge_20260131_1118"),
+    ]
+
+    operations = []

From b0bb20838e6b8f600d325d4c97ae12943e39d88d Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Sat, 7 Feb 2026 03:54:57 +0000
Subject: [PATCH 5/9] game embed button styling

---
 client/src/components/ui/GameEmbed.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ui/GameEmbed.tsx b/client/src/components/ui/GameEmbed.tsx
index e44522ad..c243b05b 100644
--- a/client/src/components/ui/GameEmbed.tsx
+++ b/client/src/components/ui/GameEmbed.tsx
@@ -7,6 +7,8 @@
 
 import React, { useState } from "react";
 
+import { Button } from "./button";
+
 type GameEmbedProps = {
   embedID: string;
   gameWidth: number;
@@ -24,13 +26,13 @@ export function GameEmbed({ embedID, gameWidth, gameHeight }: GameEmbedProps) {
       style={{ width: gameWidth, height: gameHeight }}
     >
       {!isPlaying ? (
-        <button
+        <Button
           onClick={() => setIsPlaying(!isPlaying)}
-          className="rounded-sm bg-accent px-7 py-3"
-          aria-label="Play"
+          size={"lg"}
+          className="text-3xl"
         >
-          <div>Play</div>
-        </button>
+          Play
+        </Button>
       ) : (
         <div>
           <iframe

From f03c36f1cec3e130596bc2ceea5fc2b3b4c82a23 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Sat, 7 Feb 2026 06:46:59 +0000
Subject: [PATCH 6/9] uses game image as background for game embed

---
 client/src/components/ui/GameEmbed.tsx | 41 +++++++++++++++++---------
 client/src/pages/games/[id].tsx        |  1 +
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/client/src/components/ui/GameEmbed.tsx b/client/src/components/ui/GameEmbed.tsx
index c243b05b..ce7ea357 100644
--- a/client/src/components/ui/GameEmbed.tsx
+++ b/client/src/components/ui/GameEmbed.tsx
@@ -4,7 +4,7 @@
 //  - 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";
@@ -13,33 +13,46 @@ type GameEmbedProps = {
   embedID: string;
   gameWidth: number;
   gameHeight: number;
+  gameImage: string;
 };
 
-export function GameEmbed({ embedID, gameWidth, gameHeight }: GameEmbedProps) {
+export function GameEmbed({
+  embedID,
+  gameWidth,
+  gameHeight,
+  gameImage,
+}: GameEmbedProps) {
   const [isPlaying, setIsPlaying] = useState(false);
 
   return (
     <div
-      className={
-        "flex items-center justify-center border-[26px] border-accent bg-background p-2 [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%)]"
-      }
-      style={{ width: gameWidth, height: gameHeight }}
+      className={`flex items-center justify-center border-[26px] border-accent bg-background [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%)]`}
+      style={{ width: gameWidth + 26 * 2, height: gameHeight + 26 * 2 }}
     >
       {!isPlaying ? (
-        <Button
-          onClick={() => setIsPlaying(!isPlaying)}
-          size={"lg"}
-          className="text-3xl"
-        >
-          Play
-        </Button>
+        <div>
+          <Image
+            src={gameImage}
+            alt="Game Cover"
+            width={gameWidth}
+            height={gameHeight}
+            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-52px)] blur-sm"
+            style={{ width: "auto", height: gameHeight }}
+          />
+          <Button
+            onClick={() => setIsPlaying(!isPlaying)}
+            size={"lg"}
+            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-52px)] text-3xl"
+          >
+            Play
+          </Button>
+        </div>
       ) : (
         <div>
           <iframe
             src={`https://itch.io/embed-upload/${embedID}?color=110e1a`}
             width={gameWidth}
             height={gameHeight}
-            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%)]"
           ></iframe>
         </div>
       )}
diff --git a/client/src/pages/games/[id].tsx b/client/src/pages/games/[id].tsx
index 72bc4eb8..fa1f8dd6 100644
--- a/client/src/pages/games/[id].tsx
+++ b/client/src/pages/games/[id].tsx
@@ -94,6 +94,7 @@ export default function IndividualGamePage() {
                   embedID={gameEmbedID}
                   gameWidth={gameWidth}
                   gameHeight={gameHeight}
+                  gameImage={gameCover}
                 />
               </div>
             ) : (

From 2676f5d09382d4462c4d3ac95ce055198195d3bc Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Sat, 14 Feb 2026 04:03:43 +0000
Subject: [PATCH 7/9] refactored retroBorder into global.css

---
 client/src/components/ui/GameEmbed.tsx        |  6 ++---
 client/src/pages/index.tsx                    |  2 +-
 client/src/styles/globals.css                 |  4 ++++
 .../migrations/0012_merge_20260214_1112.py    | 13 +++++++++++
 .../0013_alter_game_itchgameembedid.py        | 23 +++++++++++++++++++
 5 files changed, 44 insertions(+), 4 deletions(-)
 create mode 100644 server/game_dev/migrations/0012_merge_20260214_1112.py
 create mode 100644 server/game_dev/migrations/0013_alter_game_itchgameembedid.py

diff --git a/client/src/components/ui/GameEmbed.tsx b/client/src/components/ui/GameEmbed.tsx
index ce7ea357..f070f628 100644
--- a/client/src/components/ui/GameEmbed.tsx
+++ b/client/src/components/ui/GameEmbed.tsx
@@ -26,7 +26,7 @@ export function GameEmbed({
 
   return (
     <div
-      className={`flex items-center justify-center border-[26px] border-accent bg-background [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 flex items-center justify-center bg-background`}
       style={{ width: gameWidth + 26 * 2, height: gameHeight + 26 * 2 }}
     >
       {!isPlaying ? (
@@ -36,8 +36,8 @@ export function GameEmbed({
             alt="Game Cover"
             width={gameWidth}
             height={gameHeight}
-            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-52px)] blur-sm"
-            style={{ width: "auto", height: gameHeight }}
+            className="absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[calc(-50%-26px)] blur-sm"
+            style={{ width: "auto", height: gameHeight - 26 }}
           />
           <Button
             onClick={() => setIsPlaying(!isPlaying)}
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 5270dcbf..2aa02923 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -89,7 +89,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"
diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index e6445070..acd78e00 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -57,4 +57,8 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  .retroBorder {
+    @apply 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%)]
+  }
 }
diff --git a/server/game_dev/migrations/0012_merge_20260214_1112.py b/server/game_dev/migrations/0012_merge_20260214_1112.py
new file mode 100644
index 00000000..b6b1587f
--- /dev/null
+++ b/server/game_dev/migrations/0012_merge_20260214_1112.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.15 on 2026-02-14 03:12
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0011_alter_gameshowcase_game"),
+        ("game_dev", "0011_merge_20260205_1434"),
+    ]
+
+    operations = []
diff --git a/server/game_dev/migrations/0013_alter_game_itchgameembedid.py b/server/game_dev/migrations/0013_alter_game_itchgameembedid.py
new file mode 100644
index 00000000..c1bc5534
--- /dev/null
+++ b/server/game_dev/migrations/0013_alter_game_itchgameembedid.py
@@ -0,0 +1,23 @@
+# Generated by Django 5.1.15 on 2026-02-14 03:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0012_merge_20260214_1112"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="game",
+            name="itchGameEmbedID",
+            field=models.PositiveBigIntegerField(
+                blank=True,
+                default=None,
+                help_text="If a game has a web demo stored on itch.io, please enter the embed ID",
+                null=True,
+            ),
+        ),
+    ]

From da87061e7ae35b1474b2e6217265806ef818c23c Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Sat, 14 Feb 2026 04:07:44 +0000
Subject: [PATCH 8/9] fixing globals.css

---
 client/src/styles/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
index acd78e00..76fa7263 100644
--- a/client/src/styles/globals.css
+++ b/client/src/styles/globals.css
@@ -59,6 +59,6 @@
   }
 
   .retroBorder {
-    @apply 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%)]
+    @apply 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%)];
   }
 }

From 4c870a68df00eba79b539b0a97f429a348142296 Mon Sep 17 00:00:00 2001
From: TobbleCobble <tobble@mythosmc.com>
Date: Sat, 14 Feb 2026 06:20:24 +0000
Subject: [PATCH 9/9] merging db changes

---
 .../game_dev/migrations/0014_merge_20260214_1420.py | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 server/game_dev/migrations/0014_merge_20260214_1420.py

diff --git a/server/game_dev/migrations/0014_merge_20260214_1420.py b/server/game_dev/migrations/0014_merge_20260214_1420.py
new file mode 100644
index 00000000..767bc2ac
--- /dev/null
+++ b/server/game_dev/migrations/0014_merge_20260214_1420.py
@@ -0,0 +1,13 @@
+# Generated by Django 5.1.15 on 2026-02-14 06:20
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("game_dev", "0013_alter_game_itchgameembedid"),
+        ("game_dev", "0013_merge_20260214_1347"),
+    ]
+
+    operations = []