//--------------------------------
//  Game Settings
//--------------------------------
const gameLength = 80000;
const upTime = 4000


//--------------------------------
//  Variables
//--------------------------------
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const words = document.querySelector('.words');
const p = document.querySelector('.words p')
let lastHole; 
let timeUp = false;
let score = 0;
let entry;
let time;
let hole;
let popUp;
let speakingCheck;
let gramagramResult = false;
let playerData = {};
let currentPlayer;
let currentPlayerNumber = 0;
let playerQuantity = 0;
let resetScoreBoxes = false;
let voiceListenOn = false;


function registerPlayers() {

	// Create overlay
	let overlayHTML = document.createElement('div');
  
  overlayHTML.className = 'player-setup-outer-wrap';
  
  overlayHTML.innerHTML = '<div id="player-setup-overlay" class="overlay" bacground="green" ></div>';
  
	document.body.appendChild(overlayHTML);
  
	const playerSetupOverlay = document.getElementById('player-setup-overlay');
  const scoreboardArea = document.querySelector('.game-board' );
	playerSetupOverlay.parentElement.className += ' open';
  scoreboardArea.className += ' hide';
  
    //Find out how many players
		playerSetupOverlay.innerHTML = `<form id="player-setup-form" 	class="setup-form" ><h2>How many people are playing?</h2><input type="number" id="player-quantity" name="player-quantity" min="1" max="2"></form>
    <div id="intro-instructions-wrap">
   <h3>NOTE:</h3> 
   <ul><li>This is made to work only in the Google Chrome laptop/desktop browser. Do not use other browsers as they are likely to have issues with parts of the voice recognition and comparison processes.</li>
  <li>This requires the child to speak the answer into a microphone. Permission must be given to Chrome to allow use of the microphone. It should ask you when you first load the game.</li>
  <li>A headset with a microphone is strongly recommended. This ensures the best pickup of the child's voice and avoids cross talk.</li>
     </ul>
  </div>`
   
 let playersSetupForm =  document.getElementById('player-setup-form');
 
  playersSetupForm.addEventListener('submit', playerNumberHandler);
  
  
  
  function playerNumberHandler(e) {
    
    e.preventDefault();
    
    playerQuantity = document.getElementById("player-quantity").value;
    
    setupPlayerBoxes(playerQuantity);
  }
  
  
  function setupPlayerBoxes(amount) {
    
       // Setup gameboard
   scoreboardArea.classList.remove('hide');
  playerSetupOverlay.parentElement.classList.remove('open');
   
   let playerBoxes = document.getElementById('player-outer-wrap');
   
   playerBoxes.innerHTML = '<div id="player-boxes"  class="player-boxes-wrap" ><h3>Players</h3></div>';
   
   let scoreBoardArea = document.querySelector('.score-wrap');
   
   scoreBoardArea.appendChild(playerBoxes);
   
   let playerBoxWrap = document.getElementById('player-boxes');
   
   for(i = 1; i <= amount; i++) {
     
      // Player data
      let newPlayerData = {number: i, id: 'player-' + i, name: 'Player ' + i, score: 0, totalscore: 0}
     
      playerData[i] = newPlayerData;

     
     // Player box setup
      let playerBoxContent = playerBoxWrap.innerHTML;
     
    playerBoxWrap.innerHTML = playerBoxContent + '<div id="' + playerData[i]['id'] + '"><h4>' + playerData[i]['name'] + '</h4><div class="player-score" >' + playerData[i]['score'] + '</div> </div>';
   }
 }
}
registerPlayers()



function resetPlayerBoxes(amount) {
  
  let existingPlayerBoxes = document.querySelectorAll('.player-score');

  existingPlayerBoxes.forEach(box => {
  
         box.innerText = 0;
                              })
}



