diff --git a/README.md b/README.md index da382d30e..9c3317aaa 100644 --- a/README.md +++ b/README.md @@ -52,19 +52,18 @@ Tasks TODO: 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 + I'd suggest putting a "Back" button in the tutorial + window, 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" - Command to see a script's RAM cost + I'd put a little popup or something when you click save, so you know Netscript commands: I just got two from the top of my head: a function to get the current cash on the server, and a function to know how much a hack would take - Like, if I want to grow each time I take 5000$ from the server, that would be practical \ No newline at end of file + Like, if I want to grow each time I take 5000$ from the server, that would be practical + + Now, only other suggestion before sleep would be to be able to buy multiple Hacknet upgrades in one click \ No newline at end of file diff --git a/css/interactivetutorial.css b/css/interactivetutorial.css index f72d71d7a..86150a903 100644 --- a/css/interactivetutorial.css +++ b/css/interactivetutorial.css @@ -5,7 +5,7 @@ right: 0; top: 0; height: 100%; /* Full height */ - margin: 20% auto; + margin: 35% auto; padding: 10px; border: 5px solid #FFFFFF; width: 35%; @@ -22,7 +22,8 @@ } #interactive-tutorial-exit, -#interactive-tutorial-next { +#interactive-tutorial-next, +#interactive-tutorial-back { color: #aaa; font-size: 20px; font-weight: bold; @@ -38,6 +39,11 @@ float: left; } +#interactive-tutorial-back { + margin-right: 20%; + float: right; +} + #interactive-tutorial-next { float: right; } @@ -45,7 +51,9 @@ #interactive-tutorial-exit:hover, #interactive-tutorial-exit:focus, #interactive-tutorial-next:hover, -#interactive-tutorial-next:focus { +#interactive-tutorial-next:focus, +#interactive-tutorial-back:hover, +#interactive-tutorial-back:focus { color: white; text-decoration: none; cursor: pointer; diff --git a/css/styles.css b/css/styles.css index 4a58be444..64d8b63e3 100644 --- a/css/styles.css +++ b/css/styles.css @@ -163,4 +163,36 @@ tr:focus { .tooltip:hover .tooltiptext { visibility: visible; +} + +/* Flashing button */ +@-webkit-keyframes glowing { + 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } + 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; } + 100% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } +} + +@-moz-keyframes glowing { + 0% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } + 50% { background-color: #FF0000; -moz-box-shadow: 0 0 40px #FF0000; } + 100% { background-color: #B20000; -moz-box-shadow: 0 0 3px #B20000; } +} + +@-o-keyframes glowing { + 0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } + 50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } + 100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } +} + +@keyframes glowing { + 0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } + 50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } + 100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } +} + +.flashing-button { + -webkit-animation: glowing 1500ms infinite; + -moz-animation: glowing 1500ms infinite; + -o-animation: glowing 1500ms infinite; + animation: glowing 1500ms infinite; } \ No newline at end of file diff --git a/index.html b/index.html index b760337cb..f045e7fbb 100644 --- a/index.html +++ b/index.html @@ -690,6 +690,7 @@

