TUTORIAL: Text and UI changes

src/Documentation/doc/en/help/getting_started.md

@@ -19,11 +19,11 @@ Since this guide is written as a basic introduction to Bitburner, it will not ex
 ## First Steps
 
 I'm going to assume you followed the introductory tutorial when you first began the game.
-In this introductory tutorial, you created a [Script](../basic/scripts.md) called `n00dles.js` and ran it on the `n00dles` server.
+In this introductory tutorial, you created a [Script](../basic/scripts.md) called `hacking.js` and ran it on the `home` server.
 Now, we'll kill this [Script](../basic/scripts.md). There are two ways to do this:
 
-- You can go to the Terminal and enter: `kill n00dles.js`
-- You can go to the `Active Scripts` page (Alt + s) and press the `Kill Script` button for `n00dles.js`.
+- You can go to the Terminal and enter: `kill hacking.js`
+- You can go to the `Active Scripts` page (Alt + s) and press the `Kill Script` button for `hacking.js`.
 
 If you skipped the introductory tutorial, then ignore the part above.
 Instead, go to the `Hacknet Nodes` page (Alt + h) and purchase a [Hacknet Node](../basic/hacknet_nodes.md) to start generating some passive income.

src/Documentation/ui/DocumentationRoot.tsx

@@ -16,6 +16,7 @@ import { Settings } from "../../Settings/Settings";
 import { Router } from "../../ui/GameRoot";
 import { Page } from "../../ui/Router";
 import { DocumentationAutocomplete } from "./DocumentationAutocomplete";
+import { iTutorialSteps, ITutorial } from "../../InteractiveTutorial";
 
 export function DocumentationRoot({ docPage }: { docPage?: string }): React.ReactElement {
   const history = useHistory();
@@ -70,6 +71,20 @@ export function DocumentationRoot({ docPage }: { docPage?: string }): React.Reac
     }, 0);
   });
 
