diff --git a/dev/app.js b/dev/app.js index c4d2216..6305fc1 100644 --- a/dev/app.js +++ b/dev/app.js @@ -1,25 +1,25 @@ -//----------Constant Values and Objects--------- -let targetIpAddress = ''; // left empty, is assigned later. -const lockoutMax = 12; //How many chances the user gets -let lockoutHits = 0; -const amountOfIps = 20; //amount of entries to chohose from -let ipAttempts = []; -let time = 460000; //Games time limit -let lose = false; -let win = false; -let timerElement = document.getElementById('timer'); //The HTML element that renders the time left -let timeInterval = {}; //Empty object that will be turned into a timeInterval that will control the game timer. -let score = 0; -let winScore = 3; //How many rounds the game has +// ----------Constant Values and Objects--------- +let targetIpAddress = '' // left empty, is assigned later. +const lockoutMax = 12 // How many chances the user gets +let lockoutHits = 0 +const amountOfIps = 20 // amount of entries to chohose from +let ipAttempts = [] +let time = 460000 // Games time limit +let lose = false +let win = false +let timerElement = document.getElementById('timer') // The HTML element that renders the time left +let timeInterval = {} // Empty object that will be turned into a timeInterval that will control the game timer. +let score = 0 +let winScore = 3 // How many rounds the game has -const systemTypes = ["HIDDEN", "KALILINUX", "WINDOWSXP", "WINDOWS2000", - "WINDOWS10", "REDHAT", "ANDROID4.4", "NETHUNTER"]; +const systemTypes = ['HIDDEN', 'KALILINUX', 'WINDOWSXP', 'WINDOWS2000', + 'WINDOWS10', 'REDHAT', 'ANDROID4.4', 'NETHUNTER'] -const Entry = function(){ +const Entry = function () { return { value: createIP(), machineType: systemTypes[randomInRange(0, systemTypes.length - 1, 0)], - status: "ACTIVE", + status: 'ACTIVE', hostName: createRandomName(), lastResponse: randomInRange(1000, 10000000, 0), systemLocation: { @@ -29,333 +29,298 @@ const Entry = function(){ } } +// ---------------------Helper Functions--------------------- +/* These are pure functions. They do not change the state of the +application so I keep these seperated from teh business logic +funcitons that alter the view and take in input */ +function createIP () { + let text = '' + let possible = '0123456789' -//---------------------Helper Functions--------------------- -/*These are pure functions. They do not change the state of the -application so I keep these seperated from teh business logic -funcitons that alter the view and take in input*/ + for (var i = 0; i < 10; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)) + } -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; + return text } +function formatIP (ip) { + let newIP = ip -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) - 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; + return newIP } - -/*This function is used several time to get random numbers that are used +/* This function is used several time to get random numbers that are used to get the random Longitude and Lattiudes, to select one of the IP addresses -as the target, etc.*/ -function randomInRange(min, max, fixed){ - return (Math.random() * (max - min) + min).toFixed(fixed) * 1; +as the target, etc. */ +function randomInRange (min, max, fixed) { + return (Math.random() * (max - min) + min).toFixed(fixed) * 1 } +/* This function is used to return a randon alphanumeric sting that is added to +a new Entry() object to give its 'systemName' a unique value. */ +function createRandomName () { + let text = '' + let possible = '0123456789QWERTYUIOP_-ASDFGHJKLZXCVBNM' -/*This function is used to return a randon alphanumeric sting that is added to -a new Entry() object to give its 'systemName' a unique value.*/ -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; + for (let i = 0; i < 10; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)) + } + + return text } - -/*This takes in the entry object that was instantiated by 'new Entry()' +/* This takes in the entry object that was instantiated by 'new Entry()' We return the HTML element in the form of a string. This will later be put into the Array htmlArray that is declared later on above the 'Business -Logic Section'*/ -function createEntryHTML(entry){ - - //ES6 object destructuring - let {value, status, machineType, hostName, lastResponse, systemLocation} = entry; - let ipAddress = formatIP(value); - let htmlString = "\ - \ - \ - "+ formatIP(value) +"\ - "+ status +"\ - "+ hostName +"\ - "+ machineType +"\ - "+ lastResponse +"MS\ - "+ systemLocation.long + "_" + systemLocation.lat +"\ - \ - " - - return htmlString; +Logic Section' */ +function createEntryHTML (entry) { + // ES6 object destructuring + let { value, status, machineType, hostName, lastResponse, systemLocation } = entry + // let ipAddress = formatIP(value) + let htmlString = ` + + + "${formatIP(value)}" + ${status} + ${hostName} + ${machineType} + ${lastResponse}MS + ${systemLocation.long}_${systemLocation.lat} + + ` + return htmlString } -/*This returns the array of HTML Element strings. This array is later +/* This returns the array of HTML Element strings. This array is later iterated through in a function to concatinate the strings together in 'concatEntryHTMLArray().' That concatenated value is then used to render the entries */ -function createEntryHTMLArray(entries){ +function createEntryHTMLArray (entries) { + let htmlStrings = [] - let htmlStrings = []; + entries.forEach(function (e) { + htmlStrings.push(createEntryHTML(e)) + }, this) - entries.forEach(function(e) { - htmlStrings.push(createEntryHTML(e)); - }, this); - - return htmlStrings; + return htmlStrings } - - -/*This funciton creates an array of Entry objects that will later be iterated +/* This funciton creates an array of Entry objects that will later be iterated though to render to the view. */ -function createEntryArray(){ - - let entries = []; +function createEntryArray () { + let entries = [] - for(i = 0; i < amountOfIps; i++){ - entries.push(new Entry()); + for (let i = 0; i < amountOfIps; i++) { + entries.push(new Entry()) } - return entries; + return entries } - -/*This function iterates thou the array of HTML Entry Element strings to turn them +/* This function iterates thou the array of HTML Entry Element strings to turn them into one big string that will be used to render to the view. */ -function concatEntryHTMLArray(entries){ +function concatEntryHTMLArray (entries) { + let htmlString = '' - let htmlString = ""; + entries.forEach(function (e) { + htmlString += e + }, this) - entries.forEach(function(e) { - htmlString += e; - }, this); - - return htmlString; + return htmlString } -/*This function is used to extract and return the data-ip-address value from the literal +/* This function is used to extract and return the data-ip-address value from the literal html element that is passed into it. We need to extract this data when we click on the -entries in the view. to perform certain tasks.*/ -function extractIpAddressFromElement(element){ - ipAddress = element.getAttribute('data-ip-value'); - return ipAddress; +entries in the view. to perform certain tasks. */ +function extractIpAddressFromElement (element) { + let ipAddress = element.getAttribute('data-ip-value') + return ipAddress } - -/*This function finds a value among the entires that have already been genrated and returns +/* This function finds a value among the entires that have already been genrated and returns that value. That value will later be assigned to a global aiable */ -function selectTargetIpAddress(entries){ - let value = entries[randomInRange(0, entries.length - 1, 0)].value; - return value; +function selectTargetIpAddress (entries) { + let value = entries[randomInRange(0, entries.length - 1, 0)].value + return value } - -/*This function finds the similarity between the selected entriy and the target entry -and returns a number that tells how similar they were. It uses the Levenstien method +/* This function finds the similarity between the selected entriy and the target entry +and returns a number that tells how similar they were. It uses the Levenstien method that is provided in a different file. */ -function compareIpAddress(value){ - let levDis = new Levenshtein(value, targetIpAddress); - let similarCount = 10 - levDis.distance; - return similarCount; +function compareIpAddress (value) { + let levDis = new Levenshtein(value, targetIpAddress) + let similarCount = 10 - levDis.distance + return similarCount } - -/*These functions are used to alter the state of the application. Here we work with user +/* These functions are used to alter the state of the application. Here we work with user input and view rendering as well as progress in the game, starting, stopping, and restarting. */ -//--------------------Business Logic------------------ +// --------------------Business Logic------------------ +/* At the begining of the round we find the divs that we will render views too. +Create the data of the IP Address entries that are use */ +function beginRound () { + document.getElementById('entry_table').innerHTML = '' + ipAttempts = [] + let entryArray = createEntryArray() + let htmlArray = createEntryHTMLArray(entryArray) + let entryHTMLString = concatEntryHTMLArray(htmlArray) + let entryElements = document.getElementsByClassName('entry') -/*At the begining of the round we find the divs that we will render views too. -Create the data of the IP Address entries that are use*/ -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); + 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 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 assignClickEvent (elements) { + for (let 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)) -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(); + 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 targetIpAddressFound (entry) { + score += 1 + if (score > winScore - 1) { + gameWin() + } else { + beginRound() } } +function wrongEntrySelected (entry, similarity) { + let value = extractIpAddressFromElement(entry) -function wrongEntrySelected(entry, similarity){ - let value = extractIpAddressFromElement(entry); + lockoutHits = lockoutHits + 1 + saveAttempt(value) + renderAttempts() - lockoutHits = lockoutHits + 1; - saveAttempt(value); - renderAttempts(); - - - console.log(value + " was incorrect. Tries left: " + (lockoutMax - lockoutHits)); - console.log(similarity + " characters were correct. Try Again!") + console.log(value + ' was incorrect. Tries left: ' + (lockoutMax - lockoutHits)) + console.log(similarity + ' characters were correct. Try Again!') } - -function renderEntries(htmlString){ - document.getElementById('entry_table').innerHTML = htmlString; +function renderEntries (htmlString) { + document.getElementById('entry_table').innerHTML = htmlString } -function renderSuccessPrecentage(percentage){ - let successPercentage = document.getElementById('precentage'); - successPercentage.innerHTML = Math.floor(percentage) + "%"; +function renderSuccessPrecentage (percentage) { + let successPercentage = document.getElementById('precentage') + successPercentage.innerHTML = Math.floor(percentage) + '%' } +function renderLockout () { + let lockoutElement = document.getElementById('lockout') -function renderLockout(){ - let lockoutElement = document.getElementById('lockout'); + lockoutElement.innerHTML = '' - lockoutElement.innerHTML = ''; - - for(i = 0; i < lockoutHits; i++){ - lockoutElement.innerHTML = lockoutElement.innerHTML + " X "; + for (let i = 0; i < lockoutHits; i++) { + lockoutElement.innerHTML = lockoutElement.innerHTML + " X " } } - -function saveAttempt(value){ - ipAttempts.push(value); +function saveAttempt (value) { + ipAttempts.push(value) } +function renderAttempts () { + let attemptsTable = document.getElementById('attempts_table') + attemptsTable.innerHTML = '' -function renderAttempts(){ - let attemptsTable = document.getElementById('attempts_table'); - attemptsTable.innerHTML = ""; - - ipAttempts.forEach(function(e) { - attemptsTable.innerHTML += "" + formatIP(e) + "\ - " + compareIpAddress(e) + " similar chars" - }, this); + ipAttempts.forEach(function (e) { + attemptsTable.innerHTML += `${formatIP(e)} + ${compareIpAddress(e)} similar chars` + }, this) } +function renderEndGame (win) { + document.getElementById('entry_table').innerHTML = '' + let messege = document.getElementById('messege') -function renderEndGame(){ - document.getElementById('entry_table').innerHTML = ""; - let messege = document.getElementById('messege'); - - messege.innerHTML = "

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!

