refact: moved folder organization

dev/app.js

@@ -0,0 +1,306 @@
+//----------Constant Values and Objects---------
+let targetIpAddress = '';
+const lockoutMax = 9;
+let lockoutHits = 0;
+let ipAttempts = [];
+let time = 460000;
+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"];
+
+const Entry = function(){
+  return {
+    value: createIP(),
+    machineType: systemTypes[randomInRange(0, systemTypes.length - 1, 0)],
+    status: "ACTIVE",
+    hostName: createRandomName(),
+    lastResponse: randomInRange(1000, 10000000, 0),
+    systemLocation: {
+      long: randomInRange(-180, 180, 3),
+      lat: randomInRange(-180, 180, 3)
+    }
+  }
+}
+
+
+
+//-----------Helper Functions-----------
+function createIP() {
+  let text = "";
+  let possible = "0123456789";
+
+  for (var i = 0; i < 10; i++)
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+  return text;
+}
+
+
+function formatIP(ip){
+    let newIP = ip;
+
+    newIP = newIP.slice(0, 2) + '.' + newIP.slice(2);
+    newIP = newIP.slice(0, 6) + '.' + newIP.slice(6);
+    newIP = newIP.slice(0, 9) + '.' + newIP.slice(9);
+
+    return newIP;
+}
+
+
+function randomInRange(min, max, fixed){
+  return (Math.random() * (max - min) + min).toFixed(fixed) * 1;
+}
+
+
+function createEntryHTML(entry){
+
+  let {value, status, machineType, hostName, lastResponse, systemLocation} = entry;
+  let ipAddress = formatIP(value);
+  let htmlString = "<tbody>\
+                      <tr class='entry' data-ip-value='"+ value +"'>\
+                          <span style='display: hidden'></span>\
+                          <td>"+ formatIP(value) +"</td>\
+                          <td>"+ status +"</td>\
+                          <td>"+ hostName +"</td>\
+                          <td>"+ machineType +"</td>\
+                          <td>"+ lastResponse +"MS</td>\
+                          <td>"+ systemLocation.long + "_" + systemLocation.lat +"</td>\
+                      </tr>\
+                    </tbody>"
+
+  return htmlString;
+
+}
+
+function createEntryHTMLArray(entries){
+
+  let htmlStrings = [];
+
+  entries.forEach(function(e) {
+    htmlStrings.push(createEntryHTML(e));
+  }, this);
+
+  return htmlStrings;
+}
+
+
+function createRandomName(){
+  let text = "";
+  let possible = "0123456789QWERTYUIOP_-ASDFGHJKLZXCVBNM";
+  
+  for (var i = 0; i < 10; i++)
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  
+  return text;
+}
+
+
+function createEntryArray(){
+  
+  let entries = [];
+
+  for(i = 0; i < 27; i++){
+    entries.push(new Entry());
+  }
+
+  return entries;
+}
+
+
+function concatEntryHTMLArray(entries){
+
+  let htmlString = "";
+
+  entries.forEach(function(e) {
+    htmlString += e;
+  }, this);
+
+  return htmlString;
+}
+
+
+function renderEntries(htmlString){
+  document.getElementById('entry_table').innerHTML = htmlString;
+}
+
+
+function extractIpAddressFromElement(element){
+  ipAddress = element.getAttribute('data-ip-value');
+  return ipAddress;
+}
+
+
+function selectTargetIpAddress(entries){
+  let value = entries[randomInRange(0, entries.length - 1, 0)].value;
+  return value;
+}
+
+
+function compareIpAddress(value){
+  let levDis = new Levenshtein(value, targetIpAddress);
+  let similarCount = 10 - levDis.distance;
+  return similarCount;
+}
+
+
+
+//----------Business Logic--------
+
+function beginRound(){
+  document.getElementById('entry_table').innerHTML = "";
+  ipAttempts = [];
+  let entryArray = createEntryArray();
+  let htmlArray = createEntryHTMLArray(entryArray);
+  let entryHTMLString = concatEntryHTMLArray(htmlArray);
+  let entryElements = document.getElementsByClassName('entry');
+
+  targetIpAddress = selectTargetIpAddress(entryArray);
+  renderEntries(entryHTMLString);
+  assignClickEvent(entryElements);
+  renderSuccessPrecentage(score * 100/winScore);
+  renderAttempts();
+
+  console.log(targetIpAddress);
+
+}
+
+function beginClicked(){
+  let instructions = document.getElementById('messege');
+  instructions.innerHTML = ""
+  instructions.className = "hidden";
+  timeInterval = setInterval(countDown, 10);
+  beginRound();
+}
+
+
+function assignClickEvent(elements){
+  
+  for(i = 0; i < elements.length; i++){
+    let entry = elements[i];
+    entry.onclick = function(){
+      clickedEntry(entry);
+    }
+  }
+}
+
+
+function clickedEntry(entry){
+
+  if(!lose && !win){
+    let ipDifference = compareIpAddress(extractIpAddressFromElement(entry));
+      
+    if(ipDifference === 10){
+      targetIpAddressFound(entry);
+    }
+    else{
+      wrongEntrySelected(entry, ipDifference);
+      renderLockout();
+      renderSuccessPrecentage(score * 100/winScore);
+      checkStatus();
+    }
+  }
+}
+
+
+function targetIpAddressFound(entry){
+  score += 1;
+  if(score > winScore - 1){
+    gameWin();
+  }
+  else{
+    beginRound();
+  }
+}
+
+
+function wrongEntrySelected(entry, similarity){
+  let value = extractIpAddressFromElement(entry);
+
+  lockoutHits = lockoutHits + 1;
+  saveAttempt(value);
+  renderAttempts();
+  
+
+  console.log(value + " was incorrect. Tries left: " + (lockoutMax - lockoutHits));
+  console.log(similarity + " characters were correct. Try Again!")
+}
+
+function renderSuccessPrecentage(percentage){
+  let successPercentage =  document.getElementById('precentage');
+  successPercentage.innerHTML = Math.floor(percentage) + "%";
+}
+
+
+function renderLockout(){
+  let lockoutElement = document.getElementById('lockout');
+
+  lockoutElement.innerHTML = '';
+
+  for(i = 0; i < lockoutHits; i++){
+    lockoutElement.innerHTML = lockoutElement.innerHTML + "<span class'lockoutMark'> X </span>";
+  }
+}
+
+
+function saveAttempt(value){
+  ipAttempts.push(value);
+}
+
+
+function renderAttempts(){
+  let attemptsTable = document.getElementById('attempts_table');
+  attemptsTable.innerHTML = "";
+
+  ipAttempts.forEach(function(e) {
+    attemptsTable.innerHTML += "<td>" + formatIP(e) + "</td>\
+                                <td>" + compareIpAddress(e) + " similar chars</td>"
+  }, this);
+}
+
+function checkStatus(){
+  if(lockoutHits >= lockoutMax){
+    gameLose();
+  }
+}
+
+
+function gameLose(){
+  let entryElements = document.getElementsByClassName('entry');
+  let entryArray = [];
+  
+  lose = true;
+
+  timerElement.innerHTML = 0;
+  clearInterval(timeInterval);
+  
+  Array.prototype.forEach.call(entryElements, function(e) {
+    e.className = "entry error"
+  }, this);
+}
+
+function gameWin(){
+  let targetElement = document.querySelector('[data-ip-value="' + targetIpAddress + '"]')
+
+  win = true;
+  targetElement.className = "win";
+  clearInterval(timeInterval);
+  timerElement.innerHTML = 0;
+
+  console.log("Game Win");
+}
+
+function countDown(){
+  if(time > 0 && !lose){
+    time -= 10;
+    timerElement.innerHTML = time;
+  }
+  else{
+    gameLose();
+  }
+}

