<div class="hangman">
<p style="font-size:96px;margin:30px 0 0;">🕵🏻‍</p>
  <h1 style="font-size:24px;color:gold;margin:0px;">Name that Book</h1>
  <br><br><br>
  <p style="color:#fff;font-size:36px;margin:-25px 0 15px;">" Books of the Bible "</p>
  <div class="guess"></div>
  <form class="guessForm">
    <div style="margin-top:40px;position:relative;left:60px;">
  <input type="text" class="guessLetter" maxlength="1"  placeholder="_" autofocus/>   
      <span style="font-size:48px;position:relative;top:2px;left:-145px;">👉🏻</span>
    </div>
  </form>  
  <div class="wrong">
    <div class="wrongLetters"></div>
  </div>
  <div class="message">
    <h1 class="title"></h1>
    <p class="text"></p>
    <button class="restart button">Play Again?</button>
    
  </div>
</div>

::placeholder {
  color: #fff;
}
* {
  font-family: Product Sans, Montserrat, arial, sans-serif !important;
  font-weight:bold;
}
$blue: #0f9;
$green: #2EB933;
$drk-blue: darken($blue, 50%);
* {
  box-sizing: border-box;
}
html, body {
  height: 100vh;
  width:100%;
}
body {
  background: black;
}

a {
  color: $blue;
  text-decoration: none;
  font-size: 14px;
  &:hover {
    color: lighten($blue, 10%);
    outline:none !important;
  }
}
.hangman {
  margin: 0 auto;
  text-align: center;
  padding: 10px;
 }

h1 {
  font-size: 50px;
  margin-bottom: 20px;
  color: $blue;
  font-weight: 300;
}

p {
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.3; 
}
@keyframes letteranim {
  50% {
    transform: translateY(-5px) scale(1.05);
  }
}
.letter {
  pointer-events:none;
    display: inline-block;
    color: #0f9;
    border-bottom: 5px solid white;
    margin: 0px 6px;
    font-size: 32px;
    padding: 5px 2px;
    transition: 0.5s;
    text-transform: uppercase;
}
.word {
  display: block;
  white-space: nowrap;
}
.correct {
    color: white;
    animation: letteranim 0.3s ease;
    background: #60f;
    padding: 5px 10px;
    border-radius: 7px;
    border-bottom: 7px solid #00000050;
}
.guessForm {
  margin: 30px auto 10px;
  input, .guessButton {
    color:black !important; 
  }
  .guessButton {
    outline:none !important;
    border: none;
    font-size: 30px;
    padding: 9px 20px 10px;
    cursor: pointer;
    background: #0f9;
    color: white;
    transition: 0.3s;
    margin: 25px 0 30px;
    border-bottom: 7px solid #00000050 !important;
    border-radius: 47px;    
  }
  .guessButton:hover {
    background:#0f9 !important;
  }
  input[type="text"] {
    outline: none;
    padding: 12px;
    font-size: 30px;
    margin-bottom: 20px;
    margin-right: 5px;
    text-align:center;
    color: black;
    width: 57px;
    animation-name: blink;
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
    text-transform: uppercase;
}
@keyframes blink { 
   0% {
     outline: 9px solid #60f;
  }     
   50% {
     outline: 12px solid #0f9;
  } 
   100% {
     outline: 9px solid #60f;
  }   
}
  .guessButton {
    border: none;
    font-size: 30px;
    padding: 10px 20px;
    cursor: pointer;
    background: #60f;
    color: white !important;
    transition: .3s;
    margin: 10px 0;
    &:hover {
      background: #0f9 !important;
      color:black !important;
      transition: 0.3s;
    }
  }
}

.wrongLetters {
  font-size: 20px;
  p {
    margin-bottom: 10px;
  }
  li {
    display: inline-block;
    font-size: 40px;
    background: #c00;
    padding: 5px 10px;
    color: white;
    text-transform: uppercase;
    margin-right: 10px;
    animation: letteranim 0.3s ease;
    border-radius: 7px;
    border-bottom: 7px solid #00000060;
}
}

