From 8cde2290aaf0302425c7e6e7cd154d9ce4cdcb8f Mon Sep 17 00:00:00 2001
From: Helen Chen <helenchen@gatech.edu>
Date: Mon, 8 Apr 2024 19:20:13 -0400
Subject: [PATCH 1/2] run game button

---
 src/components/EmbeddedGame.tsx               | 58 -------------
 src/components/GameScreen/GamePage.tsx        |  3 +-
 .../{ => GameScreen}/UploadGameBuild.tsx      |  6 +-
 .../{ => WebGL}/AddEditWebGLComponent.tsx     |  4 +-
 .../{ => WebGL}/DeleteWebGLBuild.tsx          |  2 +-
 .../GameScreen/WebGL/EmbeddedGame.tsx         | 82 +++++++++++++++++++
 .../GameScreen/{ => WebGL}/GameBuildList.tsx  |  8 +-
 .../WebGL}/RawEmbeddedGame.tsx                |  0
 .../{ => GameScreen/WebGL}/WebGLUpload.tsx    |  4 +-
 .../{ => HomePage}/MarkdownRenderer.tsx       |  0
 src/components/PDFViewer.tsx                  |  8 --
 src/components/Tabs/TabsComponent.tsx         |  2 +-
 src/pages/games/[id]/edit.tsx                 |  2 +-
 .../games/{raw/[id].tsx => [id]/raw.tsx}      |  4 +-
 src/pages/games/create.tsx                    |  2 +-
 src/pages/index.tsx                           |  2 +-
 16 files changed, 103 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/EmbeddedGame.tsx
 rename src/components/{ => GameScreen}/UploadGameBuild.tsx (99%)
 rename src/components/GameScreen/{ => WebGL}/AddEditWebGLComponent.tsx (99%)
 rename src/components/GameScreen/{ => WebGL}/DeleteWebGLBuild.tsx (98%)
 create mode 100644 src/components/GameScreen/WebGL/EmbeddedGame.tsx
 rename src/components/GameScreen/{ => WebGL}/GameBuildList.tsx (99%)
 rename src/components/{ => GameScreen/WebGL}/RawEmbeddedGame.tsx (100%)
 rename src/components/{ => GameScreen/WebGL}/WebGLUpload.tsx (99%)
 rename src/components/{ => HomePage}/MarkdownRenderer.tsx (100%)
 delete mode 100644 src/components/PDFViewer.tsx
 rename src/pages/games/{raw/[id].tsx => [id]/raw.tsx} (75%)

diff --git a/src/components/EmbeddedGame.tsx b/src/components/EmbeddedGame.tsx
deleted file mode 100644
index a08c1fd5..00000000
--- a/src/components/EmbeddedGame.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import cn from "classnames";
-import { useEffect, useRef, useState } from "react";
-
-interface EmbeddedGameProps {
-  gameId: string;
-}
-
-export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
-  const ref = useRef<HTMLIFrameElement | null>(null);
-  const [height, setHeight] = useState("0px");
-
-  const updateHeight = () => {
-    const iframe = ref.current;
-    if (!iframe) return;
-
-    const frameHeight = iframe.contentWindow?.document.body.scrollHeight;
-    if (frameHeight) {
-      setHeight(frameHeight + "px");
-    }
-  };
-
-  const handleLoad = () => {
-    const iframe = ref.current;
-    if (!iframe) return;
-
-    const observer = new MutationObserver(updateHeight);
-
-    if (iframe.contentWindow?.document.body) {
-      observer.observe(iframe.contentWindow.document.body, {
-        childList: true,
-        subtree: true,
-      });
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", updateHeight);
-    return () => {
-      window.removeEventListener("resize", updateHeight);
-    };
-  }, []);
-
-  return (
-    <iframe
-      ref={ref}
-      onLoad={handleLoad}
-      height={height}
-      src={`/games/raw/${gameId}`}
-      className={cn("m-auto my-6 w-10/12", {
-        "border-2 border-solid border-black": height !== "0px",
-      })}
-    />
-  );
-}
diff --git a/src/components/GameScreen/GamePage.tsx b/src/components/GameScreen/GamePage.tsx
index adb59801..334b9009 100644
--- a/src/components/GameScreen/GamePage.tsx
+++ b/src/components/GameScreen/GamePage.tsx
@@ -6,7 +6,7 @@ import ContactComponent from "../Tabs/ContactComponent";
 import { z } from "zod";
 import { useSession } from "next-auth/react";
 import { userSchema } from "@/utils/types";
-import EmbeddedGame from "@/components/EmbeddedGame";
+import EmbeddedGame from "@/components/GameScreen/WebGL/EmbeddedGame";
 import NotesComponent from "@/components/Tabs/NotesComponent";
 import { populatedGameWithId } from "@/server/db/models/GameModel";
 import AdminEditButton from "@/components/GameScreen/AdminEditButton";
@@ -63,6 +63,7 @@ const GamePage = ({ mode }: Props) => {
       setVisibleAnswer(false);
     }
   }, [userData]);