dev/index.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Lost</title>
+
+  <link rel="stylesheet" href="dist/style.css">
+
+</head>
+
+<body>
+    <section class="screen">
+        <h3 id="title">DISPLAY REPORT</h3>
+        <section class="score-wrapper">
+
+            <div class="left">
+                <h3>TRACKING SUCCESS: <span class="green" id="precentage"></span></h3>
+                <h3>QUERY: <span class="green" id="query-name">KATLYEN HICKS</span></h3>
+            </div>
+        
+            <div class="right">
+                <h3>BRUTE FORCE LOCKOUT: <span class="green" id="lockout"></span></h3>
+                <h3>TIME LOCKOUT: <span class="green" id="timer"></span>MS</h3>
+            </div>
+        </section>
+        
+        <hr>
+        
+        <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">
+                        <th>IP ADDRESS</th>
+                        <th>ACTIVE</th>
+                        <th>HOST_NAME</th>
+                        <th>MACHINE_TYPE</th>
+                        <th>LAST_RESPONCE</th>
+                        <th>SYSTEM_LOCATION</th>
+                    </tr>
+                </thead>
+
+                <tbody id="entry_table">
+                    
+                </tbody>
+            </table>
+        </section>
+
+        <hr>
+
+        <section class="response-wrapper">
+            <table id="attempted-ips">
+                <thead>
+                    <th class="green">ATTEMPTS</th>
+                    <th class="green">SHARED CHARS</th>
+                </thead>
+
+                <tbody id="attempts_table">
+                    
+                </tbody>
+            </table>
+        </section>
+
+    </section>
+
+    
+
+
+</body>
+
+
+<script src="dist/app.js"></script>
+
+</html>

dev/levenshtein.js

