@@ -0,0 +1,197 @@
+import Ball from "./Ball.js";
+import Paddle from "./Paddle.js";
+
+const ballElement = document.getElementById("ball");
+const paddleTopElement = document.getElementsByClassName("paddle")[0];
+const paddleBottomElement = document.getElementsByClassName("paddle")[1];
+const paddleTopScoreElement = document.getElementById("rod1");
+const paddleBottomScoreElement = document.getElementById("rod2");
+const ball = new Ball(ballElement);
+const paddleTop = new Paddle(paddleTopElement);
+const paddleBottom = new Paddle(paddleBottomElement);
+
+ball.score = [paddleTopScoreElement, paddleBottomScoreElement];
+
+let maxScore;
+let maxRod;
+let whoWon = "";
+let windowHeight = window.innerHeight;
+let score = 0;
+
+//--------------------------------------------------------------
+//Welcome Function//
+(function () {
+	maxScore = localStorage.getItem("maxScore");
+	maxRod = localStorage.getItem("maxRod");
+	if (maxRod === null || maxScore === null) {
+		alert(
+			"This is the first time you are playing this game.\nLET'S START !!!"
+		);
+		maxScore = 0;
+		maxRod = "Rod 1";
+		return;
+	} else {
+		alert(`${maxRod} has maximum score of ${maxScore}`);
+		return;
+	}
+})();
+//--------------------------------------------------------------
+//Animation Update Function//
+/*There are lags in between the frames. Request animation checks for whenever there's a change in the animation on the screen and runs.*/
+/*setInterval((time) => {
+update(time)
+}, 10);*/
+
+//currentTime is how much time has passed till now. At what time we are now.
+// previousTime is the last moment of time before the change in the animation frame.
+// delta is the time frame between the last frame and the new frame.
+//--------------------------------------------------------------
+//Animation Update Function//
+let previousTime;
+let clearFrame,
+	clearFrame2,
+	animation = true;
+let updateAnimationFrame = (currentTime) => {
+	if (previousTime != null) {
+		//Δ Negligible amount of Time
+		const delta = currentTime - previousTime;
+		//Calling another animation function in Ball with Delta for variation & paddles for the collision
+		ball.updateAnimationFrame(delta, [paddleTop.rect, paddleBottom.rect]);
+		//Hue variation wrt Delta
+		const hue = parseFloat(
+			getComputedStyle(document.documentElement).getPropertyValue("--hue")
+		);
+		document.documentElement.style.setProperty("--hue", hue + delta * 0.01);
+		// If Lost the match?
+		if (lost()) {
+			//Game is OFF
+			ball.GAME_ON = false;
+			//Stop Animation
+			animation = false;
+		} else {
+			//Continue Game
+			ball.GAME_ON = true;
+			//Continue Animation
+			animation = true;
+		}
+	}
+	//If animation is over?
+	if (!animation) {
+		//Cancel the animation frame
+		window.cancelAnimationFrame(clearFrame);
+		//End the Match
+		matchEnds();
+		console.log("clearFrame1: ", clearFrame);
+		//Fetch Local Stoarge
+		const localScore = localStorage.getItem("maxScore");
+		const localRod = localStorage.getItem("maxRod");
+		alert(
+			`${whoWon} wins with a score of ${score}\nMax Score is: ${localScore} by ${localRod}`
+		);
+	} else {
+		//Current Time will become Previous Time, so that the time moves forward
+		previousTime = currentTime;
+		//Fetching clearframe ID & start the animation loop
+		clearFrame = window.requestAnimationFrame(updateAnimationFrame);
+		console.log("RUNNING....");
+	}
+};
+//--------------------------------------------------------------
+//Match Lost Deciding Function//
+let lost = () => {
+	const ballRect = ball.rect;
+	//Ball goes beyond bottom
+	if (ballRect.bottom >= windowHeight) {
+		whoWon = "Rod 1";
+		ball.paddleTopScore += 100;
+	}
+	//Ball goes beyond top
+	else if (ballRect.top <= 0) {
+		whoWon = "Rod 2";
+		ball.paddleBottomScore += 100;
+	}
+	return ballRect.bottom >= windowHeight || ballRect.top <= 0;
+};
+//--------------------------------------------------------------
+//Local Storage Function//
+let storeScore = (maxScore, score, whoWon) => {
+	if (maxScore < score) {
+		maxScore = score;
+		maxRod = whoWon;
+		//Storing in Local Storage
+		localStorage.setItem("maxScore", maxScore);
+		localStorage.setItem("maxRod", maxRod);
+		console.log(maxScore, score, whoWon);
+	}
+};
+//--------------------------------------------------------------
+//Handling the Match Lose Function//
+let matchEnds = () => {
+	maxScore = localStorage.getItem("maxScore");
+	if (maxScore === null) {
+		maxScore = 0;
+	}
+	if (whoWon === "Rod 1") {
+		score = ball.paddleTopScore;
+	} else if (whoWon === "Rod 2") {
+		score = ball.paddleBottomScore;
+	}
+	//Store the score and reset everything else
+	storeScore(maxScore, score, whoWon);
+	ball.reset();
+	paddleTop.reset();
+	paddleBottom.reset();
+	ball.paddleTopScoreElement.innerText = 0;
+	ball.paddleBottomScoreElement.innerText = 0;
+};
+//--------------------------------------------------------------
+// D A ENTER - Keypress Events//
+window.addEventListener("keypress", (event) => {
+	let paddlePositionX = paddleTop.positionX;
+	//Move the Paddle Right
+	if (event.keyCode === 100 && paddlePositionX < 86) {
+		paddleTop.positionX = paddlePositionX + 2;
+		paddleBottom.positionX = paddlePositionX + 2;
+	}
+	//Move the Paddle Left
+	else if (event.keyCode === 97 && paddlePositionX > 0) {
+		paddleTop.positionX = paddlePositionX - 2;
+		paddleBottom.positionX = paddlePositionX - 2;
+	}
+	//Start the Game & Move the Ball
+	else if (event.keyCode === 13 && ball.GAME_ON === false) {
+		//Clear the Initial Animation Frame
+		window.cancelAnimationFrame(clearFrame2);
+		console.log("clearFrame2: ", clearFrame2);
+		//Game ON
+		ball.GAME_ON = true;
+		//Previous Time is null, so that the animation loop starts from the very first beginning as it has only the current time at the start
+		previousTime = null;
+		//Animation ON
+		animation = true;
+		//Reset everything else
+		ball.reset();
+		paddleTop.reset();
+		paddleBottom.reset();
+		paddleTopScoreElement.innerText = 0;
+		paddleBottomScoreElement.innerText = 0;
+		//Fetching clearframe ID & start the animation loop
+		clearFrame2 = window.requestAnimationFrame(updateAnimationFrame);
+	}
+});
+//--------------------------------------------------------------
+// <== ==> - Keydown Events//
+window.addEventListener("keydown", (event) => {
+	let paddlePositionX = paddleTop.positionX;
+	//Move the Paddle Right
+	if (event.keyCode === 39 && paddlePositionX < 86) {
+		paddleTop.positionX = paddlePositionX + 2;
+		paddleBottom.positionX = paddlePositionX + 2;
+	}
+	//Move the Paddle Left
+	else if (event.keyCode === 37 && paddlePositionX > 0) {
+		paddleTop.positionX = paddlePositionX - 2;
+		paddleBottom.positionX = paddlePositionX - 2;
+	}
+});
+//--------------------------------------------------------------