<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music Hangman</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0e68c;
    padding: 20px;
    max-width: 620px;
    margin: auto;
    text-align: center;
  }

  h1 {
    margin-bottom: 10px;
  }

  #wordDisplay {
    font-size: 2em;
    letter-spacing: 10px;
    margin: 20px 0;
  }

  #wrongGuesses {
    margin: 15px 0;
    font-size: 1.2em;
    color: red;
  }

  #letterButtons {
    margin: 20px 0;
  }

  /* Style for each row of buttons */
  #letterButtons div {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
  }

  button {
    padding: 8px 12px;
    font-size: 1em;
    cursor: pointer;
    margin: 2px;
  }

  #message {
    font-size: 1.5em;
    margin-top: 20px;
  }

  #restartBtn {
    margin-top: 30px;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
  }

  /* Hangman drawing container */
  #hangmanContainer {
    margin: 20px auto;
    width: 200px;
    height: 250px;
  }

  /* Hint text */
  #hint {
    font-size: 1.2em;
    margin: 10px 0;
    color: #333;
  }

  /* Completed words display */
  #completedWords {
    margin-top: 30px;
    font-size: 1.2em;
    color: #007BFF;
  }
</style>
</head>
<body>

<h1>🎵 Music Hangman 🎶</h1>
<div id="wordDisplay">_ _ _ _ _</div>
<div id="hint"></div>
<div id="wrongGuesses">Wrong guesses: </div>

<!-- Hangman drawing -->
<div id="hangmanContainer">
  <svg id="hangmanSVG" viewBox="0 0 200 250" width="200" height="250">
    <!-- Gallows -->
    <line x1="20" y1="230" x2="180" y2="230" stroke="#8B4513" stroke-width="4"/>
    <line x1="50" y1="230" x2="50" y2="20" stroke="#8B4513" stroke-width="4"/>
    <line x1="50" y1="20" x2="120" y2="20" stroke="#8B4513" stroke-width="4"/>
    <line x1="120" y1="20" x2="120" y2="40" stroke="#8B4513" stroke-width="4"/>
    <!-- Head -->
    <circle id="head" cx="100" cy="60" r="20" fill="#ff69b4" style="display:none;"/>
    <!-- Body -->
    <line id="body" x1="100" y1="80" x2="100" y2="150" stroke="#ff69b4" stroke-width="4" style="display:none;"/>
    <!-- Left arm -->
    <line id="leftArm" x1="100" y1="100" x2="50" y2="130" stroke="#ff69b4" stroke-width="4" style="display:none;"/>
    <!-- Right arm -->
    <line id="rightArm" x1="100" y1="100" x2="150" y2="130" stroke="#ff69b4" stroke-width="4" style="display:none;"/>
    <!-- Left leg -->
    <line id="leftLeg" x1="100" y1="150" x2="70" y2="200" stroke="#ff69b4" stroke-width="4" style="display:none;"/>
    <!-- Right leg -->
    <line id="rightLeg" x1="100" y1="150" x2="130" y2="200" stroke="#ff69b4" stroke-width="4" style="display:none;"/>
  </svg>
</div>

<div id="letterButtons"></div>
<div id="message"></div>
<button id="restartBtn" onclick="nextWord()">Next Word</button>
<div id="completedWords"></div>

