Liars More Stats Info

Add liars Add more stats Improve information section
MadeFromTheBlue · Dec 12, 2014 · aee94da · aee94da
1 parent dd474cd
commit aee94da
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -16,20 +16,22 @@
 		</div>
 		<div class="side-container">
 			<div class="score-container">
-				<div class="stat" id="score"></div>
-				<div class="level-stats">
-					<div class="stat level-stat" id="level-level"></div>
-					-
-					<div class="stat level-stat" id="level-room"></div>
-				</div>
+				<br>
+				<div class="stat" id="score"></div> Points
+				<br>
+				Round <div class="stat" id="level-level"></div>-<div class="stat" id="level-room"></div>
+				<br>
+				<div class="stat" id="correct"></div>/<div class="stat" id="total"></div> Correct
+				<br>
+				<div class="stat" id="streak"></div> Round Streak
 			</div>
 			<div class="best-score-container">
-				<div class="stat" id="best-score"></div>
-				<div class="level-stats">
-					<div class="stat level-stat" id="best-level-level"></div>
-					-
-					<div class="stat level-stat" id="best-level-room"></div>
-				</div>
+				<br>
+				<div class="stat" id="best-score"></div> Points
+				<br>
+				Round <div class="stat" id="best-level-level"></div>-<div class="stat" id="best-level-room"></div>
+				<br>
+				<div class="stat" id="best-streak">0</div> Round Streak
 			</div>
 		</div>
 		<div class="game-message">
@@ -48,13 +50,27 @@
 			</div>
 		</div>
 	</div>
+
+	<hr>
+
+	<div class="information-title">
+		How To Play
+	</div>
+
 	<div class="information">
-	<p>To start place your mouse in the gray box.</p>
-	<p>When you move your mouse off of the gray box, it will change color. Move to the opposite box of the same color and repeat.</p>
-	<p>Hitting the correct color will give 200 points, but the wrong color will take away 100.</p>
-	<p>You will loose points over time, and the higher level you are the faster you loose points.</p>
-	<p>You will stop loosing points when your mouse is in a grey box.</p>
-	<p>See how long you can keep your points in the positive.</p>
+		<ul>
+			<li>To start place your mouse in the gray box.</li>
+			<li>When you move your mouse off of the box, it will change color. Move to the opposite box of the same color and repeat.</li>
+			<li>Hitting the correct color will give 200 points, but the wrong color will take away 100.</li>
+			<li>However, now and then you will get a liar, with a black outline.</li>
+			<li>Liars give 500 point if you choose a different color and take 200 away if you chose the 'correct' color.</li>
+			<li>You will loose points over time, and the higher level (round) you are the faster you loose points.</li>
+			<li>See how long you can keep your points in the positive!</li>
+		</ul>
+	</div>
+
+	<div class="information-title">
+		Good luck!
 	</div>
 
 	<script src="js/html_manipulator.js"></script>

diff --git a/js/application.js b/js/application.js
@@ -1,5 +1,5 @@
 window.requestAnimationFrame(function () 
 {
-	new Game(HTMLManipulator, false);
+	new Game(HTMLManipulator, true);
 }
 );