.message {
    display: none;
    padding: 20px;
    position: absolute;
    top: 340px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: black;
    z-index: 12402402;
  
  h1 {
    display: none;
    color: #0f9;
  }
  .highlight {
    color: #0f9;
    text-transform: uppercase;
}
  .text {
    color: white;
    font-size: 30px;
    display: none;
    p {
      color: white;
    }
    .highlight {
      font-size: 40px;
    }
  }
  .muted {
    margin: 20px auto;
    color: lighten($blue, 10%);
  }
}

.button {
    display: none;
    margin: 10px 0;
    border: none;
    font-size: 30px;
    padding: 10px 20px;
    cursor: pointer;
    background: #0f9;
    color: black;
    transition: 0.3s;
    border-bottom: 7px solid #00000050;
    border-radius: 10px;
  outline:none !important;
    &:hover {
      background: #60f;
      color:white;    
      transition: 0.3s;
    }
}

(function($, window, undefined){

  Hangman = {
    init: function(words){
      this.words = words,
      this.hm = $(".hangman"),
      this.msg = $(".message"),
      this.msgTitle = $(".title"),
      this.msgText = $(".text"),
      this.restart = $(".restart"),
      this.wrd = this.randomWord(),
      this.correct = 0,
      this.guess = $(".guess"),
      this.wrong = $(".wrong"),
      this.wrongGuesses = [],
      this.rightGuesses = [],
      this.guessForm = $(".guessForm"),
      this.guessLetterInput = $(".guessLetter"),
      this.goodSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/goodbell.mp3"),
      this.badSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/bad.mp3"),
      this.winSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/win.mp3"),
      this.loseSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/lose.mp3"),
      this.setup();
    },


    setup: function(){
      this.binding();
      this.sounds();
      this.showGuess(this.wrongGuesses);
      this.showWrong();

    },

    
    sounds: function(){  
      this.badSound.volume = .4;
      this.goodSound.volume = .4;
      this.winSound.volume = .8;
      this.loseSound.volume = .4;
      
    },
    
    
    binding: function(){
      this.guessForm.on("submit", $.proxy(this.theGuess, this));
      this.restart.on("click", $.proxy(this.theRestart, this));
    },


    playSound: function(sound){
      this.stopSound(sound);
      this[sound].play();
    },


    stopSound: function(sound){
      this[sound].pause();
      this[sound].currentTime = 0;

    },


    theRestart: function(e){
      e.preventDefault();
      this.stopSound("winSound");
      this.stopSound("loseSound");
      this.reset();
    },


    theGuess: function(e){
      e.preventDefault();
      var guess = this.guessLetterInput.val();
      if(guess.match(/[a-zA-Z]/) && guess.length == 1){
        if($.inArray(guess, this.wrongGuesses) > -1 || $.inArray(guess, this.rightGuesses) > -1){
          this.playSound("badSound");
          this.guessLetterInput.val("").focus();
        }
        else if(guess) {
          var foundLetters = this.checkGuess(guess);
          if(foundLetters.length > 0){
            this.setLetters(foundLetters);
            this.playSound("goodSound");
            this.guessLetterInput.val("").focus();
          } else {
            this.wrongGuesses.push(guess);
            if(this.wrongGuesses.length == 7){
              this.lose();
            } else {
              this.showWrong(this.wrongGuesses);
              this.playSound("badSound");
            }
            this.guessLetterInput.val("").focus();
          }
        }
      } else {
        this.guessLetterInput.val("").focus();
      }
    },

    randomWord: function(){
      return this._wordData(this.words[ Math.floor(Math.random() * this.words.length)] );
    },


    showGuess: function(){
      var frag = "<ul class='word'>";
      $.each(this.wrd.letters, function(key, val){
        frag += "<li data-pos='" +  key  + "' class='letter'>*</li>";
      });
      frag += "</ul>";
      this.guess.html(frag);
    },


    showWrong: function(wrongGuesses){
      if(wrongGuesses){
        var frag = "<ul class='wrongLetters'>";
        frag += "<p>Wrong Letters: </p>";
        $.each(wrongGuesses, function(key, val){
          frag += "<li>" + val + "</li>";
        });
        frag += "</ul>";
      }
      else {
        frag = "";
      }

      this.wrong.html(frag);
    },


    checkGuess: function(guessedLetter){
      var _ = this;
      var found = [];
      $.each(this.wrd.letters, function(key, val){
        if(guessedLetter == val.letter.toLowerCase()){
          found.push(val);
          _.rightGuesses.push(val.letter);
        }
      });
      return found;

    },


    setLetters: function(letters){
      var _ = this;
      _.correct = _.correct += letters.length;
      $.each(letters, function(key, val){
        var letter = $("li[data-pos=" +val.pos+ "]");
        letter.html(val.letter);
        letter.addClass("correct");

        if(_.correct  == _.wrd.letters.length){
          _.win();
        }
      });
    },


    _wordData: function(word){

      return {
        letters: this._letters(word),
        word: word.toLowerCase(),
        totalLetters: word.length
      };
    },


    hideMsg: function(){
      this.msg.hide();
      this.msgTitle.hide();
      this.restart.hide();
      this.msgText.hide();
    },


    showMsg: function(){
      var _ = this;
      _.msg.show("blind", function(){
        _.msgTitle.show("bounce", "slow", function(){
          _.msgText.show("slide", function(){
            _.restart.show("fade");
          });

        });

      });
    },


    reset: function(){
      this.hideMsg();
      this.init(this.words);
      this.hm.find(".guessLetter").focus();

    },


    _letters: function(word){
      var letters = [];
      for(var i=0; i<word.length; i++){
        letters.push({
          letter: word[i],
          pos: i
        });
      }
      return letters;
    },


    rating: function(){
      var right = this.rightGuesses.length,
          wrong = this.wrongGuesses.length || 0,
          rating = {
            rating: Math.floor(( right / ( wrong + right )) * 100),
            guesses: (right + wrong)
            
          };
      return rating;
    },

    win: function(){
      var rating = this.rating();
      this.msgTitle.html("👏 Correct!");
      // this is messy
      this.msgText.html("You solved the mystery word in <span class='highlight'>" + rating.guesses + "</span> tries!<br>Score: <span class='highlight'>" + rating.rating + "%</span>");
      this.showMsg();
      this.playSound("winSound");

    },


    lose: function(){
      this.msgTitle.html("🤪 The mystery word was <span style='color:white;' class='highlight'>"+ this.wrd.word +" 🤦🏻‍♀️</span>");
      this.msgText.html("🤷🏻‍♂️ No worries! 👉🏻 Philippians 4:6-7");
      this.showMsg();
      this.playSound("loseSound");
    }
  
  };

  var wordList = ["Genesis", "Exodus", "Leviticus", "Numbers", "Deuteronomy", "Joshua", "Judges", "Ruth", "Samuel", "Kings", "Chronicles", "Ezra", "Nehemiah", "Esther", "Job", "Psalms", "Proverbs", "Ecclesiastes", "SongOfSolomon", "Isaiah", "Jeremiah", "Lamentations", "Ezekiel", "Daniel", "Hosea", "Joel", "Amos", "Obadiah", "Jonah", "Micah", "Nahum", "Habakkuk", "Zephaniah", "Haggai", "Zechariah", "Malachi", "Matthew", "Mark", "Luke", "John", "Acts", "Romans", "Corinthians", "Galatians", "Ephesians", "Philippians", "Colossians", "Thessalonians", "Timothy", "Titus", "Philemon", "Hebrew", "James", "Peter", "John", "Jude", "Revelation"];

  Hangman.init(wordList);
  
})(jQuery, window);
  
/*
* ©2014 Nate Wiley -- MIT License
Sounds from http://soundfxnow.com, and http://www.soundjay.com
*/