Exit Tutorial Next + Back diff --git a/src/Constants.js b/src/Constants.js index 347c55c74..44eb55917 100644 --- a/src/Constants.js +++ b/src/Constants.js @@ -1,5 +1,5 @@ CONSTANTS = { - Version: "0.5", + Version: "0.6", //Max level for any skill, assuming no multipliers. Determined by max numerical value in javascript for experience //and the skill level formula in Player.js. Note that all this means it that when experience hits MAX_INT, then diff --git a/src/InteractiveTutorial.js b/src/InteractiveTutorial.js index f79599b9e..f72cb2dec 100644 --- a/src/InteractiveTutorial.js +++ b/src/InteractiveTutorial.js @@ -48,17 +48,28 @@ function iTutorialStart() { iTutorialEnd(); return false; }); + + //Back button + var backButton = clearEventListeners("interactive-tutorial-back"); + backButton.style.display = "none"; + backButton.addEventListener("click", function() { + iTutorialPrevStep(); + return false; + }); } function iTutorialEvaluateStep() { if (!iTutorialIsRunning) {console.log("Interactive Tutorial not running"); return;} switch(currITutorialStep) { case iTutorialSteps.Start: + Engine.loadTerminalContent(); + iTutorialSetText("Welcome to Bitburner, a cyberpunk-themed incremental RPG! " + "The game takes place in a dark, dystopian future...The year is 2077...

" + "This tutorial will show you the basics of the game to help you get started. " + "You may skip the tutorial at any time."); var next = clearEventListeners("interactive-tutorial-next"); + next.style.display = "inline-block"; next.addEventListener("click", function() { iTutorialNextStep(); return false; @@ -72,6 +83,9 @@ function iTutorialEvaluateStep() { var next = clearEventListeners("interactive-tutorial-next"); next.style.display = "none"; + //Flash Character tab + document.getElementById("character-menu-link").setAttribute("class", "flashing-button"); + //Initialize everything necessary to open the "Character" page var charaterMainMenuButton = document.getElementById("character-menu-link"); charaterMainMenuButton.addEventListener("click", function() { @@ -98,6 +112,8 @@ function iTutorialEvaluateStep() { var next = clearEventListeners("interactive-tutorial-next"); next.style.display = "none"; + document.getElementById("terminal-menu-link").setAttribute("class", "flashing-button"); + //Initialize everything necessary to open the 'Terminal' Page var terminalMainMenuButton = document.getElementById("terminal-menu-link"); terminalMainMenuButton.addEventListener("click", function() { @@ -221,6 +237,7 @@ function iTutorialEvaluateStep() { "much slower rate.

" + "Let's check out some statistics of our active, running scripts by clicking the " + "'Active Scripts' link in the main navigation menu. "); + document.getElementById("active-scripts-menu-link").setAttribute("class", "flashing-button"); var activeScriptsMainMenuButton = document.getElementById("active-scripts-menu-link"); activeScriptsMainMenuButton.addEventListener("click", function() { Engine.loadActiveScriptsContent(); @@ -234,6 +251,7 @@ function iTutorialEvaluateStep() { "running across every existing server. You can use this to gauge how well " + "your scripts are doing. Let's go back to the Terminal now using the 'Terminal'" + "link."); + document.getElementById("terminal-menu-link").setAttribute("class", "flashing-button"); //Initialize everything necessary to open the 'Terminal' Page var terminalMainMenuButton = clearEventListeners("terminal-menu-link"); terminalMainMenuButton.addEventListener("click", function() { @@ -267,6 +285,7 @@ function iTutorialEvaluateStep() { iTutorialSetText("Hacking is not the only way to earn money. One other way to passively " + "earn money is by purchasing and upgrading Hacknet Nodes. Let's go to " + "the 'Hacknet Nodes' page through the main navigation menu now."); + document.getElementById("hacknet-nodes-menu-link").setAttribute("class", "flashing-button"); var hacknetNodesButton = clearEventListeners("hacknet-nodes-menu-link"); var next = clearEventListeners("interactive-tutorial-next"); next.style.display = "none"; @@ -288,6 +307,7 @@ function iTutorialEvaluateStep() { " money, you can upgrade " + "your newly-purchased Hacknet Node below.

" + "Let's go to the 'World' page through the main navigation menu."); + document.getElementById("world-menu-link").setAttribute("class", "flashing-button"); var worldButton = clearEventListeners("world-menu-link"); worldButton.addEventListener("click", function() { Engine.loadWorldContent(); @@ -302,6 +322,7 @@ function iTutorialEvaluateStep() { "There's a lot of content out in the world, make sure " + "you explore and discover!

" + "Lastly, click on the 'Tutorial' link in the main navigation menu."); + document.getElementById("tutorial-menu-link").setAttribute("class", "flashing-button"); var tutorialButton = clearEventListeners("tutorial-menu-link"); tutorialButton.addEventListener("click", function() { Engine.loadTutorialContent(); @@ -319,6 +340,10 @@ function iTutorialEvaluateStep() { var next = clearEventListeners("interactive-tutorial-next"); next.style.display = "inline-block"; next.innerHTML = "Finish Tutorial"; + + var backButton = clearEventListeners("interactive-tutorial-back"); + backButton.style.display = "none"; + next.addEventListener("click", function() { iTutorialNextStep(); return false; @@ -340,6 +365,7 @@ function iTutorialNextStep() { iTutorialEvaluateStep(); break; case iTutorialSteps.GoToCharacterPage: + document.getElementById("character-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.CharacterPage; iTutorialEvaluateStep(); break; @@ -348,6 +374,7 @@ function iTutorialNextStep() { iTutorialEvaluateStep(); break; case iTutorialSteps.CharacterGoToTerminalPage: + document.getElementById("terminal-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.TerminalIntro; iTutorialEvaluateStep(); break; @@ -400,10 +427,12 @@ function iTutorialNextStep() { iTutorialEvaluateStep(); break; case iTutorialSteps.TerminalGoToActiveScriptsPage: + document.getElementById("active-scripts-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.ActiveScriptsPage; iTutorialEvaluateStep(); break; case iTutorialSteps.ActiveScriptsPage: + document.getElementById("terminal-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.ActiveScriptsToTerminal; iTutorialEvaluateStep(); break; @@ -416,6 +445,7 @@ function iTutorialNextStep() { iTutorialEvaluateStep(); break; case iTutorialSteps.GoToHacknetNodesPage: + document.getElementById("hacknet-nodes-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.HacknetNodesIntroduction; iTutorialEvaluateStep(); break; @@ -424,10 +454,12 @@ function iTutorialNextStep() { iTutorialEvaluateStep(); break; case iTutorialSteps.HacknetNodesGoToWorldPage: + document.getElementById("world-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.WorldDescription; iTutorialEvaluateStep(); break; case iTutorialSteps.WorldDescription: + document.getElementById("tutorial-menu-link").removeAttribute("class"); currITutorialStep = iTutorialSteps.TutorialPageInfo; iTutorialEvaluateStep(); break; @@ -442,6 +474,116 @@ function iTutorialNextStep() { } } +//Go to previous step and evaluate +function iTutorialPrevStep() { + switch(currITutorialStep) { + case iTutorialSteps.Start: + currITutorialStep = iTutorialSteps.Start; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.GoToCharacterPage: + currITutorialStep = iTutorialSteps.Start; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.CharacterPage: + currITutorialStep = iTutorialSteps.GoToCharacterPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.CharacterGoToTerminalPage: + currITutorialStep = iTutorialSteps.CharacterPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalIntro: + currITutorialStep = iTutorialSteps.CharacterGoToTerminalPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalHelp: + currITutorialStep = iTutorialSteps.TerminalIntro; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalLs: + currITutorialStep = iTutorialSteps.TerminalHelp; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalScan: + currITutorialStep = iTutorialSteps.TerminalLs; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalConnect: + currITutorialStep = iTutorialSteps.TerminalScan; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalAnalyze: + currITutorialStep = iTutorialSteps.TerminalConnect; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalNuke: + currITutorialStep = iTutorialSteps.TerminalAnalyze; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalManualHack: + currITutorialStep = iTutorialSteps.TerminalNuke; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalCreateScript: + currITutorialStep = iTutorialSteps.TerminalManualHack; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalTypeScript: + currITutorialStep = iTutorialSteps.TerminalCreateScript; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalFree: + currITutorialStep = iTutorialSteps.TerminalTypeScript; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalRunScript: + currITutorialStep = iTutorialSteps.TerminalFree; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalGoToActiveScriptsPage: + currITutorialStep = iTutorialSteps.TerminalRunScript; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.ActiveScriptsPage: + currITutorialStep = iTutorialSteps.TerminalGoToActiveScriptsPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.ActiveScriptsToTerminal: + currITutorialStep = iTutorialSteps.ActiveScriptsPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TerminalTailScript: + currITutorialStep = iTutorialSteps.ActiveScriptsToTerminal; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.GoToHacknetNodesPage: + currITutorialStep = iTutorialSteps.TerminalTailScript; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.HacknetNodesIntroduction: + currITutorialStep = iTutorialSteps.GoToHacknetNodesPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.HacknetNodesGoToWorldPage: + currITutorialStep = iTutorialSteps.HacknetNodesIntroduction; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.WorldDescription: + currITutorialStep = iTutorialSteps.HacknetNodesGoToWorldPage; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.TutorialPageInfo: + currITutorialStep = iTutorialSteps.WorldDescription; + iTutorialEvaluateStep(); + break; + case iTutorialSteps.End: + break; + default: + throw new Error("Invalid tutorial step"); + } +} + function iTutorialEnd() { //Re-enable auto save Engine.Counters.autoSaveCounter = 1;