function startGame() {
  console.log('Started...');

  voiceListenOn = true;
  time = 0;
  
  if(resetScoreBoxes) {
    
  let playerBox = document.getElementById(currentPlayer.id);
  
  let scoreHolder = playerBox.querySelector('.player-score');
  
  
    Object.keys(playerData).forEach(key => {

    playerData[key]['score'] = 0;
  })
   
   
    resetPlayerBoxes(playerQuantity);
    resetScoreBoxes = false;
  }
  
  scoreBoard.textContent = 0;
  
  p.textContent = '';
  
  score = 0;
  currentPlayerNumber++;
  currentPlayer = playerData[currentPlayerNumber]
  timeUp = false;
  
  clearTimeout;
  setTimeout(updatePlayerScore, gameLength);
  
    //  Start the game
    dropMole();
  
}



function randomHole(holes) {
  
  const idx = Math.floor(Math.random() * holes.length);
  
  const hole = holes[idx];
  
  if(hole === lastHole) {
    
    return randomHole(holes)
  }

  lastHole =hole;
  return hole;
}



function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
} 



function randomEntry(min, max) {
  
    return Math.random().toString(36).substr(2, 1);
}



function peep() {
  clearTimeout(popUp);
  
  time = randomTime(2000, 3000);
  hole = randomHole(holes);
  entry = randomEntry(0, 20);
  entry = entry.toUpperCase();
  const mole = hole.querySelector('.entry-holder');
  mole.textContent = entry;


  var synth = window.speechSynthesis;
  
  if (!synth.speaking) {
    hole.classList.add('up');
    popUp = setTimeout (() => {
      dropMole();
    }, upTime);
    
  } else {
    

    speakingCheck = setInterval(function(){
        if (!synth.speaking) {

          clearInterval(speakingCheck);
            hole.classList.add('up');
    popUp = setTimeout (() => {
      dropMole();
    }, upTime);
    
  }
    }, 500);
    }; 
}



function dropMole() {
  clearTimeout(popUp);
  holes.forEach(hole => hole.classList.remove('up'))
  
  if(!timeUp) {
    
        popUp = setTimeout(peep, time);
  };
}



//  Speech recognition
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
recognition.lang = 'en-US';
recognition.start();
recognition.addEventListener('result', processHumanResponse);
recognition.addEventListener('end', function() {

  var synth = window.speechSynthesis;

  testSpeaking = setInterval(function(){
console.log('synth.speaking',synth.speaking)
    if (!synth.speaking) {

      clearInterval(testSpeaking);

      recognition.start();
    }
  }, 500);
});



//********************************
//  Answer Detection and Testing
//********************************
function processHumanResponse(e) {
 
  if(voiceListenOn) {
  

  const transcript = Array.from(e.results)
                            .map(result => result[0])
                            .map(result => result.transcript)
                            .join('');
  

  const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩');
   
  p.textContent = poopScript;

  if (e.results[0].isFinal) {

    var answer = event.results[0][0].transcript;
    
    entry = String(entry);
    
    answer = String(answer).toUpperCase();
    
    gramagramCheck(entry, answer);

    if(answer.includes(entry) || gramagramResult === true) {

      p.textContent = String(entry) + ' is Correct!';

      msg.text = document.querySelector('.words p').textContent;
     
      bonk(e);
      
      toggle();
      
    } else {

      p.textContent = answer + ' is wrong. Try Again!';
       msg.text = document.querySelector('.words p').textContent;
      toggle();
    }
  }
}
}


function bonk(e) {
  if(!e.isTrusted) return; // Checks for faking a click
  score++;
  //this.classList.remove('up');
  scoreBoard.textContent = score;
  clearTimeout(popUp);
  dropMole();
}



function stopGame() {
  
  voiceListenOn = false;
  timeUp = true;
  
  dropMole();
}



function updatePlayerScore() {
  
  let playerBox = document.getElementById(currentPlayer.id);
  
  let scoreHolder = playerBox.querySelector('.player-score');
  
 
    playerData[currentPlayer.number]['score'] = score;

  scoreHolder.innerText = score;
  
  nextPlayer();
  
}


