<main class="h-100">
  <div class="container-md  d-flex flex-column justify-content-center align-items-center h-100">
    <div class="position-relative" style="max-width: 45rem;width: 100vw;">

      <!-- Drum control buttons -->
      <button data-key="C" class="drum-cntrl btn btn-dark rounded-circle p-0 position-absolute start-0 top-50" style="width: 30px;height:30px;transform: translate(min(20vw,10rem) ,max(-30vw,-12rem) );">C</button>
      <button data-key="F" class="drum-cntrl btn btn-light rounded-circle p-0 position-absolute start-0 top-50" style="width: 30px;height:30px;transform: translate(min(21vw,11rem) ,max(-6vw,-2rem) );">F</button>
      <button data-key="M" class="drum-cntrl btn btn-light rounded-circle p-0 position-absolute start-0 top-50" style="width: 30px;height:30px;transform: translate(min(35vw,15rem) ,max(-14vw,-5rem) );">M</button>
      <button data-key="K" class="drum-cntrl btn btn-dark rounded-circle p-0 position-absolute start-0 top-50" style="width: 30px;height:30px;transform: translate(min(37vw,18rem) ,min(10vw,5rem) );">K</button>
      <button data-key="H" class="drum-cntrl btn btn-light rounded-circle p-0 position-absolute end-0 top-50" style="width: 30px;height:30px;transform: translate(max(-42vw,-20rem),max(-15vw,-5rem));">H</button>
      <button data-key="R" class="drum-cntrl btn btn-dark rounded-circle p-0 position-absolute end-0 top-50" style="width: 30px;height:30px;transform: translate(max(-30vw,-15rem),max(-32vw,-13rem));">R</button>
      <button data-key="G" class="drum-cntrl btn btn-dark rounded-circle p-0 position-absolute end-0 top-50" style="width: 30px;height:30px;transform: translate(max(-10vw,-6rem),max(-20vw,-7rem) );">G</button>
      <button data-key="S" class="drum-cntrl btn btn-light rounded-circle p-0 position-absolute end-0 top-50" style="width: 30px;height:30px;transform: translate(max(-30vw,-14rem),max(-6vw,-2rem));">S</button>
      <button data-key="I" class="drum-cntrl btn btn-dark rounded-circle p-0 position-absolute end-0 top-50" style="width: 30px;height:30px;transform: translate(max(-20vw,-9.5rem),max(-20vw,-7rem));">I</button>

      <!-- Main Illustration -->
      <img style="max-width: 45rem;width: 100vw;" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/BG/drum-kit.svg?raw=true" alt="drum-kit" />
    </div>

    <!-- Keymap reference -->
    <div class="d-flex flex-wrap justify-content-center" style="max-width:30rem">
      <div class="w-100 text-center">--- Key Bindings ---</div>
      <span class="badge m-1 rounded-pill bg-dark">C - Crash</span>
      <span class="badge m-1 rounded-pill bg-dark">R - Ride</span>
      <span class="badge m-1 rounded-pill bg-dark">F - Floor Tom</span>
      <span class="badge m-1 rounded-pill bg-dark">M - Mid Tom</span>
      <span class="badge m-1 rounded-pill bg-dark">H - High Tom</span>
      <span class="badge m-1 rounded-pill bg-dark">S - Snare</span>
      <span class="badge m-1 rounded-pill bg-dark">I - Hi-Hat Open</span>
      <span class="badge m-1 rounded-pill bg-dark">G - Hi-Hat Closed</span>
      <span class="badge m-1 rounded-pill bg-dark">K - Kick</span>
    </div>
  </div>

  <!-- Drum Kit audios -->
  <audio data-key="C" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/crash.wav?raw=true"></audio>
  <audio data-key="F" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/floor-tom.wav?raw=true"></audio>
  <audio data-key="G" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/hi-hat-close.wav?raw=true"></audio>
  <audio data-key="I" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/hi-hat-open.wav?raw=true"></audio>
  <audio data-key="H" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/high-tom.wav?raw=true"></audio>
  <audio data-key="K" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/kick.wav?raw=true"></audio>
  <audio data-key="M" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/mid-tom.wav?raw=true"></audio>
  <audio data-key="R" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/ride.wav?raw=true"></audio>
  <audio data-key="S" src="https://github.com/shinjith-dev/JavaScript-Drum-Kit/blob/main/audios/snare.wav?raw=true"></audio>
  
  <div class="position-absolute bottom-0 mx-auto w-100 text-end mb-3 fs-6">
    <a href="https://www.freepik.com/free-vector/hand-drawn-drums_1132754.htm#query=drums&position=4&from_view=keyword">
      Image by natanaelginting</a> on Freepik
  </div>
</main>
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
></script>

button {
  opacity: 0.7;
}

body {
  height:100vh;
}

.drum-cntrl:hover,
.clicked {
  opacity: 1;
  box-shadow: 1px 3px 14px 1px #000;
  background-color: #ee6c4d !important;
  color: #fff !important;
}

/* Material bootstrap is used in this project through CDN */

//Main audio player function
const playKeySound = (key) => {
  const keyAudio = document.querySelector(`audio[data-key=${key}]`);
  keyAudio.currentTime = 0;
  keyAudio.play();
};

//Keyboard key recognition and highliting
const keyPress = (e) => {
  const clickedKey = e.key.toUpperCase(),
    clickedElem = document.querySelector(`button[data-key="${clickedKey}"]`);
  if (clickedElem) {
    clickedElem.classList.add("clicked");
    playKeySound(clickedKey);
  }
};

//Keyboard keypress listener
window.addEventListener("keydown", (e) => keyPress(e));

//listener for removing highlighted effect
window.addEventListener("keyup", (e) => {
  const clickedKey = e.key.toUpperCase(),
    clickedElem = document.querySelector(`button[data-key="${clickedKey}"]`);
  if (clickedElem && clickedElem.classList.contains("clicked"))
    clickedElem.classList.remove("clicked");
});

//On screen button click listener
document.querySelectorAll(".drum-cntrl").forEach((btn) => {
  btn.addEventListener("click", (e) =>
    playKeySound(e.target.dataset.key.toUpperCase())
  );
});