stat

Author: kilsw1ch

README.md

@@ -1 +1 @@
-a simple counter for the board game [carrom](https://en.wikipedia.org/wiki/Carrom).
+a simple counter for the board game [carrom](https://en.wikipedia.org/wiki/Carrom).

carrom.css

@@ -16,7 +16,7 @@ body{
 
 .player2{
 
-    left:50%;
+    left: 50%;
     width: 50%;
     height: 46%;
     background-color: #FFB3BA;
@@ -48,16 +48,18 @@ body{
         margin-top:10%;
     }
 
-    span{
+    #p1score, #p2score, #p3score, #p4score{
+
         display: inline-block;
         margin-top:35%;
     }
 
     .decbtn{
 
         position: absolute;
-        left:20%;
+        left:30%;
         top:70%;
+        left:20%;
 
         border: none;
         border-radius: 50%;
@@ -105,7 +107,7 @@ body{
 
         span{
             font-size: 4rem;
-            line-height: 0.5;
+            line-height: 1.5;
         }
     }
 }
@@ -196,13 +198,20 @@ body{
         width: 98%;
         height: 91%;
 
-        button{
+        #gamesplayed{
+
+            position: absolute;
+            top: 1%;
+            left: 25%;
+        }
+
+        #closebtn{
 
             background: none;
             border: none;
             position: absolute;
-            top: 2%;
-            right: 4%;
+            top: 0.5%;
+            right: 1%;
             color: #fff;
 
             span{
@@ -213,7 +222,7 @@ body{
         #stattable{
 
             position: absolute;
-            top: 10%;
+            top: 7%;
             left: 5%;
             width: 90%;
             border-collapse: collapse;
@@ -223,14 +232,21 @@ body{
             }
         }
 
+        #summarytag{
+            
+            position: absolute;
+            top: 39%;
+            left: 5%;
+        }
+
         #gametable{
 
-            /* visibility: hidden; */
             position: relative;
-            top: 55%;
+            top: 45%;
             left: 5%;
             width: 90%;
             border-collapse: collapse;
+            /* border: none; */
 
             td{
                 padding: 15px;

carrom.html

@@ -15,28 +15,28 @@
 
     <div class="player1" id="player1">
 
-        <p id="p1namep">player 1</p>
+        <p id="p1namep"></p>
         <span id="p1score">0</span>
         <button class="decbtn" id="p1dec"><span class="material-icons">remove</span></button>
         <button class="ranibtn" id="p1rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="player2" id="player2">
-        <p id="p2namep">player 2</p>
+        <p id="p2namep"></p>
         <span id="p2score">0</span>
         <button class="decbtn" id="p2dec"><span class="material-icons">remove</span></button>
         <button class="ranibtn" id="p2rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="player3" id="player3">
-        <p id="p3namep">player 3</p>
+        <p id="p3namep"></p>
         <span id="p3score">0</span>
         <button class="decbtn" id="p3dec"><span class="material-icons">remove</span></button>
         <button class="ranibtn" id="p3rani"><span class="material-symbols-outlined">crown</span></button>
     </div>
 
     <div class="player4" id="player4">
-        <p id="p4namep">player 4</p>
+        <p id="p4namep"></p>
         <span id="p4score">0</span>
         <button class="decbtn" id="p4dec"><span class="material-icons">remove</span></button>
         <button class="ranibtn" id="p4rani"><span class="material-symbols-outlined">crown</span></button>
@@ -59,6 +59,8 @@
 
         <div class="statchild">
 
+            <p id="gamesplayed">games played : 0</p>
+
             <button id="closebtn"><span class="material-icons">close</span></button>
 
             <table id="stattable">
@@ -94,7 +96,7 @@
                 </tr>
             </table>
 
-            <p id="gamesplayed" style="position: absolute; top: 45%; left: 5%;">games played : 0</p>
+            <p id="summarytag">summary of each game:</p>
 
             <table id="gametable">
 

index.html

@@ -35,10 +35,11 @@
     <div class="names">
 
         <input type="text" id="p1name" placeholder="player 1">
-        <span style="position:absolute; top: 25%; left:47%" id="vsspan">vs</span>
         <input type="text" id="p2name" placeholder="player 2">
         <input type="text" id="p3name" placeholder="player 3">
         <input type="text" id="p4name" placeholder="player 4">
+
+        <span style="position:absolute; top: 25%; left:47%" id="vsspan">vs</span>
     </div>
 
     <div id="start">

index.js

@@ -36,16 +36,21 @@ document.getElementById('gamemode2').onclick=function(){
 
 startbtn.onclick=function(){
 
-    const p1name = document.getElementById('p1name').value;
-    const p2name = document.getElementById('p2name').value;
-    const p3name = document.getElementById('p3name').value;
-    const p4name = document.getElementById('p4name').value;
-
-    sessionStorage.setItem('p1name', p1name);
-    sessionStorage.setItem('p2name', p2name);
-    sessionStorage.setItem('p3name', p3name);
-    sessionStorage.setItem('p4name', p4name);
-
-    // window.location.href = 'https://kilsw1ch.github.io/Carrom-Counter/carrom.html';
-    window.location.href = 'carrom.html';
+    // if(p1namefield.value!="" && p2namefield.value!=""){
+
+    //     sessionStorage.setItem('p1name', p1namefield.value);
+    //     sessionStorage.setItem('p2name', p2namefield.value);
+
+    //     window.location.href = 'carrom.html';
+    // }
+
+    if(p1namefield.value!="" && p2namefield.value!="" && p3namefield.value!="" && p4namefield.value!=""){
+
+        sessionStorage.setItem('p1name', p1namefield.value);
+        sessionStorage.setItem('p2name', p2namefield.value);
+        sessionStorage.setItem('p3name', p3namefield.value);
+        sessionStorage.setItem('p4name', p4namefield.value);
+
+        window.location.href = 'carrom.html';
+    }
 }