Merge pull request #219 from zstenger93/3dpong

Refactor game end screens and add score display
zstenger93 · Jan 9, 2024 · 6d05499 · 6d05499
2 parents 1e41fbf + 39e1643
commit 6d05499
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 78 deletions.
diff --git a/frontend/src/components/game/EndScreen.js b/frontend/src/components/game/EndScreen.js
@@ -2,7 +2,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
-const EndScreen = ({ Game, backgroundImage, WelcomeButtonStyle, BackButton }) => {
+const EndScreen = ({
+  Game,
+  backgroundImage,
+  WelcomeButtonStyle,
+  BackButton,
+  score,
+}) => {
   const [gameStarted, setGameStarted] = useState(false);
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -27,7 +33,9 @@ const EndScreen = ({ Game, backgroundImage, WelcomeButtonStyle, BackButton }) =>
             className="absolute top-1/2 left-1/2 transform -translate-x-1/2 
                     -translate-y-1/2 text-center font-bold font-nosifer"
           >
-            <p>{t("YOU LOST!")}</p>
+            <p>{t("YOU BOUNCED THE BALL")}</p>
+            <p>{t(score)}</p>
+            <p>{t("TIMES!")}</p>
             <button
               onClick={handleButtonClick}
               className={`mt-10 ${WelcomeButtonStyle}`}

diff --git a/frontend/src/components/game/LoseScreen.js b/frontend/src/components/game/LoseScreen.js
@@ -1,45 +1,50 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
-const LoseScreen = ({ GameCanvas, backgroundImage, WelcomeButtonStyle, BackButton }) => {
-    const [gameStarted, setGameStarted] = useState(false);
-    const { t } = useTranslation();
-    const navigate = useNavigate();
+const LoseScreen = ({
+  GameCanvas,
+  backgroundImage,
+  WelcomeButtonStyle,
+  BackButton,
+}) => {
+  const [gameStarted, setGameStarted] = useState(false);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
-    const handleButtonClick = () => {
-        setGameStarted(true);
-    };
+  const handleButtonClick = () => {
+    setGameStarted(true);
+  };
 
-    return (
-        <div className="flex justify-center items-center h-screen">
-            {gameStarted ? (
-                <GameCanvas />
-            ) : (
-                <div className="relative">
-                    <img
-                        src={backgroundImage}
-                        style={{ width: "80vw", height: "100%", objectFit: "cover" }}
-                        alt="Background"
-                        className="rounded-xl shadow-lg"
-                    />
-                    <div
-                        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 
+  return (
+    <div className="flex justify-center items-center h-screen">
+      {gameStarted ? (
+        <GameCanvas />
+      ) : (
+        <div className="relative">
+          <img
+            src={backgroundImage}
+            style={{ width: "80vw", height: "100%", objectFit: "cover" }}
+            alt="Background"
+            className="rounded-xl shadow-lg"
+          />
+          <div
+            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 
                     -translate-y-1/2 text-center font-bold font-nosifer"
-                    >
-                        <p>{t("YOU LOST!")}</p>
-                        <button
-                            onClick={handleButtonClick}
-                            className={`mt-10 ${WelcomeButtonStyle}`}
-                        >
-                            {t("Play Again")}
-                        </button>
-                    </div>
-                    <BackButton navigate={navigate} t={t} />
-                </div>
-            )}
+          >
+            <p>{t("PLAYER 2 WON!")}</p>
+            <button
+              onClick={handleButtonClick}
+              className={`mt-10 ${WelcomeButtonStyle}`}
+            >
+              {t("Play Again")}
+            </button>
+          </div>
+          <BackButton navigate={navigate} t={t} />
         </div>
-    );
+      )}
+    </div>
+  );
 };
 
-export default LoseScreen;
+export default LoseScreen;
diff --git a/frontend/src/components/game/WinScreen.js b/frontend/src/components/game/WinScreen.js
@@ -1,47 +1,50 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
+const WinScreen = ({
+  GameCanvas,
+  backgroundImage,
+  WelcomeButtonStyle,
+  BackButton,
+}) => {
+  const [gameStarted, setGameStarted] = useState(false);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
 
+  const handleButtonClick = () => {
+    setGameStarted(true);
+  };
 
-const WinScreen = ({GameCanvas, backgroundImage, WelcomeButtonStyle, BackButton }) => {
-    const [gameStarted, setGameStarted] = useState(false);
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-
-    const handleButtonClick = () => {
-        setGameStarted(true);
-    };
-
-    return (
-        <div className="flex justify-center items-center h-screen">
-            {gameStarted ? (
-                <GameCanvas />
-            ) : (
-                <div className="relative">
-                    <img
-                        src={backgroundImage}
-                        style={{ width: "80vw", height: "100%", objectFit: "cover" }}
-                        alt="Background"
-                        className="rounded-xl shadow-lg"
-                    />
-                    <div
-                        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 
+  return (
+    <div className="flex justify-center items-center h-screen">
+      {gameStarted ? (
+        <GameCanvas />
+      ) : (
+        <div className="relative">
+          <img
+            src={backgroundImage}
+            style={{ width: "80vw", height: "100%", objectFit: "cover" }}
+            alt="Background"
+            className="rounded-xl shadow-lg"
+          />
+          <div
+            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 
                     -translate-y-1/2 text-center font-bold font-nosifer"
-                    >
-                        <p>{t("YOU WON!")}</p>
-                        <button
-                            onClick={handleButtonClick}
-                            className={`mt-10 ${WelcomeButtonStyle}`}
-                        >
-                            {t("Play Again")}
-                        </button>
-                    </div>
-                    <BackButton navigate={navigate} t={t} />
-                </div>
-            )}
+          >
+            <p>{t("PLAYER 1 WON!")}</p>
+            <button
+              onClick={handleButtonClick}
+              className={`mt-10 ${WelcomeButtonStyle}`}
+            >
+              {t("Play Again")}
+            </button>
+          </div>
+          <BackButton navigate={navigate} t={t} />
         </div>
-    );
+      )}
+    </div>
+  );
 };
 
-export default WinScreen;
+export default WinScreen;
diff --git a/frontend/src/pages/Games/Pong3D.js b/frontend/src/pages/Games/Pong3D.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import * as THREE from "three";
 import world from "../../images/game/world.jpg";
 import mercury from "../../images/game/mercury.png";
@@ -29,7 +29,7 @@ function Pong3D() {
     reflectivity: 1,
   });
   const [gameOver, setGameOver] = React.useState(false);
-
+  const [returnCounter, setBounceCounter] = useState(0);
 
   const asteroidGeometry = new THREE.SphereGeometry(1, 32, 32);
   const asteroids = [];
@@ -437,6 +437,7 @@ function Pong3D() {
             if (orbits.length === 0) {
               if (orbits.length === 0) {
                 setGameOver(true);
+                setBounceCounter(bounceCounter);
               }
             }
             if (orbits.length > 0) {
@@ -543,6 +544,7 @@ function Pong3D() {
           backgroundImage={backgroundImage}
           WelcomeButtonStyle={WelcomeButtonStyle}
           BackButton={BackButton}
+          score={returnCounter}
         />
       ) : (
         <>