Helen/game loading

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;

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();

src/components/UploadGameBuild.tsx → src/components/GameScreen/UploadGameBuild.tsx

@@ -10,10 +10,9 @@ import {
   SelectGroup,
   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";
@@ -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>

src/components/GameScreen/AddEditWebGLComponent.tsx → src/components/GameScreen/WebGL/AddEditWebGLComponent.tsx

@@ -1,14 +1,14 @@
 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,
   DialogHeader,
   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";

src/components/GameScreen/DeleteWebGLBuild.tsx → 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,

src/components/GameScreen/WebGL/EmbeddedGame.tsx

@@ -0,0 +1,89 @@
+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("0px");
+  const [loadGame, setLoadGame] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(false);
+
+  const updateHeight = () => {
+    const iframe = ref.current;
+    if (!iframe) return;
+
+    const frameHeight = iframe.contentWindow?.document.body.scrollHeight;
+    if (frameHeight) {
+      setHeight(frameHeight + "px");
+    }
+    setIframeLoading(false);
+  };
+
+  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);
+    };
+  }, []);
+
+  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 ? (
+        <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",
+          })}
+        />
+      ) : (
+        <RunGame />
+      )}
+      {iframeLoading && <RunGame />}
+    </div>
+  );
+}

src/components/GameScreen/GameBuildList.tsx → 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;
@@ -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>
               )}