@@ -0,0 +1,106 @@
+(function(root, factory){
+  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
+    define(function(){
+      return factory(root);
+    });
+  } else if (typeof module == 'object' && module && module.exports) {
+    module.exports = factory(root);
+  } else {
+    root.Levenshtein = factory(root);
+  }
+}(this, function(root){
+
+  function forEach( array, fn ) { var i, length
+    i = -1
+    length = array.length
+    while ( ++i < length )
+      fn( array[ i ], i, array )
+  }
+
+  function map( array, fn ) { var result
+    result = Array( array.length )
+    forEach( array, function ( val, i, array ) {
+      result[i] = fn( val, i, array )
+    })
+    return result
+  }
+
+  function reduce( array, fn, accumulator ) {
+    forEach( array, function( val, i, array ) {
+      accumulator = fn( val, i, array )
+    })
+    return accumulator
+  }
+
+  // Levenshtein distance
+  function Levenshtein( str_m, str_n ) { var previous, current, matrix
+    // Constructor
+    matrix = this._matrix = []
+
+    // Sanity checks
+    if ( str_m == str_n )
+      return this.distance = 0
+    else if ( str_m == '' )
+      return this.distance = str_n.length
+    else if ( str_n == '' )
+      return this.distance = str_m.length
+    else {
+      // Danger Will Robinson
+      previous = [ 0 ]
+      forEach( str_m, function( v, i ) { i++, previous[ i ] = i } )
+
+      matrix[0] = previous
+      forEach( str_n, function( n_val, n_idx ) {
+        current = [ ++n_idx ]
+        forEach( str_m, function( m_val, m_idx ) {
+          m_idx++
+          if ( str_m.charAt( m_idx - 1 ) == str_n.charAt( n_idx - 1 ) )
+            current[ m_idx ] = previous[ m_idx - 1 ]
+          else
+            current[ m_idx ] = Math.min
+              ( previous[ m_idx ]     + 1   // Deletion
+              , current[  m_idx - 1 ] + 1   // Insertion
+              , previous[ m_idx - 1 ] + 1   // Subtraction
+              )
+        })
+        previous = current
+        matrix[ matrix.length ] = previous
+      })
+
+      return this.distance = current[ current.length - 1 ]
+    }
+  }
+
+  Levenshtein.prototype.toString = Levenshtein.prototype.inspect = function inspect ( no_print ) { var matrix, max, buff, sep, rows
+    matrix = this.getMatrix()
+    max = reduce( matrix,function( m, o ) {
+      return Math.max( m, reduce( o, Math.max, 0 ) )
+    }, 0 )
+    buff = Array( ( max + '' ).length ).join( ' ' )
+
+    sep = []
+    while ( sep.length < (matrix[0] && matrix[0].length || 0) )
+      sep[ sep.length ] = Array( buff.length + 1 ).join( '-' )
+    sep = sep.join( '-+' ) + '-'
+
+    rows = map( matrix, function( row ) { var cells
+      cells = map( row, function( cell ) {
+        return ( buff + cell ).slice( - buff.length )
+      })
+      return cells.join( ' |' ) + ' '
+    })
+
+    return rows.join( "\n" + sep + "\n" )
+  }
+
+  Levenshtein.prototype.getMatrix = function () {
+    return this._matrix.slice()
+  }
+
+  Levenshtein.prototype.valueOf = function() {
+    return this.distance
+  }
+
+  return Levenshtein
+
+}));

dev/style.css

@@ -0,0 +1,146 @@
+.hidden{
+    display: none;
+}
+
+.screen{
+    width: 900px;
+    min-height: 800px;
+    margin: 30px auto;
+    border-color: #00FF00;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 26px;
+    background-color: black;
+    color: white;
+    font-family: monospace;
+    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;
+}
+
+.green{
+    color: #00FF00;
+}
+
+.error{
+    background-color: red;
+    color: white;
+}
+
+.win{
+    background-color: white;
+    color: #00FF00;
+}
+
+.win :hover{
+    background-color: white;
+    color: #00FF00;
+}
+
+.score-wrapper{
+    padding: 5px;
+}
+
+.score-wrapper h3{
+    margin: 0px;
+}
+
+.score-wrapper .left{
+    float: left;
+    width: 50%;
+    margin: 0px;
+}
+
+.score-wrapper .right{
+    float: right;
+    width: 50%;
+    margin: 0px;
+}
+
+.response-wrapper{
+    padding-bottom: 8px;
+}
+
+hr{
+    border-color: #00ff00;
+    margin: 6px 0px;
+}
+
+table{
+    width: 900px;
+    font-size: 14px;
+}
+
+th{
+    text-align: left;
+    padding: 0px 4px;
+}
+
+td{
+    padding: 0px 4px;
+    overflow: hidden;
+}
+
+.column-titles{
+    margin-bottom: 2px;
+}
+
+#play-wrapper{
+    padding:0px 2px;
+    margin: 0px;
+}
+
+.column{
+    padding: 0px 1px;
+    overflow: hidden;
+    margin: 0px;
+}
+
+
+
+.address-choice{
+    margin: 0px;
+    padding: 0px;
+}
+
+.address-choice span{
+    overflow: hidden;
+    display: inline-block;
+}
+
+.entry:hover{
+    color: black;
+    background-color: #00ff00;
+    cursor: pointer;
+}
+
+.lockoutMark{
+    display: inline;
+}