Skip to content

Commit

Permalink
Merge pull request #214 from zstenger93/pongai
Browse files Browse the repository at this point in the history 
Pongai
  • Loading branch information
@zstenger93
zstenger93 authored Jan 8, 2024
2 parents a8a3868 + 983bda0 commit b9b21d0
Showing 1 changed file with 63 additions and 174 deletions.
237 changes: 63 additions & 174 deletions frontend/src/pages/Games/PongAi.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import React, { useEffect, useRef, useState } from "react";
import backgroundImage from "../../images/pongbg.png";
import {
goFullScreen,
exitFullScreen,
} from "../../components/buttons/FullScreen";
import { AiOutlineFullscreenExit } from "react-icons/ai";
import { BsArrowsFullscreen } from "react-icons/bs";
import { useLocation, useNavigate } from "react-router-dom";
import BackButton from "../../components/buttons/BackButton";
import { useTranslation } from "react-i18next";
import { WelcomeButtonStyle } from "../../components/buttons/ButtonStyle";
import LoseScreen from "../../components/game/LoseScreen";
import WinScreen from "../../components/game/WinScreen";
import FullScreenButton from "../../components/buttons/FullScreen";
import handleResize from "../../components/game/HandleResize";

const GameCanvas = () => {
// Default Parameters
Expand Down Expand Up @@ -51,6 +49,7 @@ const GameCanvas = () => {
const y = 0;
ctx.fillRect(x, y, stripeWidth, stripeHeight);
};

// This is bloody AI
const ArtificialInteligence = (ctx, canvas) => {
const aiSpeed = 440;
Expand All @@ -71,7 +70,24 @@ const GameCanvas = () => {
paddleHeight
);
};
// This function Updates The Ball Positions

// this function draws scores
const drawScores = (ctx, canvas) => {
ctx.fillStyle = "#FFFFFF";
ctx.font = "80px Helvetica";
ctx.fillText(`${scoreLeft}`, canvas.width / 2 - 100, 100);
ctx.fillText(`${scoreRight}`, canvas.width / 2 + 60, 100);
};

// this Function Surprise draws a ball
const drawBall = (ctx) => {
ctx.beginPath();
ctx.arc(ballX, ballY, ballSize * sizeSpeedRatio, 0, Math.PI * 2);
ctx.fillStyle = "#00FF00";
ctx.fill();
ctx.closePath();
};

const updateBallPosition = (canvas) => {
const ballAngleOffset = 0.02;
const ballSpeedIncrease = 50;
Expand Down Expand Up @@ -133,59 +149,6 @@ const GameCanvas = () => {
}
};

// this function draws scores
const drawScores = (ctx, canvas) => {
ctx.fillStyle = "#FFFFFF";
ctx.font = "80px Helvetica";
ctx.fillText(`${scoreLeft}`, canvas.width / 2 - 100, 100);
ctx.fillText(`${scoreRight}`, canvas.width / 2 + 60, 100);
};
// this Function Surprise draws a ball
const drawBall = (ctx, canvas) => {
ctx.beginPath();
ctx.arc(ballX, ballY, ballSize * sizeSpeedRatio, 0, Math.PI * 2);
ctx.fillStyle = "#00FF00";
ctx.fill();
ctx.closePath();
};

// This Monster resized the field
const handleResize = () => {
if (canvasRef.current) {
const screenWidth = window.innerWidth;
let canvasWidth = screenWidth;
if (resize === true) canvasWidth = 0.8 * screenWidth;
const canvasHeight = (canvasWidth / 16) * 9;
canvasRef.current.width = canvasWidth;
canvasRef.current.height = canvasHeight;
const sizeRatioX = canvasRef.current
? canvasRef.current.width / canvasWidth
: 1;
const sizeRatioY = canvasRef.current
? canvasRef.current.height / canvasHeight
: 1;
paddleWidth = canvasRef.current ? canvasRef.current.width / 80 : 1;
paddleHeight = canvasRef.current ? canvasRef.current.width / 20 : 1;
sizeSpeedRatio = canvasRef.current
? canvasRef.current.width / canvasDefaultWidth
: 1;
ballX *= sizeRatioX;
ballY *= sizeRatioY;
leftPaddleY *= sizeRatioY;
rightPaddleY *= sizeRatioY;
leftPaddleY = Math.max(
0,
Math.min(leftPaddleY, canvasRef.current.height - paddleHeight)
);
rightPaddleY = Math.max(
0,
Math.min(rightPaddleY, canvasRef.current.height - paddleHeight)
);
ballX = Math.max(0, Math.min(ballX, canvasRef.current.width));
ballY = Math.max(0, Math.min(ballY, canvasRef.current.height));
}
};

const draw = (timestamp) => {
const canvas = canvasRef.current;
if (!canvas) return;
Expand Down Expand Up @@ -234,8 +197,30 @@ const GameCanvas = () => {

document.addEventListener("keydown", handleKeyDown);
document.addEventListener("touchmove", handleTouchMove);
window.addEventListener("resize", handleResize);
handleResize();
window.addEventListener("resize", () => handleResize(
canvasRef,
resize,
paddleWidth,
paddleHeight,
sizeSpeedRatio,
canvasDefaultWidth,
ballX,
ballY,
leftPaddleY,
rightPaddleY
));
handleResize(
canvasRef,
resize,
paddleWidth,
paddleHeight,
sizeSpeedRatio,
canvasDefaultWidth,
ballX,
ballY,
leftPaddleY,
rightPaddleY
);
draw(0);

return () => {
Expand All @@ -249,9 +234,19 @@ const GameCanvas = () => {
<div className="flex justify-center items-center h-screen">
{scoreLeftReact === winScore || scoreRightReact === winScore ? (
scoreLeftReact === winScore ? (
<WinScreen />
<WinScreen
GameCanvas={GameCanvas}
backgroundImage={backgroundImage}
WelcomeButtonStyle={WelcomeButtonStyle}
BackButton={BackButton}
/>
) : (
<LoseScreen />
<LoseScreen
GameCanvas={GameCanvas}
backgroundImage={backgroundImage}
WelcomeButtonStyle={WelcomeButtonStyle}
BackButton={BackButton}
/>
)
) : (
<>
Expand All @@ -260,107 +255,16 @@ const GameCanvas = () => {
className="border-8 border-solid border-white"
style={{ backgroundColor: "#0F0F0F" }}
></canvas>
</>
)}
</div>
);
};

const WinScreen = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [gameStarted, setGameStarted] = useState(false);

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: "45vw", 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>
)}
</div>
);
};