function encouragementLogic() {
    
  endScore = Number(scoreBoard.textContent);
    
  if( endScore <= 3 ) {
    
    p.textContent = 'Your score is ' + score + '. Keep practicing and you will be great! ';
    
      msg.text = document.querySelector('.words p:first-child').textContent;

  } else {
    
      if( endScore > 3 && endScore <= 7) {
        
              p.textContent = 'Your score is ' + score + '. That is really good! Keep practicing and you will be great! ';
            
              msg.text = document.querySelector('.words p:first-child').textContent;
        
          } else {
            
                  if( endScore > 7 && endScore < 10) {
 
                       p.textContent = 'Your score is ' + score + '. You are doing GREAT! ';
                       msg.text = document.querySelector('.words p:first-child').textContent;
     
                  } else {
                    
                    if( endScore == 10) {
                      
                      p.textContent = 'Your score is ' + score + '. You are PERFECT! That is OUTSTANDING! ';
                      msg.text = document.querySelector('.words p:first-child').textContent;
                    } 
                }
          }
    }

  toggle();
}


function nextPlayer() {
  
  if(currentPlayer.number < playerQuantity) {
    
    stopGame();
     
    encouragementLogic();
    
    let nextPlayerStartMsg = function() {
      
      p.textContent = 'Player 2, click the START button!';
    
      msg.text = document.querySelector('.words p:first-child').textContent;
    
      toggle();
    }
    
    setTimeout(nextPlayerStartMsg, 5000);
    
    // let playerText = document.getElementById('player-boxes');
    //  playerText.querySelector('h3').innerText = 'Player 2, click the START button!';
   
  } else {
    
    endGame();
    
    encouragementLogic();
    
 
    let topScore = 0;
    let gameWinnner = '';
    Object.keys(playerData).forEach(key => {
    
      let thisScore = playerData[key]['score'];
      let thisplayer= playerData[key]['name'];
     
      if(thisScore > topScore) {
      topScore = thisScore;
      gameWinnner = thisplayer;
      } else if (thisScore == topScore) {
        
        if(topScore > 0) {
           gameWinnner = ' a tie between ' + gameWinnner + ' and ' + thisplayer;
        } else {
          gameWinnner = ' a tie because there no points scored'
        }
       
      }
    });
    
    let nextPlayerStartMsg = function() {
      
      p.textContent = 'The winner is ' + gameWinnner + '!!!   Click the START button to play again!';

      msg.text = document.querySelector('.words p:first-child').textContent;
    
      toggle();
    }
    
   
    setTimeout(nextPlayerStartMsg, 5000);
    
  }
}



function endGame() {
  
  voiceListenOn = false;
  timeUp = true;
  currentPlayerNumber = 0;
  resetScoreBoxes = true;
  
}



//*******************
//    Voicing
//*******************
const msg = new SpeechSynthesisUtterance();
  let voices = [];
  const voicesDropdown = document.querySelector('[name="voice"]');
  const options = document.querySelectorAll('[type="range"], [name="text"]');
  // const speakButton = document.querySelector('#speak');
  const stopButton = document.querySelector('#stop');
  msg.text = document.querySelector('.words').textContent;



  function populateVoices() {
    voices = this.getVoices();
    voicesDropdown.innerHTML = voices
      .filter(voice => voice.lang.includes('en'))
      .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
      .join('');
  }



  function setVoice() {
    
    msg.voice = voices.find(voice => voice.name === this.value);
    toggle();
  }



  function toggle(startOver = true) {
    recognition.stop();
    speechSynthesis.cancel();
    if (startOver) {
      speechSynthesis.speak(msg);
    }

  }



  function setOption() {
    msg[this.name] = this.value;
    toggle();
  }



  speechSynthesis.addEventListener('voiceschanged', populateVoices);
  voicesDropdown.addEventListener('change', setVoice);
  options.forEach(option => option.addEventListener('change', setOption));
  // speakButton.addEventListener('click', toggle);
  stopButton.addEventListener('click', () => toggle(false));

function arrayContains(needle, arrhaystack) {
    return (arrhaystack.indexOf(needle) > -1);
}



