Prechádzať zdrojové kódy

Merge pull request #1 from RyanNeilson/master

Updated HMTL, CSS & JS
Febbweiss 7 rokov pred
rodič
commit
48a326352b
3 zmenil súbory, kde vykonal 690 pridanie a 408 odobranie
  1. 97 3
      css/yahtzee.css
  2. 405 332
      index.html
  3. 188 73
      js/yahtzee.js

+ 97 - 3
css/yahtzee.css

@@ -1,3 +1,9 @@
+* {
+	font-family: helvetica, sans-serif;
+	font-weight: 300;
+	font-size: 12px;
+}
+
 .possibility {
 }
 
@@ -43,23 +49,111 @@
 
 .keep {
 	visibility: hidden;
+	color: black;
 }
 
 .trash {
 	visibility: hidden;
+	color: #ba2323;
 }
 
 .score {
 	font-family: "Zeyada", verdana, arial, helvetica, cursive;
-	color: blue;
+	color: black;
 	font-size: 2em;
 	font-weight: bold;
 	text-align: center;
 }
 .score.trashed {
-	color: red;
+	color: #ba2323;
 }
 
 .progress {
-	margin-bottom: 0;
+	height: 20px;
+	background-color: white;
+	
+}
+
+dt, th {
+	font-weight: bold;
+}
+
+#banner {
+	text-align: center;
+	width: 100%;
+	padding: 15px;
+	background-color: white;
+	margin-top: 0px;
+	margin-left: 0px;
+	margin-bottom: 15px;
+	box-shadow: 0px 0px 5px black;	
+}
+
+h1 {
+	color: black;
+	font-family: 'Fredericka the Great', helvetica, sans-serif;
+	font-size: 40px;	
+}
+
+td, th {
+	padding: 10px;
+	width: 20%;
+	height: auto;
+}
+
+dd {
+	margin-left: 0px;
+}
+
+#scorePanel {
+	border: 1px solid black;
+	padding: 10px; 
+}
+
+table {
+	border: 1px solid black;
+	table-layout: fixed;
+	width: 90%;
+	
+}
+
+#btn a{
+	height: 30px;
+	width: 60px;
+	background-color: #ba2323;
+	color: white;
+	font-weight: bold;
+	padding: 10px;
+	border-radius: 5px;	
+}
+
+#btn a:hover{
+	background-color: #fcb51b;
+	text-decoration: none;
+	color: black;
+}
+
+body {
+	background-color: #215fc4;
+}
+
+.container {
+	background-color: white;
+	padding: 40px;
+	box-shadow: 0px 0px 5px black;
+	margin-bottom: 20px;
+	min-width: 95%;
+	
+}
+
+th {
+	background-color: #fcb51b;
+}
+
+#upperScore, #lowerScore, #bonus, #totalScore {
+	font-family: "Zeyada", verdana, arial, helvetica, cursive;
+	color: black;
+	font-size: 2em;
+	font-weight: bold;
+	text-align: center;
 }

+ 405 - 332
index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <!--
 Copyright (c) 2013 Fabrice ECAILLE aka Febbweiss
 
@@ -7,7 +8,7 @@ The above copyright notice and this permission notice shall be included in all c
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
-<!DOCTYPE html>
+
 <html>
     <head>
     	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -21,367 +22,439 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
         <![endif]-->
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 		<link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'>
+		<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">  
         <script src="lib/jquery-1.7.1.min.js" type="text/javascript" ></script>
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 		<link href="css/yahtzee.css" type="text/css" rel="stylesheet" media="screen, projection" />
 
     </head>
     <body>
