Add files via upload

Added a scoreboard and reset button.
HJain13 · Apr 7, 2017 · 76d7855 · 76d7855
1 parent 466e586
commit 76d7855
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 21 deletions.
diff --git a/base.css b/base.css
@@ -1,5 +1,10 @@
 @import url('https://fonts.googleapis.com/css?family=Quicksand');
 
+@keyframes change {
+	from { opacity: 1.0;}
+	to { opacity: 0;}
+}
+
 body {
 	font-family: 'Quicksand', sans-serif;
 	font-size: 32px;	
@@ -19,6 +24,7 @@ div[id*="ib"] {
 	width: 180px;
 	height: 180px;
 	position: absolute;
+	cursor: pointer;
 }
 
 #ib1 {
@@ -71,7 +77,7 @@ div[id*="ib"] {
 	height: 140px;
 	margin-left: 93px;
 	margin-top: 23px;
-	opacity: 1;
+	cursor: default;
 }
 
 .cross:before,
@@ -135,27 +141,70 @@ div[id^="ci"] {
 	display: none;
 }
 
+
+#status {
+	padding-top: 10px; 
+	width: 400px;
+	height: 60px;
+	margin: 0 auto;
+	font-size: 48px;
+	text-align: center;
+	font-weight: bold;
+}
+
+.change {
+	animation: change 2s 1;
+	animation-fill-mode: forwards;	
+}
+
+.score1, .score2{
+	position: absolute;
+	width: auto;
+	height: 140px;
+	text-align: center;
+	border-radius: 10px;
+	border-bottom: 2px solid black;
+	margin: 0 10px;
+	padding: 0 10px;	
+}
+
+.score2{
+	right: 0;
+}
+
+.btn {
+	position: absolute;
+	width: auto;
+	height: 40px;
+	text-align: center;
+	border-radius: 5px;
+	border: 2px solid #333;
+	margin: 10px 10px;
+	bottom: 0;
+	right: 0;		
+	padding: 0 10px;
+	cursor: pointer;
+}
+
+
+
 .player {
-	width: 180px;
+	font-size: 32px;
+	width: 100%;
 	height: 40px;
 	text-align: center;
 	background-color: #000;
-	opacity: 0.2;
+	opacity: 1.0;
+	margin-left: -10px;
 	border-radius: 10px;
-	float: right;
 	color: white;
-	padding: 10px;
+	padding: 5px 10px;
 }
 
-#p1 {
-	opacity: 1.0;
-	float: left;
+#p2 {
+	opacity: 0.2;
 }
 
-#status {
-	padding-top: 10px; 
-	width: 250px;
-	height: 60px;
-	margin: 0 auto;
-	text-align: center;
-}
+.sp {
+	font-size: 64px;
+}
diff --git a/index.html b/index.html
@@ -5,13 +5,22 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<link rel="stylesheet" href="base.css">
-	<title>Tic-Tac-Toe</title>
+	<title>Tic`Tac`Toe</title>
 </head>
 <body>
 	<div class="container">
-		<div class="player" id="p1">Player 1</div>
-		<div class="player" id="p2">Player 2</div>
-		<div id="status"></div>
+		<div class="score1">
+			<div class="player" id="p1">Player 1</div>
+			<div class="sp" id="sp1">0</div>
+		</div>
+		<div class="score2">
+			<div class="player" id="p2">Player 2</div>
+			<div class="sp" id="sp2">0</div>			
+		</div>
+		<div id="status">Tic`Tac`Toe</div>
+		<div class="btn" id="rst" onclick="reset()">Reset</div>		
+	</div>
+	<div class="container">
 		<div id="tttArea">
 			<div id="ib1" onclick="place('1')">
 				<div class="circle" id="ci1"></div>

diff --git a/ttt.js b/ttt.js
@@ -1,6 +1,6 @@
 	var x = 'Player 2';
 	var placed = ['','','','','','','','','',''];
-	var gOver = 0;
+	var gOver = 0, score1 = 0, score2 = 0;
 
 	function place(i) {
 		if (gOver != 1){
@@ -49,6 +49,14 @@
 
 function declare(x){
     document.getElementById("status").innerHTML = x + " Wins!";
+	if (x == 'Player 1') {
+		score1++;
+    	document.getElementById("sp1").innerHTML = score1;		
+	}
+	else {
+		score2++;
+    	document.getElementById("sp2").innerHTML = score2;			
+	}
     gOver = 1;
 	document.getElementById("p1").style.opacity='0.2';
 	document.getElementById("p2").style.opacity='0.2';	
@@ -71,7 +79,7 @@ function checkTie(){
 }
 
 function enhance(a,b,c,x){
-	if (x == 'Player 1') {
+	if (x == 'Player 1') {		
 		document.getElementById('cr'+a).setAttribute("class", "crossE");
 		document.getElementById('cr'+b).setAttribute("class", "crossE");
 		document.getElementById('cr'+c).setAttribute("class", "crossE");
@@ -81,4 +89,17 @@ function enhance(a,b,c,x){
 		document.getElementById('ci'+b).style.borderColor="#0dd";
 		document.getElementById('ci'+c).style.borderColor="#0dd";
 	}
+}
+
+function reset(){
+	placed[0]='';
+	for (var i = 1; i<=9; i++){
+		document.getElementById("cr"+i).style.display='none';
+		document.getElementById('ci'+i).style.display='none';	
+		document.getElementById('cr'+i).setAttribute("class", "cross");
+		document.getElementById('ci'+i).style.borderColor="#333";
+		placed[i]='';	
+	}
+	gOver = 0;
+    document.getElementById("status").innerHTML = "Tic`Tac`Toe";	
 }