zanarmstrong/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: fresh block

  
## 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>
	<!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>