<script>
  const words = [
    { word: 'SAXOPHONE', type: 'musical instrument' },
    { word: 'GUITAR', type: 'musical instrument' },
    { word: 'PIANO', type: 'musical instrument' },
    { word: 'VIOLIN', type: 'musical instrument' },
    { word: 'KEYBOARD', type: 'musical instrument' },
    { word: 'CLASSICAL', type: 'music genre' },
    { word: 'COUNTRY', type: 'music genre' },
    { word: 'ROCK', type: 'music genre' },
    { word: 'SINGER', type: 'person' },
    { word: 'COMPOSER', type: 'person' },
    { word: 'MELODY', type: 'a song has ...' },
    { word: 'JAZZ', type: 'music genre' },
    { word: 'RHYTHM', type: 'a song has ...' },
    { word: 'LYRICS', type: 'a song has ...' },
    { word: 'MUSICIAN', type: 'person' }
  ];

  let selectedWord = {};
  let guessedLetters = [];
  let wrongLetters = [];
  const maxWrong = 6; // total parts to show

  const wordDisplay = document.getElementById('wordDisplay');
  const wrongGuessesDiv = document.getElementById('wrongGuesses');
  const hintDiv = document.getElementById('hint');
  const letterButtonsDiv = document.getElementById('letterButtons');
  const messageDiv = document.getElementById('message');
  const completedWordsDiv = document.getElementById('completedWords');

  // Hangman parts in order
  const hangmanParts = [
    document.getElementById('head'),
    document.getElementById('body'),
    document.getElementById('leftArm'),
    document.getElementById('rightArm'),
    document.getElementById('leftLeg'),
    document.getElementById('rightLeg')
  ];

  // Initialize the game
  function initGame() {
    guessedLetters = [];
    wrongLetters = [];
    messageDiv.innerText = '';
    hintDiv.innerText = '';
    completedWordsDiv.innerText = '';
    
    // Hide all hangman parts
    hangmanParts.forEach(part => part.style.display = 'none');
    
    // Reset buttons
    const buttons = document.querySelectorAll('#letterButtons button');
    buttons.forEach(b => b.disabled = false);
    
    // Pick a new word without repetition
    if (words.length === 0) {
      messageDiv.innerText = '🎉 All words have been used!';
      document.getElementById("restartBtn").disabled = true; // Disable button
      return;
    }
    
    selectedWord = words.splice(Math.floor(Math.random() * words.length), 1)[0];
    updateDisplay();
    generateLetterButtons();
    hintDiv.innerText = "Hint: " + selectedWord.type; // Show hint for the word
  }

  function nextWord() {
    // Start a new word
    initGame();
  }

  function generateLetterButtons() {
    document.getElementById('letterButtons').innerHTML = '';
    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
    const rows = [
      alphabet.slice(0, 9),   // A-I
      alphabet.slice(9, 18),  // J-R
      alphabet.slice(18, 26)  // S-Z
    ];

    rows.forEach(rowLetters => {
      const rowDiv = document.createElement('div');
      rowLetters.forEach(letter => {
        const btn = document.createElement('button');
        btn.innerText = letter;
        btn.onclick = () => guessLetter(letter, btn);
        rowDiv.appendChild(btn);
      });
      document.getElementById('letterButtons').appendChild(rowDiv);
    });
  }

  function guessLetter(letter, btn) {
    btn.disabled = true;
    if (selectedWord.word.includes(letter)) {
      guessedLetters.push(letter);
    } else {
      wrongLetters.push(letter);
      revealNextPart();
    }
    updateDisplay();
    checkGameStatus();
  }

  function updateDisplay() {
    // Show the current word with guessed letters
    let displayWord = '';
    for (let ch of selectedWord.word) {
      if (guessedLetters.includes(ch)) {
        displayWord += ch + ' ';
      } else {
        displayWord += '_ ';
      }
    }
    wordDisplay.innerText = displayWord.trim();

    // Show wrong guesses
    wrongGuessesDiv.innerText = 'Wrong guesses: ' + wrongLetters.join(', ');
  }

  function revealNextPart() {
    // Reveal the next part in sequence, if available
    const index = wrongLetters.length - 1; // zero-based
    if (index < hangmanParts.length) {
      hangmanParts[index].style.display = 'block';
    }
  }

  function checkGameStatus() {
    const uniqueLetters = [...new Set(selectedWord.word.split(''))];
    const allGuessed = uniqueLetters.every(letter => guessedLetters.includes(letter));
    if (allGuessed) {
      messageDiv.innerText = '🎉 Congratulations! You guessed the word!';
      completedWordsDiv.innerText += selectedWord.word + ' ';
      disableAllButtons();
    } else if (wrongLetters.length >= maxWrong) {
      messageDiv.innerText = '🚫 Game Over! The word was: ' + selectedWord.word;
      completedWordsDiv.innerText += selectedWord.word + ' ';
      revealAllParts();
      disableAllButtons();
    }
  }

  function disableAllButtons() {
    document.querySelectorAll('#letterButtons button').forEach(b => b.disabled = true);
  }

  function revealAllParts() {
    hangmanParts.forEach(part => (part.style.display = 'block'));
  }

  // Start game on page load
  window.onload = initGame;
</script>

</body>
</html>