Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-08 16:53:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Flashing tutorial buttons

Browse Source
This commit is contained in:
Daniel Xie 2017-05-15 00:09:14 -05:00
parent 2ae770fbed
commit 84a007960e
6 changed files with 193 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -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
Now, only other suggestion before sleep would be to be able to buy multiple Hacknet upgrades in one click

14
css/interactivetutorial.css
View File

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

32
css/styles.css
View File

@ -164,3 +164,35 @@ 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;
}

1
index.html
View File

@ -690,6 +690,7 @@
<p id="interactive-tutorial-text"> </p>
<span id="interactive-tutorial-exit"> Exit Tutorial </span>
<span id="interactive-tutorial-next"> Next </span>
<span id="interactive-tutorial-back"> Back </span>
</div>
</body>

2
src/Constants.js
View File

@ -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

142
src/InteractiveTutorial.js
View File

@ -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...<br><br>" +
"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. <br><br> " +
"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. <br><br>" +
"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!<br><br>" +
"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;