+  /**
+   * During the tutorial, the player is given the link to the NS API page a few times. If they click one of the links,
+   * then when they come to the documentation step they'll still see the NS API docs. This ensures that when the player
+   * visits the documentation page for the Docs step, they see index.md / home.
+   */
+  useEffect(() => {
+    if (ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.DocumentationInfo) {
+      history.home();
+    }
+
+    // Lint doesn't like empty dependencies. But this really should only run on the first render. So:
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
       <Box

src/Hacknet/HacknetHelpers.tsx

@@ -17,7 +17,6 @@ import { HashManager } from "./HashManager";
 import { HashUpgrades } from "./HashUpgrades";
 
 import { generateRandomContract } from "../CodingContract/ContractGenerator";
-import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../InteractiveTutorial";
 import { Player } from "@player";
 import { GetServer } from "../Server/AllServers";
 import { Server } from "../Server/Server";
@@ -36,16 +35,6 @@ export function hasHacknetServers(): boolean {
 }
 
 export function purchaseHacknet(): number {
-  /* INTERACTIVE TUTORIAL */
-  if (ITutorial.isRunning) {
-    if (ITutorial.currStep === iTutorialSteps.HacknetNodesIntroduction) {
-      iTutorialNextStep();
-    } else {
-      return -1;
-    }
-  }
-  /* END INTERACTIVE TUTORIAL */
-
   const numOwned = Player.hacknetNodes.length;
   if (hasHacknetServers()) {
     const cost = getCostOfNextHacknetServer();

src/InteractiveTutorial.ts

@@ -7,12 +7,6 @@ enum iTutorialSteps {
   Start, // Intro, overview, and housekeeping
 
   // Hacking
-  GoToCharacterStatsPage,
-  CharacterStatsDescription,
-  CharacterGoToTerminalPage,
-  TerminalIntro,
-  TerminalHelp,
-  TerminalLs,
   TerminalScan,
   TerminalScanAnalyze,
   TerminalScanAnalyze2,
@@ -24,17 +18,22 @@ enum iTutorialSteps {
   TerminalHome,
   TerminalNano,
   ScriptEditorEditAndSave,
+  ScriptEditorRam,
+  ScriptEditorGoToTerminalPage,
   TerminalFree,
   TerminalRun,
   TerminalGoToActiveScriptsPage, // Also explains a bit about running scripts
   ActiveScriptsDescription,
   TerminalTail,
   TerminalTailOutcome,
+  TerminalLs,
+  TerminalScp,
+  TerminalHelp,
 
   // Finishing off
-  GoToHacknetNodesPage,
-  HacknetNodesIntroduction,
-  HacknetNodesGoToWorldPage,
+  TerminalGoToCharacterStatsPage,
+  CharacterStatsDescription,
+  CharacterStatsGoToWorldPage,
   WorldDescription,
   DocumentationInfo,
 
@@ -48,12 +47,6 @@ const ITutorial = {
   // Keeps track of whether each step has been done
   stepIsDone: {
     [iTutorialSteps.Start]: false,
-    [iTutorialSteps.GoToCharacterStatsPage]: false,
-    [iTutorialSteps.CharacterStatsDescription]: false,
-    [iTutorialSteps.CharacterGoToTerminalPage]: false,
-    [iTutorialSteps.TerminalIntro]: false,
-    [iTutorialSteps.TerminalHelp]: false,
-    [iTutorialSteps.TerminalLs]: false,
     [iTutorialSteps.TerminalScan]: false,
     [iTutorialSteps.TerminalScanAnalyze]: false,
     [iTutorialSteps.TerminalScanAnalyze2]: false,
@@ -65,15 +58,20 @@ const ITutorial = {
     [iTutorialSteps.TerminalHome]: false,
     [iTutorialSteps.TerminalNano]: false,
     [iTutorialSteps.ScriptEditorEditAndSave]: false,
+    [iTutorialSteps.ScriptEditorRam]: false,
+    [iTutorialSteps.ScriptEditorGoToTerminalPage]: false,
     [iTutorialSteps.TerminalFree]: false,
     [iTutorialSteps.TerminalRun]: false,
     [iTutorialSteps.TerminalGoToActiveScriptsPage]: false,
     [iTutorialSteps.ActiveScriptsDescription]: false,
     [iTutorialSteps.TerminalTail]: false,
     [iTutorialSteps.TerminalTailOutcome]: false,
-    [iTutorialSteps.GoToHacknetNodesPage]: false,
-    [iTutorialSteps.HacknetNodesIntroduction]: false,
-    [iTutorialSteps.HacknetNodesGoToWorldPage]: false,
+    [iTutorialSteps.TerminalLs]: false,
+    [iTutorialSteps.TerminalScp]: false,
+    [iTutorialSteps.TerminalHelp]: false,
+    [iTutorialSteps.TerminalGoToCharacterStatsPage]: false,
+    [iTutorialSteps.CharacterStatsDescription]: false,
+    [iTutorialSteps.CharacterStatsGoToWorldPage]: false,
     [iTutorialSteps.WorldDescription]: false,
     [iTutorialSteps.DocumentationInfo]: false,
     [iTutorialSteps.End]: false,

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -17,6 +17,7 @@ import { checkInfiniteLoop } from "../../Script/RamCalculations";
 
 import { Settings } from "../../Settings/Settings";
 import { iTutorialNextStep, ITutorial, iTutorialSteps } from "../../InteractiveTutorial";
+import { tutorialScriptName } from "../../ui/InteractiveTutorial/InteractiveTutorialRoot";
 import { debounce } from "lodash";
 import { GetServer } from "../../Server/AllServers";
 
@@ -194,24 +195,26 @@ function Root(props: IProps): React.ReactElement {
     const preSave = options.beautifyOnSave ? beautify : () => Promise.resolve();
 
     // this is duplicate code with saving later.
-    if (ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.ScriptEditorEditAndSave) {
+    if (
+      ITutorial.isRunning &&
+      (ITutorial.currStep === iTutorialSteps.ScriptEditorEditAndSave ||
+        ITutorial.currStep === iTutorialSteps.ScriptEditorRam)
+    ) {
       //Make sure filename + code properly follow tutorial
-      if (currentScript.path !== "n00dles.js") {
-        dialogBoxCreate("Don't change the script name for now.");
+      if (currentScript.path !== tutorialScriptName) {
+        dialogBoxCreate("Don't change the script's name for now.");
         return;
       }
       const cleanCode = currentScript.code.replace(/\s/g, "");
       const expectedCleanCode = `/**@param{NS}ns*/exportasyncfunctionmain(ns){while(true){awaitns.hack("n00dles");}}`;
       if (!cleanCode.includes(expectedCleanCode)) {
-        dialogBoxCreate("Please copy and paste the code from the tutorial!");
+        dialogBoxCreate("Use the code from the tutorial panel. Don't change it for now.");
         return;
       }
 
       //Save the script
       await preSave();
       saveScript(currentScript);
-      Router.toPage(Page.Terminal);
-
       iTutorialNextStep();
 
       return;

src/ScriptEditor/ui/Toolbar.tsx

@@ -26,6 +26,7 @@ import { DocumentationAutocomplete } from "../../Documentation/ui/DocumentationA
 import { openDocumentationPopUp } from "../../Documentation/root";
 import { defaultNsApiPage, openDocExternally } from "../../ui/React/Documentation";
 import { DocumentationLink } from "../../ui/React/DocumentationLink";
+import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
 
 type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 
@@ -70,14 +71,27 @@ export function Toolbar({ editor, onSave, onRun, onBeautify }: IProps) {
           Beautify
         </Button>
         <Button
-          color={isUpdatingRAM ? "secondary" : "primary"}
-          sx={{ mx: 1, whiteSpace: "nowrap" }}
-          onClick={openRAMInfo}
+          sx={{
+            mx: 1,
+            whiteSpace: "nowrap",
+            color: isUpdatingRAM
+              ? "secondary.main"
+              : ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.ScriptEditorRam
+              ? "info.main"
+              : "primary.main",
+          }}
+          onClick={() => {
+            if (ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.ScriptEditorRam) iTutorialNextStep();
+            openRAMInfo();
+          }}
         >
           {ram}
         </Button>
         <Tooltip title={parseKeyCombinationsToString(CurrentKeyBindings[ScriptEditorAction.Save])}>
           <Button
+            color={
+              ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.ScriptEditorEditAndSave ? "info" : "primary"
+            }
             onClick={() => {
               onSave().catch((error) => console.error(error));
             }}

src/Sidebar/ui/SidebarAccordion.tsx

@@ -69,7 +69,7 @@ export function SidebarAccordion({
           <ListItem classes={li_classes} button onClick={() => setOpen((open) => !open)}>
             <ListItemIcon>
               <Tooltip title={!sidebarOpen ? key_ : ""}>
-                <Icon color={"primary"} />
+                <Icon color="primary" />
               </Tooltip>
             </ListItemIcon>
             <ListItemText primary={<Typography>{key_}</Typography>} />

src/Sidebar/ui/SidebarItem.tsx

@@ -24,7 +24,7 @@ export interface SidebarItemProps extends ICreateProps {
 }
 
 export const SidebarItem = memo(function SidebarItem(props: SidebarItemProps): React.ReactElement {
-  const color = props.flash ? "error" : props.active ? "primary" : "secondary";
+  const colorSelection = props.flash ? "info.main" : props.active ? "primary.main" : "secondary.main";
   return (
     <ListItem
       classes={{ root: props.classes.listitem }}
@@ -36,12 +36,12 @@ export const SidebarItem = memo(function SidebarItem(props: SidebarItemProps): R
       <ListItemIcon>
         <Badge badgeContent={(props.count ?? 0) > 0 ? props.count : undefined} color="error">
           <Tooltip title={!props.sidebarOpen ? props.key_ : ""}>
-            <props.icon color={color} />
+            <props.icon sx={{ color: colorSelection }} />
           </Tooltip>
         </Badge>
       </ListItemIcon>
       <ListItemText>
-        <Typography color={color}>{props.key_}</Typography>
+        <Typography sx={{ color: colorSelection }}>{props.key_}</Typography>
       </ListItemText>
     </ListItem>
   );

src/Sidebar/ui/SidebarRoot.tsx

@@ -127,26 +127,39 @@ export function SidebarRoot(props: { page: Page }): React.ReactElement {
   useCycleRerender();
 
   let flash: Page | null = null;
-  switch (ITutorial.currStep) {
-    case iTutorialSteps.CharacterGoToTerminalPage:
-    case iTutorialSteps.ActiveScriptsDescription:
-      flash = Page.Terminal;
-      break;
-    case iTutorialSteps.GoToCharacterStatsPage:
-      flash = Page.Stats;
-      break;
-    case iTutorialSteps.TerminalGoToActiveScriptsPage:
-      flash = Page.ActiveScripts;
-      break;
-    case iTutorialSteps.GoToHacknetNodesPage:
-      flash = Page.Hacknet;
-      break;
-    case iTutorialSteps.HacknetNodesGoToWorldPage:
-      flash = Page.City;
-      break;
-    case iTutorialSteps.WorldDescription:
-      flash = Page.Documentation;
-      break;
+  let incrementTutorialStep = false;
+  if (ITutorial.isRunning) {
+    switch (ITutorial.currStep) {
+      case iTutorialSteps.ScriptEditorEditAndSave:
+        if (props.page !== Page.ScriptEditor) {
+          flash = Page.ScriptEditor;
+        }
+        break;
+      case iTutorialSteps.ScriptEditorGoToTerminalPage:
+        flash = Page.Terminal;
+        incrementTutorialStep = true;
+        break;
+      case iTutorialSteps.TerminalGoToActiveScriptsPage:
+        flash = Page.ActiveScripts;
+        incrementTutorialStep = true;
+        break;
+      case iTutorialSteps.ActiveScriptsDescription:
+        flash = Page.Terminal;
+        incrementTutorialStep = true;
+        break;
+      case iTutorialSteps.TerminalGoToCharacterStatsPage:
+        flash = Page.Stats;
+        incrementTutorialStep = true;
+        break;
+      case iTutorialSteps.CharacterStatsGoToWorldPage:
+        flash = Page.City;
+        incrementTutorialStep = true;
+        break;
+      case iTutorialSteps.WorldDescription:
+        flash = Page.Documentation;
+        incrementTutorialStep = true;
+        break;
+    }
   }
 
   const augmentationCount = Player.queuedAugmentations.length;
@@ -194,11 +207,11 @@ export function SidebarRoot(props: { page: Page }): React.ReactElement {
       } else {
         throw new Error("Can't handle click on Page " + page);
       }
-      if (flash === page) {
+      if (flash === page && incrementTutorialStep) {
         iTutorialNextStep();
       }
     },
-    [flash],
+    [flash, incrementTutorialStep],
   );
 
   /**