// Ai's first game yay~!
// Code name uwu~

var context, controller, rectangle, loop, floor;
var randomNumberBetween0and19 = Math.floor(Math.random() * 300);
var powerups = ["Speed", "Jump"]

function xdist(x1,x2) {
    return Math.abs(x1-x2)
}
function ydist(y1,y2) {
  return Math.abs(y1-y2)
}

/*
context ~ that's our window size!
controller ~ handles our controls; keyboard checks and stuff
rectangle ~ this is our character yay!! just the dimensions but yay!
loop ~ this is our game loop!!
*/

context = document.querySelector("canvas").getContext("2d");

context.canvas.height = 360;
context.canvas.width = 800;

rectangle = {

  height:32,
  jumping:true, // jumping is true when they are in the air!
  width:32,
  x:360, // center of canvas!
  x_velocity:0,
  y:randomNumberBetween0and19,
  y_velocity:0,
  grav:1.1,
  wrap:800,
  prevframe: "false",
  jumps:0,
  maxjumps:1,
  speed:3

};

controller = {

  left:false,
  right:false,
  up:false,
  keyListener:function(event) {
    var key_state = (event.type == "keydown")?true:false;
    // Checks whether a key is being held! If it's being held down, set to true. If not, false.

    switch(event.keyCode) {

      case 37: //left key
        controller.left = key_state;
      break;
      case 32: //spacebar
        controller.up = key_state;
      break;
      case 39: //right key
        controller.right = key_state;
      break;

    }
  }
};

floor = {

  floor:1,
  flooronestring:"Welcome to SkillWrapper!\n\nHold right to continue!",
  floortwostring:"Random powerups are inside yellow blocks. Pick this one up!",
  floorthreestring:"Dodge any scary things! You can bounce on them to kill them, too!",
  floorfourstring:"Good luck!",
  floorreset:"false",
  // handling powerup stuff too i guess??
  powerupwidth:16,
  powerupheight:16,
  powerx:64,
  powery:64,
  powerupexist:"false",
  powerupname: powerups[Math.floor(Math.random() * powerups.length)],
  powerupcreate: "false",
  createthisturn: "false"


}

loop = function() {

  // floor code
  if (floor.floor == 2 && floor.powerupcreate == "false") {
    floor.powerupexist = "true"
    floor.powerx = 200
    floor.powery = 280
    floor.powerupname = "Speed"
    floor.powerupcreate = "true"
  }

  if (xdist(rectangle.x,floor.powerx) <= 16 && floor.powerupexist == "true") {
    if (ydist(rectangle.y,floor.powery) <= 16) {

      if (floor.powerupname == "Speed" && floor.powerupexist == "true") {
        rectangle.speed += .5
        floor.powerupexist = "false"
      }
      else if (floor.powerupname == "Jump") {
        rectangle.maxjumps += 1
      }

    }
  }
  if (controller.up && rectangle.prevframe == "false") {

    if (rectangle.jumps >= 1) {
      rectangle.prevframe = "true";
      rectangle.y_velocity = 0;
      if (rectangle.jumps >= 1) {
        rectangle.y_velocity -= 17;
      }
      rectangle.jumps -= 1;
      rectangle.jumping = true;
    }
  }
  else if (rectangle.prevframe == "true") {
    if (controller.up) {
      rectangle.prevframe = "true"
    }
    else {
      rectangle.prevframe = "false"
    }
  }

  if (controller.left) {

    rectangle.x_velocity = -rectangle.speed;

  }

  if (controller.right) {

    rectangle.x_velocity = rectangle.speed;

  }

  rectangle.y_velocity += rectangle.grav;//gravity yay!
  rectangle.x += rectangle.x_velocity;
  rectangle.y += rectangle.y_velocity;
  rectangle.x_velocity = 0
  if (rectangle.y_velocity >= 15) {
    rectangle.y_velocity = 15
  }


  // if rectangle is falling below floor line
  if (rectangle.y > 360 - 48 - 32) {
      rectangle.jumping = false;
      rectangle.y = 360 - 48 - 32;
      rectangle.y_velocity = 0;
      rectangle.jumps = rectangle.maxjumps;
  }

  if (rectangle.x < -32) {

    rectangle.x = -32;

  }
  else if (rectangle.x > 800) {

    floor.floor += 1
    floor.floorreset = "true"
    rectangle.x = -32;

  }


  context.fillStyle = "#fadadd";
  context.fillRect(0,0,800,320);//x, y, width, height
  context.fillStyle = "#FF007F";// hex for red
  context.beginPath();
  context.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
  context.fill();
  context.strokeStyle = "#DE1738";
  context.lineWidth = 4;
  context.beginPath();
  context.moveTo(0, 312);
  context.lineTo(800,312);
  context.stroke();
  context.font = "20px Verdana";
  context.fillText("Floor: " + floor.floor, 600, 32)
  if (floor.floor == 1) {
    context.fillText(floor.flooronestring, 64,160)
  }
  else if (floor.floor == 2) {
    context.fillText(floor.floortwostring, 64,160)
  }
  else if (floor.floor == 3) {
    context.fillText(floor.floorthreestring, 64,160)
  }
  else if (floor.floor == 4) {
    context.fillText(floor.floorfourstring, 64,160)
  }
  if (floor.powerupexist == "true") {
    context.fillStyle = "#fef65b"
    context.beginPath();
    context.rect(floor.powerx,floor.powery,floor.powerupwidth,floor.powerupheight);
    context.fill();
  }

  // call update when browser is ready to redraw!
  window.requestAnimationFrame(loop);

};

window.addEventListener("keydown", controller.keyListener);
window.addEventListener("keyup", controller.keyListener);
window.requestAnimationFrame(loop);
/*
These were slightly misleading but I understand them!
What this is doing is setting event listeners to check when you are **HOLDING** a key down.
Up at the listener, it'll run the function, and if the key is pressed down, it'll be set to true.
If the key is no longer being held down, it'll set itself to false. This'll let you check whether a key is being held
And properly identify whether it is left, right, or up to execute on it.
I initially thought it was checking the arrow key up and down, lol!!
*/