felixfoertsch/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2026-04-17 14:59:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

UI: Reword tutorial steps to distinguish between instruction and example (#2370)

Browse Source 
* UI: Reword tutorial steps to distinguish between instruction and example

* Minor change
This commit is contained in:
catloversg
2025-10-30 01:47:58 +07:00
committed by GitHub
parent 0c5256b83c
commit a5cb2a97bd
1 changed files with 109 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx
View File

@@ -42,14 +42,29 @@ const useStyles = makeStyles()((theme: Theme) => ({
}, },
})); }));
function Example({ content }: { content: string }): React.ReactElement {
const { classes } = useStyles();
return (
<>
<br />
<Typography>
Example:{" "}
<Typography component="span" classes={{ root: classes.textfield }}>
{content}
</Typography>
</Typography>
</>
);
}
export function InteractiveTutorialRoot(): React.ReactElement { export function InteractiveTutorialRoot(): React.ReactElement {
const { classes } = useStyles(); const { classes } = useStyles();
const rerender = useRerender(); const rerender = useRerender();
const tutorialScriptName = `n00dles.js`; const tutorialScriptName = `n00dles.js`;
const contents: Record<string, IContent | undefined> = { const contents: Record<iTutorialSteps, IContent | undefined> = {
[iTutorialSteps.Start as number]: { [iTutorialSteps.Start]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -69,7 +84,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.GoToCharacterPage as number]: { [iTutorialSteps.GoToCharacterPage]: {
content: ( content: (
<> <>
<Typography>Let's start by heading to the Stats page. Click</Typography> <Typography>Let's start by heading to the Stats page. Click</Typography>
@@ -83,7 +98,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.CharacterPage as number]: { [iTutorialSteps.CharacterPage]: {
content: ( content: (
<> <>
<ListItem> <ListItem>
@@ -97,7 +112,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.CharacterGoToTerminalPage as number]: { [iTutorialSteps.CharacterGoToTerminalPage]: {
content: ( content: (
<> <>
<Typography>Let's head to your computer's terminal by clicking</Typography> <Typography>Let's head to your computer's terminal by clicking</Typography>
@@ -110,7 +125,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalIntro as number]: { [iTutorialSteps.TerminalIntro]: {
content: ( content: (
<> <>
<ListItem> <ListItem>
@@ -120,113 +135,107 @@ export function InteractiveTutorialRoot(): React.ReactElement {
<Typography> <Typography>
is used to interface with your home computer as well as all of the other machines around the world. is used to interface with your home computer as well as all of the other machines around the world.
</Typography> </Typography>
<br />
<Typography>
In the next steps, the tutorial will show you how to use the most basic commands. In each step, we may show
you an example of how the terminal should look when you enter the command.
</Typography>
</> </>
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.TerminalHelp as number]: { [iTutorialSteps.TerminalHelp]: {
content: ( content: (
<> <>
<Typography>Let's try it out. Start by entering</Typography> <Typography>Let's try it out. Start by entering "help" to the terminal</Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> help"}</Typography>
<Typography>(Don't forget to press Enter after typing the command)</Typography> <Typography>(Don't forget to press Enter after typing the command)</Typography>
<Example content="[home /]> help" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalLs as number]: { [iTutorialSteps.TerminalLs]: {
content: ( content: (
<> <>
<Typography classes={{ root: classes.textfield }}>{"[home /]> help"}</Typography>
<Typography> <Typography>
displays a list of all available Terminal commands, how to use them, and a description of what they do.{" "} The "help" command displays a list of all available Terminal commands, how to use them, and a description of
what they do. <br />
<br /> <br />
<br /> Let's try another command. Enter "ls" ("ls" is short for "list" ).
Let's try another command. Enter
</Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> ls"}</Typography>
<Typography>
<br />( "ls" is short for "list" )
</Typography> </Typography>
<Example content="[home /]> ls" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalScan as number]: { [iTutorialSteps.TerminalScan]: {
content: ( content: (
<> <>
<Typography classes={{ root: classes.textfield }}>{"[home /]> ls"}</Typography>
<Typography> <Typography>
{" "} The "ls" command is a basic command that lists the files on the computer. Right now, it shows that you have
is a basic command that lists the files on the computer. Right now, it shows that you have a program called{" "} a program called NUKE.exe on your computer. We'll get to what this does later. <br />
NUKE.exe on your computer. We'll get to what this does later. <br />
<br /> <br />
Using your home computer's terminal, you can connect to other machines throughout the world. Let's do that Using your home computer's terminal, you can connect to other machines throughout the world. Let's do that
now by first entering now by first entering "scan".
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> scan"}</Typography> <Example content="[home /]> scan" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalScanAnalyze1 as number]: { [iTutorialSteps.TerminalScanAnalyze1]: {
content: ( content: (
<> <>
<Typography classes={{ root: classes.textfield }}>{"[home /]> scan"}</Typography>
<Typography> <Typography>
shows all available network connections. In other words, it displays a list of all servers that can be The "scan" command shows all available network connections. In other words, it displays a list of all
connected to from your current machine. A server is identified by its hostname. <br /> servers that can be connected to from your current machine. A server is identified by its hostname. <br />
<br /> <br />
That's great and all, but there's so many servers. Which one should you go to?{" "} That's great and all, but there's so many servers. Which one should you go to?
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> scan-analyze"}</Typography> <Typography>
<Typography>gives some more detailed information about servers on the network. Try it now!</Typography> The "scan-analyze" command gives some more detailed information about servers on the network. Try it now!
</Typography>
<Example content="[home /]> scan-analyze" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalScanAnalyze2 as number]: { [iTutorialSteps.TerminalScanAnalyze2]: {
content: ( content: (
<> <>
<Typography classes={{ root: classes.textfield }}>{"[home /]> scan-analyze"}</Typography>
<Typography> <Typography>
shows more detailed information about each server that you can connect to (servers that are a distance of The "scan-analyze" command shows more detailed information about each server that you can connect to
one node away). <br /> (servers that are a distance of one node away). <br />
<br /> It is also possible to run scan-analyze with a higher depth. Let's try a depth of two with the <br /> It is also possible to run scan-analyze with a higher depth. Let's try a depth of two with the
following command:{" "} following command: "scan-analyze 2"
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> scan-analyze 2"}</Typography> <Example content="[home /]> scan-analyze 2" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalConnect as number]: { [iTutorialSteps.TerminalConnect]: {
content: ( content: (
<> <>
<Typography> <Typography>
Now you can see information about all servers that are up to two nodes away, as well as figure out how to 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 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 connect to a machine, use the "connect" command.
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> connect hostname"}</Typography>
<Typography>From the results of </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> scan-analyze 2"}</Typography>
<Typography> <Typography>
{" "} From the results of the "scan-analyze" command, we can see that the n00dles server is only one node away.
we can see that the n00dles server is only one node away. Let's connect to it now using: Let's connect to it now using "connect n00dles".
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> connect n00dles"}</Typography> <Example content="[home /]> connect n00dles" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalAnalyze as number]: { [iTutorialSteps.TerminalAnalyze]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -236,52 +245,44 @@ export function InteractiveTutorialRoot(): React.ReactElement {
money on servers and computers. Using your hacking abilities, you can hack servers to steal money and gain money on servers and computers. Using your hacking abilities, you can hack servers to steal money and gain
experience. <br /> experience. <br />
<br /> <br />
Before you try to hack a server, you should run diagnostics using{" "} Before you try to hack a server, you should run diagnostics using the "analyze" command.
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> analyze"}</Typography> <Example content="[n00dles /]> analyze" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalNuke as number]: { [iTutorialSteps.TerminalNuke]: {
content: ( content: (
<> <>
<Typography>When </Typography>
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> analyze"}</Typography>
<Typography> <Typography>
finishes running it will show useful information about hacking the server. <br /> When the "analyze" command finishes running, it will show useful information about hacking the server.
<br /> For this server, the required hacking skill is only 1, which means you can hack it right now. <br />
However, in order to hack a server you must first gain root access. The NUKE.exe program that we saw earlier For this server, the required hacking skill is only 1, which means you can hack it right now. However, in
on your home computer is a virus that will grant you root access to a machine if there are enough open order to hack a server you must first gain root access. The NUKE.exe program that we saw earlier on your
ports. home computer is a virus that will grant you root access to a machine if there are enough open ports.
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> analyze"}</Typography> <br />
<Typography> <Typography>
{" "} The "analyze" command shows that there do not need to be any open ports on this machine for the NUKE program
shows that there do not need to be any open ports on this machine for the NUKE virus to work, so go ahead to work, so go ahead and run the NUKE program using "run NUKE.exe".
and run the virus using{" "}
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> run NUKE.exe"}</Typography> <Example content="[n00dles /]> run NUKE.exe" />
<Typography></Typography>
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalManualHack as number]: { [iTutorialSteps.TerminalManualHack]: {
content: ( content: (
<> <>
<Typography>You now have root access! You can hack the server using </Typography> <Typography>You now have root access! You can hack the server using the "hack" command.</Typography>
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> hack"}</Typography>
<Typography> Try doing that now.</Typography> <Typography> Try doing that now.</Typography>
<Example content="[n00dles /]> hack" />
</> </>
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.TerminalHackingMechanics as number]: { [iTutorialSteps.TerminalHackingMechanics]: {
content: ( content: (
<Typography component="div"> <Typography component="div">
You are now attempting to hack the server. Performing a hack takes time and only has a certain percentage You are now attempting to hack the server. Performing a hack takes time and only has a certain percentage
@@ -294,27 +295,27 @@ export function InteractiveTutorialRoot(): React.ReactElement {
<br /> <br />
<br /> <br />
The amount of money on a server is not limitless. So, if you constantly hack a server and deplete its money, 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. You will need to use{" "} then you will encounter diminishing returns in your hacking. You will need to use the "grow" command which
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> grow"}</Typography> tricks the company into adding money to their server and the "weaken" command which decreases the server's
which tricks the company into adding money to their server and{" "} security level.
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> weaken"}</Typography> <br />
which increases the speed of hack and grow. <Example content="[n00dles /]> grow" />
<Example content="[n00dles /]> weaken" />
</Typography> </Typography>
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.TerminalGoHome as number]: { [iTutorialSteps.TerminalGoHome]: {
content: ( content: (
<> <>
<Typography>From any server you can get back home using</Typography> <Typography>From any server you can get back home using the "home" command.</Typography>
<Typography classes={{ root: classes.textfield }}>{"[n00dles /]> home"}</Typography>
<Typography>Let's head home before creating our first script!</Typography> <Typography>Let's head home before creating our first script!</Typography>
<Example content="[n00dles /]> home" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalCreateScript as number]: { [iTutorialSteps.TerminalCreateScript]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -322,19 +323,19 @@ export function InteractiveTutorialRoot(): React.ReactElement {
hacking manually the entire time. You can automate your hacking by writing scripts! hacking manually the entire time. You can automate your hacking by writing scripts!
<br /> <br />
<br /> <br />
To create a new script or edit an existing one, you can use{" "} To create a new script or edit an existing one, you can use the "nano" command.
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> nano"}</Typography>
<Typography> <Typography>
Scripts must end with a script extension (.js, .jsx, .ts, .tsx). Let's make a script now by entering Scripts must end with a script extension (.js, .jsx, .ts, .tsx). Let's make a script now by entering "
{`nano ${tutorialScriptName}`}"
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{`[home /]> nano ${tutorialScriptName}`}</Typography> <Example content={`[home /]> nano ${tutorialScriptName}`} />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalEditScript as number]: { [iTutorialSteps.TerminalEditScript]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -372,7 +373,7 @@ export async function main(ns) {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalFree as number]: { [iTutorialSteps.TerminalFree]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -381,25 +382,26 @@ export async function main(ns) {
RAM for your home server. RAM for your home server.
<br /> <br />
<br /> <br />
To check how much RAM is available on this machine, enter To check how much RAM is available on this machine, use the "free" command.
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{"[home /]> free"}</Typography> <Example content="[home /]> free" />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalRunScript as number]: { [iTutorialSteps.TerminalRunScript]: {
content: ( content: (
<> <>
<Typography> <Typography>
We have 8GB of free RAM on this machine, which is enough to run our script. Let's run our script using We have 8GB of free RAM on this machine, which is enough to run our script. Let's run our script using "
{`run ${tutorialScriptName}`}"
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{`[home /]> run ${tutorialScriptName}`}</Typography> <Example content={`[home /]> run ${tutorialScriptName}`} />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalGoToActiveScriptsPage as number]: { [iTutorialSteps.TerminalGoToActiveScriptsPage]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -419,7 +421,7 @@ export async function main(ns) {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.ActiveScriptsPage as number]: { [iTutorialSteps.ActiveScriptsPage]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -443,19 +445,20 @@ export async function main(ns) {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.ActiveScriptsToTerminal as number]: { [iTutorialSteps.ActiveScriptsToTerminal]: {
content: ( content: (
<> <>
<Typography> <Typography>
One last thing about scripts, each active script contains logs that detail what it's doing. We can check 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{" "} these logs using the "tail" command. Do that now for the script we just ran by typing "
{`tail ${tutorialScriptName}`}"
</Typography> </Typography>
<Typography classes={{ root: classes.textfield }}>{`[home /]> tail ${tutorialScriptName}`}</Typography> <Example content={`[home /]> tail ${tutorialScriptName}`} />
</> </>
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.TerminalTailScript as number]: { [iTutorialSteps.TerminalTailScript]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -478,7 +481,7 @@ export async function main(ns) {
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.GoToHacknetNodesPage as number]: { [iTutorialSteps.GoToHacknetNodesPage]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -494,7 +497,7 @@ export async function main(ns) {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.HacknetNodesIntroduction as number]: { [iTutorialSteps.HacknetNodesIntroduction]: {
content: ( content: (
<Typography> <Typography>
Here you can purchase new Hacknet Nodes and upgrade your existing ones. Let's purchase a new one now. Here you can purchase new Hacknet Nodes and upgrade your existing ones. Let's purchase a new one now.
@@ -502,7 +505,7 @@ export async function main(ns) {
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.HacknetNodesGoToWorldPage as number]: { [iTutorialSteps.HacknetNodesGoToWorldPage]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -520,7 +523,7 @@ export async function main(ns) {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.WorldDescription as number]: { [iTutorialSteps.WorldDescription]: {
content: ( content: (
<> <>
<Typography> <Typography>
@@ -538,7 +541,7 @@ export async function main(ns) {
), ),
canNext: false, canNext: false,
}, },
[iTutorialSteps.DocumentationPageInfo as number]: { [iTutorialSteps.DocumentationPageInfo]: {
content: ( content: (
<Typography component="div"> <Typography component="div">
This page contains a lot of different documentation about the game's contents and mechanics. I know it's a This page contains a lot of different documentation about the game's contents and mechanics. I know it's a
@@ -571,7 +574,7 @@ export async function main(ns) {
), ),
canNext: true, canNext: true,
}, },
[iTutorialSteps.End as number]: { [iTutorialSteps.End]: {
content: <Typography></Typography>, content: <Typography></Typography>,
canNext: true, canNext: true,
}, },