Wordscramble

by LyndseyB

HTML

<div id="letter-container" class="container round-border"></div>
<div class="container">
     <input type="text" id="input-letters" />   
</div>

CSS

html, body, h1, h2, header, footer {
	font-family: 'Alegreya Sans';
	padding:0;
	margin:0;	
	border:none;
}	

*, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

/* Game Styles */
.container {
	width:90%;
	max-width:900px;
	margin:0 auto;		
	position:relative;
}

#letter-container {
	width: 95%; 
	border:0px black solid; 
	display:table;
	border-spacing:0.4em 0.5em;
	table-layout:fixed;
}

#letter-container ul {   
	display:table-row;
}

#letter-container li.letter-selected {
    background:#ffcc00;
}
	
#letter-container ul li { 
	display:table-cell;	
	border:1px #3cb3dd solid; 
	color:#1b456b;	
	text-align:center; 
	font-size:2.1em; 
	cursor:pointer;
}

#letter-container .letter-selected {
	background:#ffcc00;
	border-color:#ffcc00;
	color:#1b456b;
}

JavaScript

var Wordscramble = function(numLetters, letterDist) { 
    
    this.defaultNumLetters = 7;    // default number of letters
    this.defaultDist = "RELATES";  // default letter distribution
    this.numLetters = numLetters;  // number of letters the game will contain
    this.letterDist = letterDist;  // holds letter distribution (optional)   
    this.letterDistArray = [];     // holds array of letterDist    
    this.gameLetters = [];         // holds the random game letters
    this.tempGameLetters = [];     // holds temporary game letters for modification
    this.root = {};                // trie root    
    
    /* 
    * checks for user defined number of letters
    * no value sets numLetters to default
    **/
    if(!this.numLetters || typeof this.numLetters !== 'number') {
        this.numLetters = this.defaultNumLetters;
    } 
    
    /* 
    * checks for user defined letter distribution
    * no value sets the final letters to the default distribution
    **/
    if(!this.letterDist) {   
        this.letterDist = this.defaultDist;      
    } else {
        this.letterDist = this.letterDist.toUpperCase();
    }  

    this.createArrayFromLetters(); // create letterDistArray from default/user letters
    this.createGameLetters();      // finalise gameLetters array   
    this.displayLetters();         // display letters to user
    this.handleUserInteraction();  // handle onclick, touch and keyboard events    
};

/* 
* converts letterDist to letterDistArray
**/
Wordscramble.prototype.createArrayFromLetters = function() {    
    
    for (var i = 0; i < this.letterDist.length; i++) {
        var letter = this.letterDist[i];
        this.letterDistArray.push(letter);
    }    
};

/* 
* creates array from the letter distribution 
* based on the num letters
**/
Wordscramble.prototype.createGameLetters = function() {    
    
    var ltrs = this.numLetters;         // number of letters
    var tmpDist = this.letterDistArray; // temporary distribution...