+
   useEffect(() => {
     if (currentUser) {
       getUserData();
diff --git a/src/components/UploadGameBuild.tsx b/src/components/GameScreen/UploadGameBuild.tsx
similarity index 99%
rename from src/components/UploadGameBuild.tsx
rename to src/components/GameScreen/UploadGameBuild.tsx
index e77a9f73..2151f334 100644
--- a/src/components/UploadGameBuild.tsx
+++ b/src/components/GameScreen/UploadGameBuild.tsx
@@ -11,9 +11,9 @@ import {
   SelectItem,
 } from "@/components/ui/select";
 import { ChangeEvent } from "react";
-import { Input } from "./ui/input";
-import { TextArea } from "./ui/textarea";
-import WebGLUpload from "./WebGLUpload";
+import { Input } from "../ui/input";
+import { TextArea } from "../ui/textarea";
+import WebGLUpload from "./WebGL/WebGLUpload";
 
 import { z } from "zod";
 import { AllBuilds, NonWebGLBuilds, buildSchema } from "@/utils/types";
diff --git a/src/components/GameScreen/AddEditWebGLComponent.tsx b/src/components/GameScreen/WebGL/AddEditWebGLComponent.tsx
similarity index 99%
rename from src/components/GameScreen/AddEditWebGLComponent.tsx
rename to src/components/GameScreen/WebGL/AddEditWebGLComponent.tsx
index f67dd95e..6d4394a8 100644
--- a/src/components/GameScreen/AddEditWebGLComponent.tsx
+++ b/src/components/GameScreen/WebGL/AddEditWebGLComponent.tsx
@@ -1,6 +1,6 @@
 import { populatedGameWithId } from "@/server/db/models/GameModel";
 import React, { useEffect } from "react";
-import { Button } from "../ui/button";
+import { Button } from "../../ui/button";
 import {
   Dialog,
   DialogContent,
@@ -8,7 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Label } from "../ui/label";
+import { Label } from "../../ui/label";
 import { AlertTriangleIcon, Pencil, Plus, X } from "lucide-react";
 
 import { useState } from "react";
diff --git a/src/components/GameScreen/DeleteWebGLBuild.tsx b/src/components/GameScreen/WebGL/DeleteWebGLBuild.tsx
similarity index 98%
rename from src/components/GameScreen/DeleteWebGLBuild.tsx
rename to src/components/GameScreen/WebGL/DeleteWebGLBuild.tsx
index cf2d16c1..48907da8 100644
--- a/src/components/GameScreen/DeleteWebGLBuild.tsx
+++ b/src/components/GameScreen/WebGL/DeleteWebGLBuild.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button } from "../ui/button";
+import { Button } from "../../ui/button";
 import { X } from "lucide-react";
 import {
   AlertDialog,
diff --git a/src/components/GameScreen/WebGL/EmbeddedGame.tsx b/src/components/GameScreen/WebGL/EmbeddedGame.tsx
new file mode 100644
index 00000000..3ce64d95
--- /dev/null
+++ b/src/components/GameScreen/WebGL/EmbeddedGame.tsx
@@ -0,0 +1,82 @@
+import { Button } from "@/components/ui/button";
+import cn from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { Play } from "lucide-react";
+
+interface EmbeddedGameProps {
+  gameId: string;
+}
+
+export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
+  const ref = useRef<HTMLIFrameElement | null>(null);
+  const [height, setHeight] = useState("350px");
+  const [loadGame, setLoadGame] = useState(false);
+
+  const updateHeight = () => {
+    const iframe = ref.current;
+    if (!iframe) return;
+
+    const frameHeight = iframe.contentWindow?.document.body.scrollHeight;
+    if (frameHeight) {
+      setHeight(frameHeight + "px");
+    }
+  };
+
+  const handleLoad = () => {
+    const iframe = ref.current;
+    if (!iframe) return;
+
+    const observer = new MutationObserver(updateHeight);
+
+    if (iframe.contentWindow?.document) {
+      observer.observe(iframe.contentWindow.document, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", updateHeight);
+    return () => {
+      window.removeEventListener("resize", updateHeight);
+    };
+  }, []);
+
+  return (
+    <div>
+      {loadGame ? (
+        <iframe
+          ref={ref}
+          onLoad={handleLoad}
+          height={height}
+          src={`/games/${gameId}/raw`}
+          className={cn("m-auto my-6 w-10/12", {
+            "border-2 border-solid border-black": height !== "0px",
+          })}
+        />
+      ) : (
+        <div
+          className="m-auto my-6 flex w-10/12 items-center justify-center border-2 border-solid border-black"
+          style={{ height }}
+        >
+          <Button
+            type="button"
+            variant="mainblue"
+            className="flex h-12 rounded-xl text-lg font-semibold text-white"
+            onClick={() => setLoadGame(true)}
+          >
+            <div className="flex items-center gap-2 font-sans">
+              <p>Run Game</p>
+              <Play />
+            </div>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/GameScreen/GameBuildList.tsx b/src/components/GameScreen/WebGL/GameBuildList.tsx
similarity index 99%
rename from src/components/GameScreen/GameBuildList.tsx
rename to src/components/GameScreen/WebGL/GameBuildList.tsx
index 03406e26..07e746da 100644
--- a/src/components/GameScreen/GameBuildList.tsx
+++ b/src/components/GameScreen/WebGL/GameBuildList.tsx
@@ -12,16 +12,16 @@ import {
   SelectGroup,
   SelectItem,
 } from "@/components/ui/select";
-import { TextArea } from "../ui/textarea";
-import { Input } from "../ui/input";
-import { Button } from "../ui/button";
+import { TextArea } from "../../ui/textarea";
+import { Input } from "../../ui/input";
+import { Button } from "../../ui/button";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { GameDataState } from "../GameScreen/GamePage";
+import { GameDataState } from "../GamePage";
 
 interface Props {
   gameData: GameDataState;
diff --git a/src/components/RawEmbeddedGame.tsx b/src/components/GameScreen/WebGL/RawEmbeddedGame.tsx
similarity index 100%
rename from src/components/RawEmbeddedGame.tsx
rename to src/components/GameScreen/WebGL/RawEmbeddedGame.tsx
diff --git a/src/components/WebGLUpload.tsx b/src/components/GameScreen/WebGL/WebGLUpload.tsx
similarity index 99%
rename from src/components/WebGLUpload.tsx
rename to src/components/GameScreen/WebGL/WebGLUpload.tsx
index f6808880..f80bdcc2 100644
--- a/src/components/WebGLUpload.tsx
+++ b/src/components/GameScreen/WebGL/WebGLUpload.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { Button } from "./ui/button";
-import { Label } from "./ui/label";
+import { Button } from "../../ui/button";
+import { Label } from "../../ui/label";
 import { AlertTriangle, AlertTriangleIcon, X } from "lucide-react";
 
 // there's probably a better place to put these
diff --git a/src/components/MarkdownRenderer.tsx b/src/components/HomePage/MarkdownRenderer.tsx
similarity index 100%
rename from src/components/MarkdownRenderer.tsx
rename to src/components/HomePage/MarkdownRenderer.tsx
diff --git a/src/components/PDFViewer.tsx b/src/components/PDFViewer.tsx
deleted file mode 100644
index 6c4c0314..00000000
--- a/src/components/PDFViewer.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-interface Props {
-  fileUrl: string;
-  height?: string | number | undefined;
-}
-
-export default function PDFViewer({ fileUrl, height = "600px" }: Props) {
-  return <iframe src={fileUrl} width="100%" height={height} />;
-}
diff --git a/src/components/Tabs/TabsComponent.tsx b/src/components/Tabs/TabsComponent.tsx
index 28024d3f..b0066674 100644
--- a/src/components/Tabs/TabsComponent.tsx
+++ b/src/components/Tabs/TabsComponent.tsx
@@ -9,7 +9,7 @@ import {
 } from "@chakra-ui/react";
 import chakraTheme from "@/styles/chakraTheme";
 import { ChangeEvent, Dispatch, useState } from "react";
-import GameBuildList from "../GameScreen/GameBuildList";
+import GameBuildList from "../GameScreen/WebGL/GameBuildList";
 import VideoComponent from "./VideoComponent";
 import { Button } from "../ui/button";
 import { X } from "lucide-react";
diff --git a/src/pages/games/[id]/edit.tsx b/src/pages/games/[id]/edit.tsx
index 812c4adc..ad2dc2f0 100644
--- a/src/pages/games/[id]/edit.tsx
+++ b/src/pages/games/[id]/edit.tsx
@@ -5,7 +5,7 @@ import TabsComponent from "@/components/Tabs/TabsComponent";
 import React from "react";
 import { populatedGameWithId } from "@/server/db/models/GameModel";
 import pageAccessHOC from "@/components/HOC/PageAccess";
-import AddEditWebGLComponent from "@/components/GameScreen/AddEditWebGLComponent";
+import AddEditWebGLComponent from "@/components/GameScreen/WebGL/AddEditWebGLComponent";
 import DeleteComponentModal from "@/components/DeleteComponentModal";
 import { useDisclosure } from "@chakra-ui/react";
 import DiscardChanges from "@/components/GameScreen/DiscardChanges";
diff --git a/src/pages/games/raw/[id].tsx b/src/pages/games/[id]/raw.tsx
similarity index 75%
rename from src/pages/games/raw/[id].tsx
rename to src/pages/games/[id]/raw.tsx
index f1956c73..8da7d63e 100644
--- a/src/pages/games/raw/[id].tsx
+++ b/src/pages/games/[id]/raw.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import RawEmbeddedGame from "@/components/RawEmbeddedGame";
+import RawEmbeddedGame from "@/components/GameScreen/WebGL/RawEmbeddedGame";
 
 const GamePage = () => {
   const gameId = useRouter().query.id;
@@ -15,6 +15,8 @@ const GamePage = () => {
   }, []);
 
   if (!gameId || typeof window === "undefined") {
+    console.log("gameId", gameId);
+    console.log("window", typeof window);
     return <></>;
   }
 
diff --git a/src/pages/games/create.tsx b/src/pages/games/create.tsx
index 46cb2048..cdc0763b 100644
--- a/src/pages/games/create.tsx
+++ b/src/pages/games/create.tsx
@@ -14,7 +14,7 @@ import { ITag } from "@/server/db/models/TagModel";
 import { ExtendId, buildSchema, gameSchema } from "@/utils/types";
 import { HTTP_STATUS_CODE } from "@/utils/consts";
 import { IGame } from "@/server/db/models/GameModel";
-import UploadGameBuild from "@/components/UploadGameBuild";
+import UploadGameBuild from "@/components/GameScreen/UploadGameBuild";
 import {
   youtubeREGEX,
   vimeoREGEX,
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a1bd39b6..2375827d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -19,7 +19,7 @@ import { WarningTwoIcon } from "@chakra-ui/icons";
 import cx from "classnames";
 import EditGameBoyModal from "@/components/HomePage/EditGameBoyModal";
 import GameBoy from "@/components/HomePage/GameBoy";
-import MarkdownRenderer from "@/components/MarkdownRenderer";
+import MarkdownRenderer from "@/components/HomePage/MarkdownRenderer";
 
 // const mdPlugins = ["font-bold", "font-italic", "font-underline"];
 const mdParser = new MarkdownIt().use(insert);

From 42234cb55067b14210ec21c4e8deff3fa5f5c5c4 Mon Sep 17 00:00:00 2001
From: Helen Chen <helenchen@gatech.edu>
Date: Tue, 9 Apr 2024 00:11:49 -0400
Subject: [PATCH 2/2] final fixes

---
 src/components/CreateGameScreen/UploadPDF.tsx | 155 ++++++
 src/components/GameScreen/UploadGameBuild.tsx |   2 +-
 .../GameScreen/WebGL/EmbeddedGame.tsx         |  47 +-
 .../GameScreen/WebGL/GameBuildList.tsx        |   4 +-
 src/components/Tabs/TabsComponent.tsx         |   6 +-
 src/components/ThemesTags/Modals/AddModal.tsx |   2 +
 .../ThemesTags/Modals/DeleteModal.tsx         |   2 +
 src/pages/api/games/index.ts                  |  12 +-
 src/pages/api/tags/index.ts                   |   3 +
 src/pages/api/themes/index.ts                 |   2 +
 src/pages/games/[id]/raw.tsx                  |   2 -
 src/pages/games/create.tsx                    | 445 ++++++------------
 12 files changed, 357 insertions(+), 325 deletions(-)
 create mode 100644 src/components/CreateGameScreen/UploadPDF.tsx

diff --git a/src/components/CreateGameScreen/UploadPDF.tsx b/src/components/CreateGameScreen/UploadPDF.tsx
new file mode 100644
index 00000000..f70f4bb5
--- /dev/null
+++ b/src/components/CreateGameScreen/UploadPDF.tsx
@@ -0,0 +1,155 @@
+import { Upload, X } from "lucide-react";
+import React, { useRef, useState } from "react";
+
+const UploadPDF = ({ pdfFormKeys }: { pdfFormKeys: string[] }) => {
+  const lessonRef = useRef<HTMLInputElement>(null);
+  const parentingGuideRef = useRef<HTMLInputElement>(null);
+  const answerKeyRef = useRef<HTMLInputElement>(null);
+
+  const [selectedPdfInputs, setSelectedPdfInputs] = useState({
+    parentingGuide: false,
+    answerKey: false,
+    lesson: false,
+  });
+
+  return (
+    <div className="flex w-full flex-col gap-12">
+      <div className="relative flex w-fit flex-col gap-3 md:w-2/3">
+        <label className="text-xl font-semibold">Parenting Guide</label>
+        <div className="flex w-fit flex-row items-center justify-start gap-2">
+          <label htmlFor={pdfFormKeys[0]}>
+            <div className="flex h-12 w-32 flex-row items-center justify-center gap-3 rounded-md border border-[#666666] bg-[#FAFBFC] text-slate-900 hover:opacity-80">
+              <div>
+                <Upload size={24} />
+              </div>
+              <p className="text-sm">Upload</p>
+            </div>
+          </label>
+          <input
+            ref={parentingGuideRef}
+            className="block w-fit min-w-0 text-sm file:hidden"
+            id={pdfFormKeys[0]}
+            name={pdfFormKeys[0]}
+            type="file"
+            accept=".pdf"
+            onChange={(e) => {
+              const files = e.currentTarget.files;
+              setSelectedPdfInputs({
+                ...selectedPdfInputs,
+                parentingGuide: !!files,
+              });
+            }}
+          />
+          <X
+            className={
+              selectedPdfInputs.parentingGuide
+                ? "block text-orange-primary hover:cursor-pointer"
+                : "hidden"
+            }
+            onClick={() => {
+              if (!parentingGuideRef.current) return;
+              parentingGuideRef.current.value = "";
+
+              setSelectedPdfInputs({
+                ...selectedPdfInputs,
+                parentingGuide: false,
+              });
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="relative flex w-full flex-col gap-3 md:w-2/3">
+        <label className="text-xl font-semibold">Lesson Plan</label>
+        <div className="flex w-fit flex-row items-center justify-start gap-2">
+          <label htmlFor={pdfFormKeys[1]}>
+            <div className="flex h-12 w-32 flex-row items-center justify-center gap-3 rounded-md border border-[#666666] bg-[#FAFBFC] text-slate-900 hover:opacity-80">
+              <div>
+                <Upload size={24} />
+              </div>
+              <p className="text-sm">Upload</p>
+            </div>
+          </label>
+          <input
+            ref={lessonRef}
+            className="block w-fit text-sm file:hidden"
+            id={pdfFormKeys[1]}
+            name={pdfFormKeys[1]}
+            type="file"
+            accept=".pdf"
+            onChange={(e) => {
+              const files = e.currentTarget.files;
+              setSelectedPdfInputs({
+                ...selectedPdfInputs,
+                lesson: !!files,
+              });
+            }}
+          />
+          <X
+            className={
+              selectedPdfInputs.lesson
+                ? "block text-orange-primary hover:cursor-pointer"
+                : "hidden"
+            }
+            onClick={() => {
+              if (!lessonRef.current) return;
+              lessonRef.current.value = "";
+
+              setSelectedPdfInputs({
+                ...selectedPdfInputs,
+                lesson: false,
+              });
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="relative flex w-full flex-col gap-3 md:w-2/3">
+        <label className="text-xl font-semibold">Answer Key</label>
+        <div className="flex w-fit flex-row items-center justify-start gap-2">
+          <label htmlFor={pdfFormKeys[2]}>
+            <div className="flex h-12 w-32 flex-row items-center justify-center gap-3 rounded-md border border-[#666666] bg-[#FAFBFC] text-slate-900 hover:opacity-80">
+              <div>
+                <Upload size={24} />
+              </div>
+              <p className="text-sm">Upload</p>
+            </div>
+          </label>
+          <input
+            ref={answerKeyRef}
+            className="block w-fit text-sm file:hidden"
+            id={pdfFormKeys[2]}
+            name={pdfFormKeys[2]}
+            type="file"
+            accept=".pdf"
+            onChange={(e) => {
+              const files = e.currentTarget.files;
+              setSelectedPdfInputs({
+                ...selectedPdfInputs,
+                answerKey: !!files,
+              });
+            }}
+          />
+          <X
+            className={
+              selectedPdfInputs.answerKey
+                ? "block text-orange-primary hover:cursor-pointer"
+                : "hidden"
+            }
+            onClick={() => {
+              if (!answerKeyRef.current) return;
+              answerKeyRef.current.value = "";
+
+              setSelectedPdfInputs({
+                ...selectedPdfInputs,
+                answerKey: false,
+              });
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UploadPDF;
diff --git a/src/components/GameScreen/UploadGameBuild.tsx b/src/components/GameScreen/UploadGameBuild.tsx
index 2151f334..ea4a6eef 100644
--- a/src/components/GameScreen/UploadGameBuild.tsx
+++ b/src/components/GameScreen/UploadGameBuild.tsx
@@ -10,7 +10,6 @@ import {
   SelectGroup,
   SelectItem,
 } from "@/components/ui/select";
-import { ChangeEvent } from "react";
 import { Input } from "../ui/input";
 import { TextArea } from "../ui/textarea";
 import WebGLUpload from "./WebGL/WebGLUpload";
@@ -362,6 +361,7 @@ function UploadGameBuild(props: Props) {
                         className="min-h-24 shrink text-xs font-light"
                         value={instructions}
                         onChange={handleInstructionsChange}
+                        style={{ whiteSpace: "pre-line" }}
                       />
                     </span>
                   </div>
diff --git a/src/components/GameScreen/WebGL/EmbeddedGame.tsx b/src/components/GameScreen/WebGL/EmbeddedGame.tsx
index 3ce64d95..b4adb081 100644
--- a/src/components/GameScreen/WebGL/EmbeddedGame.tsx
+++ b/src/components/GameScreen/WebGL/EmbeddedGame.tsx
@@ -9,8 +9,9 @@ interface EmbeddedGameProps {
 
 export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
   const ref = useRef<HTMLIFrameElement | null>(null);
-  const [height, setHeight] = useState("350px");
+  const [height, setHeight] = useState("0px");
   const [loadGame, setLoadGame] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(false);
 
   const updateHeight = () => {
     const iframe = ref.current;
@@ -20,6 +21,7 @@ export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
     if (frameHeight) {
       setHeight(frameHeight + "px");
     }
+    setIframeLoading(false);
   };
 
   const handleLoad = () => {
@@ -34,7 +36,6 @@ export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
         subtree: true,
       });
     }
-
     return () => {
       observer.disconnect();
     };
@@ -47,6 +48,25 @@ export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
     };
   }, []);
 
+  const RunGame = () => (
+    <div className="m-auto my-6 flex aspect-video w-10/12 items-center justify-center border-2 border-solid border-black">
+      <Button
+        type="button"
+        variant="mainblue"
+        className="flex h-12 rounded-xl text-lg font-semibold text-white"
+        onClick={() => {
+          setLoadGame(true);
+          setIframeLoading(true);
+        }}
+      >
+        <div className="flex items-center gap-2 font-sans">
+          <p>Run Game</p>
+          <Play />
+        </div>
+      </Button>
+    </div>
+  );
+
   return (
     <div>
       {loadGame ? (
@@ -55,28 +75,15 @@ export default function EmbeddedGame({ gameId }: EmbeddedGameProps) {
           onLoad={handleLoad}
           height={height}
           src={`/games/${gameId}/raw`}
-          className={cn("m-auto my-6 w-10/12", {
-            "border-2 border-solid border-black": height !== "0px",
+          className={cn({
+            "m-auto my-6 w-10/12 border-2 border-solid border-black":
+              height !== "0px",
           })}
         />
       ) : (
-        <div
-          className="m-auto my-6 flex w-10/12 items-center justify-center border-2 border-solid border-black"
-          style={{ height }}
-        >
-          <Button
-            type="button"
-            variant="mainblue"
-            className="flex h-12 rounded-xl text-lg font-semibold text-white"
-            onClick={() => setLoadGame(true)}
-          >
-            <div className="flex items-center gap-2 font-sans">
-              <p>Run Game</p>
-              <Play />
-            </div>
-          </Button>
-        </div>
+        <RunGame />
       )}
+      {iframeLoading && <RunGame />}
     </div>
   );
 }
diff --git a/src/components/GameScreen/WebGL/GameBuildList.tsx b/src/components/GameScreen/WebGL/GameBuildList.tsx
index 07e746da..9e603136 100644
--- a/src/components/GameScreen/WebGL/GameBuildList.tsx
+++ b/src/components/GameScreen/WebGL/GameBuildList.tsx
@@ -450,7 +450,9 @@ function GameBuildList({ gameData, editing, setGameData }: Props) {
                   <div className="max-w-4/5 min-w-[78px]"></div>
                   <div className="flex max-w-[85%] flex-col gap-2">
                     <p className="text-sm text-blue-primary">Instructions</p>
-                    <p className="text-sm">{data.instructions}</p>
+                    <div className="text-sm" style={{ whiteSpace: "pre-line" }}>
+                      {data.instructions}
+                    </div>
                   </div>
                 </div>
               )}
diff --git a/src/components/Tabs/TabsComponent.tsx b/src/components/Tabs/TabsComponent.tsx
index b0066674..f13f17d8 100644
--- a/src/components/Tabs/TabsComponent.tsx
+++ b/src/components/Tabs/TabsComponent.tsx
@@ -127,7 +127,7 @@ export default function TabsComponent({
                   gameData.lessonFile) && (
                   <iframe
                     className="w-full"
-                    height="400"
+                    height="600"
                     src={
                       gameData.lessonFile
                         ? URL.createObjectURL(gameData.lessonFile as File)
@@ -173,7 +173,7 @@ export default function TabsComponent({
                   gameData.parentingGuideFile) && (
                   <iframe
                     className="w-full"
-                    height="400"
+                    height="600"
                     src={
                       gameData.parentingGuideFile
                         ? URL.createObjectURL(
@@ -223,7 +223,7 @@ export default function TabsComponent({
                   gameData.answerKeyFile) && (
                   <iframe
                     className="w-full"
-                    height="400"
+                    height="600"
                     src={
                       gameData.answerKeyFile
                         ? URL.createObjectURL(gameData.answerKeyFile as File)
diff --git a/src/components/ThemesTags/Modals/AddModal.tsx b/src/components/ThemesTags/Modals/AddModal.tsx
index af488f50..c65323d5 100644
--- a/src/components/ThemesTags/Modals/AddModal.tsx
+++ b/src/components/ThemesTags/Modals/AddModal.tsx
@@ -51,6 +51,7 @@ function AddModal({ subject, open, setOpen }: Props) {
       }).then((res) => res.json()),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["allThemes"] });
+      queryClient.invalidateQueries({ queryKey: ["allGames"] });
     },
   });
 
@@ -62,6 +63,7 @@ function AddModal({ subject, open, setOpen }: Props) {
       }).then((res) => res.json()),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["tagsByType"] });
+      queryClient.invalidateQueries({ queryKey: ["allGames"] });
     },
   });
 
diff --git a/src/components/ThemesTags/Modals/DeleteModal.tsx b/src/components/ThemesTags/Modals/DeleteModal.tsx
index 1e18496c..e32dd01a 100644
--- a/src/components/ThemesTags/Modals/DeleteModal.tsx
+++ b/src/components/ThemesTags/Modals/DeleteModal.tsx
@@ -31,6 +31,7 @@ function DeleteModal({ open, setOpen, subject, subjectType }: Props) {
       }).then((res) => res.json()) as Promise<ITheme & { _id: string }>,
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ["allThemes"] });
+      queryClient.invalidateQueries({ queryKey: ["allGames"] });
     },
   });
 
@@ -42,6 +43,7 @@ function DeleteModal({ open, setOpen, subject, subjectType }: Props) {
       }).then((res) => res.json()) as Promise<ITag & { _id: string }>,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["tagsByType"] });
+      queryClient.invalidateQueries({ queryKey: ["allGames"] });
     },
   });
 
diff --git a/src/pages/api/games/index.ts b/src/pages/api/games/index.ts
index 98c6eb50..f226aa20 100644
--- a/src/pages/api/games/index.ts
+++ b/src/pages/api/games/index.ts
@@ -72,15 +72,9 @@ async function getGamesHandler(req: NextApiRequest, res: NextApiResponse) {
 
     // sort themes and tags to always return in same order
     tagSeparatedGames.forEach((game) => {
-      game.themes?.sort((a, b) =>
-        a._id.toString().localeCompare(b._id.toString()),
-      );
-      game.accessibility?.sort((a, b) =>
-        a._id.toString().localeCompare(b._id.toString()),
-      );
-      game.custom?.sort((a, b) =>
-        a._id.toString().localeCompare(b._id.toString()),
-      );
+      game.themes?.sort((a, b) => a.name.localeCompare(b.name));
+      game.accessibility?.sort((a, b) => a.name.localeCompare(b.name));
+      game.custom?.sort((a, b) => a.name.localeCompare(b.name));
     });
 
     return res.status(HTTP_STATUS_CODE.OK).send({
diff --git a/src/pages/api/tags/index.ts b/src/pages/api/tags/index.ts
index b0e69c42..b682ca7c 100644
--- a/src/pages/api/tags/index.ts
+++ b/src/pages/api/tags/index.ts
@@ -44,6 +44,9 @@ async function postTagHandler(req: NextApiRequest, res: NextApiResponse) {
     if (!parsedBody.success) {
       throw new TagInvalidInputException();
     }
+    parsedBody.data.name =
+      parsedBody.data.name[0].toUpperCase() + parsedBody.data.name.slice(1);
+
     const tag = await createTag(parsedBody.data);
 
     return res.status(HTTP_STATUS_CODE.CREATED).send({
diff --git a/src/pages/api/themes/index.ts b/src/pages/api/themes/index.ts
index d011f247..6dd1629f 100644
--- a/src/pages/api/themes/index.ts
+++ b/src/pages/api/themes/index.ts
@@ -53,6 +53,8 @@ async function postThemeHandler(req: NextApiRequest, res: NextApiResponse) {
     if (!parsedBody.success) {
       throw new ThemeInvalidInputException();
     }
+    parsedBody.data.name =
+      parsedBody.data.name[0].toUpperCase() + parsedBody.data.name.slice(1);
     const newTheme = await createTheme(parsedBody.data);
     return res.status(HTTP_STATUS_CODE.OK).send({
       ...newTheme,
diff --git a/src/pages/games/[id]/raw.tsx b/src/pages/games/[id]/raw.tsx
index 8da7d63e..8fe33fed 100644
--- a/src/pages/games/[id]/raw.tsx
+++ b/src/pages/games/[id]/raw.tsx
@@ -15,8 +15,6 @@ const GamePage = () => {
   }, []);
 
   if (!gameId || typeof window === "undefined") {
-    console.log("gameId", gameId);
-    console.log("window", typeof window);
     return <></>;
   }
 
diff --git a/src/pages/games/create.tsx b/src/pages/games/create.tsx
index cdc0763b..469866f6 100644
--- a/src/pages/games/create.tsx
+++ b/src/pages/games/create.tsx
@@ -24,6 +24,7 @@ import axios from "axios";
 import { v4 as uuidv4 } from "uuid";
 import { useMutation } from "@tanstack/react-query";
 import { uploadApplicationFile } from "@/utils/file";
+import UploadPDF from "@/components/CreateGameScreen/UploadPDF";
 
 const NAME_FORM_KEY = "name";
 const TRAILER_FORM_KEY = "videoTrailer";
@@ -32,13 +33,11 @@ const IMAGE_FORM_KEY = "image";
 const PARENTING_GUIDE_FORM_KEY = "parentingGuide";
 const LESSON_PLAN_FORM_KEY = "lesson";
 const ANSWER_KEY_FORM_KEY = "answerKey";
-
-export const createGameSchema = z.object({
-  name: z.string().min(3, "Title must be at least 3 characters"),
-  image: z.string().min(1, "Image is required"),
-  videoTrailer: z.string().url("Not a valid URL").or(z.literal("")),
-  description: z.string().min(1, "Description is required"),
-});
+const pdfFormKeys = [
+  PARENTING_GUIDE_FORM_KEY,
+  LESSON_PLAN_FORM_KEY,
+  ANSWER_KEY_FORM_KEY,
+];
 
 export type BuildFileType = "data" | "framework" | "loader" | "code";
 export const buildFileTypes = Object.freeze({
@@ -137,18 +136,15 @@ function CreateGame() {
   const [frameworkFile, setFrameworkFile] = useState<null | File>(null);
 
   const [imagePreviewFile, setImagePreviewFile] = useState<null | File>(null);
-  const [fileValidationError, setFileValidationError] = useState<
-    string | undefined
-  >(undefined);
-
-  const lessonRef = useRef<HTMLInputElement>(null);
-  const parentingGuideRef = useRef<HTMLInputElement>(null);
-  const answerKeyRef = useRef<HTMLInputElement>(null);
-
-  const [selectedPdfInputs, setSelectedPdfInputs] = useState({
-    parentingGuide: false,
-    answerKey: false,
-    lesson: false,
+
+  const [validationErrors, setValidationErrors] = useState<
+    Record<string, string | undefined>
+  >({
+    name: undefined,
+    image: undefined,
+    videoTrailer: undefined,
+    description: undefined,
+    builds: undefined,
   });
 
   const [uploadGameComponents, setUploadGameComponents] = useState<
@@ -171,6 +167,31 @@ function CreateGame() {
     />,
   ]);
 
+  const { mutateAsync: getDirectUpload } = useMutation({
+    mutationFn: (file: File) => fetch("/api/file").then((res) => res.json()),
+  });
+
+  const addUploadComponent = () => {
+    setUploadGameComponents((prevComponents) => [
+      ...prevComponents,
+      <UploadGameBuild
+        key={prevComponents.length}
+        builds={builds}
+        uploadedWebGL={uploadedWebGL}
+        setUploadedWebGL={setUploadedWebGL}
+        setBuilds={setBuilds}
+        loaderFile={loaderFile}
+        setLoaderFile={setLoaderFile}
+        dataFile={dataFile}
+        setDataFile={setDataFile}
+        codeFile={codeFile}
+        setCodeFile={setCodeFile}
+        frameworkFile={frameworkFile}
+        setFrameworkFile={setFrameworkFile}
+      />,
+    ]);
+  };
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -195,33 +216,7 @@ function CreateGame() {
     fetchData();
   }, []);
 
-  const { mutateAsync: getDirectUpload } = useMutation({
-    mutationFn: (file: File) => fetch("/api/file").then((res) => res.json()),
-  });
-
-  const [validationErrors, setValidationErrors] = useState<
-    Record<keyof z.input<typeof createGameSchema>, string | undefined>
-  >({
-    name: undefined,
-    image: undefined,
-    videoTrailer: undefined,
-    description: undefined,
-  });
-
   async function createGame(data: IGame) {
-    // check video trailer is youtube or vimeo
-    if (data.videoTrailer && data.videoTrailer !== "") {
-      if (
-        !youtubeREGEX.test(data.videoTrailer) &&
-        !vimeoREGEX.test(data.videoTrailer)
-      ) {
-        setValidationErrors((prevValidationErrors) => ({
-          ...prevValidationErrors,
-          videoTrailer: "Invalid URL (Only Youtube and Vimeo videos supported)",
-        }));
-        return;
-      }
-    }
     try {
       const response = await fetch(`/api/games`, {
         method: "POST",
@@ -246,67 +241,7 @@ function CreateGame() {
     }
   }
 
-  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-    setSubmitting(true);
-    if (uploadedWebGL) {
-      if (
-        loaderFile === null ||
-        dataFile === null ||
-        codeFile === null ||
-        frameworkFile === null
-      ) {
-        setFileValidationError(
-          "All files must be uploaded for the WebGL Build.",
-        );
-        setSubmitting(false);
-        return;
-      } else {
-        setFileValidationError(undefined);
-      }
-    }
-    if (imagePreviewFile) {
-      if (
-        imagePreviewFile.type !== "image/png" &&
-        imagePreviewFile.type !== "image/jpg" &&
-        imagePreviewFile.type !== "image/jpeg"
-      ) {
-        setValidationErrors((prevValidationErrors) => ({
-          ...prevValidationErrors,
-          image: "Invalid Image: Only PNG, JPG, or JPEG permitted.",
-        }));
-        return;
-      }
-      const img = new Image();
-      img.src = URL.createObjectURL(imagePreviewFile);
-      img.onload = () => {
-        const naturalWidth = img.naturalWidth;
-        const naturalHeight = img.naturalHeight;
-        URL.revokeObjectURL(img.src);
-        if (naturalWidth !== 630 || naturalHeight !== 500) {
-          setValidationErrors((prevValidationErrors) => ({
-            ...prevValidationErrors,
-            image: "Image must have dimensions 630x500 pixels.",
-          }));
-          return;
-        }
-      };
-      img.onerror = () => {
-        setValidationErrors((prevValidationErrors) => ({
-          ...prevValidationErrors,
-          image: "Image failed to load",
-        }));
-        return;
-      };
-    }
-    const formData = new FormData(e.currentTarget);
-
-    const pdfFormKeys = [
-      PARENTING_GUIDE_FORM_KEY,
-      LESSON_PLAN_FORM_KEY,
-      ANSWER_KEY_FORM_KEY,
-    ];
-
+  async function uploadPDFs(formData: FormData) {
     const nonNullPdfInputs: Record<string, File> = pdfFormKeys.reduce(
       (acc, cur) => {
         const value = formData.get(cur) as File;
@@ -350,6 +285,93 @@ function CreateGame() {
       {},
     );
 
+    return fieldStoredUrls;
+  }
+
+  function validateVideoTrailer(link: string) {
+    if (link && link !== "") {
+      if (!youtubeREGEX.test(link) && !vimeoREGEX.test(link)) {
+        setValidationErrors((prevValidationErrors) => ({
+          ...prevValidationErrors,
+          videoTrailer: "Invalid URL (Only Youtube and Vimeo videos supported)",
+        }));
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function validateImage() {
+    if (imagePreviewFile) {
+      if (
+        imagePreviewFile.type !== "image/png" &&
+        imagePreviewFile.type !== "image/jpg" &&
+        imagePreviewFile.type !== "image/jpeg"
+      ) {
+        setValidationErrors((prevValidationErrors) => ({
+          ...prevValidationErrors,
+          image: "Invalid Image: Only PNG, JPG, or JPEG permitted.",
+        }));
+        return false;
+      }
+      const img = new Image();
+      img.src = URL.createObjectURL(imagePreviewFile);
+      img.onload = () => {
+        const naturalWidth = img.naturalWidth;
+        const naturalHeight = img.naturalHeight;
+        URL.revokeObjectURL(img.src);
+        if (naturalWidth !== 630 || naturalHeight !== 500) {
+          setValidationErrors((prevValidationErrors) => ({
+            ...prevValidationErrors,
+            image: "Image must have dimensions 630x500 pixels.",
+          }));
+          return false;
+        }
+      };
+      img.onerror = () => {
+        setValidationErrors((prevValidationErrors) => ({
+          ...prevValidationErrors,
+          image: "Image failed to load",
+        }));
+        return false;
+      };
+    }
+    return true;
+  }
+
+  function validateBuilds() {
+    if (uploadedWebGL) {
+      if (
+        loaderFile === null ||
+        dataFile === null ||
+        codeFile === null ||
+        frameworkFile === null
+      ) {
+        setValidationErrors((prevValidationErrors) => ({
+          ...prevValidationErrors,
+          builds: "All files must be uploaded for the WebGL Build.",
+        }));
+        return false;
+      }
+    } else {
+      if (builds.length === 0) {
+        setValidationErrors((prevValidationErrors) => ({
+          ...prevValidationErrors,
+          builds: "Please add at least one Game Build.",
+        }));
+      }
+    }
+    return true;
+  }
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSubmitting(true);
+
+    const formData = new FormData(e.currentTarget);
+
+    const PDFUrls = await uploadPDFs(formData);
+
     const input = {
       name: formData.get(NAME_FORM_KEY),
       videoTrailer: formData.get(TRAILER_FORM_KEY),
@@ -361,26 +383,29 @@ function CreateGame() {
         (tag) => tag._id,
       ),
       preview: true,
-      ...fieldStoredUrls,
+      ...PDFUrls,
     };
     const parse = gameSchema.safeParse(input);
 
+    const validImage = validateImage();
+    const validVideo = validateVideoTrailer(
+      formData.get(TRAILER_FORM_KEY) as string,
+    );
+    const validBuilds = validateBuilds();
+
+    if (!validImage || !validVideo || !validBuilds) {
+      setSubmitting(false);
+      return;
+    }
+
     if (parse.success) {
       setValidationErrors({
         name: undefined,
         image: undefined,
         videoTrailer: undefined,
         description: undefined,
+        builds: undefined,
       });
-      if (fileValidationError !== undefined) return;
-      if (
-        (!parse.data.builds || parse.data?.builds.length == 0) &&
-        !uploadedWebGL
-      ) {
-        alert("Please add at least one Game Build.");
-        setSubmitting(false);
-        return;
-      }
 
       try {
         const response = await createGame(parse.data);
@@ -406,31 +431,11 @@ function CreateGame() {
         image: errors.image?.at(0),
         videoTrailer: errors.videoTrailer?.at(0),
         description: errors.description?.at(0),
+        builds: errors.builds?.at(0),
       });
     }
   }
 
-  const addUploadComponent = () => {
-    setUploadGameComponents((prevComponents) => [
-      ...prevComponents,
-      <UploadGameBuild
-        key={prevComponents.length}
-        builds={builds}
-        uploadedWebGL={uploadedWebGL}
-        setUploadedWebGL={setUploadedWebGL}
-        setBuilds={setBuilds}
-        loaderFile={loaderFile}
-        setLoaderFile={setLoaderFile}
-        dataFile={dataFile}
-        setDataFile={setDataFile}
-        codeFile={codeFile}
-        setCodeFile={setCodeFile}
-        frameworkFile={frameworkFile}
-        setFrameworkFile={setFrameworkFile}
-      />,
-    ]);
-  };
-
   const [submitting, setSubmitting] = useState<boolean>(false);
 
   const handleWebGLSubmit = async (gameId: string): Promise<boolean> => {
@@ -440,10 +445,12 @@ function CreateGame() {
       codeFile === null ||
       frameworkFile === null
     ) {
-      setFileValidationError("All files must be uploaded for the WebGL Build!");
+      setValidationErrors((prevValidationErrors) => ({
+        ...prevValidationErrors,
+        builds: "All files must be uploaded for the WebGL Build.",
+      }));
       return false;
     }
-    setFileValidationError(undefined);
 
     const files = new Map([
       ["loader", loaderFile],
@@ -455,12 +462,13 @@ function CreateGame() {
     try {
       await uploadBuildFiles(gameId, files);
       setSubmitting(false);
-
-      alert("Files uploaded successfully");
       return true;
     } catch (e) {
       console.error(e);
-      setFileValidationError("An internal error occurred. Please try again.");
+      setValidationErrors((prevValidationErrors) => ({
+        ...prevValidationErrors,
+        builds: "An internal error occurred. Please try again.",
+      }));
       return false;
     }
   };
@@ -626,140 +634,7 @@ function CreateGame() {
           />
         </div>
 
-        <div className="relative flex w-fit flex-col gap-3 md:w-2/3">
-          <label className="text-xl font-semibold">Parenting Guide</label>
-          <div className="flex w-fit flex-row items-center justify-start gap-2">
-            <label htmlFor={PARENTING_GUIDE_FORM_KEY}>
-              <div className="flex h-12 w-32 flex-row items-center justify-center gap-3 rounded-md border border-[#666666] bg-[#FAFBFC] text-slate-900 hover:opacity-80">
-                <div>
-                  <Upload size={24} />
-                </div>
-                <p className="text-sm">Upload</p>
-              </div>
-            </label>
-            <input
-              ref={parentingGuideRef}
-              className="block w-fit min-w-0 text-sm file:hidden"
-              id={PARENTING_GUIDE_FORM_KEY}
-              name={PARENTING_GUIDE_FORM_KEY}
-              type="file"
-              accept=".pdf"
-              onChange={(e) => {
-                const files = e.currentTarget.files;
-                setSelectedPdfInputs({
-                  ...selectedPdfInputs,
-                  parentingGuide: !!files,
-                });
-              }}
-            />
-            <X
-              className={
-                selectedPdfInputs.parentingGuide
-                  ? "block text-orange-primary hover:cursor-pointer"
-                  : "hidden"
-              }
-              onClick={() => {
-                if (!parentingGuideRef.current) return;
-                parentingGuideRef.current.value = "";
-
-                setSelectedPdfInputs({
-                  ...selectedPdfInputs,
-                  parentingGuide: false,
-                });
-              }}
-            />
-          </div>
-        </div>
-
-        <div className="relative flex w-full flex-col gap-3 md:w-2/3">
-          <label className="text-xl font-semibold">Lesson Plan</label>
-          <div className="flex w-fit flex-row items-center justify-start gap-2">
-            <label htmlFor={LESSON_PLAN_FORM_KEY}>
-              <div className="flex h-12 w-32 flex-row items-center justify-center gap-3 rounded-md border border-[#666666] bg-[#FAFBFC] text-slate-900 hover:opacity-80">
-                <div>
-                  <Upload size={24} />
-                </div>
-                <p className="text-sm">Upload</p>
-              </div>
-            </label>
-            <input
-              ref={lessonRef}
-              className="block w-fit text-sm file:hidden"
-              id={LESSON_PLAN_FORM_KEY}
-              name={LESSON_PLAN_FORM_KEY}
-              type="file"
-              accept=".pdf"
-              onChange={(e) => {
-                const files = e.currentTarget.files;
-                setSelectedPdfInputs({
-                  ...selectedPdfInputs,
-                  lesson: !!files,
-                });
-              }}
-            />
-            <X
-              className={
-                selectedPdfInputs.lesson
-                  ? "block text-orange-primary hover:cursor-pointer"
-                  : "hidden"
-              }
-              onClick={() => {
-                if (!lessonRef.current) return;
-                lessonRef.current.value = "";
-
-                setSelectedPdfInputs({
-                  ...selectedPdfInputs,
-                  lesson: false,
-                });
-              }}
-            />
-          </div>
-        </div>
-
-        <div className="relative flex w-full flex-col gap-3 md:w-2/3">
-          <label className="text-xl font-semibold">Answer Key</label>
-          <div className="flex w-fit flex-row items-center justify-start gap-2">
-            <label htmlFor={ANSWER_KEY_FORM_KEY}>
-              <div className="flex h-12 w-32 flex-row items-center justify-center gap-3 rounded-md border border-[#666666] bg-[#FAFBFC] text-slate-900 hover:opacity-80">
-                <div>
-                  <Upload size={24} />
-                </div>
-                <p className="text-sm">Upload</p>
-              </div>
-            </label>
-            <input
-              ref={answerKeyRef}
-              className="block w-fit text-sm file:hidden"
-              id={ANSWER_KEY_FORM_KEY}
-              name={ANSWER_KEY_FORM_KEY}
-              type="file"
-              accept=".pdf"
-              onChange={(e) => {
-                const files = e.currentTarget.files;
-                setSelectedPdfInputs({
-                  ...selectedPdfInputs,
-                  answerKey: !!files,
-                });
-              }}
-            />
-            <X
-              className={
-                selectedPdfInputs.answerKey
-                  ? "block text-orange-primary hover:cursor-pointer"
-                  : "hidden"
-              }
-              onClick={() => {
-                if (!answerKeyRef.current) return;
-                answerKeyRef.current.value = "";
-
-                setSelectedPdfInputs({
-                  ...selectedPdfInputs,
-                  answerKey: false,
-                });
-              }}
-            />
-          </div>
-        </div>
+        <UploadPDF pdfFormKeys={pdfFormKeys} />
 
         <div className="relative flex w-full flex-col gap-3">
           <label className="text-xl font-semibold">Theme(s)</label>
@@ -797,22 +672,14 @@ function CreateGame() {
             <div className="flex h-14 w-full items-center gap-2 rounded-sm bg-red-100 px-4 py-6 text-sm text-red-500">
               <AlertTriangleIcon className="h-5 w-5" />
               <p>
-                {validationErrors.name
-                  ? validationErrors.name
-                  : validationErrors.videoTrailer
-                    ? validationErrors.videoTrailer
-                    : validationErrors.image
-                      ? validationErrors.image
-                      : "All required fields need to be filled."}
+                {validationErrors.name ||
+                  validationErrors.image ||
+                  validationErrors.builds ||
+                  validationErrors.videoTrailer ||
+                  validationErrors.description}
               </p>
             </div>
           )}
-          {fileValidationError && (
-            <div className="flex h-14 w-full items-center gap-2 rounded-sm bg-red-100 px-4 py-6 text-sm text-red-500">
-              <AlertTriangleIcon className="h-5 w-5" />
-              <p>{fileValidationError}</p>
-            </div>
-          )}
           <div className="relative flex justify-end">
             <Button
               type="submit"