removed unnecessary consolelogs and fixed overflowing QR code

Rice-Tech · Feb 4, 2024 · 089e04d · 089e04d
1 parent 85f0a63
commit 089e04d
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 105 deletions.
diff --git a/src/MiniGame1.tsx b/src/MiniGame1.tsx
@@ -1,8 +1,8 @@
 import { Plane, useTexture } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { EffectComposer, N8AO, ToneMapping } from "@react-three/postprocessing";
-import { Physics, RapierRigidBody, RigidBody } from "@react-three/rapier";
-import { useRef, useState } from "react";
+import { Physics, RigidBody } from "@react-three/rapier";
+import { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import { proxy } from "valtio";
 import officeLoop from "./resources/office game loop 1.mp3";
@@ -91,77 +91,92 @@ interface Props {
 }
 export default function MiniGame1({ ready }: Props) {
   const [musicStarted, setMusicStarted] = useState(false);
-  const ballRef = useRef<RapierRigidBody>(null)
+  const canvasRef = useRef<HTMLDivElement>(null);
   const startAudio = async () => {
     try {
       if (!musicStarted) {
         officeBackground.loop = true;
         await officeBackground.play();
-        console.log("aw yeah!!!");
         setMusicStarted(true);
       }
-    } catch {
-      console.log("Let me play music!!!");
-    }
+    } catch {}
   };
 
   startAudio();
 
+  useEffect(() => {
+    if (!canvasRef.current) {
+      console.log("No Div to make fullscreen");
+      return;
+    }
+
+    console.log(canvasRef.current.requestFullscreen());
+  }, [canvasRef]);
   return (
     <>
-      <Canvas
-        style={{ width: "100%", height: "100vh" }}
-        shadows
-        dpr={[1, 1.5]}
-        gl={{ antialias: false }}
-        camera={{ position: [0, 5, 12], fov: 45 }}
-      >
-        <color attach="background" args={["#f0f0f0"]} />
-        <ambientLight intensity={0.5 * Math.PI} />
-        <spotLight
-          decay={0}
-          position={[-10, 15, -5]}
-          angle={1}
-          penumbra={1}
-          intensity={2}
-          castShadow
-          shadow-mapSize={1024}
-          shadow-bias={-0.0001}
-        />
-
-        <Physics gravity={[0, -20, 10]} timeStep="vary">
-          {ready && <Ball ref={ballRef} position={[0, 5, 0]} />}
-          {/* <OfficeScene scale={[6, 6, 6]} position={[5, -5, 20]} /> */}
-          <OfficeSceneWithPeople scale={[6, 6, 6]} position={[5, -5, 20]} />
-          <WordItem
-            color="orange"
-            position={new THREE.Vector3(2.75, 1.5, 0)}
-            words={words}
-            boxId={1}
-            posScale={5}
-          />
-          <WordItem
-            color="hotpink"
-            position={new THREE.Vector3(-2.75, 3.5, 0)}
-            words={words}
-            boxId={2}
-            posScale={-2}
+      <div ref={canvasRef}>
+        <Canvas
+          style={{ width: "100%", height: "100vh" }}
+          shadows
+          dpr={[1, 1.5]}
+          gl={{ antialias: false }}
+          camera={{ position: [0, 5, 12], fov: 45 }}
+        >
+          <color attach="background" args={["#f0f0f0"]} />
+          <ambientLight intensity={0.5 * Math.PI} />
+          <spotLight
+            decay={0}
+            position={[-10, 15, -5]}
+            angle={1}
+            penumbra={1}
+            intensity={2}
+            castShadow
+            shadow-mapSize={1024}
+            shadow-bias={-0.0001}
           />
-          <Paddle />
-          <RigidBody type="fixed">
-            <Plane position={[0, -5.1, 0]} scale={100} rotation={[-Math.PI / 2, 0, 0]} />
-          </RigidBody>
-          <RigidBody type="fixed">
-            <Plane position={[0, 10, 0]} scale={100} rotation={[Math.PI / 2, 0, 0]} />
-          </RigidBody>
-        </Physics>
-        <EffectComposer disableNormalPass>
-          <N8AO aoRadius={0.5} intensity={2} />
-          {/* <TiltShift2 blur={0.2} /> */}
-          <ToneMapping />
-        </EffectComposer>
-        <Bg />
-      </Canvas>
+
+          <Physics gravity={[0, -20, 10]} timeStep="vary">
+            {ready && <Ball position={[0, 5, 0]} />}
+            {/* <OfficeScene scale={[6, 6, 6]} position={[5, -5, 20]} /> */}
+            <OfficeSceneWithPeople scale={[6, 6, 6]} position={[5, -5, 20]} />
+            <WordItem
+              color="orange"
+              position={new THREE.Vector3(2.75, 1.5, 0)}
+              words={words}
+              boxId={1}
+              posScale={5}
+            />
+            <WordItem
+              color="hotpink"
+              position={new THREE.Vector3(-2.75, 3.5, 0)}
+              words={words}
+              boxId={2}
+              posScale={-2}
+            />
+            <Paddle />
+            <RigidBody type="fixed">
+              <Plane
+                position={[0, -5.1, 0]}
+                scale={100}
+                rotation={[-Math.PI / 2, 0, 0]}
+              />
+            </RigidBody>
+            <RigidBody type="fixed">
+              <Plane
+                position={[0, 10, 0]}
+                scale={100}
+                rotation={[Math.PI / 2, 0, 0]}
+              />
+            </RigidBody>
+          </Physics>
+          <EffectComposer disableNormalPass>
+            <N8AO aoRadius={0.5} intensity={2} />
+            {/* <TiltShift2 blur={0.2} /> */}
+            <ToneMapping />
+          </EffectComposer>
+          <Bg />
+        </Canvas>
+      </div>
     </>
   );
 }

diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx
@@ -3,16 +3,17 @@ import QRCodeStyling from "qr-code-styling";
 import { Button } from "./ui/button";
 
 const qrCode = new QRCodeStyling({
-  width: 300,
-  height: 300,
+  width: 500,
+  height: 500,
+  type: "svg",
   image: "../Logo.svg",
   dotsOptions: {
     color: "#slate",
     type: "rounded",
   },
   imageOptions: {
     crossOrigin: "anonymous",
-    margin: 20,
+    margin: 5,
   },
 });
 
@@ -21,20 +22,30 @@ interface Props {
 }
 export default function QRCode({ url }: Props) {
   const ref = useRef<HTMLDivElement>(null);
+  const ref2 = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    qrCode.append(ref.current);
-    const codeCanvas = ref.current.querySelector("canvas");
-    if (!codeCanvas) {
-      console.log("No Canvas");
-      return;
-    }
-    codeCanvas.setAttribute("width", "");
-    codeCanvas.setAttribute("height", "");
-    codeCanvas.setAttribute("class", "w-full");
+    const createQR = () => {
+      if (!ref.current) {
+        return;
+      }
+      qrCode.append(ref.current);
+      setTimeout(() => appendQR(), 100);
+    };
+    const appendQR = () => {
+      if (!ref.current) {
+        return;
+      }
+      const qrCodeSVG = ref.current.querySelector("svg");
+
+      if (qrCodeSVG) {
+        qrCodeSVG.setAttribute("viewBox", "0 0 500 500");
+        qrCodeSVG.setAttribute("width", "100%");
+        qrCodeSVG.setAttribute("height", "100%");
+      }
+    };
+
+    createQR();
   }, []);
 
   useEffect(() => {
@@ -47,11 +58,12 @@ export default function QRCode({ url }: Props) {
     <div className="m-auto flex-col justify-around">
       <Button className=" m-auto">
         <a className=" min-w-0" target="_blank" href={url}>
-          {url}
+          Click to play
         </a>
       </Button>
-
-      <div className=" flex justify-around w-full" ref={ref} />
+      <div className=" max-w-80 svgParent" ref={ref2}>
+        <div className=" flex justify-around w-full svgDump " ref={ref} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/RelatedWords.tsx b/src/components/RelatedWords.tsx
@@ -64,7 +64,6 @@ const RelatedWords = () => {
       const fetchRequest = `https://api.datamuse.com/words?${
         firstLetters ? "sp=" + firstLetters + "*" : ""
       }&${dmOption}=${topicWord}&max=20&md=p`;
-      console.log(fetchRequest);
       const response = await fetch(fetchRequest);
       if (!response.ok) {
         throw new Error("Failed to fetch data");

diff --git a/src/components/WordItem.tsx b/src/components/WordItem.tsx
@@ -74,9 +74,6 @@ export function WordItem({ position, color, boxId }: WordItemProps) {
         ]);
       }
       setWordIndex((wordIndex + 1) % words.length);
-      console.log("Ball");
-    } else {
-      console.log("Something else");
     }
   };
 
@@ -95,8 +92,6 @@ export function WordItem({ position, color, boxId }: WordItemProps) {
     }
     const pos = wordRB.translation() as THREE.Vector3;
     if (!frustum.containsPoint(pos)) {
-      console.log("Out of view");
-
       const reset = () => {
         wordRB.setLinvel(new THREE.Vector3(0, 0, 0), true);
         wordRB.setAngvel(new THREE.Vector3(0, 0, 0), true);

diff --git a/src/contexts/GatherWordsContext.tsx b/src/contexts/GatherWordsContext.tsx
@@ -41,10 +41,6 @@ export const GatherWordsProvider = ({ children }: Props) => {
   const [contextWords, setContextWords] = useState<WordInput[]>([]);
   const { currentUser } = useAuth();
   const params = useParams();
-  useEffect(() => {
-    console.log("contextWords changed");
-    console.table(contextWords);
-  }, [contextWords]);
   useEffect(() => {
     if (!currentUser) {
       console.log(
@@ -55,7 +51,7 @@ export const GatherWordsProvider = ({ children }: Props) => {
     const uid = currentUser.uid;
     const joinRoom = () => {
       const ref = `rooms/${params.gameId}/users/${uid}`;
-      console.log(ref);
+
       setDoc(doc(db, ref), {
         uid: uid,
         timeJoined: new Date().getTime(),
@@ -78,13 +74,8 @@ export const GatherWordsProvider = ({ children }: Props) => {
             user: data.user,
           });
         });
-        console.log("ContextWOrds");
-        console.table(contextWords);
-        setContextWords((prev) => {
-          console.log(prev);
-          console.log(wordSnaps);
-          return wordSnaps;
-        });
+
+        setContextWords(wordSnaps);
       });
 
       return unsubscribe;

diff --git a/src/routes/HostGame.tsx b/src/routes/HostGame.tsx
@@ -90,15 +90,14 @@ const HostGame = () => {
 
     const updateRoomStatus = async (newRoomStatus: string) => {
       const ref = `rooms/${params.gameId}`;
-      const roomDoc = await setDoc(
+      setDoc(
         doc(db, ref),
         {
           status: newRoomStatus,
           storyTemplate: madlib[1].template,
         },
         { merge: true }
       );
-      console.log(roomDoc);
     };
 
     updateRoomStatus("play");
@@ -111,7 +110,6 @@ const HostGame = () => {
     const ref = `rooms/${params.gameId}/words`;
     newWordsList.forEach((wordInput, index) => {
       const assignedUser = users[index % users.length];
-      console.log(wordInput.word, index)
       addDoc(collection(db, ref), {
         word: wordInput.word,
         partOfSpeech: wordInput.partOfSpeech,

diff --git a/src/routes/PlayGame.tsx b/src/routes/PlayGame.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { setDoc, doc } from "firebase/firestore";
 import { db } from "../firebase";
@@ -18,17 +18,12 @@ const PlayGame = () => {
   const params = useParams();
   const [status, setStatus] = useState("collectwords");
   const { contextWords, setContextWords } = useGatherWords();
-  useEffect(() => {
-    console.log("contextWords changed");
-    console.table(contextWords);
-  }, [contextWords]);
 
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement>,
     index: number
   ) => {
     const newWordInputs = [...contextWords];
-    console.log("newWordsInputs: " + newWordInputs);
     newWordInputs.filter((item) => {
       return item.index == index;
     })[0].word = e.target.value;
@@ -67,7 +62,10 @@ const PlayGame = () => {
       </Card>
       <MiniGame1 ready={true}></MiniGame1>
 
-      <Button className=" right-2 top-4 fixed onTop" onClick={handleSubmitWords}>
+      <Button
+        className=" right-2 top-4 fixed onTop"
+        onClick={handleSubmitWords}
+      >
         {status == "submitted" ? "Resubmit" : "Submit words"}
       </Button>
     </div>