script.js

/****************/
/* MODEL (data) */
/****************/

// Elementen
const healthBar = document.getElementById("healthProgress");
const healthSpan = document.getElementById("healthSpan");
const healthP = document.getElementById("healthP");
const healthImage = document.getElementById("healthImg");
const drumImage = document.getElementById("tama-drum");
const btnMetal = document.getElementById("play_metal");
const btnJazz = document.getElementById("play_jazz");
const btnClean = document.getElementById("clean_drum_kit");
const buttons = document.querySelectorAll("button");
const startKnop = document.getElementById("startKnop");

console.log("Dit zijn de buttons: ", buttons);

buttons.forEach((button) => {});

// Game data
let health = 10;

/********************/
/* CONTROL (logica) */
/********************/

// Laat health aflopen
function reduceHealth() {
  health = health - 1;
}

function increaseHealth(amount) {
  health = health + amount;
  // ???
  if (health > 100) {
    health = 100;
  }
}
// Interval die health automatisch laat aflopen
let decreaseHealthInterval = setInterval(reduceHealth, 1000);

// Interval die health updatet
let updateHealthBar = setInterval(() => {
  updateHealth();
}, 1000);

// Interval die health check op game over
let checkHealthInterval = setInterval(() => {
  if (!health) {
    console.log("Game over");
    clearInterval(decreaseHealthInterval);
    clearInterval(checkHealthInterval);
    healthP.textContent = "Game over! :(";
  }
}, 1000);

// Event listeners
buttons.forEach((button) => {
  button.addEventListener("click", handleAction);
});

// Event handlers (functies)

// PLAY METAL
function handleAction(event) {
  console.log(event);
  drumImage.src = "images/tama-" + event.target.dataset.action + ".png";
  increaseHealth(event.target.dataset.reward);
  drumImage.style.visibility = "visible";
}

/***************************/
/* naar VIEW (presentatie) */
/***************************/

// DOM UPDATE
function updateHealth() {
  healthSpan.textContent = health;
  healthBar.value = health;
}

// document.querySelector("playMetal");

// // while loop
// let tel = 10;
// while (tel > 0){
//   console.log(tel)
//   tel--
// }

// // for
// for (let teller = 10; teller > 0; teller--) {
//   console.log(teller);
// }