feat: added rounds

app.js

@@ -1,6 +1,6 @@
 //----------Constant Values and Objects---------
 let targetIpAddress = '';
-const lockoutMax = 4;
+const lockoutMax = 9;
 let lockoutHits = 0;
 let ipAttempts = [];
 let time = 460000;
@@ -8,6 +8,8 @@ let lose = false;
 let win = false;
 let timerElement = document.getElementById('timer');
 let timeInterval = {};
+let score = 0;
+let winScore = 7;
 
 const systemTypes = ["HIDDEN", "KALILINUX", "WINDOWSXP", "WINDOWS2000", 
                     "WINDOWS10", "REDHAT", "ANDROID4.4", "NETHUNTER"];
@@ -68,7 +70,7 @@ function createEntryHTML(entry){
                           <td>"+ hostName +"</td>\
                           <td>"+ machineType +"</td>\
                           <td>"+ lastResponse +"MS</td>\
-                          <td>"+ systemLocation.long + "-" + systemLocation.lat +"</td>\
+                          <td>"+ systemLocation.long + "_" + systemLocation.lat +"</td>\
                       </tr>\
                     </tbody>"
 
@@ -150,7 +152,8 @@ function compareIpAddress(value){
 
 //----------Business Logic--------
 
-function init(){
+function beginRound(){
+  document.getElementById('entry_table').innerHTML = "";
   let entryArray = createEntryArray();
   let htmlArray = createEntryHTMLArray(entryArray);
   let entryHTMLString = concatEntryHTMLArray(htmlArray);
@@ -159,12 +162,20 @@ function init(){
   targetIpAddress = selectTargetIpAddress(entryArray);
   renderEntries(entryHTMLString);
   assignClickEvent(entryElements);
-  timeInterval = setInterval(countDown, 10);
+  renderSuccessPrecentage(score * 100/winScore);
 
   console.log(targetIpAddress);
 
 }
 
+function beginClicked(){
+  let instructions = document.getElementById('messege');
+  instructions.innerHTML = ""
+  instructions.className = "hidden";
+  timeInterval = setInterval(countDown, 10);
+  beginRound();
+}
+
 
 function assignClickEvent(elements){
   
@@ -184,7 +195,6 @@ function clickedEntry(entry){
       
     if(ipDifference === 10){
       targetIpAddressFound(entry);
-      renderSuccessPrecentage(100)
     }
     else{
       wrongEntrySelected(entry, ipDifference);
@@ -192,12 +202,18 @@ function clickedEntry(entry){
       renderSuccessPrecentage(ipDifference * 10);
       checkStatus();
     }
-}
+  }
 }
 
 
 function targetIpAddressFound(entry){
+  score += 1;
+  if(score > winScore - 1){
     gameWin();
+  }
+  else{
+    beginRound();
+  }
 }
 
 
@@ -215,8 +231,7 @@ function wrongEntrySelected(entry, similarity){
 
 function renderSuccessPrecentage(percentage){
   let successPercentage =  document.getElementById('precentage');
-  successPercentage.innerHTML = percentage + "%";
-
+  successPercentage.innerHTML = Math.floor(percentage) + "%";
 }
 
 
@@ -274,6 +289,8 @@ function gameWin(){
   targetElement.className = "win";
   clearInterval(timeInterval);
   timerElement.innerHTML = 0;
+
+  console.log("Game Win");
 }
 
 function countDown(){
@@ -285,5 +302,3 @@ function countDown(){
     gameLose();
   }
 }
-
-init();

index.html

@@ -15,7 +15,7 @@
 
             <div class="left">
                 <h3>TRACKING SUCCESS: <span class="green" id="precentage"></span></h3>
-                <h3>QUERY: <span class="green" id="query-name"></span></h3>
+                <h3>QUERY: <span class="green" id="query-name">KATLYEN HICKS</span></h3>
             </div>
         
             <div class="right">
@@ -28,6 +28,26 @@
         
         <section id="play-wrapper">
 
+            <div  id="messege">
+
+            <p>Several months ago, your loved one Katlyen Hicks went missing. You have connections 
+                do several deep and dark web users. They have informed you that they ave seen websites known for human 
+                trafficing that have posted advertisements with her picture. These websites are only accessible by using
+                the T.O.R network. A network designed to mask origins of internet conections to keep communications hidden.
+                Like any system, it has its weak points. These dark web user friends of yours have taught you secrets of 
+                the trade of computer hacking and tracking. You have now build a tool to help you narrorw down the source 
+                of these website owners. The T.O.R. network masks its users by bouncing their signals all accross the globe 
+                so much so that they are almost impossible to track. You however are able to track the different network nodes
+                and find the roots of the signals. Your tool will allow you select IP addresses and determine if it is an actual 
+                node being used. This tool will let you know how accurate your choice is so you can accuratly make a new selection.
+                You only have so long before you are lockout out of the system's vulnerabilities. Use this toime appropriately, you 
+                will need to lock onto several signals to find rthe capture of your loved one.
+            </p>
+
+            <button onclick="beginClicked()">BEGIN</button>
+
+            </div>
+
             <table>
                 <thead>
                     <tr class="green">

style.css

@@ -1,6 +1,10 @@
+.hidden{
+    display: none;
+}
+
 .screen{
     width: 900px;
-    height: 800px;
+    min-height: 800px;
     margin: 30px auto;
     border-color: #00FF00;
     border-width: 1px;
@@ -12,6 +16,31 @@
     overflow: hidden;
 }
 
+#messege{
+    height: 560px;
+    text-transform: uppercase;
+    font-size: 16px;
+}
+
+button{
+    padding: 10px 25px;
+    color: black;
+    background-color: #00FF00;
+    border-width: 1px;
+    border-style: none;
+    border-bottom-style: solid;
+    border-radius: 0px;
+    border-color: #00FF00;
+    font-family: monospace;
+    display: block;
+    margin: 30px auto;
+}
+
+button:hover{
+    color: white;
+    background-color: black;
+}
+
 #title{
     text-align: center;
 }
@@ -55,6 +84,10 @@
     margin: 0px;
 }
 
+.response-wrapper{
+    padding-bottom: 8px;
+}
+
 hr{
     border-color: #00ff00;
     margin: 6px 0px;