-			<div style="width: 50%;float: left;">
-				<div class="dice empty" id="dice1"></div>
-				<div class="dice empty" id="dice2"></div>
-				<div class="dice empty" id="dice3"></div>
-				<div class="dice empty" id="dice4"></div>
-				<div class="dice empty" id="dice5"></div>
-				<div class="dice empty" id="dice6"></div>
-				<div class="clear"></div>
-				<div>
-					<span>Launch</span>
-					<span id="launch"></span>
-				</div>
-				<a href="javascript:void(0)" id="launchBtn">Launch</a>
-				<div>
-					<dl>
-						<dt>Three of a kind</dt>
-						<dd>Three dice showing the same face</dd>
-						<dd>Sum of all dice</dd>
-						<dt>Four of a kind</dt>
-						<dd>Four dice showing the same face</dd>
-						<dd>Sum of all dice</dd>
-						<dt>Full</dt>
-						<dd>A three-of-a-kind and a pair</dd>
-						<dd>25 points</dd>
-						<dt>Small straight</dt>
-						<dd>Four sequential dice</dd>
-						<dd>30 points</dd>
-						<dt>Large straight</dt>
-						<dd>Five sequential dice</dd>
-						<dd>40 points</dd>
-						<dt>Yahtzee</dt>
-						<dd>Five dice showing the same face</dd>
-						<dd>50 points</dd>
-						<dt>Chance</dt>
-						<dd>Sum of all dice</dd>
-					</dl>
-				</div>
-				<div id="scorePanel" style="display: none;">
-					<table class="table table-bordered">
-						<tr>
-							<td>Upper grid score</td>
-							<td id="upperScore" style="text-align: center"></td>
-						</tr>
-						<tr>
-							<td>Bonus</td>
-							<td id="bonus" style="text-align: center"></td>
-						</tr>
-						<tr>
-							<td>Lower grid score</td>
-							<td id="lowerScore" style="text-align: center"></td>
-						</tr>
-						<tr>
-							<td><b>Total</b></td>
-							<td id="totalScore" style="text-align: center"><b></b></td>
-						</tr>
-					</table>
-				</div>
-			</div>
-			<div style="width: 50%;float: left;">
-				
-				<table border="1">
-					<thead>
-						<tr>
-							<th style="text-align: center;">Combinaison</th>
-							<th style="text-align: center;" width="84px">
-								Score
-							</th>
-							<th style="text-align: center;" width="100px"></th>
-						</tr>
-					</thead>
-					<tbody>
-						
-							<tr>
-								<td>
-									<span id="oneLabel">
-										One
-									</span>
-								</td>
-								<td style="text-align: center;">
-									<span id="oneScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="oneKeep" data-id="one" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="oneTrash" data-id="one" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-							<tr>
-								<td>
-									<span id="twoLabel">
-										Two
-									</span>
-								</td>
-								<td style="text-align: center;">
-									<span id="twoScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="twoKeep" data-id="two" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="twoTrash" data-id="two" class="trash">Trash</a>
-								</td>
-							</tr>
+    		<div id="banner"class="col-xs-12">
+    			<h1>FEBBWEISS' YAHTZEE!</h1>
+    		</div>
+    		<div class="container">
+    			<div class="row">
+		    		<div class="col-xs-12 col-xl-4">
 						
