mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-22 15:43:49 +01:00
Flashing tutorial buttons
This commit is contained in:
parent
2ae770fbed
commit
84a007960e
13
README.md
13
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
|
||||
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
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
@ -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>
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user