Merge pull request #312 from zstenger93/tournoment

Added Basic Layout For Tournament
zstenger93 · Apr 14, 2024 · e97673c · e97673c
2 parents 666202f + 2a96313
commit e97673c
Show file tree

Hide file tree

Showing 10 changed files with 1,361 additions and 52 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -177,12 +177,7 @@ function App() {
             path="tournament"
             element={
               <PageWrapper image={Background} redirectUri={REDIRECT_URI}>
-                <StartScreen
-                  Game={Tournament}
-                  backgroundImage={backgroundimage}
-                  WelcomeButtonStyle={WelcomeButtonStyle}
-                  BackButton={BackButton}
-                />
+                <Tournament />
               </PageWrapper>
             }
           />

diff --git a/frontend/src/images/tournament/baby.png b/frontend/src/images/tournament/baby.png
diff --git a/frontend/src/images/tournament/balanced.png b/frontend/src/images/tournament/balanced.png
diff --git a/frontend/src/images/tournament/eliminate.png b/frontend/src/images/tournament/eliminate.png
diff --git a/frontend/src/images/tournament/insane.png b/frontend/src/images/tournament/insane.png
diff --git a/frontend/src/images/tournament/player.png b/frontend/src/images/tournament/player.png
diff --git a/frontend/src/images/tournament/pong.jpg b/frontend/src/images/tournament/pong.jpg
diff --git a/frontend/src/pages/Games/Pong3D.js b/frontend/src/pages/Games/Pong3D.js
@@ -28,8 +28,8 @@ function Pong3D() {
     map: textureLoader.load(venus),
     reflectivity: 1,
   });
-  const [gameOver, setGameOver] = React.useState(false);
-  const [returnCounter, setBounceCounter] = useState(0);
+  const [gameOver] = React.useState(false);
+  const [returnCounter] = useState(0);
 
   const asteroidGeometry = new THREE.SphereGeometry(1, 32, 32);
   const asteroids = [];
@@ -44,7 +44,7 @@ function Pong3D() {
   let leftPaddlePosition = 0;
   let bounceCounter = 0;
   let isCodeExecuted = false;
-  let lifes = 7;
+  var lifes = 7;
 
   class Asteroid {
     constructor(x, y, radius, currentWayPoint, scene) {
@@ -402,11 +402,11 @@ function Pong3D() {
         if (leftPaddleBoundingBox.intersectsBox(ballBoundingBox)) {
           // eslint-disable-next-line react-hooks/exhaustive-deps
           if (!isCodeExecuted) {
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             bounceCounter = bounceCounter + 1;
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             ballSpeed += 0.02;
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             leftPaddleSpeedConst += 0.005;
             bounceContext.clearRect(
               0,
@@ -416,7 +416,7 @@ function Pong3D() {
             );
             bounceContext.fillText("BOUNCE COUNT: " + bounceCounter, 6, 24);
             bounceMaterialTexture.needsUpdate = true;
-			// eslint-disable-next-line react-hooks/exhaustive-deps
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             isCodeExecuted = true;
           } else {
             isCodeExecuted = false;
@@ -435,22 +435,23 @@ function Pong3D() {
             ball.position.x = 0;
             ball.position.y = 0;
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            lifes = orbits.length - 1;
-            if (orbits.length === 0) {
-              if (orbits.length === 0) {
-                setGameOver(true);
-                setBounceCounter(bounceCounter);
-                ballSpeed = 0;
-              }
-            }
-            if (orbits.length > 0) {
-              scene.remove(orbits[orbits.length - 1]);
-              orbits.pop();
-              ball.material = planetMaterials[lifes];
-              ball.material.needsUpdate = true;
-              ballSpeed = 0.3;
-              leftPaddleSpeedConst = 0.5;
-            }
+            // lifes = orbits.length - 1;
+            // if (orbits.length === 0) {
+            //   // setGameOver(true);
+            //   setBounceCounter(bounceCounter);
+            //   ballSpeed = 0;
+            // }
+            // if (orbits.length > 0) {
+            //   scene.remove(orbits[orbits.length - 1]);
+            //   orbits.pop();
+
+            ball.material =
+              planetMaterials[Math.floor(Math.random() * (lifes + 1))];
+            ball.material.needsUpdate = true;
+            //   ballSpeed = 0.3;
+            //   leftPaddleSpeedConst = 0.5;
+            // }
+
             pointLight.intensity += 50;
             pointLight.distance += 10;
           } else ballDirection.y *= -1;
@@ -531,7 +532,7 @@ function Pong3D() {
       if (isSKeyPressed) {
         leftPaddlePosition -= leftPaddleSpeedConst;
       }
-	  // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       leftPaddlePosition = Math.max(
         -wallOffsetY + paddleHeight / 2 + wallThickness / 2,
         Math.min(

diff --git a/frontend/src/pages/Games/PongAi.js b/frontend/src/pages/Games/PongAi.js
@@ -281,7 +281,7 @@ const GameCanvas = (aiDifficulty) => {
       if (canvasRef.current && event.touches.length > 0) {
         const rect = canvasRef.current.getBoundingClientRect();
         const touchY = event.touches[0].clientY - rect.top - window.scrollY;
-		// eslint-disable-next-line react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         leftPaddleY = touchY - paddleHeight / 2;
         leftPaddleY = Math.max(
           0,
@@ -395,19 +395,36 @@ const PongAi = () => {
             <button onClick={handleButtonClick} className={WelcomeButtonStyle}>
               {t("Start Game")}
             </button>
-            <div className="relative">Level: {difficulty}</div>
-            <div style={{ display: "flex", justifyContent: "center" }}>
-              <input
-                type="range"
-                min="0"
-                max="3"
-                value={difficulty}
-                onChange={(e) => setGameDifficulty(parseInt(e.target.value))}
-                style={{
-                  width: "150px",
-                  height: "25px",
-                }}
-              />
+            <div
+              style={{
+                textAlign: "center",
+                marginBottom: "20px",
+                alignItems: "center",
+                justifyContent: "center",
+                marginLeft: "-16px",
+              }}
+            >
+              <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                Level: {difficulty}
+              </div>
+              <div style={{ display: "flex" }}>
+                <input
+                  type="range"
+                  min="0"
+                  max="3"
+                  value={difficulty}
+                  onChange={(e) => setGameDifficulty(parseInt(e.target.value))}
+                  style={{
+                    fontSize: "30px",
+                    width: "200px",
+                    height: "25px",
+                    border: "none",
+                    borderRadius: "5px",
+                    outline: "none",
+                    backgroundColor: "#444",
+                  }}
+                />
+              </div>
             </div>
           </div>
           <BackButton navigate={navigate} t={t} />