-							<tr>
-								<td>
-									<span id="threeLabel">
-										Three
-									</span>
-								</td>
-								<td style="text-align: center;">
-									<span id="threeScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="threeKeep" data-id="three" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="threeTrash" data-id="three" class="trash">Trash</a>
-								</td>
-							</tr>
+							<div>
+								<dl><br>
+									<dt>Three of a kind</dt>
+									<dd>Three dice showing the same face (Ex. Three 3's)</dd>
+									<dd>Scoring: Sum of all dice</dd>
+									<br>
+									<dt>Four of a kind</dt>
+									<dd>Four dice showing the same face (Ex. Four 5's)</dd>
+									<dd>Scoring: Sum of all dice</dd>
+									<br>
+									<dt>Full House</dt>
+									<dd>A three-of-a-kind and a pair (Ex. Three 1's and Two 4's)</dd>
+									<dd>Scoring: 25 points</dd>
+									<br>
+									<dt>Small straight</dt>
+									<dd>Four sequential dice (Ex. 2, 3, 4, 5)</dd>
+									<dd>Scoring: 30 points</dd>
+									<br>
+									<dt>Large straight</dt>
+									<dd>Five sequential dice (Ex. 2, 3, 4, 5, 6)</dd>
+									<dd>Scoring: 40 points</dd>
+									<br>
+									<dt>Yahtzee</dt>
+									<dd>Five dice showing the same face (Ex. Five 4's)</dd>
+									<dd>Scoring: 50 points</dd>
+									<br>
+									<dt>Chance</dt>
+									<dd>Scoring: Sum of all dice</dd>
+								</dl>
+							</div>
+							
 						
-							<tr>
-								<td>
-									<span id="fourLabel">
-										Four
-									</span>
-								</td>
-								<td style="text-align: center;">
-									<span id="fourScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="fourKeep" data-id="four" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="fourTrash" data-id="four" class="trash">Trash</a>
-								</td>
-							</tr>
 						
-							<tr>
-								<td>
-									<span id="fiveLabel">
-										Five
-									</span>
-								</td>
-								<td style="text-align: center;">
-									<span id="fiveScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="fiveKeep" data-id="five" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="fiveTrash" data-id="five" class="trash">Trash</a>
-								</td>
-							</tr>
+					</div>
+					
+					<div class="col-xs-12 col-xl-4">
 						
-							<tr>
-								<td>
-									<span id="sixLabel">
-										Six
-									</span>
-								</td>
-								<td style="text-align: center;">
-									<span id="sixScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="sixKeep" data-id="six" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="sixTrash" data-id="six" class="trash">Trash</a>
-								</td>
-							</tr>
+						<table border="1">
+							<thead>
+								<tr>
+									<th style="text-align: center;">Combination</th>
+									<th style="text-align: center;" width="84px">
+										Score
+									</th>
+									<th style="text-align: center;" width="100px">Options</th>
+								</tr>
+							</thead>
+							<tbody>
+								
+									<tr>
+										<td>
+											<span id="oneLabel">
+												Ones
+											</span>
+										</td>
+										<td style="text-align: center;">
+											<span id="oneScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="oneKeep" data-id="one" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="oneTrash" data-id="one" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="twoLabel">
+												Twos
+											</span>
+										</td>
+										<td style="text-align: center;">
+											<span id="twoScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="twoKeep" data-id="two" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="twoTrash" data-id="two" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="threeLabel">
+												Threes
+											</span>
+										</td>
+										<td style="text-align: center;">
+											<span id="threeScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="threeKeep" data-id="three" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="threeTrash" data-id="three" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="fourLabel">
+												Fours
+											</span>
+										</td>
+										<td style="text-align: center;">
+											<span id="fourScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="fourKeep" data-id="four" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="fourTrash" data-id="four" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="fiveLabel">
+												Fives
+											</span>
+										</td>
+										<td style="text-align: center;">
+											<span id="fiveScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="fiveKeep" data-id="five" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="fiveTrash" data-id="five" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="sixLabel">
+												Sixes
+											</span>
+										</td>
+										<td style="text-align: center;">
+											<span id="sixScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="sixKeep" data-id="six" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="sixTrash" data-id="six" class="trash">Trash</a>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<span>
+												Upper Score
+											</span>
+										</td>
+										
+										<td style="text-align: center;">
+											<span class="score" id="topScore"></span>
+										</td>
+										
+									</tr>
+								
+							</tbody>
+						</table>
+						<br>
+								
+								
+								<div id="btn">
+								<a href="javascript:void(0)" id="launchBtn">Roll the Dice</a>
+								</div>
+								<br>
+								<div>			
+									<span>Dice Roll #:</span>
+									<span id="launch"></span>
+								</div>
+								<br>
+							<div>
+								<div class="dice empty" id="dice1"></div>
+								<div class="dice empty" id="dice2"></div>
+								<div class="dice empty" id="dice3"></div>
+								<div class="dice empty" id="dice4"></div>
+								<div class="dice empty" id="dice5"></div>
+								<div class="dice empty" id="dice6"></div>
+								<div class="clear"></div>
+							</div>
 						
-					</tbody>
-				</table>
-				
-				<table border="1">
-					<thead>
-						<tr>
-							<th style="text-align: center;">Combinaison</th>
-							<th style="text-align: center;">Probability</th>
-							<th style="text-align: center;" width="84px">
-								Score
-							</th>
-							<th style="text-align: center;" width="100px"></th>
-						</tr>
-					</thead>
-					<tbody>
-						
-							<tr>
-								<td>
-									<span id="threeOfAKindLabel">
-										Three of a kind
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="threeOfAKindBar"></div>
-										<span id="threeOfAKindProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="threeOfAKindScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="threeOfAKindKeep" data-id="threeOfAKind" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="threeOfAKindTrash" data-id="threeOfAKind" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-							<tr>
-								<td>
-									<span id="fourOfAKindLabel">
-										Four of a kind
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="fourOfAKindBar"></div>
-										<span id="fourOfAKindProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="fourOfAKindScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="fourOfAKindKeep" data-id="fourOfAKind" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="fourOfAKindTrash" data-id="fourOfAKind" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-							<tr>
-								<td>
-									<span id="fullLabel">
-										Full
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="fullBar"></div>
-										<span id="fullProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="fullScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="fullKeep" data-id="full" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="fullTrash" data-id="full" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-							<tr>
-								<td>
-									<span id="smallStraightLabel">
-										Small straight
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="smallStraightBar"></div>
-										<span id="smallStraightProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="smallStraightScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="smallStraightKeep" data-id="smallStraight" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="smallStraightTrash" data-id="smallStraight" class="trash">Trash</a>
-								</td>
-							</tr>
+						<div>
+							
 						
-							<tr>
-								<td>
-									<span id="largeStraightLabel">
-										Large straight
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="largeStraightBar"></div>
-										<span id="largeStraightProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="largeStraightScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="largeStraightKeep" data-id="largeStraight" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="largeStraightTrash" data-id="largeStraight" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-							<tr>
-								<td>
-									<span id="yahtzeeLabel">
-										Yahtzee
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="yahtzeeBar"></div>
-										<span id="yahtzeeProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="yahtzeeScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="yahtzeeKeep" data-id="yahtzee" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="yahtzeeTrash" data-id="yahtzee" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-							<tr>
-								<td>
-									<span id="luckLabel">
-										Chance
-									</span>
-								</td>
-								<td>
-									<div class="progress">
-										<div class="bar" id="luckBar"></div>
-										<span id="luckProbability" style="padding-left: 1px;">&nbsp;</span>
-									</div>
-								</td>
-								<td style="text-align: center;">
-									<span id="luckScore" class="score">&nbsp;</span>
-								</td>
-								<td>
-									<a href="javascript:void(0)"id="luckKeep" data-id="luck" class="keep">Keep</a>
-									<a href="javascript:void(0)"id="luckTrash" data-id="luck" class="trash">Trash</a>
-								</td>
-							</tr>
-						
-					</tbody>
-				</table>
-				
+							
+							
+					</div>
+					</div>
+					
+					<div class="col-xs-12 col-xl-4">
+						<table border="1">
+							<thead>
+								<tr>
+									<th style="text-align: center;">Combination</th>
+									<th style="text-align: center;">Probability</th>
+									<th style="text-align: center;" width="84px">
+										Score
+									</th>
+									<th style="text-align: center;" width="100px">Options</th>
+								</tr>
+							</thead>
+							<tbody>
+								
+									<tr>
+										<td>
+											<span id="threeOfAKindLabel">
+												Three of a kind
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="threeOfAKindBar"></div>
+												<span id="threeOfAKindProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="threeOfAKindScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="threeOfAKindKeep" data-id="threeOfAKind" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="threeOfAKindTrash" data-id="threeOfAKind" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="fourOfAKindLabel">
+												Four of a kind
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="fourOfAKindBar"></div>
+												<span id="fourOfAKindProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="fourOfAKindScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="fourOfAKindKeep" data-id="fourOfAKind" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="fourOfAKindTrash" data-id="fourOfAKind" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="fullLabel">
+												Full House
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="fullBar"></div>
+												<span id="fullProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="fullScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="fullKeep" data-id="full" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="fullTrash" data-id="full" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="smallStraightLabel">
+												Small Straight
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="smallStraightBar"></div>
+												<span id="smallStraightProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="smallStraightScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="smallStraightKeep" data-id="smallStraight" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="smallStraightTrash" data-id="smallStraight" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="largeStraightLabel">
+												Large Straight
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="largeStraightBar"></div>
+												<span id="largeStraightProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="largeStraightScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="largeStraightKeep" data-id="largeStraight" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="largeStraightTrash" data-id="largeStraight" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="yahtzeeLabel">
+												Yahtzee
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="yahtzeeBar"></div>
+												<span id="yahtzeeProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="yahtzeeScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="yahtzeeKeep" data-id="yahtzee" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="yahtzeeTrash" data-id="yahtzee" class="trash">Trash</a>
+										</td>
+									</tr>
+								
+									<tr>
+										<td>
+											<span id="luckLabel">
+												Chance
+											</span>
+										</td>
+										<td>
+											<div class="progress">
+												<div class="bar" id="luckBar"></div>
+												<span id="luckProbability" style="padding-left: 1px;">&nbsp;</span>
+											</div>
+										</td>
+										<td style="text-align: center;">
+											<span id="luckScore" class="score">&nbsp;</span>
+										</td>
+										<td>
+											<a href="javascript:void(0)"id="luckKeep" data-id="luck" class="keep">Keep</a>
+											<a href="javascript:void(0)"id="luckTrash" data-id="luck" class="trash">Trash</a>
+										</td>
+									</tr>
+									<tr>
+										<td>
+											<span>
+												Lower Score
+											</span>
+										</td>
+										<td>
+											
+										</td>
+										<td style="text-align: center;">
+											<span id="bottomScore" class="score"></span>
+										</td>
+										
+									</tr>
+								
+							</tbody>
+						</table>
+						<br>
+						<div id="scorePanel" style="display: none;">
+								<table class="table table-bordered">
+									<tr>
+										<th>Final Score</th>
+									</tr>
+									<tr>
+										<td>Upper grid score</td>
+										<td id="upperScore" style="text-align: center"></td>
+									</tr>
+									<tr>
+										<td>Bonus</td>
+										<td id="bonus" style="text-align: center"></td>
+									</tr>
+									<tr>
+										<td>Lower grid score</td>
+										<td id="lowerScore" style="text-align: center"></td>
+									</tr>
+									<tr>
+										<td><b>Total</b></td>
+										<td id="totalScore" style="text-align: center"><b></b></td>
+									</tr>
+								</table>
+							</div>
+					</div>
+				</div>
 			</div>
-		</div>
-	
-				    </div> <!-- End of span9 -->
+		
+				    
 
 <script src="js/yahtzee.js" type="text/javascript" ></script>
 <script type="text/javascript">
-			$(document).ready(function () {
-				$(".dice").click(function(evt) {
+			$(document).ready(function () 
+			{
+				$(".dice").click(function(evt) 
+				{
 					if( $(this).hasClass("selected") )
 						$(this).removeClass("selected");
 					else
 						$(this).addClass("selected");
 				});
 				
-				$(".keep").click(function(evt) {
+				$(".keep").click(function(evt) 
+				{
 					console.log("Keeping " + $(this).attr('data-id'));
 					Yahtzee.keep($(this).attr('data-id'));
 				});
 				
-				$(".trash").click(function(evt) {
+				$(".trash").click(function(evt) 
+				{
 					console.log("Trashing " + $(this).attr('data-id'));
 					Yahtzee.trash($(this).attr('data-id'));
 				});
 				
-				$("#launchBtn").click(function() {
+				$("#launchBtn").click(function() 
+				{
 					Yahtzee.shuffle();
-					Yahtzee.findCombinaisons();
+					Yahtzee.findCombinations();
 					if( Yahtzee.launch < 3 )
 						Yahtzee.findPossibilities();
 				});

+ 188 - 73
js/yahtzee.js

@@ -18,11 +18,15 @@ var INCOMPLETE_STRAIGHT_MASK2 = (1 << 1) + (1 << 2) + (1 << 3);
 var INCOMPLETE_STRAIGHT_MASK3 = (1 << 2) + (1 << 3) + (1 << 4);
 var INCOMPLETE_STRAIGHT_MASK4 = (1 << 3) + (1 << 4) + (1 << 5);
 
+
+/*
+ * Create the Yahtzee object
+ */
 Yahtzee = {
 		
 		launch : 0,
 		dices : [],
-		combinaisons : [],
+		Combinations : [],
 		pair : false,
 		doublePair : false,
 		three_of_a_kind : false,
@@ -35,9 +39,13 @@ Yahtzee = {
 
 		scoreUp : 0,
 		scoreDown: 0,
-		keptCombinaisons: [],
+		keptCombinations: [],
 		
-		clear: function(all) {
+		/*
+		 * Reset all values to defaults
+		 */
+		clear: function(all) 
+		{
 			if( all )
 				Yahtzee.launch = 0;
 			
@@ -52,42 +60,60 @@ Yahtzee = {
 			Yahtzee.straight = 0;
 			
 			if( all )
-				for( var i = 0; i < 5; i++ ) {
+				for( var i = 0; i < 5; i++ ) 
+				{
 					Yahtzee.dices[i] = 0;
 					$("#dice" + (i+1)).removeClass().addClass("dice").addClass("empty");
 				}
 			
-			for( var i = 0; i < 6; i++ ) {
-				Yahtzee.combinaisons[i] = 0;
+			for( var i = 0; i < 6; i++ ) 
+			{
+				Yahtzee.Combinations[i] = 0;
 			}
 			
-			$(".possibility").each(function(incr, elt) {
+			$(".possibility").each(function(incr, elt) 
+			{
 				$(elt).removeClass("possibility");
 				$(elt).empty();
 			});
 			
-			$(".keep").each(function(incr, elt) {
+			$(".keep").each(function(incr, elt) 
+			{
 				$(elt).attr('style', 'visibility:hidden;');
-			})
-			$(".trash").each(function(incr, elt) {
+			});
+			
+			$(".trash").each(function(incr, elt) 
+			{
 				$(elt).attr('style', 'visibility:hidden;');
-			})
+			});
 		},
 		
-		shuffle: function() {
+		/*
+		 * Provide random dice rolls
+		 */
+		shuffle: function() 
+		{
 			if($("#launchBtn").hasClass("disabled") )
+			{
 				return false;
+			}
 			
 			if( Yahtzee.launch == 3 )
+			{
 				Yahtzee.clear(true);
+			}
 			else
+			{
 				Yahtzee.clear(false);
+			}
 			
 			Yahtzee.launch++;
 			
-			for( var i = 0; i < 5; i++ ) {
+			for( var i = 0; i < 5; i++ ) 
+			{
 				var html = $("#dice" + (i+1));
-				if( !html.hasClass("selected") ) {
+				if( !html.hasClass("selected") ) 
+				{
 					var value = Math.round(5 * Math.random());
 					Yahtzee.dices[i] = value;
 					html.removeClass().addClass("dice").addClass("face" + (value + 1));
@@ -96,22 +122,37 @@ Yahtzee = {
 			
 			$("#launch").html(Yahtzee.launch);
 			if( Yahtzee.launch == 3 )
+			{
 				$("#launchBtn").addClass("disabled");
+			}
 		},
 		
-		findCombinaisons: function() {
-			for( var i = 0; i < 5; i++) {
-				Yahtzee.combinaisons[Yahtzee.dices[i]]++;
+		
+		/*
+		 * Find valid score combinations in current dice
+		 */
+		findCombinations: function() 
+		{
+			for( var i = 0; i < 5; i++) 
+			{
+				Yahtzee.Combinations[Yahtzee.dices[i]]++;
 				Yahtzee.straight = Yahtzee.straight | (1 << Yahtzee.dices[i]);
 			}
 			
-			for( var i = 0; i < 6; i++ ) {
-				var value = Yahtzee.combinaisons[i];
-				switch( value ) {
+			for( var i = 0; i < 6; i++ ) 
+			{
+				var value = Yahtzee.Combinations[i];
+				switch( value ) 
+				{
 				case 2:
 					if( Yahtzee.pair )
+					
 						Yahtzee.doublePair = true;
-					Yahtzee.pair = true;
+								
+						Yahtzee.pair = true;
+					
+					
+					
 					break;
 				case 5:
 					Yahtzee.yahtzee = true;
@@ -126,57 +167,93 @@ Yahtzee = {
 			
 			Yahtzee.full = Yahtzee.pair && Yahtzee.three_of_a_kind && !Yahtzee.doublePair;
 			
-			if( (Yahtzee.straight & LARGE_STRAIGHT_MASK1) == LARGE_STRAIGHT_MASK1 ) {
+			if( (Yahtzee.straight & LARGE_STRAIGHT_MASK1) == LARGE_STRAIGHT_MASK1 ) 
+			{
 				Yahtzee.large_straight = true;		
 				Yahtzee.small_straight = true;		
-			} else if( (Yahtzee.straight & LARGE_STRAIGHT_MASK2) == LARGE_STRAIGHT_MASK2 ) {
+			} else if( (Yahtzee.straight & LARGE_STRAIGHT_MASK2) == LARGE_STRAIGHT_MASK2 ) 
+			{
 				Yahtzee.large_straight = true;
 				Yahtzee.small_straight = true;
-			} else if( (Yahtzee.straight & SMALL_STRAIGHT_MASK1) == SMALL_STRAIGHT_MASK1 ) {
+			} else if( (Yahtzee.straight & SMALL_STRAIGHT_MASK1) == SMALL_STRAIGHT_MASK1 ) 
+			{
 				Yahtzee.small_straight = true;		
-			} else if( (Yahtzee.straight & SMALL_STRAIGHT_MASK2) == SMALL_STRAIGHT_MASK2  ) {
+			} else if( (Yahtzee.straight & SMALL_STRAIGHT_MASK2) == SMALL_STRAIGHT_MASK2  ) 
+			{				
 				Yahtzee.small_straight = true;
-			} else if( (Yahtzee.straight & SMALL_STRAIGHT_MASK3) == SMALL_STRAIGHT_MASK3  ) {
+			} else if( (Yahtzee.straight & SMALL_STRAIGHT_MASK3) == SMALL_STRAIGHT_MASK3  ) 
+			{
 				Yahtzee.small_straight = true;		
 			}
 			
-			if( Yahtzee.three_of_a_kind && Yahtzee.keptCombinaisons.indexOf("threeOfAKind") == -1 )
+			if( Yahtzee.three_of_a_kind && Yahtzee.keptCombinations.indexOf("threeOfAKind") == -1 )
+			{
 				$("#threeOfAKindKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.four_of_a_kind && Yahtzee.keptCombinaisons.indexOf("fourOfAKind") == -1 )
+			}
+			if( Yahtzee.four_of_a_kind && Yahtzee.keptCombinations.indexOf("fourOfAKind") == -1 )
+			{
 				$("#fourOfAKindKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.full && Yahtzee.keptCombinaisons.indexOf("full") == -1 )
+			}
+			if( Yahtzee.full && Yahtzee.keptCombinations.indexOf("full") == -1 )
+			{
 				$("#fullKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.yahtzee && Yahtzee.keptCombinaisons.indexOf("yahtzee") == -1 )
+			}
+			if( Yahtzee.yahtzee && Yahtzee.keptCombinations.indexOf("yahtzee") == -1 )
+			{
 				$("#yahtzeeKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.small_straight && Yahtzee.keptCombinaisons.indexOf("smallStraight") == -1 )
+			}
+			if( Yahtzee.small_straight && Yahtzee.keptCombinations.indexOf("smallStraight") == -1 )
+			{
 				$("#smallStraightKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.large_straight && Yahtzee.keptCombinaisons.indexOf("largeStraight") == -1 )
+			}
+			if( Yahtzee.large_straight && Yahtzee.keptCombinations.indexOf("largeStraight") == -1 )
+			{
 				$("#largeStraightKeep").attr('style', 'visibility:visible;');
+			}
 			
-			if( Yahtzee.combinaisons[0] > 0 && Yahtzee.keptCombinaisons.indexOf("one") == -1 )
+			if( Yahtzee.Combinations[0] > 0 && Yahtzee.keptCombinations.indexOf("one") == -1 )
+			{
 				$("#oneKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.combinaisons[1] > 0  && Yahtzee.keptCombinaisons.indexOf("two") == -1 )
+			}
+			if( Yahtzee.Combinations[1] > 0  && Yahtzee.keptCombinations.indexOf("two") == -1 )
+			{
 				$("#twoKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.combinaisons[2] > 0  && Yahtzee.keptCombinaisons.indexOf("three") == -1 )
+			}
+			if( Yahtzee.Combinations[2] > 0  && Yahtzee.keptCombinations.indexOf("three") == -1 )
+			{
 				$("#threeKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.combinaisons[3] > 0  && Yahtzee.keptCombinaisons.indexOf("four") == -1 )
+			}
+			if( Yahtzee.Combinations[3] > 0  && Yahtzee.keptCombinations.indexOf("four") == -1 )
+			{
 				$("#fourKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.combinaisons[4] > 0  && Yahtzee.keptCombinaisons.indexOf("five") == -1 )
+			}
+			if( Yahtzee.Combinations[4] > 0  && Yahtzee.keptCombinations.indexOf("five") == -1 )
+			{
 				$("#fiveKeep").attr('style', 'visibility:visible;');
-			if( Yahtzee.combinaisons[5] > 0  && Yahtzee.keptCombinaisons.indexOf("six") == -1 )
+			}
+			if( Yahtzee.Combinations[5] > 0  && Yahtzee.keptCombinations.indexOf("six") == -1 )
+			{
 				$("#sixKeep").attr('style', 'visibility:visible;');
+			}
 			
-			if( Yahtzee.keptCombinaisons.indexOf("luck") == -1 )
+			if( Yahtzee.keptCombinations.indexOf("luck") == -1 )
+			{
 				$("#luckKeep").attr('style', 'visibility:visible;');
+			}
 			
-			$(".trash").each(function(incr, elt){
-				var html = $(elt)
-				if( Yahtzee.keptCombinaisons.indexOf(html.attr('data-id')) == -1 )
+			$(".trash").each(function(incr, elt)
+			{
+				var html = $(elt);
+				if( Yahtzee.keptCombinations.indexOf(html.attr('data-id')) == -1 )
 					html.attr('style', 'visibility:visible;');
 			});
 		},
 		
-		findPossibilities: function() {
+		/*
+		 * Calculate probability of rolling a particular dice combination
+		 */
+		findPossibilities: function() 
+		{
 			var possibilities = {
 					"threeOfAKind" : 0,
 					"fourOfAKind" : 0,
@@ -186,12 +263,15 @@ Yahtzee = {
 					"largeStraight" : 0
 			};
 			
-			if( Yahtzee.three_of_a_kind && !Yahtzee.full) {
+			if( Yahtzee.three_of_a_kind && !Yahtzee.full) 
+			{
 				possibilities["full"] = Math.max( possibilities["full"], 17 );
 				possibilities["fourOfAKind"] = Math.max( possibilities["fourOfAKind"], 31);
 				possibilities["yahtzee"] = Math.max( possibilities["yahtzee"],  3);
 			}
-			if( Yahtzee.pair ) {
+			
+			if( Yahtzee.pair ) 
+			{
 				if( !Yahtzee.three_of_a_kind )
 					possibilities["threeOfAKind"] = Math.max( possibilities["threeOfAKind"], 42);
 				possibilities["fourOfAKind"] = Math.max( possibilities["fourOfAKind"], 7);
@@ -199,60 +279,72 @@ Yahtzee = {
 					possibilities["full"] = Math.max( possibilities["full"], 10);
 				possibilities["yahtzee"] = Math.max( possibilities["yahtzee"], 7);
 			}
-			if( Yahtzee.four_of_a_kind ) {
+			
+			if( Yahtzee.four_of_a_kind ) 
+			{
 				possibilities["yahtzee"] = Math.max( possibilities["yahtzee"], 17);
 			}
-			if( Yahtzee.doublePair ) {
+			
+			if( Yahtzee.doublePair ) 
+			{
 				possibilities["full"] = Math.max( possibilities["full"], 33);
 			}
 			if( !Yahtzee.large_straight && 
-					((Yahtzee.straight & SMALL_STRAIGHT_MASK1) == SMALL_STRAIGHT_MASK1 || (Yahtzee.straight & SMALL_STRAIGHT_MASK3) == SMALL_STRAIGHT_MASK3) ) {
+					((Yahtzee.straight & SMALL_STRAIGHT_MASK1) == SMALL_STRAIGHT_MASK1 || (Yahtzee.straight & SMALL_STRAIGHT_MASK3) == SMALL_STRAIGHT_MASK3) ) 
+			{
 				possibilities["largeStraight"] = Math.max( possibilities["largeStraight"], 17);
-			} else if( !Yahtzee.large_straight && (Yahtzee.straight & SMALL_STRAIGHT_MASK2) == SMALL_STRAIGHT_MASK2 ) {
+			} else if( !Yahtzee.large_straight && (Yahtzee.straight & SMALL_STRAIGHT_MASK2) == SMALL_STRAIGHT_MASK2 ) 
+			{
 				possibilities["largeStraight"] = Math.max( possibilities["largeStraight"], 33);
 			}
 			
-			$.each(possibilities, function(key, value) {
+			$.each(possibilities, function(key, value) 
+			{
 				var html = $("#" + key + "Probability");
 				html.empty().addClass("possibility");
-				if( value > 0 && Yahtzee.keptCombinaisons.indexOf(key) == -1 ) {
+				if( value > 0 && Yahtzee.keptCombinations.indexOf(key) == -1 ) 
+				{
 					html.append(value + "%");
 				} else
 					html.append("&nbsp;");
 			});
 		},
 		
-		keep: function(id) {
+		/*
+		 * Process user decision to keep a score value
+		 */
+		keep: function(id) 
+		{
 			var score = 0;
 			switch(id) {
 			case "one" :
-				score = Yahtzee.combinaisons[0] * 1;
+				score = Yahtzee.Combinations[0] * 1;
 				Yahtzee.scoreUp += score;
 				break;
 			case "two" :
-				score = Yahtzee.combinaisons[1] * 2;
+				score = Yahtzee.Combinations[1] * 2;
 				Yahtzee.scoreUp += score;
 				break;
 			case "three" :
-				score = Yahtzee.combinaisons[2] * 3;
+				score = Yahtzee.Combinations[2] * 3;
 				Yahtzee.scoreUp += score;
 				break;
 			case "four" :
-				score = Yahtzee.combinaisons[3] * 4;
+				score = Yahtzee.Combinations[3] * 4;
 				Yahtzee.scoreUp += score;
 				break;
 			case "five" :
-				score = Yahtzee.combinaisons[4] * 5;
+				score = Yahtzee.Combinations[4] * 5;
 				Yahtzee.scoreUp += score;
 				break;
 			case "six" :
-				score = Yahtzee.combinaisons[5] * 6;
+				score = Yahtzee.Combinations[5] * 6;
 				Yahtzee.scoreUp += score;
 				break;
 			case "threeOfAKind" :
 			case "fourOfAKind" :
 			case "luck" :
-				$.each(Yahtzee.dices, function(index, elt){score += (elt + 1)});
+				$.each(Yahtzee.dices, function(index, elt){score += (elt + 1);});
 				Yahtzee.scoreDown += score;
 				break;
 			case "full" :
@@ -274,37 +366,60 @@ Yahtzee = {
 			}
 			
 			$("#" + id + "Score").html(score);
-			
-			Yahtzee.keptCombinaisons.push(id);
+			$("#topScore").html(Yahtzee.scoreUp);
+			$("#bottomScore").html(Yahtzee.scoreDown);
+			Yahtzee.keptCombinations.push(id);
 			Yahtzee.clear(true);
 			
-			if( Yahtzee.keptCombinaisons.length < 13 )
+			if( Yahtzee.keptCombinations.length < 13 )
 				$("#launchBtn").removeClass("disabled");
 			else
 				Yahtzee.show_game_over();
 		},
 		
-		trash : function(id) {
+		/*
+		 * Add a zero to the score value of the selected table row
+		 */
+		trash: function(id) 
+		{
 			$("#" + id + "Score").html(0).addClass('trashed');
 			$("#" + id + "Label").attr('style', 'text-decoration:line-through;');
-			Yahtzee.keptCombinaisons.push(id);
+			Yahtzee.keptCombinations.push(id);
 			Yahtzee.clear(true);
-			if( Yahtzee.keptCombinaisons.length < 13 )
+			if( Yahtzee.keptCombinations.length < 13 )
+			{
 				$("#launchBtn").removeClass("disabled");
+			}
 			else
+			{
 				Yahtzee.show_game_over();
+			}
 		},
 		
-		show_game_over: function() {
+		/*
+		 * Calculate and display the final user score
+		 */
+		show_game_over: function() 
+		{
 			$("#upperScore").append(Yahtzee.scoreUp);
-			if( Yahtzee.scoreUp > 63 ) {
+			if( Yahtzee.scoreUp > 63 ) 
+			{
 				$("#bonus").append(35);
 				Yahtzee.scoreUp += 35;
-			} else
+				$("#lowerScore").append(Yahtzee.scoreDown);
+				$("#totalScore").append(Yahtzee.scoreDown + Yahtzee.scoreUp);
+			
+				$("#scorePanel").show();
+			} 
+			else 
+			{
 				$("#bonus").append(0);
-			$("#lowerScore").append(Yahtzee.scoreDown);
-			$("#totalScore").append(Yahtzee.scoreDown + Yahtzee.upperScore);
-
-			$("#scorePanel").show();
+				$("#lowerScore").append(Yahtzee.scoreDown);
+				$("#totalScore").append(Yahtzee.scoreDown + Yahtzee.scoreUp);
+			
+				$("#scorePanel").show();
+			}
 		}
-}
+	
+		
+};