diff --git a/js/game.js b/js/game.js
@@ -98,6 +98,14 @@ Game.prototype.createRandomNormals = function()
 
 Game.prototype.onRoomEnd = function(scorebonus, newpos, newside)
 {
+	this.setStat("total", this.made + this.missed);
+	this.setStat("correct", this.made);
+	this.setStat("streak", this.streak);
+	var beststreak = this.playerstats.getRawStat("best-streak") || 0;
+	if (this.streak > beststreak)
+	{
+		this.setPlayerStat("best-streak", this.streak);
+	}
 	this.score += scorebonus;
 	this.manip.reset();
 	this.room++;
@@ -146,17 +154,35 @@ Game.prototype.onMouseOverItemOption = function(color, pos)
 		if (this.hasLeft)
 		{
 			var bonus = 0;
-			if (this.room == this.currentBad && this.hasBad)
+			if ((this.room == this.currentBad) && this.hasBad)
 			{
-				bonus = -1000;
-			}
-			else if (color === this.currentColor)
-			{
-				bonus = 200;
+				if (color === this.currentColor)
+				{
+					bonus = -200;
+					this.missed++;
+					this.streak = 0;
+				}
+				else
+				{
+					bonus = 600;
+					this.made++;
+					this.streak++;
+				}
 			}
 			else
 			{
-				bonus = -100;
+				if (color === this.currentColor)
+				{
+					bonus = 200;
+					this.made++;
+					this.streak++;
+				}
+				else
+				{
+					bonus = -100;
+					this.missed++;
+					this.streak = 0;
+				}
 			}
 			this.onRoomEnd(bonus, pos, 1 - this.currentSide);
 		}
@@ -178,13 +204,7 @@ Game.prototype.onMouseOverMade = function(element, pos)
 {
 	if (!this.isPaused)
 	{
-		if (this.hasLeft)
-		{
-			if (this.room == this.currentBad && this.hasBad)
-			{
-				this.onRoomEnd(2000, pos, this.currentSide);
-			}
-		}
+
 	}
 };
 
@@ -240,6 +260,9 @@ Game.prototype.gameStart = function()
 	this.hasLeft = false;
 	this.score = 500;
 	this.droprate = 30;
+	this.made = 0;
+	this.missed = 0;
+	this.streak = 0;
 
 	for (i = 0; i < this.manip.restartButtons.length; i++)
 	{
@@ -250,6 +273,9 @@ Game.prototype.gameStart = function()
 
 	this.setStat("level-level", this.level);
 	this.setStat("level-room", this.room);
+	this.setStat("total", 0);
+	this.setStat("correct", 0);
+	this.setStat("streak", 0);
 
 	var element = this.manip.addItemInitial(this.currentColor, ["wait-full"]);
 	element.querySelector(".item-in").onmouseover = (function() {this.manip.changeClass(element, "wait-full", "wait")}).bind(this);
@@ -261,6 +287,7 @@ Game.prototype.gameStart = function()
 Game.prototype.setup = function()
 {
 	this.playerstats = new GameStats();
+	this.setPlayerStat("best-streak", 0);
 	this.playerstats.setGameStatMorpher("best-score", function(val) { return Math.floor(val); });
 	this.gameStart();
 };
diff --git a/style/main.css b/style/main.css
@@ -1,13 +1,3 @@
-.information
-{
-	font-size: 16px;
-	line-height: 18px;
-	font-weight: normal;
-	color: black;
-	text-align: center;
-	font-family: "Trebuchet MS";
-}
-
 .container
 {
 	margin: 0 auto;
@@ -118,7 +108,7 @@
 
 .score-container:before
 {
-	content: "Points"; 
+	content: "Current"; 
 }
 
 .best-score-container:before
@@ -138,11 +128,6 @@
     color: black;
 }
 
-.level-stat
-{
-	display: inline-block;
-}
-
 #score.stat, #best-score.stat
 {
 	font-size: 24px;
@@ -153,6 +138,16 @@
 	font-size: 16px;
 }
 
+#total.stat, #correct.stat, #best-skill.stat
+{
+	font-size: 16px;
+}
+
+.stat
+{
+	display: inline-block;
+}
+
 .item .item-in, .item-made .item-in
 {
 	border-radius: 4px;
@@ -277,4 +272,29 @@
 	-webkit-transform: translate(189px, 378px);
 	-moz-transform: translate(189px, 378px);
 	transform: translate(189px, 378px);
-}
+}
+
+.information
+{
+	margin-left: 20%;
+	margin-right: 20%;
+	width: 60%;
+	font-size: 16px;
+	line-height: 20px;
+	font-weight: normal;
+	text-transform: none;
+	color: black;
+	text-align: left;
+	font-family: "Trebuchet MS";
+}
+
+.information-title
+{
+	font-size: 24px;
+	line-height: 24px;
+	font-weight: normal;
+	text-transform: uppercase;
+	color: black;
+	text-align: center;
+	font-family: "Trebuchet MS";
+}