function gramagramCheck(thisentry, thisanswer) {
  
      const gramagrams = {
      0:  ['OH', 'ZERO', 'O'],
      1:  ['ONE', 'WON', 'JUAN'],
      2:  ['TWO', 'TO', 'TOO'],
      3:  ['THREE', 'TREE', 'TREES', 'ME', 'BE', 'BEE', 'SEE','SEA','C', 'D', 'V', 'KNEE'],
      4:  ['FOUR', 'FOR', , 'POOR', 'MORE', 'STORE', 'LORE', 'OR', 'BORE', 'SNORE', 'CORE', 'DOOR', 'YORE'],
      5:  ['FIVE','HIVE','LIVE','KNIFE', 'THRIVE'],
      6:  ['SIX','STICK', 'STICKS','PIC', 'PICS', 'PICK', 'PICKS', 'LICK', 'LICKS', 'RICK', 'RICKS', 'KICK', 'KICKS', 'KIX', 'MIX', 'FIX', 'WICKS', 'WIX', 'TICK', 'TICKS', 'BLITZ'],
      7:  ['SEVEN', 'HEAVEN'],
      8:  ['EIGHT', 'EIGHTY', 'ATE', 'WAIT', 'LATE', 'MATE'],
      9:  ['NINE', 'LINE', 'FINE', 'TIME', 'TWINE', 'SINE'],
      10: ['TEN', 'LEN', 'LEND', 'SPEND', 'HEN', 'MEN', 'BEN', 'WHEN'],
      11: ['ELEVEN', 'HEAVEN', 'IN HEAVEN', 'E 11'],
      12: ['TWELVE'],
      13: ['THIRTEEN'],
      14: ['FOURTEEN', 'FOUR TEEN'],
      15: ['FIFTEEN', 'FITH TEEN'],
      A: ['THEY', 'HAY', 'HEY'],
      B:  ['SEA', 'SEAS','SEE', 'SEEDY', 'SEES', 'C', 'D', 'V', 'P', 'WE', 'ELSIE', 'KNEE', 'THREE', 'TREE', 'ME', 'PEACE', 'THE', 'THESE'],
      C:  ['SEA', 'SEAS','SEE', 'SEEDY', 'SEES', 'G', 'V', 'P', 'WE', 'ELSIE', 'KNEE', 'THREE', 'TREE', 'THE', 'THESE',  'ME', 'BE', 'BEE'],
      D:  ['THREE', 'TREE', 'THE', 'THESE', 'ME', 'BE', 'BEE', 'SEE', 'SEA', 'B', 'V', 'P', 'WE', 'KNEE'],
      H:  ['EIGHT','8','HATE', 'ATE', 'WAIT', 'LATE', 'MATE'],
      I:  ['AYE','EYE','EYES'],
      K:  ['DECAY'],
      L:  ['ELSIE', 'EL'],
      O:  ['OH', 'ZERO', '0'],
      P:  ['KEWPIE', 'B', 'C', 'D', 'V'], 
      Q:  ['CUE', 'CUES', 'CUTIE', 'KEWPIE'],
      R:  ['ARE', 'BAR', 'PAR'],
      T:  ['CUTIE', 'EIGHTY'],
      U:  ['EWES', 'EWE', 'YEW', 'YEWS'],
      V:  ['SEA', 'SEAS','SEE', 'SEEDY', 'SEES', 'C',  'ELSIE', 'KNEE', 'THREE', 'TREE', 'THE', 'THESE', 'ME', 'BE', 'BEE'],
      X:  ['HEX'],
      Y:  ['WISE'],
      Z:  ['SEA', 'SEAS','SEE', 'SEEDY', 'SEES', 'G', 'V', 'C', 'ELSIE', 'KNEE', 'THREE', 'TREE', 'THE', 'THESE', 'ME', 'BE', 'BEE']
  } 
  
      let entryUpper = thisentry;
  
      let answerUpper =thisanswer;
  
      keys = Object.keys(gramagrams);
  
      gramagramResult = false;
  
      if(gramagrams[thisentry]) {

            gramagrams[thisentry].forEach(item => { 

              if(item === thisanswer) {

                    gramagramResult = true;
                 } 
            })
       } 
}