hangman by zanarmstrong

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
 body {
  font-family: "Railway", "Courier", sans-serif;
  margin-left: 30px;
  margin-top: 40px
}

#guess {
  width: 150px
 }

#answers {
  position: absolute;
  top: 120px; 
  font-size: 30px;
}

#wrongStatement {
  position: absolute;
  top: 190px; 
}
.wrong {
  color: red;
}

    #hangman {
      position: absolute;
      top: 250px;
      stroke: black;
      fill: none;
      stroke-width: 2;
    }

  </style>
<p>Let's play hangman!</p>
<input type="text" id="guess" placeholder="type a letter" />
<p id="output"></p>
<p id="wrongStatement">Wrong guesses: <span id="wrong" class="wrong"></span></p>
<p id="answers"></p>
<svg width="500" height="270" id="hangman">
  <circle cx="50" cy="50" r="30" id="head"/>
  <line x1="50" y1="2" x2="150" y2="2" id="topbar"/>
  <line x1="50" y1="1" x2="50" y2="20" id="rope"/>
  <line x1="0" y1="250" x2="170" y2="250" id="bottombar"/>
  <line x1="150" y1="0" x2="150" y2="250" id="rightbar"/>
  <line x1="50" y1="80" x2="50" y2="170" id="torso"/>
  <line x1="50" y1="120" x2="100" y2="90" id="arm1"/>
  <line x1="50" y1="120" x2="0" y2="90" id="arm2"/>
  <line x1="20" y1="230" x2="50" y2="170" id="leg1"/>
  <line x1="80" y1="230" x2="50" y2="170" id="leg2"/>
</svg>

</head>

<body>
  <script>
    'use strict';

var goal_word = 'visualization';

    var hangmanBodyParts = ["bottombar", "rightbar", "topbar", "rope", "head", "torso", "arm1", "arm2", "leg1", "leg2"]

var outputMessage = document.getElementById("output")
var submit = document.getElementById("submit")
var guess = document.getElementById("guess")
var wrong = document.getElementById("wrong")
var hangman = document.getElementById("hangman")

hangmanBodyParts.forEach(function(part){
  document.getElementById(part).setAttribute("visibility", "hidden")
})

//guess.focus()

guess.addEventListener("input", function(event){
	onSubmit(guess.value)
})


function updateOutput(message) {
  outputMessage.innerHTML = message
}

function setUpDataStore(goal_word) {
  var goal_array = goal_word.split("");
  var current_answer_array = [];
  for(var i in goal_array){
  	if(goal_array[i] == " "){
    	current_answer_array.push(" ")
    } else {
    	current_answer_array.push("_")
    }
  	
  }
  var wrongGuesses = [];
  var rightGuesses = [];
  var myData = {};

	myData.gameOver = false;
  myData.updateWrong = function(x) {
    wrongGuesses.push(x);
    wrong.innerHTML = wrongGuesses.join()
    console.log(wrongGuesses, wrongGuesses.length)
    document.getElementById(hangmanBodyParts[wrongGuesses.length-1]).setAttribute("visibility", "visible")
    if(wrongGuesses.length >= hangmanBodyParts.length){
    	updateOutput("You've made too many wrong guesses. Game Over.");
      outputMessage.className += " wrong";
      myData.gameOver = true;
    }
  }
  
  function updateFoundLetters(){
  	answers.innerHTML = current_answer_array.join(" ")
  }
  
  function didYouWin(){
  	console.log(current_answer_array.indexOf("_"))
  	if(current_answer_array.indexOf("_") == -1){
    	console.log('no more letters')
    	return true
    } else {
    	return false;
    }
  }

  myData.updateRight = function(x) {
  	goal_array.forEach(function(goal,i){
    	if(goal == x){
      	current_answer_array[i] = x;
      }
    })
    if(didYouWin()){
    	updateOutput("You won!")
    }
  	updateFoundLetters();
    rightGuesses.push(x);
  }

  myData.isInGoalWord = function(x) {
    if (goal_array.indexOf(x) > -1) {
      return true
    } else {
      return false
    }
  }

  myData.isValidLetter = function(x) {
    if (x.length > 1) {
      updateOutput("please only submit one letter");
      return false
    } else if (x.match(/[a-z]/i)) {
      return true
    } else {
      return false
    }
  }

  myData.hasBeenChecked = function(x) {
    if (wrongGuesses.indexOf(x) > -1 || rightGuesses.indexOf(x) > -1) {
      return true;
    }
    return false;
  }
	updateFoundLetters()
  return myData;
}

var dataStore = setUpDataStore(goal_word);
    
function resetGuessValue(){
  guess.value = ""
}

function onSubmit(letter) {
	setTimeout(resetGuessValue, 400);
  if(!dataStore.gameOver){
  if (dataStore.isValidLetter(letter)) {
    // check if letter has been checked before
    // if yes, change output to error message, if no go on
    if (dataStore.hasBeenChecked(letter)) {
      updateOutput("You've already guessed the letter " + letter)
    } else {
      // check if output is in the word
      if (dataStore.isInGoalWord(letter)) {
        updateOutput("Congrats! The letter " + letter + " is in the answer")
        dataStore.updateRight(letter)
      } else {
        updateOutput("You missed. The letter " + letter + " is not in the word")
        dataStore.updateWrong(letter)
      }
    }
  }
  }

}


  </script>
</body>