lost_the_game/dev/app.js

//----------Constant Values and Objects---------
let targetIpAddress = '';
const lockoutMax = 9;
let lockoutHits = 0;
const amountOfIps = 20;
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 < amountOfIps; 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 messege = document.getElementById('messege');
  messege.innerHTML = ""
  messege.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 renderEndGame(){
  document.getElementById('entry_table').innerHTML = "";
  let messege = document.getElementById('messege');

  messege.innerHTML = "<p>You have found her! It was not easy, but your diligence paid off. The data you have collected has been sent to the F.B.I. Please help actually fight human trafficking by donating to one of several private organizations or report tips to goverment agencies that do just that!</p><button onclick='redirectToFoundation()'>HELP</button>"
  messege.className = "";
}

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);

  
  setTimeout(function(){
    window.location.reload(true)
  }, 4000); 
}

function gameWin(){
  let targetElement = document.querySelector('[data-ip-value="' + targetIpAddress + '"]')

  win = true;
  targetElement.className = "win";
  clearInterval(timeInterval);
  timerElement.innerHTML = 0;

  renderEndGame();

  console.log("Game Win");
}

function countDown(){
  if(time > 0 && !lose){
    time -= 10;
    timerElement.innerHTML = time;
  }
  else{
    gameLose();
  }
}

function redirectToFoundation(){
  window.open('https://www.dhs.gov/blue-campaign/identify-victim?utm_source=bing&utm_medium=cpc&utm_campaign=search-p1.broad-allcit-allpri&utm_content=trafficking&utm_term=%2Btrafficking', '_blank')
}