diff --git a/src/InteractiveTutorial.d.ts b/src/InteractiveTutorial.d.ts
index e92fff21c..28b73deb8 100644
--- a/src/InteractiveTutorial.d.ts
+++ b/src/InteractiveTutorial.d.ts
@@ -1,3 +1,5 @@
export declare function iTutorialNextStep(): void;
+export declare function iTutorialPrevStep(): void;
+export declare function iTutorialEnd(): void;
export declare const ITutorial: { isRunning: boolean; currStep: number };
-export declare const iTutorialSteps: { [key: string]: number };
+export declare const iTutorialSteps: { [key: string]: number | undefined };
diff --git a/src/InteractiveTutorial.js b/src/InteractiveTutorial.js
index 9925b6e77..bbead93e9 100644
--- a/src/InteractiveTutorial.js
+++ b/src/InteractiveTutorial.js
@@ -4,6 +4,8 @@ import { Settings } from "./Settings/Settings";
import { LiteratureNames } from "./Literature/data/LiteratureNames";
+import { ITutorialEvents } from "./ui/InteractiveTutorial/ITutorialEvents";
+
import { clearEventListeners } from "../utils/uiHelpers/clearEventListeners";
import { createElement } from "../utils/uiHelpers/createElement";
import { createPopup } from "../utils/uiHelpers/createPopup";
@@ -67,328 +69,6 @@ function iTutorialStart() {
Engine.Counters.autoSaveCounter = Infinity;
ITutorial.currStep = 0;
ITutorial.isRunning = true;
-
- document.getElementById("interactive-tutorial-container").style.display = "block";
-
- // Exit tutorial button
- const exitButton = clearEventListeners("interactive-tutorial-exit");
- exitButton.addEventListener("click", function () {
- iTutorialEnd();
- return false;
- });
-
- // Back button
- const backButton = clearEventListeners("interactive-tutorial-back");
- backButton.addEventListener("click", function () {
- iTutorialPrevStep();
- return false;
- });
-
- // Next button
- const nextButton = clearEventListeners("interactive-tutorial-next");
- nextButton.addEventListener("click", function () {
- iTutorialNextStep();
- return false;
- });
-
- iTutorialEvaluateStep();
-}
-
-function iTutorialEvaluateStep() {
- if (!ITutorial.isRunning) {
- return;
- }
-
- // Disable and clear main menu
- // const terminalMainMenu = clearEventListeners("terminal-menu-link");
- // const statsMainMenu = clearEventListeners("stats-menu-link");
- // const activeScriptsMainMenu = clearEventListeners("active-scripts-menu-link");
- // const hacknetMainMenu = clearEventListeners("hacknet-nodes-menu-link");
- // const cityMainMenu = clearEventListeners("city-menu-link");
- // const tutorialMainMenu = clearEventListeners("tutorial-menu-link");
- // terminalMainMenu.removeAttribute("class");
- // statsMainMenu.removeAttribute("class");
- // activeScriptsMainMenu.removeAttribute("class");
- // hacknetMainMenu.removeAttribute("class");
- // cityMainMenu.removeAttribute("class");
- // tutorialMainMenu.removeAttribute("class");
-
- // Interactive Tutorial Next button
- const nextBtn = document.getElementById("interactive-tutorial-next");
-
- switch (ITutorial.currStep) {
- case iTutorialSteps.Start:
- 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. " +
- "You may skip the tutorial at any time.",
- );
- nextBtn.style.display = "inline-block";
- break;
- case iTutorialSteps.GoToCharacterPage:
- iTutorialSetText(
- "Let's start by heading to the Stats page. Click the Stats tab on " +
- "the main navigation menu (left-hand side of the screen)",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.CharacterPage:
- iTutorialSetText(
- "The Stats page shows a lot of important information about your progress, " +
- "such as your skills, money, and bonuses. ",
- );
- nextBtn.style.display = "inline-block";
- break;
- case iTutorialSteps.CharacterGoToTerminalPage:
- iTutorialSetText(
- "Let's head to your computer's terminal by clicking the Terminal tab on the " +
- "main navigation menu.",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.TerminalIntro:
- iTutorialSetText(
- "The Terminal is used to interface with your home computer as well as " +
- "all of the other machines around the world.",
- );
- nextBtn.style.display = "inline-block";
- break;
- case iTutorialSteps.TerminalHelp:
- iTutorialSetText(
- "Let's try it out. Start by entering the help command into the Terminal " +
- "(Don't forget to press Enter after typing the command)",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalLs:
- iTutorialSetText(
- "The help command displays a list of all available Terminal commands, how to use them, " +
- "and a description of what they do.
Let's try another command. Enter the ls command.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalScan:
- iTutorialSetText(
- " ls is a basic command that shows files " +
- "on the computer. Right now, it shows that you have a program called NUKE.exe on your computer. " +
- "We'll get to what this does later.
Using your home computer's terminal, you can connect " +
- "to other machines throughout the world. Let's do that now by first entering " +
- "the scan command.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalScanAnalyze1:
- iTutorialSetText(
- "The scan command shows all available network connections. In other words, " +
- "it displays a list of all servers that can be connected to from your " +
- "current machine. A server is identified by its hostname.
" +
- "That's great and all, but there's so many servers. Which one should you go to? " +
- "The scan-analyze command gives some more detailed information about servers on the " +
- "network. Try it now!",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalScanAnalyze2:
- iTutorialSetText(
- "You just ran scan-analyze with a depth of one. This command shows more detailed " +
- "information about each server that you can connect to (servers that are a distance of " +
- "one node away).
It is also possible to run scan-analyze with " +
- "a higher depth. Let's try a depth of two with the following command: scan-analyze 2.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalConnect:
- iTutorialSetText(
- "Now you can see information about all servers that are up to two nodes away, as well " +
- "as figure out how to navigate to those servers through the network. You can only connect to " +
- "a server that is one node away. To connect to a machine, use the connect [hostname] command.
" +
- "From the results of the scan-analyze command, we can see that the n00dles server is " +
- "only one node away. Let's connect so it now using: connect n00dles",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalAnalyze:
- iTutorialSetText(
- "You are now connected to another machine! What can you do now? You can hack it!
In the year 2077, currency has " +
- "become digital and decentralized. People and corporations store their money " +
- "on servers and computers. Using your hacking abilities, you can hack servers " +
- "to steal money and gain experience.
" +
- "Before you try to hack a server, you should run diagnostics using the analyze command.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalNuke:
- iTutorialSetText(
- "When the analyze command finishes running it will show useful information " +
- "about hacking the server.
For this server, the required hacking skill is only 1, " +
- "which means you can hack it right now. However, in order to hack a server " +
- "you must first gain root access. The NUKE.exe program that we saw earlier on your " +
- "home computer is a virus that will grant you root access to a machine if there are enough " +
- "open ports.
The analyze results shows that there do not need to be any open ports " +
- "on this machine for the NUKE virus to work, so go ahead and run the virus using the " +
- "run NUKE.exe command.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalManualHack:
- iTutorialSetText(
- "You now have root access! You can hack the server using the hack command. " +
- "Try doing that now.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalHackingMechanics:
- iTutorialSetText(
- "You are now attempting to hack the server. Performing a hack takes time and " +
- "only has a certain percentage chance " +
- "of success. This time and success chance is determined by a variety of factors, including " +
- "your hacking skill and the server's security level.
" +
- "If your attempt to hack the server is successful, you will steal a certain percentage " +
- "of the server's total money. This percentage is affected by your hacking skill and " +
- "the server's security 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 encounter " +
- "diminishing returns in your hacking.",
- );
- nextBtn.style.display = "inline-block";
- break;
- case iTutorialSteps.TerminalCreateScript:
- iTutorialSetText(
- "Hacking is the core mechanic of the game and is necessary for progressing. However, " +
- "you don't want to be hacking manually the entire time. You can automate your hacking " +
- "by writing scripts!
To create a new script or edit an existing one, you can use the nano " +
- "command. Scripts must end with the .script extension. Let's make a script now by " +
- "entering nano n00dles.script after the hack command finishes running (Sidenote: Pressing ctrl + c" +
- " will end a command like hack early)",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalTypeScript:
- iTutorialSetText(
- "This is the script editor. You can use it to program your scripts. Scripts are " +
- "written in a simplified version of javascript. Copy and paste the following code into the script editor:
" +
- "For anyone with basic programming experience, this code should be straightforward. " +
- "This script will continuously hack the n00dles server.
" +
- "To save and close the script editor, press the button in the bottom left, or press ctrl + b.",
- );
- nextBtn.style.display = "none"; // next step triggered in saveAndCloseScriptEditor() (Script.js)
- break;
- case iTutorialSteps.TerminalFree:
- iTutorialSetText(
- "Now we'll run the script. Scripts require a certain amount of RAM to run, and can be " +
- "run on any machine which you have root access to. Different servers have different " +
- "amounts of RAM. You can also purchase more RAM for your home server.
To check how much " +
- "RAM is available on this machine, enter the free command.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal commmand
- break;
- case iTutorialSteps.TerminalRunScript:
- iTutorialSetText(
- "We have 4GB of free RAM on this machine, which is enough to run our " +
- "script. Let's run our script using run n00dles.script.",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal commmand
- break;
- case iTutorialSteps.TerminalGoToActiveScriptsPage:
- iTutorialSetText(
- "Your script is now running! " +
- "It will continuously run in the background and will automatically stop if " +
- "the code ever completes (the n00dles.script will never complete because it " +
- "runs an infinite loop).
These scripts can passively earn you income and hacking experience. " +
- "Your scripts will also earn money and experience while you are offline, although at a " +
- "slightly slower rate.
" +
- "Let's check out some statistics for our running scripts by clicking the " +
- "Active Scripts link in the main navigation menu.",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.ActiveScriptsPage:
- iTutorialSetText(
- "This page displays information about all of your scripts that are " +
- "running across every server. You can use this to gauge how well " +
- "your scripts are doing. Let's go back to the Terminal",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.ActiveScriptsToTerminal:
- iTutorialSetText(
- "One last thing about scripts, each active script contains logs that detail " +
- "what it's doing. We can check these logs using the tail command. Do that " +
- "now for the script we just ran by typing tail n00dles.script",
- );
- nextBtn.style.display = "none"; // next step triggered by terminal command
- break;
- case iTutorialSteps.TerminalTailScript:
- iTutorialSetText(
- "The log for this script won't show much right now (it might show nothing at all) because it " +
- "just started running...but check back again in a few minutes!
" +
- "This covers the basics of hacking. To learn more about writing " +
- "scripts, select the Tutorial link in the " +
- "main navigation menu to look at the documentation. " +
- "If you are an experienced JavaScript " +
- "developer, I would highly suggest you check out the section on " +
- "NetscriptJS/Netscript 2.0, it's faster and more powerful.
For now, let's move on to something else!",
- );
- nextBtn.style.display = "inline-block";
- break;
- case iTutorialSteps.GoToHacknetNodesPage:
- 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 page through the main navigation menu now.",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.HacknetNodesIntroduction:
- iTutorialSetText(
- "here you can purchase new Hacknet Nodes and upgrade your " + "existing ones. Let's purchase a new one now.",
- );
- nextBtn.style.display = "none"; // Next step triggered by purchaseHacknet() (HacknetNode.js)
- break;
- case iTutorialSteps.HacknetNodesGoToWorldPage:
- iTutorialSetText(
- "You just purchased a Hacknet Node! This Hacknet Node will passively " +
- "earn you money over time, both online and offline. When you get enough " +
- " money, you can upgrade " +
- "your newly-purchased Hacknet Node below.
" +
- "Let's go to the City page through the main navigation menu.",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.WorldDescription:
- iTutorialSetText(
- "This page lists all of the different locations you can currently " +
- "travel to. Each location has something that you can do. " +
- "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.",
- );
- nextBtn.style.display = "none";
- break;
- case iTutorialSteps.TutorialPageInfo:
- iTutorialSetText(
- "This page contains a lot of different documentation about the game's " +
- "content and mechanics. I know it's a lot, but I highly suggest you read " +
- "(or at least skim) through this before you start playing. That's the end of the tutorial. " +
- "Hope you enjoy the game!",
- );
- nextBtn.style.display = "inline-block";
- nextBtn.innerHTML = "Finish Tutorial";
- break;
- case iTutorialSteps.End:
- iTutorialEnd();
- break;
- default:
- throw new Error("Invalid tutorial step");
- }
-
- if (ITutorial.stepIsDone[ITutorial.currStep] === true) {
- nextBtn.style.display = "inline-block";
- }
}
// Go to the next step and evaluate it
@@ -397,7 +77,8 @@ function iTutorialNextStep() {
if (ITutorial.currStep < iTutorialSteps.End) {
ITutorial.currStep += 1;
}
- iTutorialEvaluateStep();
+ if (ITutorial.currStep === iTutorialSteps.End) iTutorialEnd();
+ ITutorialEvents.emit();
}
// Go to previous step and evaluate
@@ -405,22 +86,11 @@ function iTutorialPrevStep() {
if (ITutorial.currStep > iTutorialSteps.Start) {
ITutorial.currStep -= 1;
}
- iTutorialEvaluateStep();
+ ITutorialEvents.emit();
}
function iTutorialEnd() {
- // Re-enable auto save
- if (Settings.AutosaveInterval === 0) {
- Engine.Counters.autoSaveCounter = Infinity;
- } else {
- Engine.Counters.autoSaveCounter = Settings.AutosaveInterval * 5;
- }
-
- Engine.init();
-
- ITutorial.currStep = iTutorialSteps.End;
ITutorial.isRunning = false;
- document.getElementById("interactive-tutorial-container").style.display = "none";
// Create a popup with final introductory stuff
const popupId = "interactive-tutorial-ending-popup";
@@ -445,20 +115,7 @@ function iTutorialEnd() {
createPopup(popupId, [txt, gotitBtn]);
Player.getHomeComputer().messages.push(LiteratureNames.HackersStartingHandbook);
+ ITutorialEvents.emit();
}
-let textBox = null;
-(function () {
- function set() {
- textBox = document.getElementById("interactive-tutorial-text");
- document.removeEventListener("DOMContentLoaded", set);
- }
- document.addEventListener("DOMContentLoaded", set);
-})();
-
-function iTutorialSetText(txt) {
- textBox.innerHTML = txt;
- textBox.parentElement.scrollTop = 0; // this resets scroll position
-}
-
-export { iTutorialSteps, iTutorialEnd, iTutorialStart, iTutorialNextStep, ITutorial };
+export { iTutorialSteps, iTutorialEnd, iTutorialStart, iTutorialNextStep, ITutorial, iTutorialPrevStep };
diff --git a/src/ScriptEditor/ui/Root.tsx b/src/ScriptEditor/ui/Root.tsx
index 6fafaef07..5b4912453 100644
--- a/src/ScriptEditor/ui/Root.tsx
+++ b/src/ScriptEditor/ui/Root.tsx
@@ -103,6 +103,7 @@ export function Root(props: IProps): React.ReactElement {
}
lastPosition = null;
+ // this is duplicate code with saving later.
if (ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.TerminalTypeScript) {
//Make sure filename + code properly follow tutorial
if (filename !== "n00dles.script") {
@@ -117,20 +118,24 @@ export function Root(props: IProps): React.ReactElement {
//Save the script
const server = props.player.getCurrentServer();
if (server === null) throw new Error("Server should not be null but it is.");
+ let found = false;
for (let i = 0; i < server.scripts.length; i++) {
if (filename == server.scripts[i].filename) {
server.scripts[i].saveScript(code, props.player.currentServer, server.scripts);
- props.router.toTerminal();
- return iTutorialNextStep();
+ found = true;
}
}
- // If the current script does NOT exist, create a new one
- const script = new Script();
- script.saveScript(code, props.player.currentServer, server.scripts);
- server.scripts.push(script);
+ if (!found) {
+ const script = new Script();
+ script.saveScript(code, props.player.currentServer, server.scripts);
+ server.scripts.push(script);
+ }
- return iTutorialNextStep();
+ iTutorialNextStep();
+
+ props.router.toTerminal();
+ return;
}
if (filename == "") {
diff --git a/src/Terminal/Terminal.ts b/src/Terminal/Terminal.ts
index 5f2890b1f..cd6929ad1 100644
--- a/src/Terminal/Terminal.ts
+++ b/src/Terminal/Terminal.ts
@@ -88,8 +88,8 @@ export class Terminal implements ITerminal {
process(router: IRouter, player: IPlayer, cycles: number): void {
if (this.action === null) return;
this.action.timeLeft -= (CONSTANTS._idleSpeed * cycles) / 1000;
- TerminalEvents.emit();
if (this.action.timeLeft < 0) this.finishAction(router, player, false);
+ TerminalEvents.emit();
}
append(item: Output | Link): void {
@@ -97,16 +97,15 @@ export class Terminal implements ITerminal {
if (this.outputHistory.length > Settings.MaxTerminalCapacity) {
this.outputHistory.slice(this.outputHistory.length - Settings.MaxTerminalCapacity);
}
+ TerminalEvents.emit();
}
print(s: string): void {
this.append(new Output(s, "primary"));
- TerminalEvents.emit();
}
error(s: string): void {
this.append(new Output(s, "error"));
- TerminalEvents.emit();
}
startHack(player: IPlayer): void {
@@ -246,6 +245,7 @@ export class Terminal implements ITerminal {
this.print("Cancelled");
}
this.action = null;
+ TerminalEvents.emit();
}
getFile(player: IPlayer, filename: string): Script | TextFile | string | null {
@@ -515,51 +515,47 @@ export class Terminal implements ITerminal {
switch (ITutorial.currStep) {
case iTutorialSteps.TerminalHelp:
if (commandArray.length === 1 && commandArray[0] == "help") {
- TerminalHelpText.forEach((line) => this.print(line));
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalLs:
if (commandArray.length === 1 && commandArray[0] == "ls") {
- ls(this, router, player, s, commandArray.slice(1));
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalScan:
if (commandArray.length === 1 && commandArray[0] == "scan") {
- scan(this, router, player, s, commandArray.slice(1));
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalScanAnalyze1:
if (commandArray.length == 1 && commandArray[0] == "scan-analyze") {
- this.executeScanAnalyzeCommand(player, 1);
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalScanAnalyze2:
if (commandArray.length == 2 && commandArray[0] == "scan-analyze" && commandArray[1] === 2) {
- this.executeScanAnalyzeCommand(player, 2);
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalConnect:
if (commandArray.length == 2) {
if (commandArray[0] == "connect" && (commandArray[1] == "n00dles" || commandArray[1] == n00dlesServ.ip)) {
- player.getCurrentServer().isConnectedTo = false;
- player.currentServer = n00dlesServ.ip;
- player.getCurrentServer().isConnectedTo = true;
- this.print("Connected to n00dles");
iTutorialNextStep();
} else {
this.print("Wrong command! Try again!");
@@ -567,80 +563,69 @@ export class Terminal implements ITerminal {
}
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalAnalyze:
if (commandArray.length === 1 && commandArray[0] === "analyze") {
- if (commandArray.length !== 1) {
- this.print("Incorrect usage of analyze command. Usage: analyze");
- return;
- }
- this.startAnalyze();
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalNuke:
if (commandArray.length == 2 && commandArray[0] == "run" && commandArray[1] == "NUKE.exe") {
- n00dlesServ.hasAdminRights = true;
- this.print("NUKE successful! Gained root access to n00dles");
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalManualHack:
if (commandArray.length == 1 && commandArray[0] == "hack") {
- this.startHack(player);
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalCreateScript:
if (commandArray.length == 2 && commandArray[0] == "nano" && commandArray[1] == "n00dles.script") {
- router.toScriptEditor("n00dles.script", "");
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalFree:
if (commandArray.length == 1 && commandArray[0] == "free") {
- free(this, router, player, s, commandArray.slice(1));
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.TerminalRunScript:
if (commandArray.length == 2 && commandArray[0] == "run" && commandArray[1] == "n00dles.script") {
- run(this, router, player, s, commandArray.slice(1));
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
case iTutorialSteps.ActiveScriptsToTerminal:
if (commandArray.length == 2 && commandArray[0] == "tail" && commandArray[1] == "n00dles.script") {
- // Check that the script exists on this machine
- const runningScript = findRunningScript("n00dles.script", [], player.getCurrentServer());
- if (runningScript == null) {
- this.print("Error: No such script exists");
- return;
- }
- logBoxCreate(runningScript);
iTutorialNextStep();
} else {
this.print("Bad command. Please follow the tutorial");
+ return;
}
break;
default:
- this.print("Please follow the tutorial, or click 'Exit Tutorial' if you'd like to skip it");
+ this.print("Please follow the tutorial, or click 'EXIT' if you'd like to skip it");
return;
}
- return;
}
/****************** END INTERACTIVE TUTORIAL ******************/
/* Command parser */
diff --git a/src/Terminal/ui/TerminalRoot.tsx b/src/Terminal/ui/TerminalRoot.tsx
index ce9005172..854353a8c 100644
--- a/src/Terminal/ui/TerminalRoot.tsx
+++ b/src/Terminal/ui/TerminalRoot.tsx
@@ -50,9 +50,9 @@ interface IProps {
export function TerminalRoot({ terminal, router, player }: IProps): React.ReactElement {
const scrollHook = useRef(null);
- const setRerender = useState(false)[1];
+ const setRerender = useState(0)[1];
function rerender(): void {
- setRerender((old) => !old);
+ setRerender((old) => old + 1);
}
useEffect(() => {
diff --git a/src/ui/GameRoot.tsx b/src/ui/GameRoot.tsx
index bc28b2a88..535a028f1 100644
--- a/src/ui/GameRoot.tsx
+++ b/src/ui/GameRoot.tsx
@@ -9,6 +9,9 @@ import { onExport } from "../ExportBonus";
import { LocationName } from "../Locations/data/LocationNames";
import { Location } from "../Locations/Location";
import { Locations } from "../Locations/Locations";
+import { ITutorial } from "../InteractiveTutorial";
+import { InteractiveTutorialRoot } from "./InteractiveTutorial/InteractiveTutorialRoot";
+import { ITutorialEvents } from "./InteractiveTutorial/ITutorialEvents";
import { Faction } from "../Faction/Faction";
import { prestigeAugmentation } from "../Prestige";
@@ -31,6 +34,7 @@ import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import { Page, IRouter } from "./Router";
+import { Overview } from "./React/Overview";
import { SidebarRoot } from "../Sidebar/ui/SidebarRoot";
import { AugmentationsRoot } from "../Augmentation/ui/AugmentationsRoot";
import { DevMenuRoot } from "../DevMenu";
@@ -179,6 +183,7 @@ function determineStartPage(player: IPlayer): Page {
export function GameRoot({ player, engine, terminal }: IProps): React.ReactElement {
const classes = useStyles();
const [page, setPage] = useState(determineStartPage(player));
+ const setRerender = useState(0)[1];
const [faction, setFaction] = useState(
player.currentWorkFactionName ? Factions[player.currentWorkFactionName] : (undefined as unknown as Faction),
);
@@ -193,6 +198,13 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
const [cinematicText, setCinematicText] = useState("");
+ function rerender(): void {
+ setRerender((old) => old + 1);
+ }
+ useEffect(() => {
+ return ITutorialEvents.subscribe(rerender);
+ }, []);
+
Router = {
page: () => page,
toActiveScripts: () => setPage(Page.ActiveScripts),
@@ -255,13 +267,19 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
useEffect(() => {
filename = "";
code = "";
- window.scrollTo(0, 0);
+ if (page !== Page.Terminal) window.scrollTo(0, 0);
});
return (
- saveObject.saveGame(engine.indexedDb)} />
+
+ {!ITutorial.isRunning ? (
+ saveObject.saveGame(engine.indexedDb)} />
+ ) : (
+
+ )}
+
{page === Page.BitVerse ? (
) : page === Page.Infiltration ? (
diff --git a/src/ui/InteractiveTutorial/ITutorialEvents.ts b/src/ui/InteractiveTutorial/ITutorialEvents.ts
new file mode 100644
index 000000000..fbd1ae944
--- /dev/null
+++ b/src/ui/InteractiveTutorial/ITutorialEvents.ts
@@ -0,0 +1,2 @@
+import { EventEmitter } from "../../utils/EventEmitter";
+export const ITutorialEvents = new EventEmitter<[]>();
diff --git a/src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx b/src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx
new file mode 100644
index 000000000..dc5d86fe2
--- /dev/null
+++ b/src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx
@@ -0,0 +1,493 @@
+import React, { useState, useEffect } from "react";
+
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Button from "@mui/material/Button";
+import ArrowForwardIos from "@mui/icons-material/ArrowForwardIos";
+import ArrowBackIos from "@mui/icons-material/ArrowBackIos";
+import { ITutorialEvents } from "./ITutorialEvents";
+import { use } from "../Context";
+
+import ListItem from "@mui/material/ListItem";
+import EqualizerIcon from "@mui/icons-material/Equalizer";
+import LastPageIcon from "@mui/icons-material/LastPage";
+import HelpIcon from "@mui/icons-material/Help";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
+import StorageIcon from "@mui/icons-material/Storage";
+import LocationCityIcon from "@mui/icons-material/LocationCity";
+
+import {
+ iTutorialPrevStep,
+ iTutorialNextStep,
+ ITutorial,
+ iTutorialSteps,
+ iTutorialEnd,
+} from "../../InteractiveTutorial";
+
+interface IContent {
+ content: React.ReactElement;
+ canNext: boolean;
+}
+
+const contents: { [number: string]: IContent | undefined } = {
+ [iTutorialSteps.Start as number]: {
+ content: (
+
+ 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. You may skip the tutorial at any time.
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.GoToCharacterPage as number]: {
+ content: (
+ <>
+ Let's start by heading to the Stats page. Click
+
+
+ Stats
+
+
+ on the main navigation menu (left-hand side of the screen)
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.CharacterPage as number]: {
+ content: (
+ <>
+
+
+ Stats
+
+
+ shows a lot of important information about your progress, such as your skills, money, and bonuses.
+
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.CharacterGoToTerminalPage as number]: {
+ content: (
+ <>
+ Let's head to your computer's terminal by clicking
+
+
+ Terminal
+
+ on the main navigation menu.
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalIntro as number]: {
+ content: (
+ <>
+
+
+ Terminal
+
+
+ is used to interface with your home computer as well as all of the other machines around the world.
+
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.TerminalHelp as number]: {
+ content: (
+ <>
+
+ Let's try it out. Start by entering the help command
+ into the
+
+
+
+ Terminal
+
+ (Don't forget to press Enter after typing the command)
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalLs as number]: {
+ content: (
+ <>
+
+ The help command displays a list of all available
+
+
+
+ Terminal
+
+
+ commands, how to use them, and a description of what they do.
+
+ Let's try another command. Enter the ls command.
+
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalScan as number]: {
+ content: (
+
+ ls is a basic command that shows files on the computer.
+ Right now, it shows that you have a program called{" "}
+ NUKE.exe on your computer. We'll get to what this does
+ later.
+
+ Using your home computer's terminal, you can connect to other machines throughout the world. Let's do that now
+ by first entering the scan command.
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalScanAnalyze1 as number]: {
+ content: (
+
+ The scan command shows all available network connections.
+ In other words, it displays a list of all servers that can be connected to from your current machine. A server
+ is identified by its hostname.
+
+ That's great and all, but there's so many servers. Which one should you go to? The{" "}
+ scan-analyze command gives some more detailed information
+ about servers on the network. Try it now!
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalScanAnalyze2 as number]: {
+ content: (
+
+ You just ran scan-analyze with a depth of one. This
+ command shows more detailed information about each server that you can connect to (servers that are a distance
+ of one node away).
+ It is also possible to run scan-analyze with a
+ higher depth. Let's try a depth of two with the following command:{" "}
+ scan-analyze 2.
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalConnect as number]: {
+ content: (
+
+ Now you can see information about all servers that are up to two nodes away, as well as figure out how to
+ navigate to those servers through the network. You can only connect to a server that is one node away. To
+ connect to a machine, use the connect [hostname] command.
+
+
+ From the results of the scan-analyze command, we can see
+ that the n00dles server is only one node away. Let's
+ connect so it now using: connect n00dles
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalAnalyze as number]: {
+ content: (
+
+ You are now connected to another machine! What can you do now? You can hack it!
+
+ In the year 2077, currency has become digital and decentralized. People and corporations store their
+ money on servers and computers. Using your hacking abilities, you can hack servers to steal money and gain
+ experience.
+
+ Before you try to hack a server, you should run diagnostics using the{" "}
+ analyze command.
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalNuke as number]: {
+ content: (
+
+ When the analyze command finishes running it will show
+ useful information about hacking the server.
+ For this server, the required hacking skill is only 1, which
+ means you can hack it right now. However, in order to hack a server you must first gain root access. The{" "}
+ NUKE.exe program that we saw earlier on your home computer
+ is a virus that will grant you root access to a machine if there are enough open ports.
+
+ The analyze results shows that there do not need to
+ be any open ports on this machine for the NUKE virus to work, so go ahead and run the virus using the{" "}
+ run NUKE.exe command.
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.TerminalManualHack as number]: {
+ content: (
+
+ You now have root access! You can hack the server using the{" "}
+ hack command. Try doing that now.
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.TerminalHackingMechanics as number]: {
+ content: (
+
+ You are now attempting to hack the server. Performing a hack takes time and only has a certain percentage chance
+ of success. This time and success chance is determined by a variety of factors, including your hacking skill and
+ the server's security level.
+
+
+ If your attempt to hack the server is successful, you will steal a certain percentage of the server's total
+ money. This percentage is affected by your hacking skill and the server's security 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 encounter diminishing returns in your hacking.
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.TerminalCreateScript as number]: {
+ content: (
+
+ Hacking is the core mechanic of the game and is necessary for progressing. However, you don't want to be hacking
+ manually the entire time. You can automate your hacking by writing scripts!
+
+
+ To create a new script or edit an existing one, you can use the{" "}
+ nano
+ command. Scripts must end with the .script extension.
+ Let's make a script now by entering nano n00dles.script{" "}
+ after the hack command finishes running (Sidenote: Pressing ctrl + c will end a command like hack early)
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalTypeScript as number]: {
+ content: (
+ <>
+
+ This is the script editor. You can use it to program your scripts. Scripts are written in a simplified version
+ of javascript. Copy and paste the following code into the script editor:
+
+
+ while(true) {"{"}
+ hack('n00dles');
+ {"}"}
+
+
+ For anyone with basic programming experience, this code should be straightforward. This script will
+ continuously hack the n00dles server.
+
+
+ To save and close the script editor, press the button in the bottom left, or press ctrl + b.
+
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalFree as number]: {
+ content: (
+
+ Now we'll run the script. Scripts require a certain amount of RAM to run, and can be run on any machine which
+ you have root access to. Different servers have different amounts of RAM. You can also purchase more RAM for
+ your home server.
+
+
+ To check how much RAM is available on this machine, enter the{" "}
+ free command.
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalRunScript as number]: {
+ content: (
+
+ We have 4GB of free RAM on this machine, which is enough to run our script. Let's run our script using{" "}
+ run n00dles.script.
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalGoToActiveScriptsPage as number]: {
+ content: (
+ <>
+
+ Your script is now running! It will continuously run in the background and will automatically stop if the code
+ ever completes (the n00dles.script will never complete
+ because it runs an infinite loop).
+
+ These scripts can passively earn you income and hacking experience. Your scripts will also earn money and
+ experience while you are offline, although at a slightly slower rate.
+
+ Let's check out some statistics for our running scripts by clicking{" "}
+
+
+
+ Active Scripts
+
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.ActiveScriptsPage as number]: {
+ content: (
+ <>
+
+ This page displays information about all of your scripts that are running across every server. You can use
+ this to gauge how well your scripts are doing. Let's go back to
+
+
+
+ Terminal
+
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.ActiveScriptsToTerminal as number]: {
+ content: (
+
+ One last thing about scripts, each active script contains logs that detail what it's doing. We can check these
+ logs using the tail command. Do that now for the script we
+ just ran by typing tail n00dles.script
+
+ ),
+ canNext: false,
+ },
+ [iTutorialSteps.TerminalTailScript as number]: {
+ content: (
+ <>
+
+ The log for this script won't show much right now (it might show nothing at all) because it just started
+ running...but check back again in a few minutes!
+
+ This covers the basics of hacking. To learn more about writing scripts, select
+
+
+
+ Tutorial
+
+
+ in the main navigation menu to look at the documentation.
+
+ If you are an experienced JavaScript developer, I would highly suggest you check out the section on
+ NetscriptJS/Netscript 2.0, it's faster and more powerful.
+
+
+
+ For now, let's move on to something else!
+
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.GoToHacknetNodesPage as number]: {
+ content: (
+ <>
+
+ 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
+
+
+
+ Hacknet
+
+ through the main navigation menu now.
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.HacknetNodesIntroduction as number]: {
+ content: (
+
+ here you can purchase new Hacknet Nodes and upgrade your existing ones. Let's purchase a new one now.
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.HacknetNodesGoToWorldPage as number]: {
+ content: (
+ <>
+
+ You just purchased a Hacknet Node! This Hacknet Node will passively earn you money over time, both online and
+ offline. When you get enough money, you can upgrade your newly-purchased Hacknet Node below.
+
+
+ Let's go to
+
+
+
+ City
+
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.WorldDescription as number]: {
+ content: (
+ <>
+
+ This page lists all of the different locations you can currently travel to. Each location has something that
+ you can do. There's a lot of content out in the world, make sure you explore and discover!
+
+
+ Lastly, click on
+
+
+
+ Tutorial
+
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.TutorialPageInfo as number]: {
+ content: (
+
+ This page contains a lot of different documentation about the game's content and mechanics.{" "}
+
+ {" "}
+ I know it's a lot, but I highly suggest you read (or at least skim) through this before you start playing
+
+ . That's the end of the tutorial. Hope you enjoy the game!
+
+ ),
+ canNext: true,
+ },
+ [iTutorialSteps.End as number]: {
+ content: ,
+ canNext: true,
+ },
+};
+
+export function InteractiveTutorialRoot(): React.ReactElement {
+ const setRerender = useState(false)[1];
+ function rerender(): void {
+ setRerender((old) => !old);
+ }
+
+ useEffect(() => {
+ return ITutorialEvents.subscribe(rerender);
+ }, []);
+ const step = ITutorial.currStep;
+ const content = contents[step];
+ if (content === undefined) throw new Error("error in the tutorial");
+ return (
+
+ {content.content}
+
+
+
+ {content.canNext && (
+
+
+
+ )}
+
+
+
+
+ );
+}
diff --git a/src/ui/React/CharacterOverview.tsx b/src/ui/React/CharacterOverview.tsx
index db3a7c3c0..1295576bb 100644
--- a/src/ui/React/CharacterOverview.tsx
+++ b/src/ui/React/CharacterOverview.tsx
@@ -21,8 +21,9 @@ import SaveAltIcon from "@mui/icons-material/SaveAlt";
import { colors } from "./Theme";
import { Settings } from "../../Settings/Settings";
-import { use } from "../../ui/Context";
-import { Page } from "../../ui/Router";
+import { use } from "../Context";
+import { Page } from "../Router";
+import { Overview } from "./Overview";
interface IProps {
save: () => void;
@@ -105,9 +106,6 @@ const useStyles = makeStyles({
int: {
color: colors.int,
},
- nobackground: {
- backgroundColor: "#0000",
- },
});
export function CharacterOverview({ save }: IProps): React.ReactElement {
@@ -115,9 +113,7 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
const router = use.Router();
if (router.page() === Page.BitVerse) return <>;
-
const setRerender = useState(false)[1];
- const [open, setOpen] = useState(true);
useEffect(() => {
const id = setInterval(() => setRerender((old) => !old), 600);
@@ -126,120 +122,103 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
const classes = useStyles();
return (
-