felixfoertsch/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2026-04-23 09:42:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Tutorial: Remove NS1 tutorial, change getting started guide to .js (#258)

Browse Source
This commit is contained in:
Mughur
2022-12-22 00:49:12 +02:00
committed by GitHub
parent b004b7203d
commit addcee73fc
5 changed files with 163 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/InteractiveTutorial/InteractiveTutorialRoot.tsx
+19 -77
View File
@@ -9,7 +9,6 @@ import ArrowBackIos from "@mui/icons-material/ArrowBackIos";
import { ITutorialEvents } from "./ITutorialEvents";
import { CopyableText } from "../React/CopyableText";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import EqualizerIcon from "@mui/icons-material/Equalizer";
import LastPageIcon from "@mui/icons-material/LastPage";
@@ -28,7 +27,6 @@ import {
iTutorialSteps,
iTutorialEnd,
} from "../../InteractiveTutorial";
import { NSSelection } from "./NSSelection";
interface IContent {
content: React.ReactElement;
@@ -47,23 +45,10 @@ const useStyles = makeStyles((theme: Theme) =>
}),
);
enum Language {
None,
NS1,
NS2,
}
export function InteractiveTutorialRoot(): React.ReactElement {
const [nsSelectionOpen, setNSSelectionOpen] = useState(false);
const [language, setLanguage] = useState(Language.None);
const classes = useStyles();
const tutorialScriptExtension = {
[Language.None]: ".script",
[Language.NS1]: ".script",
[Language.NS2]: ".js",
}[language];
const tutorialScriptName = `n00dles${tutorialScriptExtension}`;
const tutorialScriptName = `n00dles.js`;
const contents: { [number: string]: IContent | undefined } = {
[iTutorialSteps.Start as number]: {
@@ -83,47 +68,6 @@ export function InteractiveTutorialRoot(): React.ReactElement {
),
canNext: true,
},
[iTutorialSteps.NSSelection as number]: {
content: (
<>
<Typography>The tutorial will adjust to your programming ability.</Typography>
<Typography>Bitburner has 2 types of scripts:</Typography>
<List>
<ListItem>
<Typography>NS1: Javascript from 2009, very simple. Recommended for beginners to programming.</Typography>
</ListItem>
<ListItem>
<Typography>
NS2: Native, modern Javascript. Recommended if you know any programming language or are serious about
learning programming.
</Typography>
</ListItem>
</List>
<Typography>
Both are available at all time and interchangeably. This choice is only for the tutorial.
</Typography>
<Button
onClick={() => {
setLanguage(Language.NS1);
iTutorialNextStep();
}}
>
Use NS1
</Button>
<Button
onClick={() => {
setLanguage(Language.NS2);
iTutorialNextStep();
}}
>
Use NS2
</Button>
<Button onClick={() => setNSSelectionOpen(true)}>More info</Button>
<br />
</>
),
canNext: false,
},
[iTutorialSteps.GoToCharacterPage as number]: {
content: (
<>
@@ -320,7 +264,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
<Typography></Typography>
</>
),
canNext: true,
canNext: false,
},
[iTutorialSteps.TerminalManualHack as number]: {
content: (
@@ -364,7 +308,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
<Typography>Let's head home before creating our first script!</Typography>
</>
),
canNext: true,
canNext: false,
},
[iTutorialSteps.TerminalCreateScript as number]: {
content: (
@@ -378,9 +322,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
</Typography>
<Typography classes={{ root: classes.textfield }}>{"[home ~/]> nano"}</Typography>
<Typography>
Scripts must end with the {tutorialScriptExtension} extension. Let's make a script now by entering{" "}
</Typography>
<Typography>Scripts must end with the .js extension. Let's make a script now by entering </Typography>
<Typography classes={{ root: classes.textfield }}>{`[home ~/]> nano ${tutorialScriptName}`}</Typography>
<Typography>
@@ -394,20 +336,12 @@ export function InteractiveTutorialRoot(): React.ReactElement {
content: (
<>
<Typography>
This is the script editor. You can use it to program your scripts.{" "}
{language !== Language.NS2 && <>Scripts are written in a simplified version of javascript.</>} Copy and
paste the following code into the script editor: <br />
This is the script editor. You can use it to program your scripts. Copy and paste the following code into
the script editor: <br />
</Typography>
<Typography classes={{ root: classes.code }}>
{language !== Language.NS2 && (
<CopyableText
value={`while(true) {
hack('n00dles');
}`}
/>
)}
{language === Language.NS2 && (
{
<CopyableText
value={`export async function main(ns) {
while(true) {
@@ -415,7 +349,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
}
}`}
/>
)}
}
</Typography>
<Typography>
For anyone with basic programming experience, this code should be straightforward. This script will
@@ -589,8 +523,17 @@ export function InteractiveTutorialRoot(): React.ReactElement {
content: (
<Typography>
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!
but I highly suggest you read (or at least skim) through this before you start playing.
<br />
<br />
The{" "}
<a href="https://bitburner.readthedocs.io/en/latest/guidesandtips/gettingstartedguideforbeginnerprogrammers.html">
Getting Started
</a>{" "}
contains the guide for new players, navigating you through most of early game.
<br />
<br />
That's the end of the tutorial. Hope you enjoy the game!
</Typography>
),
canNext: true,
@@ -614,7 +557,6 @@ export function InteractiveTutorialRoot(): React.ReactElement {
if (content === undefined) throw new Error("error in the tutorial");
return (
<>
<NSSelection open={nsSelectionOpen} onClose={() => setNSSelectionOpen(false)} />
<Paper square sx={{ maxWidth: "70vw", p: 2 }}>
{content.content}
{step !== iTutorialSteps.TutorialPageInfo && (
src/ui/InteractiveTutorial/NSSelection.tsx
-82
View File
@@ -1,82 +0,0 @@
import Editor from "@monaco-editor/react";
import { Tab, Tabs, Typography } from "@mui/material";
import React from "react";
import { Modal } from "../React/Modal";
import * as monaco from "monaco-editor";
type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
interface IProps {
open: boolean;
onClose: () => void;
}
const ns1Example = `while(true) {
hack('n00dles');
}`;
const ns2Example = `/** @param {NS} ns */
export async function main(ns) {
while(true) {
await ns.hack('n00dles');
}
}`;
export function NSSelection(props: IProps): React.ReactElement {
const [value, setValue] = React.useState(0);
function handleChange(event: React.SyntheticEvent, tab: number): void {
setValue(tab);
}
function onMount(editor: IStandaloneCodeEditor): void {
editor.updateOptions({ readOnly: true });
}
return (
<Modal open={props.open} onClose={props.onClose} sx={{ zIndex: 999999 }}>
<Tabs variant="fullWidth" value={value} onChange={handleChange}>
<Tab label="NS1" />
<Tab label="NS2" />
</Tabs>
{value === 0 && (
<>
<Typography>
These scripts end with '.script'. Using a very old interpreted version of javascript. It is perfect for
beginner to programming.
</Typography>
<Typography>Example script using NS1:</Typography>
<Editor
loading={<></>}
defaultLanguage="javascript"
defaultValue={ns1Example}
height={`${300}px`}
theme={"vs-dark"}
onMount={onMount}
options={{ fontSize: 30 }}
/>
</>
)}
{value === 1 && (
<>
<Typography>
These scripts end with '.js'. Scripts using ns2 are running natively along the game. If you know any
programming language you should be using this. However if you're unfamiliar with javascript Promises you
might want to read up on them a little bit before diving in.
</Typography>
<Typography>Example script using NS2:</Typography>
<Editor
loading={<></>}
defaultLanguage="javascript"
defaultValue={ns2Example}
height={`${300}px`}
theme={"vs-dark"}
options={{ fontSize: 30 }}
/>
</>
)}
</Modal>
);
}