const LoseScreen = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const [gameStarted, setGameStarted] = useState(false);

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: "45vw", 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>
</>
)}
</div>
);
};

const PongAi = () => {
const { t } = useTranslation();
const location = useLocation();
const navigate = useNavigate();
const [isFullScreen, setIsFullScreen] = useState(false);

const handleGoFullScreen = (elementId) => {
goFullScreen(elementId);
setIsFullScreen(true);
};

const handleExitFullScreen = (elementId) => {
exitFullScreen(elementId);
setIsFullScreen(false);
};
const location = useLocation();

const [gameStarted, setGameStarted] = useState(false);

Expand All @@ -370,24 +274,9 @@ const PongAi = () => {

return (
<div id="aiP" className="flex justify-center items-center h-screen">
{location.pathname === "/originalpong" ||
location.pathname === "/pongai" ||
location.pathname === "/pong3d" ? (
<button
onClick={() =>
isFullScreen ? handleExitFullScreen() : handleGoFullScreen("aiP")
}
className="absolute top-2 right-2 mr-4"
>
{isFullScreen ? (
<AiOutlineFullscreenExit size="32" color="white" />
) : (
<BsArrowsFullscreen size="32" color="white" />
)}
</button>
) : null}
<FullScreenButton location={location} page="aiP" />
{gameStarted ? (
<GameCanvas className="m-4" />
<GameCanvas className="m-4" t={t} navigate={navigate} />
) : (
<div className="relative">
<img
Expand Down

0 comments on commit b9b21d0

Please sign in to comment.