$(document).ready(function () {
var canvas = document.getElementById("gamearea");
var c = canvas.getContext("2d");
var started = false;
var paused = false;
var level = 0;
var hard = false;

var playerImg = new Image();
playerImg.src = 'player.png'; // Set correct image path

var slimeImg = new Image();
slimeImg.src = 'slime.png'; // Set correct image path

var fireWallImg = new Image();
fireWallImg.src = 'fire.png'; // Set correct image path

var itemImg = new Image();
itemImg.src = 'key.png'; // Set correct image path

var doorImg = new Image();
doorImg.src = 'door.png'; // Set correct image path


var player = {
  x: 230,
  y: 300,
  width: 40,
  height: 40,
  borderWidth: 3,
  fillColor: '#268BDD',
  borderColor: '#103959',
  speed: 10,
  type: "player",
  key: "none"
};

  // the key! (maybe)
var item = {
    x: 100,
    y: 100,
    radius: 20,
    color: 'yellow',
    type: "item"
};

 // Door (Black Square)
  var door = {
    x: 300,
    y: 100,
    width: 40,
    height: 40,
    borderWidth: 3,
    fillColor: 'black',
    type: "door"
  };

// enemies/obstacles
var fireWall = {
    x: 450,
    y: 360,
    width: 50,
    height: 50,
    fillColor: 'red',
    borderWidth: 3,
    borderColor: '#103959',
    speed: 5,
    type: "fireWall"
  };
var fireWall2 = jQuery.extend({}, fireWall);
fireWall2.y = 200;

  var slime = {
    x: (canvas.width / 2) - 30,
    y: 0,
    width: 40,
    height: 30,
    fillColor: 'green',
    borderColor: '#103959',
    speed: 0.5,
    type: "slime"
  };
var slime2 = jQuery.extend({}, slime);
slime2.x -= 60;
slime2.y = 220;
// difficulty "buttons"
var easyS = {
  x: 0,
  y: 460,
  width: 40,
  height: 40,
  borderWidth: 3,
  fillColor: 'white',
  borderColor: 'green',
  type: "diff"
};

var hardS = {
  x: 460,
  y: 460,
  width: 40,
  height: 40,
  borderWidth: 3,
  fillColor: 'white',
  borderColor: 'red',
  type: "diff"
};

var wall = {
  x: 0,
  y: 410,
  width: 450,
  height: 40,
  fillColor: 'white',
  borderColor: 'black',
  borderWidth: 3,
  type: "wall"
};
var wall2 = jQuery.extend({}, wall);
  wall2.x = 40;
  wall2.y = 40;
  wall2.width = 40;
  wall2.height = 120;

var wall3 = jQuery.extend({}, wall);
  wall3.x = 300;
  wall3.y = 40;
  wall3.width = 160;
  wall3.height = 60;

var wall4 = jQuery.extend({}, wall);
wall4.x = 80;
wall4.y = 120;
wall4.width = 40;
wall4.height = 40;

var wall5 = jQuery.extend({}, wall);
wall5.x = 300;
wall5.y = 140;
wall5.width = 200;
wall5.height = 30;

var wall6 = jQuery.extend({}, wall);
wall6.x = 0;
wall6.y = 200;
wall6.width = 40;
wall6.height = 210;

var wall7 = jQuery.extend({}, wall);
wall7.x = 260;
wall7.y = 40;
wall7.width = 40;
wall7.height = 130;

var wall8 = jQuery.extend({}, wall);
wall8.x = 120;
wall8.y = 0;
wall8.width = 40;
wall8.height = 160;

var level0 = [easyS, hardS, player];
var walls = [wall, wall2, wall3, wall4, wall5, wall6, wall7, wall8];
var level1 = [wall, wall2, wall3, wall4, wall5, wall6, wall7,
wall8, fireWall, fireWall2, slime, player, door];

  // has the item been picked up?
  var itemPickedUp = false;
  var gameWon = false;
  var gameLost = false;

  // collision
  function checkCollision() { 
    var distX = player.x + player.width / 2 - item.x;
    var distY = player.y + player.height / 2 - item.y;
    var distance = Math.sqrt(distX * distX + distY * distY); 

    // If the distance is less than the sum of the player and item sizes, it's a collision
    if (distance < (player.width / 2 + item.radius)) {
      itemPickedUp = true; // Mark the item as picked up
    }
  }
  
      // Collision check with the door (only if item has been picked up)
  function checkCollisionDoor() { 
    if (itemPickedUp) { 
      if (player.x < door.x + door.width &&
          player.x + player.width > door.x &&
          player.y < door.y + door.height &&
          player.y + player.height > door.y &&
          !gameLost) {
        gameWon = true; // Player wins
      }
    }
 }

  function checkCollisionEnemy(enemy) { 
    if (player.x < enemy.x + enemy.width &&
        player.x + player.width > enemy.x &&
        player.y < enemy.y + enemy.height &&
        player.y + player.height > enemy.y &&
        !gameWon) {
      gameLost = true;
    }
  }
  
  function checkCollisionWall(wall) { 
    if (player.x < wall.x + wall.width &&
        player.x + player.width > wall.x &&
        player.y < wall.y + wall.height &&
        player.y + player.height > wall.y) {
          if (player.key == "W") {
          player.y += player.speed;
          }
          if (player.key == "A") {
          player.x += player.speed;
          }
          if (player.key == "S") {
          player.y -= player.speed;
          }
          if (player.key == "D") {
          player.x -= player.speed;
          }
        }
        }
  
    function checkCollisionDiff(diff) { 
    if (player.x < diff.x + diff.width &&
        player.x + player.width > diff.x &&
        player.y < diff.y + diff.height &&
        player.y + player.height > diff.y) {
      level = 1;
      player.x = 0;
      player.y = 460;
      fireWall.x = 450;
      fireWall2.x = 450;
      PlaySong();
      if (diff == easyS) {
      hard = false;
      fireWall.speed = 5;
      slime.speed = 0.5;
      }
      if (diff == hardS) {
      hard = true;
      fireWall.speed = 10;
      slime2.speed = 0.5;
      }
    }
  }

function PlaySong() {
  let song = document.getElementById("song");
  song.play();
}

function PauseSong() {
let song = document.getElementById("song");
song.pause();
}

function Title() {
c.fillStyle = "black";  // hangry
c.font = "40px Arial";  
var message = "A Noble Knight";
var textWidth = c.measureText(message).width; // bunny
var xPosition = (canvas.width - textWidth) / 2;
c.fillText(message, xPosition, 240);
c.font = "20px Arial" // eating
message = "Move with WASD"
textWidth = c.measureText(message).width;
xPosition = (canvas.width - textWidth) / 2; // a
c.fillText(message, xPosition, 265);
message = "Choose a Difficulty"
textWidth = c.measureText(message).width;  // potato
xPosition = (canvas.width - textWidth) / 2;
c.fillText(message, xPosition, 410);
return;
}

function Animate(key) {
// clear last frame
c.clearRect(0, 0, canvas.width, canvas.height);

// check collisions
if (level > 0) {
if (!itemPickedUp) {
      checkCollision();
    }
 if (itemPickedUp && !gameWon) {
      checkCollisionDoor();
    }
 for (var i = 0; i < walls.length; i++){
 checkCollisionWall(walls[i])
 }
 checkCollisionEnemy(fireWall);
 checkCollisionEnemy(fireWall2);
 checkCollisionEnemy(slime);
 if (hard) {
 checkCollisionEnemy(slime2);
 }
} else {
checkCollisionDiff(easyS);
checkCollisionDiff(hardS);
}

// add elements to screen

if (level == 0) {
for (var i = 0; i < level0.length; i++) {
Draw(level0[i]);
Title();
c.fillStyle = "green";  
c.font = "12px Arial";  
message = "Easy";
c.fillText(message, 5, 480);
c.fillStyle = "red";    
message = "Hard";
c.fillText(message, 465, 480);
}
} else if (level == 1) {
for (var i = 0; i < level1.length; i++) {
Draw(level1[i]);
}
if (hard) {
Draw(slime2);
}
}

// inventory
if (level > 0) {
    if (!itemPickedUp) {
      Draw(item);
	  c.fillStyle = "black";  
      c.font = "20px Arial";  
      c.fillText("Inventory:", 10, 30); 
    } else {

      c.fillStyle = "black";  
      c.font = "20px Arial";  
      c.fillText("Inventory:", 10, 30); 
      c.beginPath();
      c.arc(130, 20, item.radius, 0, 2 * Math.PI); 
      c.fillStyle = item.color;
      c.fill();
      c.fillStyle = "black";  
      c.font = "11px Arial";  
      var message = "Key";
      c.fillText(message, 120, 27);
    }
}



 // win screen
  if (gameWon) {
      c.fillStyle = "black";  
      c.font = "30px Arial";  
      var message = "You Win!";
      var textWidth = c.measureText(message).width;
      var xPosition = (canvas.width - textWidth) / 2;
      c.fillText(message, xPosition, 30); // Display "You Win!" at the top
      PauseSong();
      document.getElementById("start").value = "Play Again";
    }
    
     // lose screen
  if (gameLost) {
      c.fillStyle = "black";  
      c.font = "30px Arial";  
      var message = "You Lose...";
      var textWidth = c.measureText(message).width;
      var xPosition = (canvas.width - textWidth) / 2;
      c.fillText(message, xPosition, 30); // Display "You Lose..." at the top
      PauseSong();
      document.getElementById("start").value = "Retry";
      c.globalAlpha = 0.25;
      c.fillRect(0, 0, canvas.width, canvas.height)
    }
if (paused == false && !gameLost && !gameWon) {
requestAnimationFrame(Animate);
}
}
// universal draw function
// universal draw function
function Draw(shape) {
  c.beginPath();

  if (shape.type == "player") {
    c.drawImage(playerImg, shape.x, shape.y, shape.width, shape.height); // Player image
  }

  if (shape.type == "slime") {
    c.drawImage(slimeImg, shape.x, shape.y, shape.width, shape.height); // Slime image
    shape.y += shape.speed;
    if (shape.y + shape.height > canvas.height / 2 || shape.y < 0) {
      shape.speed = -shape.speed;
    }
  }

  if (shape.type == "fireWall") {
    c.drawImage(fireWallImg, shape.x, shape.y, shape.width, shape.height); // FireWall image
    shape.x += shape.speed;
    if (shape.x + shape.width > canvas.width || shape.x < 0 || shape.x < wall6.width) {
      shape.speed = -shape.speed;
    }
  }

  if (shape.type == "item") {
    c.drawImage(itemImg, shape.x - shape.radius, shape.y - shape.radius, shape.radius * 2, shape.radius * 2); // Item image (adjust for radius)
  }

  if (shape.type == "door") {
    c.drawImage(doorImg, shape.x, shape.y, shape.width, shape.height); // Door image
  }

  if (shape.type == "wall" || shape.type == "diff") {
    c.rect(shape.x, shape.y, shape.width, shape.height);
    c.fillStyle = shape.fillColor;
    c.fill();
    c.lineWidth = shape.borderWidth;
    c.strokeStyle = shape.borderColor;
    c.stroke();
  }
}


// button functions
$("#start").click(function () {
if (started == false) {
  document.getElementById("pause").disabled = false;
  Animate("none");
  started = true;
  return;
}
if (gameLost) {
  itemPickedUp = false;
  gameLost = false;
  document.getElementById("start").value = "Start Game";
  PlaySong();
  c.globalAlpha = 1;
  player.x = 0;
  player.y = 460;
  Animate("none");
  started = true;
  return;
}
if (gameWon) {
  itemPickedUp = false;
  gameWon = false;
  document.getElementById("start").value = "Start Game";
  level = 0;
  player.x = 230;
  player.y = 300;
  Animate("none");
  started = true;
  return;
}
})

$("#pause").click(function () {
if (paused == false && started == true) {
  PauseSong();
  document.getElementById("pause").value = "Resume";
  paused = true;
} else if (paused == true) {
  PlaySong();
  document.getElementById("pause").value = "Pause";
  paused = false;
  requestAnimationFrame(Animate);
}
})
// control scheme
$(document).keydown(function() {
var key = event.which;
if (paused == false) {
  if (key == 65 && player.x >= 3) {  // left
  player.key = "A";
  player.x -= player.speed;
  }
  if (key == 87 && player.y >= 3) {  // up
  player.key = "W";
  player.y -= player.speed;
  }
  if (key == 68 && player.x <= (canvas.width - player.width - 3)) {  // right
  player.key = "D";
  player.x += player.speed;
  }
  if (key == 83 && player.y <= (canvas.height - player.height - 3)) {  // down
  player.key = "S";
  player.y += player.speed;
  }
}
});
});