Added word length option to Anagram Game

4 files changed, 65 insertions, 23 deletions

diff --git a/all.html b/all.html
index 22ee41f..23c7bac 100644
--- a/all.html
+++ b/all.html
@@ -24,7 +24,7 @@
 				can be found <a href="explanation.html">here</a>.
 			</div>
 		</div>
-        
+
 
 		<div class="row">
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
@@ -58,15 +58,15 @@
 				can be found <a href="explanation.html">here</a>.
 			</div>
 		</div>
-        
+
         <div class="row">
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
 				<iframe frameborder="0" src="https://itch.io/embed/104046?bg_color=e5e8ff&amp;fg_color=222222&amp;link_color=5a06b1&amp;border_color=bebebe" width="552" height="167"></iframe>
 				<div class="project-title"><a href="https://pommicket.itch.io/automap">AutoMap</a></div>
 			</div>
 		</div>
-        
-        
+
+
 		<div class="row">
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
 				<img src="screenshots/NameGenerator.png" width=200 height=200><br>
@@ -75,7 +75,7 @@
 				the frequencies of trigrams.
 			</div>
 		</div>
-        
+
         <div class="row">
             <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
                 <img src="screenshots/hypersphere.png" width=250 height=250><br>
@@ -270,7 +270,7 @@
 			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
 				<img src="screenshots/anagramgame.png" width=250 height=250><br>
 				<div class="project-title"><a href="anagramgame.html">The Anagram Game</a></div>
-				Find an anagram of a random 7-letter word.
+				Find an anagram of a random word.
 			</div>
 		</div>
 
diff --git a/anagramgame.html b/anagramgame.html
index 9d415c2..60cffb0 100644
--- a/anagramgame.html
+++ b/anagramgame.html
@@ -13,10 +13,17 @@
 	<p>The word list can be found <a href="https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt">here</a>.</p>
 	<div id="loading">Loading word list...</div>
 	<div id="word"></div>
-	<div id="hidden" style="visibility: hidden;">
+	<div id="inputs">
         <div class="container-fluid">
             <div class="row">
-                <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10">
+                <div class="input-group input-group-md col-lg-6 col-md-12 col-sm-12 col-xs-12">
+                    </span>
+                    <input class="form-control input-lg" type="text" id="length" placeholder="Word length" onKeyDown="if(event.keyCode==13) play();">
+                    <span class="input-group-addon">
+                        <button class="btn btn-sm btn-primary" onclick="play();">Play!</button>
+                    </span>
+                </div>
+                <div class="input-group input-group-md col-lg-6 col-md-12 col-sm-12 col-xs-12">
                     <input class="form-control input-lg" type="text" id="guess" onKeyDown="if(event.keyCode==13) submit();">
                     <span class="input-group-addon">
                         <button class="btn btn-sm btn-primary" onclick="submit();">Submit guess</button>
@@ -25,12 +32,14 @@
                         <button class="btn btn-sm btn-danger" onclick="giveUp();">Give up?</button>
                     </span>
                 </div>
+
             </div>
-        </div>
 
+        </div>
 	</div>
 	<div id="answer"></div>
-	<button id="again" class="btn btn-sm btn-primary" style="visibility: hidden;" onclick="play();">Play again</button>
+    <div id="error" style="color: red;"></div>
+	<button id="again" class="btn btn-sm btn-primary" onclick="play();">Play again (Press enter, or click here)</button>
 	<script src="js/anagramgame.js"></script>
   </body>
 
diff --git a/games.html b/games.html
index 296b481..8a64238 100644
--- a/games.html
+++ b/games.html
@@ -53,6 +53,14 @@
     			</div>
     		</div>
 
+            <div class="row">
+    			<div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project">
+    				<img src="screenshots/anagramgame.png" width=250 height=250><br>
+    				<div class="project-title"><a href="anagramgame.html">The Anagram Game</a></div>
+    				Find an anagram of a random word.
+    			</div>
+    		</div>
+
         </div>
     </body>
 </html>
diff --git a/js/anagramgame.js b/js/anagramgame.js
index c50c403..b1ad100 100644
--- a/js/anagramgame.js
+++ b/js/anagramgame.js
@@ -1,5 +1,6 @@
 var words = [];
 var word;
+var length;
 var anagram;
 var alphabet = "qwertyuiopasdfghjklzxcvbnm";
 var letters = alphabet + alphabet.toUpperCase();
@@ -51,6 +52,7 @@ function findWord()
 {
 	var numWords = words.length;
 	word = words[Math.floor(Math.random()*numWords)];
+	console.log(words.length);
 	if (containsSymbols(word))
 		findWord();
 	var lc = letterCounts(word);
@@ -67,16 +69,24 @@ function findWord()
 
 function play()
 {
-	$("#hidden").attr("style", "visibility: hidden;");
-	$("#again").attr("style", "visibility: hidden;");
-	$("#answer").attr("style", "visibility: hidden;");
+	length = $("#length").val();
+	loadWords();
+
+}
+
+
+function showWord()
+{
+	$("#inputs").hide();
+	$("#again").hide();
+	$("#answer").hide();
 	$("#guess").val("");
 	$("#loading").html("Finding a word with an anagram...");
 	findWord();
 	$("#loading").html("");
 	$("#word").html("Find an anagram of " + word + ".");
-	$("#hidden").attr("style", "");
-
+	$("#inputs").show();
+	$("#guess").focus();
 }
 
 function isWord(x)
@@ -86,6 +96,11 @@ function isWord(x)
 
 function loadWords()
 {
+	if (length < 2 || length > 18)
+	{
+		$("#error").text("Word length must be 2-18.");
+		return;
+	}
 	var xhttp = new XMLHttpRequest();
 	xhttp.onreadystatechange = function()
 	{
@@ -95,10 +110,10 @@ function loadWords()
 			words = [];
 			for (var i = 0; i < allwords.length; i++)
 			{
-				if (allwords[i].length == 7)
+				if (allwords[i].length == length)
 					words.push(allwords[i].toLowerCase());
 			}
-			play();
+			showWord();
 		}
 	};
 	xhttp.open("GET", "https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt", true);
@@ -107,27 +122,37 @@ function loadWords()
 
 function submit()
 {
+	if ($("#again").is(":visible"))
+	{
+		play();
+		return;
+	}
 	var guess = $("#guess").val().toLowerCase();
 	if (guess != word && letterCounts(guess).equals(letterCounts(word)) && isWord(guess))
 	{
-		$("#answer").attr("style", "");
+		$("#answer").show();
 		$("#answer").html("<span style='color: green'>Correct!</span>");
 
-		$("#again").attr("style", "");
+		$("#again").show();
 	}
 	else
 	{
-		$("#answer").attr("style", "");
+		$("#answer").show();
 		$("#answer").html("<span style='color: red'>Incorrect!</span>");
 	}
 }
 
 function giveUp()
 {
-	$("#answer").attr("style", "");
+	$("#answer").show();
 	$("#answer").html("<span style='color: red'>The answer was " + anagram + ".</span>");
 
-	$("#again").attr("style", "");
+	$("#again").show();
 }
 
-loadWords();
+
+$("#again").hide();
+$("#answer").hide();
+$("#guess").val("");
+$("#loading").hide();
+$("#guess").show();