//VARIABLE SETUP

let x = 0;
let y = 0;
let x2 = 0;
let y2 = 0;
let ballX = 0;
let ballY = 0;
let ballSpeedX = 0;
let ballSpeedY = 0;
let vec;
let ballD = 50;
let paddleWidth = 5;
let paddleHeight = 150;
let button;
let score1 = 0;
let score2 = 0;
//CHANGING THE VARIBLES TO THEIR DEFAULT VALUE AND MAKING A VECTOR FOR THE BALL

function setup() {
  createCanvas(windowWidth, windowHeight);
  resetSketch();
  
}

function resetSketch() {
  frameRate(60)
  if (!button) {
    button = createButton('Reset');
  }
  button.size(250);
  button.position(width / 2, height / 2);
  button.center('horizontal');
  button.hide()
  button.mousePressed(resetSketch);
  x = width / 2 - 900;
  y = height / 2 - 75;
  x2 = width / 2 + 900;
  y2 = height / 2 - 75;
  ballX = width / 2;
  ballY = height /2;
  vec = createVector(random(-1, 1), random(-1, 1));
  vec.normalize();
  ballSpeedX = vec.x * 8;
  ballSpeedY = vec.y * 8;
  }

function draw() {
  background(255);
  

//CHECKING IF W OR S IS PRESSED DOWN TO MOVE THE LEFT RECTANGLE

  if (keyIsDown(87) && y > 0) {
    y -= 10
  };

  if (keyIsDown(83) && y < height - 150) {
    y += 10
  };
  clear();
  fill(0, 0, 0);
  rect(x, y, paddleWidth, paddleHeight);

  //CEHCKING IF I OR K IS PRESSED DOWN TO MOVE THE RIGHT RECTANGLE

  if (keyIsDown(73) && y2 > 0) {
    y2 -= 10
  };

  if (keyIsDown(75) && y2 < height - 150) {
    y2 += 10
  };
  rect(x2, y2, paddleWidth, paddleHeight);

  //CREATING THE BALL AND GIVING IT SPEED IN A RANDOM DIRECTION

  ellipse(ballX, ballY, ballD);
  ballX = ballX + ballSpeedX;
  ballY = ballY + ballSpeedY;
  
//IF THE BALL HITS THE TOP OF BOTTOM THEN BOUNCE OFF

  if (ballY <  0 || ballY > height) {
    ballSpeedY *= -1
  };

//CREATES A LINE IN THE MIDDLE

  stroke(0)
  strokeWeight(1)
  line(width / 2, height, width / 2, 0)

//CHECKS THE DISTANCE BETWEEN THE BALL AND THE RECTANGLES SO THE BALL WILL BOUNCE OFF IF THEY ARE TOUCHING.

if (ballY > y && ballY < y + paddleHeight && ballX < x + paddleWidth + ballD / 2 && ballX > 0 && ballX < width) {
  vec = createVector(random(-1, 0), random(-1, 1));
  vec.normalize();
  ballSpeedX = vec.x * -8;
  ballSpeedY = vec.y * -8;
}

if (ballY > y2 && ballY < y2 + paddleHeight && ballX > x2 + paddleWidth - ballD / 2 && ballX > 0 && ballX < width) {
  vec = createVector(random(0, 1), random(-1, 1));
  vec.normalize();
  ballSpeedX = vec.x * -8;
  ballSpeedY = vec.y * -8;
}

//CHECKS IF THE PLAYER HAS WON OR LOST


  if (ballX > width + 30) {
    fill(0)
    textSize(32)
    text('Player 1 Wins!', width / 3 + 90, height / 2 - 25)
    score1++
    button.show()
    frameRate(0)
  }
  
  if (ballX < -30) {
    fill(0)
    textSize(32)
    text('Player 2 Wins!', width / 2, height / 2 - 25)
    score2++
    button.show()
    frameRate(0)
  };

// SHOWS THE SCORE FOR THE EACH PLAYER
  textSize(32)
  text(`Score: ${score1}`, width / 4, height - 25)
  text(`Score: ${score2}`, width - 500, height - 25)

//PRINTS WHICH PLAYER IS WHICH

  text('Player 1', width / 4, height - 920)
  text('Player 2', width - 500, height - 920)
  

};