From 089e04dadf16ba9772e2163122f4480a675affc0 Mon Sep 17 00:00:00 2001 From: Matt Rice Date: Sun, 4 Feb 2024 14:23:41 -0500 Subject: [PATCH] removed unnecessary consolelogs and fixed overflowing QR code --- src/MiniGame1.tsx | 133 ++++++++++++++++------------ src/components/QRCode.tsx | 48 ++++++---- src/components/RelatedWords.tsx | 1 - src/components/WordItem.tsx | 5 -- src/contexts/GatherWordsContext.tsx | 15 +--- src/routes/HostGame.tsx | 4 +- src/routes/PlayGame.tsx | 12 ++- 7 files changed, 113 insertions(+), 105 deletions(-) diff --git a/src/MiniGame1.tsx b/src/MiniGame1.tsx index d4eb1c6..f4f72f9 100644 --- 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(null) + const canvasRef = useRef(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 ( <> - - - - - - - {ready && } - {/* */} - - - + + + + - - - - - - - - - - - {/* */} - - - - + + + {ready && } + {/* */} + + + + + + + + + + + + + + {/* */} + + + + + ); } diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx index 3992848..27b02ec 100644 --- a/src/components/QRCode.tsx +++ b/src/components/QRCode.tsx @@ -3,8 +3,9 @@ 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", @@ -12,7 +13,7 @@ const qrCode = new QRCodeStyling({ }, imageOptions: { crossOrigin: "anonymous", - margin: 20, + margin: 5, }, }); @@ -21,20 +22,30 @@ interface Props { } export default function QRCode({ url }: Props) { const ref = useRef(null); + const ref2 = useRef(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) {
- -
+
+
+
); } diff --git a/src/components/RelatedWords.tsx b/src/components/RelatedWords.tsx index 57bfe29..afdecb0 100644 --- 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 index 949fe89..63b3016 100644 --- 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 index 6133e78..13639d1 100644 --- a/src/contexts/GatherWordsContext.tsx +++ b/src/contexts/GatherWordsContext.tsx @@ -41,10 +41,6 @@ export const GatherWordsProvider = ({ children }: Props) => { const [contextWords, setContextWords] = useState([]); 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 index ef5ce37..37cb782 100644 --- a/src/routes/HostGame.tsx +++ b/src/routes/HostGame.tsx @@ -90,7 +90,7 @@ const HostGame = () => { const updateRoomStatus = async (newRoomStatus: string) => { const ref = `rooms/${params.gameId}`; - const roomDoc = await setDoc( + setDoc( doc(db, ref), { status: newRoomStatus, @@ -98,7 +98,6 @@ const HostGame = () => { }, { 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 index 84e4d6a..040bcb1 100644 --- 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, 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 = () => { -