Use images to count chances (hang the hangman)

vonBarbarosa · Feb 22, 2016 · 6a87925 · 6a87925
1 parent 89bf6c7
commit 6a87925
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/css/style.css b/css/style.css
@@ -1,10 +1,16 @@
+img#chances {
+	margin-top: -210px;
+	position: absolute;
+	margin-left: -20px;
+}
+
 #old-rows {
 	display: none;
 }
 
 #cons-container{
 	margin-bottom: 20px;
-	margin-right: 50px;
+	margin-right: 30px;
     display: inline-block;
     vertical-align: top;
 }
@@ -17,7 +23,7 @@
 }
 
 .container .text-center {
-	margin: 0 0 40px 0;
+	margin: 10px 0 40px 0;
 }
 
 .jumbotron {

diff --git a/index.html b/index.html
@@ -25,11 +25,13 @@ <h1 class="text-center"> Forca Fonética</h1>
     <!-- 47 buttons-->
     <!-- source= http://symbolcodes.tlt.psu.edu/bylanguage/ipachart.html -->
     <div class="container">
-        <div class="text-center"><div id="chances" class="well"></div></div>
-        <div class="text-center"><div id="campo-foco1" class="well"> </div></div>
+        <div id="upper-container">
+            <img src="" alt="" id="chances">
 
-        <div class="text-center"><div id="campo-foco2" class="well"> </div></div>
+            <div class="text-center"><div id="campo-foco1" class="well"> </div></div>
 
+            <div class="text-center"><div id="campo-foco2" class="well"> </div></div>
+        </div>
         <div id="button-container" align="center">
             <div id="cons-container" >
                 <div align="right">

diff --git a/js/functions.js b/js/functions.js
@@ -215,7 +215,12 @@ gameOver: function(){
 
 loseOneChance: function(){
 	this.chances.current--;
-	$("#chances").text(this.chances.current);
+	app.refreshHangman();
+},
+
+refreshHangman: function(){
+	//$("#chances").text(this.chances.current);
+	$("#chances").attr("src", "img/forca-" + this.chances.current + ".png");
 },
 
 //tests victory, returns true or false
@@ -233,7 +238,7 @@ victory: function(){
 newGame: function(){
 	//resets chances
 	this.chances.current = this.chances.MAX;
-	$("#chances").text(this.chances.current);
+	app.refreshHangman();
 	app.resetbuttons();
 	app.getNewWord();
 	app.writeWord();