" - messege.className = ""; + if (win) { + messege.innerHTML = "

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!

" + } else { + messege.innerHTML = "

You have failed. And unfortuantly have not been able to find her. But to help in the actual battle agains human trafficking, you can donate to one of the several private organizations or report tips to government agencies that do just that!

" + } + messege.className = '' } -function checkStatus(){ - if(lockoutHits >= lockoutMax){ - gameLose(); +function checkStatus () { + if (lockoutHits >= lockoutMax) { + gameLose() } } +function gameLose () { + let entryElements = document.getElementsByClassName('entry') + lose = true -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) - timerElement.innerHTML = 0; - clearInterval(timeInterval); - - Array.prototype.forEach.call(entryElements, function(e) { - e.className = "entry error" - }, this); - - - setTimeout(function(){ - window.location.reload(true) - }, 4000); + setTimeout(function () { + renderEndGame(false) // false means game lost + }, 4000) } -function gameWin(){ +function gameWin () { let targetElement = document.querySelector('[data-ip-value="' + targetIpAddress + '"]') - win = true; - targetElement.className = "win"; - clearInterval(timeInterval); - timerElement.innerHTML = 0; + win = true + targetElement.className = 'win' + clearInterval(timeInterval) + timerElement.innerHTML = 0 - renderEndGame(); - - console.log("Game Win"); + renderEndGame(true) // true means game wone } -function countDown(){ - if(time > 0 && !lose){ - time -= 10; - timerElement.innerHTML = time; - } - else{ - gameLose(); +function countDown () { + if (time > 0 && !lose) { + time -= 10 + timerElement.innerHTML = time + } else { + gameLose() } } -function redirectToFoundation(){ +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') } diff --git a/dev/style.css b/dev/style.css index 47e1545..7052da1 100644 --- a/dev/style.css +++ b/dev/style.css @@ -1,15 +1,18 @@ +html,body{ + margin: 0px; + padding: 0px +} + .hidden{ display: none; } .screen{ - width: 900px; - height: 720px; - margin: 30px auto; + width: calc(100vw - 2px); + height: calc(100vh - 2px); border-color: #00FF00; border-width: 1px; border-style: solid; - border-radius: 26px; background-color: black; color: white; font-family: monospace; @@ -92,10 +95,11 @@ button:hover{ hr{ border-color: #00ff00; margin: 6px 0px; + width: 100vw; } table{ - width: 900px; + width: 100%; font-size: 14px; } @@ -145,4 +149,8 @@ td{ .lockoutMark{ display: inline; font-size: 16px; +} + +.ip{ + color: rgb(209, 255, 191); } \ No newline at end of file