Small UI improvements based on private beta feedback

This commit is contained in:
Daniel Xie 2017-05-14 21:21:22 -05:00
parent 708b800e36
commit 31ef48f4a8
5 changed files with 34 additions and 15 deletions

@ -47,4 +47,18 @@ Tasks TODO:
Account for Max possible int when gaining exp (it will overflow) Account for Max possible int when gaining exp (it will overflow)
OPTIMIZATION OPTIMIZATION
https://gamealchemist.wordpress.com/2013/05/01/lets-get-those-javascript-arrays-to-work-fast/ https://gamealchemist.wordpress.com/2013/05/01/lets-get-those-javascript-arrays-to-work-fast/
Private beta feedback
2 things right off the bat, I'd suggest putting a "Back" button in the tutorial
window, and you could highlight or otherwise point out which tab the tutorial is
suggesting I click on next
Maybe have a different colour for each tab, and then in the tutorial window it
can have the name of the tab with that colour
Also not really a big deal, but I'm at 110% zoom on chrome and the tutorial window
covers some of the text
For the last thing of the tutorial, I would just have a button like "Finish Tutorial" rather than "Next"

@ -138,7 +138,7 @@ CONSTANTS = {
"run [script/program] Execute a program or a script<br>" + "run [script/program] Execute a program or a script<br>" +
"scan See 'netstat' command<br>" + "scan See 'netstat' command<br>" +
"sudov Shows whether or not you have root access on this computer<br>" + "sudov Shows whether or not you have root access on this computer<br>" +
"tail [script] Display script logs (logs contain details about active scripts)" + "tail [script] Display script logs (logs contain details about active scripts)<br>" +
"telnet [ip/hostname] See 'connect' command<br>" + "telnet [ip/hostname] See 'connect' command<br>" +
"top Display all running scripts and their RAM usage<br>", "top Display all running scripts and their RAM usage<br>",
@ -179,10 +179,10 @@ CONSTANTS = {
"a script, you attempt to hack the server. This action takes time. The more advanced a server's " + "a script, you attempt to hack the server. This action takes time. The more advanced a server's " +
"security is, the more time it will take. Your hacking skill level also affects the hacking time, " + "security is, the more time it will take. Your hacking skill level also affects the hacking time, " +
"with a higher hacking skill leading to shorter hacking times. Also, running the hack command " + "with a higher hacking skill leading to shorter hacking times. Also, running the hack command " +
"manually through terminal is faster than hacking from a script. <br>" + "manually through terminal is faster than hacking from a script. <br><br>" +
"Your attempt to hack a server will not always succeed. The chance you have to successfully hack a " + "Your attempt to hack a server will not always succeed. The chance you have to successfully hack a " +
"server is also determined by the server's security and your hacking skill level. Even if your " + "server is also determined by the server's security and your hacking skill level. Even if your " +
"hacking attempt is unsuccessful, you will still gain experience points. <br>" + "hacking attempt is unsuccessful, you will still gain experience points. <br><br>" +
"When you successfully hack a server. You steal a certain percentage of that server's total money. This " + "When you successfully hack a server. You steal a certain percentage of that server's total money. This " +
"percentage is determined by the server's security and your hacking skill level. The amount of money " + "percentage is determined by the server's security and your hacking skill level. The amount of money " +
"on a server is not limitless. So, if you constantly hack a server and deplete its money, then you will " + "on a server is not limitless. So, if you constantly hack a server and deplete its money, then you will " +
@ -260,7 +260,9 @@ CONSTANTS = {
"as long as <i>[cond]</i> is met. The <i>[post]</i> expression will evaluate at the end of every iteration " + "as long as <i>[cond]</i> is met. The <i>[post]</i> expression will evaluate at the end of every iteration " +
"of the for loop. The following example shows code that will do the same thing as the while loop example above, " + "of the for loop. The following example shows code that will do the same thing as the while loop example above, " +
"except using a for loop instead: <br><br>" + "except using a for loop instead: <br><br>" +
"<i>for (i = 0; i < 10; i = i+1) { <br>&nbsp;&nbsp;&nbsp;&nbsp;hack('foodnstuff');<br>}; </i><br><br><br>", "<i>for (i = 0; i < 10; i = i+1) { <br>&nbsp;&nbsp;&nbsp;&nbsp;hack('foodnstuff');<br>}; </i><br><br>" +
"<u><h1> If statements </h1></u>" +
"",
TutorialTravelingText:"There are six major cities in the world that you are able to travel to: <br><br> " + TutorialTravelingText:"There are six major cities in the world that you are able to travel to: <br><br> " +
" Aevum<br>" + " Aevum<br>" +

@ -197,7 +197,7 @@ function iTutorialEvaluateStep() {
"}<br><br> " + "}<br><br> " +
"For anyone with basic programming experience, this code should be straightforward. " + "For anyone with basic programming experience, this code should be straightforward. " +
"This script will continuously hack the 'foodnstuff' server. <br><br>" + "This script will continuously hack the 'foodnstuff' server. <br><br>" +
"To save and close the script editor, press the button in the top left, or press ctrl + b."); "To save and close the script editor, press the button in the top right, or press ctrl + b.");
//next step triggered in saveAndCloseScriptEditor() (Script.js) //next step triggered in saveAndCloseScriptEditor() (Script.js)
break; break;
case iTutorialSteps.TerminalFree: case iTutorialSteps.TerminalFree:
@ -208,7 +208,7 @@ function iTutorialEvaluateStep() {
//next step triggered by terminal commmand //next step triggered by terminal commmand
break; break;
case iTutorialSteps.TerminalRunScript: case iTutorialSteps.TerminalRunScript:
iTutorialSetText("We have 2GB of free RAM on this machine, which is enough to run our " + iTutorialSetText("We have 4GB of free RAM on this machine, which is enough to run our " +
"script. Let's run our script using 'run foodnstuff.script'."); "script. Let's run our script using 'run foodnstuff.script'.");
//next step triggered by terminal commmand //next step triggered by terminal commmand
break; break;
@ -318,6 +318,7 @@ function iTutorialEvaluateStep() {
"Hope you enjoy the game!"); "Hope you enjoy the game!");
var next = clearEventListeners("interactive-tutorial-next"); var next = clearEventListeners("interactive-tutorial-next");
next.style.display = "inline-block"; next.style.display = "inline-block";
next.innerHTML = "Finish Tutorial";
next.addEventListener("click", function() { next.addEventListener("click", function() {
iTutorialNextStep(); iTutorialNextStep();
return false; return false;

@ -10,14 +10,6 @@ function scriptEditorSaveCloseInit() {
saveAndCloseScriptEditor(); saveAndCloseScriptEditor();
return false; return false;
}); });
var netscriptDocButton = document.getElementById("script-editor-netscript-doc-button");
netscriptDocButton.addEventListener("click", function() {
Engine.loadTutorialContent();
Engine.displayTutorialContent();
Engine.displayTutorialPage(CONSTANTS.TutorialNetscriptText);
return false;
});
}; };
document.addEventListener("DOMContentLoaded", scriptEditorSaveCloseInit, false); document.addEventListener("DOMContentLoaded", scriptEditorSaveCloseInit, false);

@ -941,6 +941,16 @@ var Engine = {
return false; return false;
}); });
//Script Editor Netscript documentation button
var netscriptDocButton = document.getElementById("script-editor-netscript-doc-button");
netscriptDocButton.addEventListener("click", function() {
Engine.loadTutorialContent();
Engine.displayTutorialContent();
Engine.displayTutorialPage(CONSTANTS.TutorialNetscriptText);
return false;
});
//Create Program buttons //Create Program buttons
var portHackALink = document.getElementById("create-program-nuke"); var portHackALink = document.getElementById("create-program-nuke");
var bruteSshALink = document.getElementById("create-program-brutessh"); var bruteSshALink = document.getElementById("create-program-brutessh");