Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2025-03-07 19:14:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

pre-dialogbox-convert

Browse Source
This commit is contained in:
Olivier Gagnon
2021-10-01 01:00:50 -04:00
parent 0d9caac455
commit 62cd8ffcc6
26 changed files with 989 additions and 883 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -148,6 +148,7 @@
"format": "prettier --write .",
"start": "http-server -p 8000",
"start:dev": "webpack-dev-server --progress --env.devServer --mode development",
"start:dev-fast": "webpack-dev-server --progress --env.devServer --mode development --fast true",
"start:container": "webpack-dev-server --progress --env.devServer --mode development --env.runInContainer",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",

81
src/Casino/Blackjack.tsx
View File

@ -7,9 +7,11 @@ import { Deck } from "./CardDeck/Deck";
import { Hand } from "./CardDeck/Hand";
import { InputAdornment } from "@mui/material";
import { ReactCard } from "./CardDeck/ReactCard";
import { MuiTextField } from "../ui/React/MuiTextField";
import { MuiButton } from "../ui/React/MuiButton";
import { MuiPaper } from "../ui/React/MuiPaper";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
const MAX_BET = 100e6;
@ -308,7 +310,7 @@ export class Blackjack extends Game<Props, State> {
<div>
{/* Wager input */}
<div>
<MuiTextField
<TextField
value={betInput}
label={
<>
@ -322,12 +324,15 @@ export class Blackjack extends Game<Props, State> {
error={wagerInvalid}
helperText={wagerInvalid ? wagerInvalidHelperText : ""}
type="number"
variant="filled"
style={{
width: "200px",
}}
InputProps={{
startAdornment: <InputAdornment position="start">$</InputAdornment>,
startAdornment: (
<InputAdornment position="start">
<Typography>$</Typography>
</InputAdornment>
),
}}
/>
@ -340,16 +345,16 @@ export class Blackjack extends Game<Props, State> {
{/* Buttons */}
{!gameInProgress ? (
<div>
<MuiButton onClick={this.startOnClick} disabled={wagerInvalid || !this.canStartGame()}>
<Button onClick={this.startOnClick} disabled={wagerInvalid || !this.canStartGame()}>
Start
</MuiButton>
</Button>
</div>
) : (
<div>
<MuiButton onClick={this.playerHit}>Hit</MuiButton>
<MuiButton color="secondary" onClick={this.playerStay}>
<Button onClick={this.playerHit}>Hit</Button>
<Button color="secondary" onClick={this.playerStay}>
Stay
</MuiButton>
</Button>
</div>
)}
@ -357,36 +362,40 @@ export class Blackjack extends Game<Props, State> {
* the cards that led to that result. */}
{(gameInProgress || result !== Result.Pending) && (
<div>
<MuiPaper variant="outlined" elevation={2}>
<pre>Player</pre>
{playerHand.cards.map((card, i) => (
<ReactCard card={card} key={i} />
))}
<Box display="flex">
<Paper elevation={2}>
<pre>Player</pre>
{playerHand.cards.map((card, i) => (
<ReactCard card={card} key={i} />
))}
<pre>Value(s): </pre>
{playerHandValues.map((value, i) => (
<pre key={i}>{value}</pre>
))}
</MuiPaper>
<pre>Value(s): </pre>
{playerHandValues.map((value, i) => (
<pre key={i}>{value}</pre>
))}
</Paper>
</Box>
<br />
<MuiPaper variant="outlined" elevation={2}>
<pre>Dealer</pre>
{dealerHand.cards.map((card, i) => (
// Hide every card except the first while game is in progress
<ReactCard card={card} hidden={gameInProgress && i !== 0} key={i} />
))}
<Box display="flex">
<Paper elevation={2}>
<pre>Dealer</pre>
{dealerHand.cards.map((card, i) => (
// Hide every card except the first while game is in progress
<ReactCard card={card} hidden={gameInProgress && i !== 0} key={i} />
))}
{!gameInProgress && (
<>
<pre>Value(s): </pre>
{dealerHandValues.map((value, i) => (
<pre key={i}>{value}</pre>
))}
</>
)}
</MuiPaper>
{!gameInProgress && (
<>
<pre>Value(s): </pre>
{dealerHandValues.map((value, i) => (
<pre key={i}>{value}</pre>
))}
</>
)}
</Paper>
</Box>
</div>
)}

37
src/Casino/CardDeck/ReactCard.tsx
View File

@ -1,12 +1,43 @@
import React, { FC } from "react";
import { Card, Suit } from "./Card";
import { Theme } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
type Props = {
card: Card;
hidden?: boolean;
};
const useStyles = makeStyles(() =>
createStyles({
card: {
padding: "10px",
border: "solid 1px #808080",
backgroundColor: "white",
display: "inline-block",
borderRadius: "10px",
fontSize: "18.5px",
textAlign: "center",
margin: "3px",
fontWeight: "bold",
},
red: {
color: "red",
},
black: {
color: "black",
},
value: {
fontSize: "20px",
fontFamily: "sans-serif",
},
}),
);
export const ReactCard: FC<Props> = ({ card, hidden }) => {
const classes = useStyles();
let suit: React.ReactNode;
switch (card.suit) {
case Suit.Clubs:
@ -25,10 +56,10 @@ export const ReactCard: FC<Props> = ({ card, hidden }) => {
throw new Error(`MissingCaseException: ${card.suit}`);
}
return (
<div className={`casino-card ${card.isRedSuit() ? "red" : "black"}`}>
<div className={`${classes.card} ${card.isRedSuit() ? classes.red : classes.black}`}>
<>
<div className="value">{hidden ? " - " : card.formatValue()}</div>
<div className={`suit`}>{hidden ? " - " : suit}</div>
<div className={classes.value}>{hidden ? " - " : card.formatValue()}</div>
<div>{hidden ? " - " : suit}</div>
</>
</div>
);

116
src/Casino/CoinFlip.tsx
View File

@ -3,44 +3,32 @@
*
* This subcomponent renders all of the buttons for training at the gym
*/
import * as React from "react";
import React, { useState } from "react";
import { IPlayer } from "../PersonObjects/IPlayer";
import { StdButton } from "../ui/React/StdButton";
import { BadRNG } from "./RNG";
import { Game } from "./Game";
import { win, reachedLimit } from "./Game";
import { trusted } from "./utils";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
type IProps = {
p: IPlayer;
};
type IState = {
investment: number;
result: any;
status: string;
playLock: boolean;
};
const minPlay = 0;
const maxPlay = 10e3;
export class CoinFlip extends Game<IProps, IState> {
constructor(props: IProps) {
super(props);
export function CoinFlip(props: IProps): React.ReactElement {
const [investment, setInvestment] = useState(1000);
const [result, setResult] = useState(<span> </span>);
const [status, setStatus] = useState("");
const [playLock, setPlayLock] = useState(false);
this.state = {
investment: 1000,
result: <span> </span>,
status: "",
playLock: false,
};
this.play = this.play.bind(this);
this.updateInvestment = this.updateInvestment.bind(this);
}
updateInvestment(e: React.FormEvent<HTMLInputElement>): void {
function updateInvestment(e: React.ChangeEvent<HTMLInputElement>): void {
let investment: number = parseInt(e.currentTarget.value);
if (isNaN(investment)) {
investment = minPlay;
@ -51,11 +39,11 @@ export class CoinFlip extends Game<IProps, IState> {
if (investment < minPlay) {
investment = minPlay;
}
this.setState({ investment: investment });
setInvestment(investment);
}
play(guess: string): void {
if (this.reachedLimit(this.props.p)) return;
function play(guess: string): void {
if (reachedLimit(props.p)) return;
const v = BadRNG.random();
let letter: string;
if (v < 0.5) {
@ -64,39 +52,51 @@ export class CoinFlip extends Game<IProps, IState> {
letter = "T";
}
const correct: boolean = guess === letter;
this.setState({
result: <span className={correct ? "text" : "failure"}>{letter}</span>,
status: correct ? " win!" : "lose!",
playLock: true,
});
setTimeout(() => this.setState({ playLock: false }), 250);
setResult(<span className={correct ? "text" : "failure"}>{letter}</span>);
setStatus(correct ? " win!" : "lose!");
setPlayLock(true);
setTimeout(() => setPlayLock(false), 250);
if (correct) {
this.win(this.props.p, this.state.investment);
win(props.p, investment);
} else {
this.win(this.props.p, -this.state.investment);
win(props.p, -investment);
}
if (this.reachedLimit(this.props.p)) return;
if (reachedLimit(props.p)) return;
}
render(): React.ReactNode {
return (
<>
<pre>{`+———————+`}</pre>
<pre>{`| | | |`}</pre>
<pre>
{`| | `}
{this.state.result}
{` | |`}
</pre>
<pre>{`| | | |`}</pre>
<pre>{`+———————+`}</pre>
<span className="text">Play for: </span>
<input type="number" className="text-input" onChange={this.updateInvestment} value={this.state.investment} />
<br />
<StdButton onClick={trusted(() => this.play("H"))} text={"Head!"} disabled={this.state.playLock} />
<StdButton onClick={trusted(() => this.play("T"))} text={"Tail!"} disabled={this.state.playLock} />
<h1>{this.state.status}</h1>
</>
);
}
return (
<>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`+———————+`}</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`| | | |`}</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>
{`| | `}
{result}
{` | |`}
</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`| | | |`}</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>{`+———————+`}</Typography>
<Box display="flex" alignItems="center">
<TextField
type="number"
onChange={updateInvestment}
InputProps={{
endAdornment: (
<>
<Button onClick={trusted(() => play("H"))} disabled={playLock}>
Head!
</Button>
<Button onClick={trusted(() => play("T"))} disabled={playLock}>
Tail!
</Button>
</>
),
}}
/>
</Box>
<Typography variant="h3">{status}</Typography>
</>
);
}

13
src/Casino/Game.tsx
View File

@ -4,6 +4,19 @@ import { dialogBoxCreate } from "../ui/React/DialogBox";
const gainLimit = 10e9;
export function win(p: IPlayer, n: number): void {
p.gainMoney(n);
p.recordMoneySource(n, "casino");
}
export function reachedLimit(p: IPlayer): boolean {
const reached = p.getCasinoWinnings() > gainLimit;
if (reached) {
dialogBoxCreate(<>Alright cheater get out of here. You're not allowed here anymore.</>);
}
return reached;
}
export class Game<T, U> extends React.Component<T, U> {
win(p: IPlayer, n: number): void {
p.gainMoney(n);

586
src/Casino/Roulette.tsx
View File

@ -1,25 +1,18 @@
import * as React from "react";
import React, { useState, useEffect } from "react";
import { IPlayer } from "../PersonObjects/IPlayer";
import { StdButton } from "../ui/React/StdButton";
import { Money } from "../ui/React/Money";
import { Game } from "./Game";
import { win, reachedLimit } from "./Game";
import { WHRNG } from "./RNG";
import { trusted } from "./utils";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
type IProps = {
p: IPlayer;
};
type IState = {
investment: number;
canPlay: boolean;
status: string | JSX.Element;
n: number;
lock: boolean;
strategy: Strategy;
};
const minPlay = 0;
const maxPlay = 1e7;
@ -118,48 +111,32 @@ function Single(s: number): Strategy {
};
}
export class Roulette extends Game<IProps, IState> {
interval = -1;
rng: WHRNG;
export function Roulette(props: IProps): React.ReactElement {
const [rng] = useState(new WHRNG(new Date().getTime()));
const [investment, setInvestment] = useState(1000);
const [canPlay, setCanPlay] = useState(true);
const [status, setStatus] = useState<string | JSX.Element>("waiting");
const [n, setN] = useState(0);
const [lock, setLock] = useState(true);
const [strategy, setStrategy] = useState<Strategy>({
payout: 0,
match: (): boolean => {
return false;
},
});
constructor(props: IProps) {
super(props);
useEffect(() => {
const i = window.setInterval(step, 50);
return () => clearInterval(i);
});
this.rng = new WHRNG(new Date().getTime());
this.state = {
investment: 1000,
canPlay: true,
status: "waiting",
n: 0,
lock: true,
strategy: {
payout: 0,
match: (): boolean => {
return false;
},
},
};
this.step = this.step.bind(this);
this.currentNumber = this.currentNumber.bind(this);
this.updateInvestment = this.updateInvestment.bind(this);
}
componentDidMount(): void {
this.interval = window.setInterval(this.step, 50);
}
step(): void {
if (!this.state.lock) {
this.setState({ n: Math.floor(Math.random() * 37) });
function step(): void {
if (!lock) {
setN(Math.floor(Math.random() * 37));
}
}
componentWillUnmount(): void {
clearInterval(this.interval);
}
updateInvestment(e: React.FormEvent<HTMLInputElement>): void {
function updateInvestment(e: React.ChangeEvent<HTMLInputElement>): void {
let investment: number = parseInt(e.currentTarget.value);
if (isNaN(investment)) {
investment = minPlay;
@ -170,265 +147,312 @@ export class Roulette extends Game<IProps, IState> {
if (investment < minPlay) {
investment = minPlay;
}
this.setState({ investment: investment });
setInvestment(investment);
}
currentNumber(): string {
if (this.state.n === 0) return "0";
const color = isRed(this.state.n) ? "R" : "B";
return `${this.state.n}${color}`;
function currentNumber(): string {
if (n === 0) return "0";
const color = isRed(n) ? "R" : "B";
return `${n}${color}`;
}
play(s: Strategy): void {
if (this.reachedLimit(this.props.p)) return;
this.setState({
canPlay: false,
lock: false,
status: "playing",
strategy: s,
});
function play(s: Strategy): void {
if (reachedLimit(props.p)) return;
setCanPlay(false);
setLock(false);
setStatus("playing");
setStrategy(s);
setTimeout(() => {
let n = Math.floor(this.rng.random() * 37);
let n = Math.floor(rng.random() * 37);
let status = <></>;
let gain = 0;
let playerWin = this.state.strategy.match(n);
let playerWin = strategy.match(n);
// oh yeah, the house straight up cheats. Try finding the seed now!
if (playerWin && Math.random() > 0.9) {
playerWin = false;
while (this.state.strategy.match(n)) {
while (strategy.match(n)) {
n = (n + 1) % 36;
}
}
if (playerWin) {
gain = this.state.investment * this.state.strategy.payout;
gain = investment * strategy.payout;
status = (
<>
won <Money money={gain} />
</>
);
} else {
gain = -this.state.investment;
gain = -investment;
status = (
<>
lost <Money money={-gain} />
</>
);
}
this.win(this.props.p, gain);
this.setState({
canPlay: true,
lock: true,
status: status,
n: n,
});
this.reachedLimit(this.props.p);
win(props.p, gain);
setCanPlay(true);
setLock(true);
setStatus(status);
setN(n);
reachedLimit(props.p);
}, 1600);
}
render(): React.ReactNode {
return (
<>
<h1>{this.currentNumber()}</h1>
<input
type="number"
className="text-input"
onChange={this.updateInvestment}
placeholder={"Amount to play"}
value={this.state.investment}
disabled={!this.state.canPlay}
/>
<h1>{this.state.status}</h1>
<table>
<tbody>
<tr>
<td>
<StdButton text={"3"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(3)))} />
</td>
<td>
<StdButton text={"6"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(6)))} />
</td>
<td>
<StdButton text={"9"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(9)))} />
</td>
<td>
<StdButton text={"12"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(12)))} />
</td>
<td>
<StdButton text={"15"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(15)))} />
</td>
<td>
<StdButton text={"18"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(18)))} />
</td>
<td>
<StdButton text={"21"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(21)))} />
</td>
<td>
<StdButton text={"24"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(24)))} />
</td>
<td>
<StdButton text={"27"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(27)))} />
</td>
<td>
<StdButton text={"30"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(30)))} />
</td>
<td>
<StdButton text={"33"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(33)))} />
</td>
<td>
<StdButton text={"36"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(36)))} />
</td>
</tr>
<tr>
<td>
<StdButton text={"2"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(2)))} />
</td>
<td>
<StdButton text={"5"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(5)))} />
</td>
<td>
<StdButton text={"8"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(8)))} />
</td>
<td>
<StdButton text={"11"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(11)))} />
</td>
<td>
<StdButton text={"14"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(14)))} />
</td>
<td>
<StdButton text={"17"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(17)))} />
</td>
<td>
<StdButton text={"20"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(20)))} />
</td>
<td>
<StdButton text={"23"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(23)))} />
</td>
<td>
<StdButton text={"26"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(26)))} />
</td>
<td>
<StdButton text={"29"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(29)))} />
</td>
<td>
<StdButton text={"32"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(32)))} />
</td>
<td>
<StdButton text={"35"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(35)))} />
</td>
</tr>
<tr>
<td>
<StdButton text={"1"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(1)))} />
</td>
<td>
<StdButton text={"4"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(4)))} />
</td>
<td>
<StdButton text={"7"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(7)))} />
</td>
<td>
<StdButton text={"10"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(10)))} />
</td>
<td>
<StdButton text={"13"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(13)))} />
</td>
<td>
<StdButton text={"16"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(16)))} />
</td>
<td>
<StdButton text={"19"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(19)))} />
</td>
<td>
<StdButton text={"22"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(22)))} />
</td>
<td>
<StdButton text={"25"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(25)))} />
</td>
<td>
<StdButton text={"28"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(28)))} />
</td>
<td>
<StdButton text={"31"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(31)))} />
</td>
<td>
<StdButton text={"34"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(34)))} />
</td>
</tr>
<tr>
<td colSpan={4}>
<StdButton
text={"1 to 12"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Third1))}
/>
</td>
<td colSpan={4}>
<StdButton
text={"13 to 24"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Third2))}
/>
</td>
<td colSpan={4}>
<StdButton
text={"25 to 36"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Third3))}
/>
</td>
</tr>
<tr>
<td colSpan={2}>
<StdButton
text={"Red"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Red))}
/>
</td>
<td colSpan={2}>
<StdButton
text={"Black"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Black))}
/>
</td>
<td colSpan={2}>
<StdButton
text={"Odd"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Odd))}
/>
</td>
<td colSpan={2}>
<StdButton
text={"Even"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Even))}
/>
</td>
<td colSpan={2}>
<StdButton
text={"High"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.High))}
/>
</td>
<td colSpan={2}>
<StdButton
text={"Low"}
disabled={!this.state.canPlay}
onClick={trusted(() => this.play(strategies.Low))}
/>
</td>
</tr>
<tr>
<td>
<StdButton text={"0"} disabled={!this.state.canPlay} onClick={trusted(() => this.play(Single(0)))} />
</td>
</tr>
</tbody>
</table>
</>
);
}
return (
<>
<Typography variant="h4">{currentNumber()}</Typography>
<TextField type="number" onChange={updateInvestment} placeholder={"Amount to play"} disabled={!canPlay} />
<Typography variant="h4">{status}</Typography>
<table>
<tbody>
<tr>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(3)))}>
3
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(6)))}>
6
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(9)))}>
9
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(12)))}>
12
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(15)))}>
15
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(18)))}>
18
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(21)))}>
21
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(24)))}>
24
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(27)))}>
27
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(30)))}>
30
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(33)))}>
33
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(36)))}>
36
</Button>
</td>
</tr>
<tr>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(2)))}>
2
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(5)))}>
5
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(8)))}>
8
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(11)))}>
11
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(14)))}>
14
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(17)))}>
17
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(20)))}>
20
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(23)))}>
23
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(26)))}>
26
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(29)))}>
29
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(32)))}>
32
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(35)))}>
35
</Button>
</td>
</tr>
<tr>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(1)))}>
1
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(4)))}>
4
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(7)))}>
7
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(10)))}>
10
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(13)))}>
13
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(16)))}>
16
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(19)))}>
19
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(22)))}>
22
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(25)))}>
25
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(28)))}>
28
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(31)))}>
31
</Button>
</td>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(34)))}>
34
</Button>
</td>
</tr>
<tr>
<td colSpan={4}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Third1))}>
1 to 12
</Button>
</td>
<td colSpan={4}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Third2))}>
13 to 24
</Button>
</td>
<td colSpan={4}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Third3))}>
25 to 36
</Button>
</td>
</tr>
<tr>
<td colSpan={2}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Red))}>
Red
</Button>
</td>
<td colSpan={2}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Black))}>
Black
</Button>
</td>
<td colSpan={2}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Odd))}>
Odd
</Button>
</td>
<td colSpan={2}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Even))}>
Even
</Button>
</td>
<td colSpan={2}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.High))}>
High
</Button>
</td>
<td colSpan={2}>
<Button disabled={!canPlay} onClick={trusted(() => play(strategies.Low))}>
Low
</Button>
</td>
</tr>
<tr>
<td>
<Button disabled={!canPlay} onClick={trusted(() => play(Single(0)))}>
0
</Button>
</td>
</tr>
</tbody>
</table>
</>
);
}

228
src/Casino/SlotMachine.tsx
View File

@ -1,11 +1,13 @@
import * as React from "react";
import React, { useState, useEffect } from "react";
import { IPlayer } from "../PersonObjects/IPlayer";
import { StdButton } from "../ui/React/StdButton";
import { Money } from "../ui/React/Money";
import { WHRNG } from "./RNG";
import { Game } from "./Game";
import { win, reachedLimit } from "./Game";
import { trusted } from "./utils";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
type IProps = {
p: IPlayer;
@ -147,104 +149,76 @@ const payLines = [
const minPlay = 0;
const maxPlay = 1e6;
export class SlotMachine extends Game<IProps, IState> {
rng: WHRNG;
interval = -1;
export function SlotMachine(props: IProps): React.ReactElement {
const [rng] = useState(new WHRNG(props.p.totalPlaytime));
const [index, setIndex] = useState<number[]>([0, 0, 0, 0, 0]);
const [locks, setLocks] = useState<number[]>([0, 0, 0, 0, 0]);
const [investment, setInvestment] = useState(1000);
const [canPlay, setCanPlay] = useState(true);
const [status, setStatus] = useState<string | JSX.Element>("waiting");
constructor(props: IProps) {
super(props);
this.rng = new WHRNG(this.props.p.totalPlaytime);
useEffect(() => {
const i = window.setInterval(step, 50);
return () => clearInterval(i);
});
this.state = {
index: [0, 0, 0, 0, 0],
investment: 1000,
locks: [0, 0, 0, 0, 0],
canPlay: true,
status: "waiting",
};
this.play = this.play.bind(this);
this.lock = this.lock.bind(this);
this.unlock = this.unlock.bind(this);
this.step = this.step.bind(this);
this.checkWinnings = this.checkWinnings.bind(this);
this.getTable = this.getTable.bind(this);
this.updateInvestment = this.updateInvestment.bind(this);
}
componentDidMount(): void {
this.interval = window.setInterval(this.step, 50);
}
step(): void {
function step(): void {
let stoppedOne = false;
const index = this.state.index.slice();
for (const i in index) {
if (index[i] === this.state.locks[i] && !stoppedOne) continue;
index[i] = (index[i] + 1) % symbols.length;
const copy = index.slice();
for (const i in copy) {
if (copy[i] === locks[i] && !stoppedOne) continue;
copy[i] = (copy[i] + 1) % symbols.length;
stoppedOne = true;
}
this.setState({ index: index });
setIndex(copy);
if (stoppedOne && index.every((e, i) => e === this.state.locks[i])) {
this.checkWinnings();
if (stoppedOne && copy.every((e, i) => e === locks[i])) {
checkWinnings();
}
}
componentWillUnmount(): void {
clearInterval(this.interval);
}
getTable(): string[][] {
function getTable(): string[][] {
return [
[
symbols[(this.state.index[0] + symbols.length - 1) % symbols.length],
symbols[(this.state.index[1] + symbols.length - 1) % symbols.length],
symbols[(this.state.index[2] + symbols.length - 1) % symbols.length],
symbols[(this.state.index[3] + symbols.length - 1) % symbols.length],
symbols[(this.state.index[4] + symbols.length - 1) % symbols.length],
symbols[(index[0] + symbols.length - 1) % symbols.length],
symbols[(index[1] + symbols.length - 1) % symbols.length],
symbols[(index[2] + symbols.length - 1) % symbols.length],
symbols[(index[3] + symbols.length - 1) % symbols.length],
symbols[(index[4] + symbols.length - 1) % symbols.length],
],
[symbols[index[0]], symbols[index[1]], symbols[index[2]], symbols[index[3]], symbols[index[4]]],
[
symbols[this.state.index[0]],
symbols[this.state.index[1]],
symbols[this.state.index[2]],
symbols[this.state.index[3]],
symbols[this.state.index[4]],
],
[
symbols[(this.state.index[0] + 1) % symbols.length],
symbols[(this.state.index[1] + 1) % symbols.length],
symbols[(this.state.index[2] + 1) % symbols.length],
symbols[(this.state.index[3] + 1) % symbols.length],
symbols[(this.state.index[4] + 1) % symbols.length],
symbols[(index[0] + 1) % symbols.length],
symbols[(index[1] + 1) % symbols.length],
symbols[(index[2] + 1) % symbols.length],
symbols[(index[3] + 1) % symbols.length],
symbols[(index[4] + 1) % symbols.length],
],
];
}
play(): void {
if (this.reachedLimit(this.props.p)) return;
this.setState({ status: "playing" });
this.win(this.props.p, -this.state.investment);
if (!this.state.canPlay) return;
this.unlock();
setTimeout(this.lock, this.rng.random() * 2000 + 1000);
function play(): void {
if (reachedLimit(props.p)) return;
setStatus("playing");
win(props.p, -investment);
if (!canPlay) return;
unlock();
setTimeout(lock, rng.random() * 2000 + 1000);
}
lock(): void {
this.setState({
locks: [
Math.floor(this.rng.random() * symbols.length),
Math.floor(this.rng.random() * symbols.length),
Math.floor(this.rng.random() * symbols.length),
Math.floor(this.rng.random() * symbols.length),
Math.floor(this.rng.random() * symbols.length),
],
});
function lock(): void {
setLocks([
Math.floor(rng.random() * symbols.length),
Math.floor(rng.random() * symbols.length),
Math.floor(rng.random() * symbols.length),
Math.floor(rng.random() * symbols.length),
Math.floor(rng.random() * symbols.length),
]);
}
checkWinnings(): void {
const t = this.getTable();
function checkWinnings(): void {
const t = getTable();
const getPaylineData = function (payline: number[][]): string[] {
const data = [];
for (const point of payline) {
@ -263,35 +237,31 @@ export class SlotMachine extends Game<IProps, IState> {
return count;
};
let gains = -this.state.investment;
let gains = -investment;
for (const payline of payLines) {
const data = getPaylineData(payline);
const count = countSequence(data);
if (count < 3) continue;
const payout = getPayout(data[0], count - 3);
gains += this.state.investment * payout;
this.win(this.props.p, this.state.investment * payout);
gains += investment * payout;
win(props.p, investment * payout);
}
this.setState({
status: (
<>
{gains > 0 ? "gained" : "lost"} <Money money={Math.abs(gains)} />
</>
),
canPlay: true,
});
if (this.reachedLimit(this.props.p)) return;
setStatus(
<>
{gains > 0 ? "gained" : "lost"} <Money money={Math.abs(gains)} />
</>,
);
setCanPlay(true);
if (reachedLimit(props.p)) return;
}
unlock(): void {
this.setState({
locks: [-1, -1, -1, -1, -1],
canPlay: false,
});
function unlock(): void {
setLocks([-1, -1, -1, -1, -1]);
setCanPlay(false);
}
updateInvestment(e: React.FormEvent<HTMLInputElement>): void {
function updateInvestment(e: React.ChangeEvent<HTMLInputElement>): void {
let investment: number = parseInt(e.currentTarget.value);
if (isNaN(investment)) {
investment = minPlay;
@ -302,53 +272,49 @@ export class SlotMachine extends Game<IProps, IState> {
if (investment < minPlay) {
investment = minPlay;
}
this.setState({ investment: investment });
setInvestment(investment);
}
render(): React.ReactNode {
const t = this.getTable();
// prettier-ignore
return (
const t = getTable();
// prettier-ignore
return (
<>
<pre>+———————————————————————+</pre>
<pre>| | {t[0][0]} | {t[0][1]} | {t[0][2]} | {t[0][3]} | {t[0][4]} | |</pre>
<pre>| | | | | | | |</pre>
<pre>| | {symbols[this.state.index[0]]} | {symbols[this.state.index[1]]} | {symbols[this.state.index[2]]} | {symbols[this.state.index[3]]} | {symbols[this.state.index[4]]} | |</pre>
<pre>| | | | | | | |</pre>
<pre>| | {symbols[(this.state.index[0]+1)%symbols.length]} | {symbols[(this.state.index[1]+1)%symbols.length]} | {symbols[(this.state.index[2]+1)%symbols.length]} | {symbols[(this.state.index[3]+1)%symbols.length]} | {symbols[(this.state.index[4]+1)%symbols.length]} | |</pre>
<pre>+———————————————————————+</pre>
<input
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>+———————————————————————+</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>| | {t[0][0]} | {t[0][1]} | {t[0][2]} | {t[0][3]} | {t[0][4]} | |</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>| | | | | | | |</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>| | {symbols[index[0]]} | {symbols[index[1]]} | {symbols[index[2]]} | {symbols[index[3]]} | {symbols[index[4]]} | |</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>| | | | | | | |</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>| | {symbols[(index[0]+1)%symbols.length]} | {symbols[(index[1]+1)%symbols.length]} | {symbols[(index[2]+1)%symbols.length]} | {symbols[(index[3]+1)%symbols.length]} | {symbols[(index[4]+1)%symbols.length]} | |</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>+———————————————————————+</Typography>
<TextField
type="number"
className="text-input"
onChange={this.updateInvestment}
onChange={updateInvestment}
placeholder={"Amount to play"}
value={this.state.investment}
disabled={!this.state.canPlay}
disabled={!canPlay}
InputProps={{endAdornment:(<Button
onClick={trusted(play)}
disabled={!canPlay}
>Spin!</Button>)}}
/>
<StdButton
onClick={trusted(this.play)}
text={"Spin!"}
disabled={!this.state.canPlay}
/>
<h1>{this.state.status}</h1>
<h2>Pay lines</h2>
<Typography variant="h4">{status}</Typography>
<Typography>Pay lines</Typography>
<pre>----- ····· ·····</pre>
<pre>····· ----- ·····</pre>
<pre>····· ····· -----</pre>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>----- ····· ·····</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>····· ----- ·····</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>····· ····· -----</Typography>
<br />
<pre>··^·· \···/ \···/</pre>
<pre>·/·\· ·\·/· ·---·</pre>
<pre>/···\ ··v·· ·····</pre>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>··^·· \···/ \···/</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>·/·\· ·\·/· ·---·</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>/···\ ··v·· ·····</Typography>
<br />
<pre>····· ·---· ·····</pre>
<pre>·---· /···\ \···/</pre>
<pre>/···\ ····· ·---·</pre>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>····· ·---· ·····</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>·---· /···\ \···/</Typography>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>/···\ ····· ·---·</Typography>
</>
);
}
}
// https://felgo.com/doc/how-to-make-a-slot-game-tutorial/

95
src/Locations/ui/CasinoLocation.tsx
View File

@ -3,14 +3,13 @@
*
* This subcomponent renders all of the buttons for training at the gym
*/
import * as React from "react";
import React, { useState } from "react";
import Button from "@mui/material/Button";
import { Blackjack } from "../../Casino/Blackjack";
import { CoinFlip } from "../../Casino/CoinFlip";
import { Roulette } from "../../Casino/Roulette";
import { SlotMachine } from "../../Casino/SlotMachine";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { StdButton } from "../../ui/React/StdButton";
enum GameType {
None = "none",
@ -28,71 +27,35 @@ type IState = {
game: GameType;
};
export class CasinoLocation extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
export function CasinoLocation(props: IProps): React.ReactElement {
const [game, setGame] = useState(GameType.None);
this.state = {
game: GameType.None,
};
this.updateGame = this.updateGame.bind(this);
function updateGame(game: GameType): void {
setGame(game);
}
updateGame(game: GameType): void {
this.setState({
game,
});
}
renderGames(): React.ReactNode {
return (
<>
<Button onClick={() => this.updateGame(GameType.Coin)}>Play coin flip</Button>
<br />
<Button onClick={() => this.updateGame(GameType.Slots)}>Play slots</Button>
<br />
<Button onClick={() => this.updateGame(GameType.Roulette)}>Play roulette</Button>
<br />
<Button onClick={() => this.updateGame(GameType.Blackjack)}>Play blackjack</Button>
</>
);
}
renderGame(): React.ReactNode {
let elem = null;
switch (this.state.game) {
case GameType.Coin:
elem = <CoinFlip p={this.props.p} />;
break;
case GameType.Slots:
elem = <SlotMachine p={this.props.p} />;
break;
case GameType.Roulette:
elem = <Roulette p={this.props.p} />;
break;
case GameType.Blackjack:
elem = <Blackjack p={this.props.p} />;
break;
case GameType.None:
break;
default:
throw new Error(`MissingCaseException: ${this.state.game}`);
}
return (
<>
<StdButton onClick={() => this.updateGame(GameType.None)} text={"Stop playing"} />
{elem}
</>
);
}
render(): React.ReactNode {
if (this.state.game === GameType.None) {
return this.renderGames();
} else {
return this.renderGame();
}
}
return (
<>
{game === GameType.None && (
<>
<Button onClick={() => updateGame(GameType.Coin)}>Play coin flip</Button>
<br />
<Button onClick={() => updateGame(GameType.Slots)}>Play slots</Button>
<br />
<Button onClick={() => updateGame(GameType.Roulette)}>Play roulette</Button>
<br />
<Button onClick={() => updateGame(GameType.Blackjack)}>Play blackjack</Button>
</>
)}
{game !== GameType.None && (
<>
<Button onClick={() => updateGame(GameType.None)}>Stop playing</Button>
{game === GameType.Coin && <CoinFlip p={props.p} />}
{game === GameType.Slots && <SlotMachine p={props.p} />}
{game === GameType.Roulette && <Roulette p={props.p} />}
{game === GameType.Blackjack && <Blackjack p={props.p} />}
</>
)}
</>
);
}

20
src/Locations/ui/City.tsx
View File

@ -12,9 +12,10 @@ import { Locations } from "../Locations";
import { Location } from "../Location";
import { Settings } from "../../Settings/Settings";
import { StdButton } from "../../ui/React/StdButton";
import { use } from "../../ui/Context";
import { IRouter } from "../../ui/Router";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
type IProps = {
city: City;
@ -111,29 +112,30 @@ function ASCIICity(props: IProps): React.ReactElement {
elems.push(<pre key={i}>{lineElems(lines[i])}</pre>);
}
return <div className="noselect">{elems}</div>;
return <>{elems}</>;
}
function ListCity(props: IProps): React.ReactElement {
const router = use.Router();
const locationButtons = props.city.locations.map((locName) => {
return (
<li key={locName}>
<StdButton onClick={() => toLocation(router, Locations[locName])} text={locName} />
</li>
<React.Fragment key={locName}>
<Button onClick={() => toLocation(router, Locations[locName])}>{locName}</Button>
<br />
</React.Fragment>
);
});
return <ul>{locationButtons}</ul>;
return <>{locationButtons}</>;
}
export function LocationCity(): React.ReactElement {
const player = use.Player();
const city = Cities[player.city];
return (
<div className="noselect">
<h2>{city.name}</h2>
<>
<Typography>{city.name}</Typography>
{Settings.DisableASCIIArt ? <ListCity city={city} /> : <ASCIICity city={city} />}
</div>
</>
);
}

2
src/Locations/ui/CompanyLocation.tsx
View File

@ -212,7 +212,7 @@ export function CompanyLocation(props: IProps): React.ReactElement {
</>
}
>
<Typography className={"tooltip"}>Company Favor: {Favor(company.favor)}</Typography>
<Typography>Company Favor: {Favor(company.favor)}</Typography>
</Tooltip>
</Box>
<Typography>-------------------------</Typography>

2
src/Locations/ui/GenericLocation.tsx
View File

@ -90,7 +90,7 @@ export function GenericLocation({ loc }: IProps): React.ReactElement {
return (
<>
<Button onClick={() => router.toCity()}>Return to World</Button>
<Typography variant="h4" className="noselect">
<Typography variant="h4">
{backdoorInstalled && !Settings.DisableTextEffects ? <CorruptableText content={loc.name} /> : loc.name}
</Typography>
{locContent}

2
src/Locations/ui/TechVendorLocation.tsx
View File

@ -70,7 +70,7 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
<div>
{purchaseServerButtons}
<br />
<Typography className="noselect">
<Typography>
<i>"You can order bigger servers via scripts. We don't take custom order in person."</i>
</Typography>
<br />

3
src/Locations/ui/TravelAgencyRoot.tsx
View File

@ -13,7 +13,6 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
import { IRouter } from "../../ui/Router";
import { Settings } from "../../Settings/Settings";
import { StdButton } from "../../ui/React/StdButton";
import { use } from "../../ui/Context";
import { Money } from "../../ui/React/Money";
import { WorldMap } from "../../ui/React/WorldMap";
@ -36,7 +35,7 @@ function travel(p: IPlayer, router: IRouter, to: CityName): void {
p.loseMoney(cost);
p.travel(to);
dialogBoxCreate(<span className="noselect">You are now in {to}!</span>);
dialogBoxCreate(<>You are now in {to}!</>);
router.toCity();
}

4
src/NetscriptFunctions.ts
View File

@ -146,7 +146,7 @@ import { setTimeoutRef } from "./utils/SetTimeoutRef";
import { is2DArray } from "./utils/helpers/is2DArray";
import { convertTimeMsToTimeElapsedString } from "./utils/StringHelperFunctions";
import { logBoxCreate } from "./ui/React/LogBox";
import { LogBoxEvents } from "./ui/React/LogBoxManager";
import { arrayToString } from "./utils/helpers/arrayToString";
import { isString } from "./utils/helpers/isString";
@ -1203,7 +1203,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
return;
}
logBoxCreate(runningScriptObj);
LogBoxEvents.emit(runningScriptObj);
},
nuke: function (ip: any): any {
updateDynamicRam("nuke", getRamCost("nuke"));

239
src/PersonObjects/Resleeving/ui/ResleeveElem.tsx
View File

@ -8,6 +8,13 @@ import { Money } from "../../../ui/React/Money";
import { numeralWrapper } from "../../../ui/numeralFormat";
import { dialogBoxCreate } from "../../../ui/React/DialogBox";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import Button from "@mui/material/Button";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import Grid from "@mui/material/Grid";
interface IProps {
resleeve: Resleeve;
player: IPlayer;
@ -19,81 +26,83 @@ export function ResleeveElem(props: IProps): React.ReactElement {
function openStats(): void {
dialogBoxCreate(
<>
<h2>
<u>Total Multipliers:</u>
</h2>
Hacking Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_mult)}
<br />
Hacking Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_exp_mult)}
<br />
Strength Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_mult)}
<br />
Strength Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_exp_mult)}
<br />
Defense Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_mult)}
<br />
Defense Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_exp_mult)}
<br />
Dexterity Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_mult)}
<br />
Dexterity Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_exp_mult)}
<br />
Agility Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_mult)}
<br />
Agility Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_exp_mult)}
<br />
Charisma Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_mult)}
<br />
Charisma Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_exp_mult)}
<br />
Hacking Chance multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_chance_mult)}
<br />
Hacking Speed multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_speed_mult)}
<br />
Hacking Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_money_mult)}
<br />
Hacking Growth multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_grow_mult)}
<br />
Salary multiplier: {numeralWrapper.formatPercentage(props.resleeve.work_money_mult)}
<br />
Company Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.company_rep_mult)}
<br />
Faction Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.faction_rep_mult)}
<br />
Crime Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_money_mult)}
<br />
Crime Success multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_success_mult)}
<br />
Hacknet Income multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_money_mult)}
<br />
Hacknet Purchase Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_purchase_cost_mult)}
<br />
Hacknet Level Upgrade Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_level_cost_mult)}
<br />
Hacknet Ram Upgrade Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_ram_cost_mult)}
<br />
Hacknet Core Upgrade Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_core_cost_mult)}
<br />
Bladeburner Max Stamina multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_max_stamina_mult)}
<br />
Bladeburner Stamina Gain multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_stamina_gain_mult)}
<br />
Bladeburner Field Analysis multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_analysis_mult)}
<br />
Bladeburner Success Chance multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_success_chance_mult)}
<Typography variant="h5" color="primary">
Total Multipliers:
</Typography>
<Typography>
Hacking Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_mult)}
<br />
Hacking Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_exp_mult)}
<br />
Strength Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_mult)}
<br />
Strength Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.strength_exp_mult)}
<br />
Defense Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_mult)}
<br />
Defense Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.defense_exp_mult)}
<br />
Dexterity Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_mult)}
<br />
Dexterity Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.dexterity_exp_mult)}
<br />
Agility Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_mult)}
<br />
Agility Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.agility_exp_mult)}
<br />
Charisma Level multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_mult)}
<br />
Charisma Experience multiplier: {numeralWrapper.formatPercentage(props.resleeve.charisma_exp_mult)}
<br />
Hacking Chance multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_chance_mult)}
<br />
Hacking Speed multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_speed_mult)}
<br />
Hacking Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_money_mult)}
<br />
Hacking Growth multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacking_grow_mult)}
<br />
Salary multiplier: {numeralWrapper.formatPercentage(props.resleeve.work_money_mult)}
<br />
Company Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.company_rep_mult)}
<br />
Faction Reputation Gain multiplier: {numeralWrapper.formatPercentage(props.resleeve.faction_rep_mult)}
<br />
Crime Money multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_money_mult)}
<br />
Crime Success multiplier: {numeralWrapper.formatPercentage(props.resleeve.crime_success_mult)}
<br />
Hacknet Income multiplier: {numeralWrapper.formatPercentage(props.resleeve.hacknet_node_money_mult)}
<br />
Hacknet Purchase Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_purchase_cost_mult)}
<br />
Hacknet Level Upgrade Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_level_cost_mult)}
<br />
Hacknet Ram Upgrade Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_ram_cost_mult)}
<br />
Hacknet Core Upgrade Cost multiplier:
{numeralWrapper.formatPercentage(props.resleeve.hacknet_node_core_cost_mult)}
<br />
Bladeburner Max Stamina multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_max_stamina_mult)}
<br />
Bladeburner Stamina Gain multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_stamina_gain_mult)}
<br />
Bladeburner Field Analysis multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_analysis_mult)}
<br />
Bladeburner Success Chance multiplier:
{numeralWrapper.formatPercentage(props.resleeve.bladeburner_success_chance_mult)}
</Typography>
</>,
);
}
function onAugChange(event: React.ChangeEvent<HTMLSelectElement>): void {
function onAugChange(event: SelectChangeEvent<string>): void {
setAug(event.target.value);
}
@ -110,50 +119,48 @@ export function ResleeveElem(props: IProps): React.ReactElement {
}
return (
<div className="resleeve-elem" style={{ display: "block" }}>
<div className="resleeve-panel" style={{ width: "30%" }}>
<p>
Hacking: {numeralWrapper.formatSkill(props.resleeve.hacking_skill)} (
{numeralWrapper.formatExp(props.resleeve.hacking_exp)} exp)
<br />
Strength: {numeralWrapper.formatSkill(props.resleeve.strength)} (
{numeralWrapper.formatExp(props.resleeve.strength_exp)} exp)
<br />
Defense: {numeralWrapper.formatSkill(props.resleeve.defense)} (
{numeralWrapper.formatExp(props.resleeve.defense_exp)} exp)
<br />
Dexterity: {numeralWrapper.formatSkill(props.resleeve.dexterity)} (
{numeralWrapper.formatExp(props.resleeve.dexterity_exp)} exp)
<br />
Agility: {numeralWrapper.formatSkill(props.resleeve.agility)} (
{numeralWrapper.formatExp(props.resleeve.agility_exp)} exp)
<br />
Charisma: {numeralWrapper.formatSkill(props.resleeve.charisma)} (
{numeralWrapper.formatExp(props.resleeve.charisma_exp)} exp)
<br /># Augmentations: {props.resleeve.augmentations.length}
</p>
<button className="std-button" onClick={openStats}>
Multipliers
</button>
</div>
<div className="resleeve-panel" style={{ width: "50%" }}>
<select className="resleeve-aug-selector dropdown" onChange={onAugChange}>
{props.resleeve.augmentations.map((aug) => (
<option key={aug.name} value={aug.name}>
{aug.name}
</option>
))}
</select>
<p>{currentAug !== undefined && currentAug.info}</p>
</div>
<div className="resleeve-panel" style={{ width: "20%" }}>
<p>
It costs <Money money={cost} player={props.player} /> to purchase this Sleeve.
</p>
<button className="std-button" onClick={purchase}>
Purchase
</button>
</div>
</div>
<Paper sx={{ my: 1 }}>
<Grid container>
<Grid item xs={3}>
<Typography>
Hacking: {numeralWrapper.formatSkill(props.resleeve.hacking_skill)} (
{numeralWrapper.formatExp(props.resleeve.hacking_exp)} exp)
<br />
Strength: {numeralWrapper.formatSkill(props.resleeve.strength)} (
{numeralWrapper.formatExp(props.resleeve.strength_exp)} exp)
<br />
Defense: {numeralWrapper.formatSkill(props.resleeve.defense)} (
{numeralWrapper.formatExp(props.resleeve.defense_exp)} exp)
<br />
Dexterity: {numeralWrapper.formatSkill(props.resleeve.dexterity)} (
{numeralWrapper.formatExp(props.resleeve.dexterity_exp)} exp)
<br />
Agility: {numeralWrapper.formatSkill(props.resleeve.agility)} (
{numeralWrapper.formatExp(props.resleeve.agility_exp)} exp)
<br />
Charisma: {numeralWrapper.formatSkill(props.resleeve.charisma)} (
{numeralWrapper.formatExp(props.resleeve.charisma_exp)} exp)
<br /># Augmentations: {props.resleeve.augmentations.length}
</Typography>
<Button onClick={openStats}>Multipliers</Button>
</Grid>
<Grid item xs={6}>
<Select value={aug} onChange={onAugChange}>
{props.resleeve.augmentations.map((aug) => (
<MenuItem key={aug.name} value={aug.name}>
{aug.name}
</MenuItem>
))}
</Select>
<Typography>{currentAug !== undefined && currentAug.info}</Typography>
</Grid>
<Grid item xs={3}>
<Typography>
It costs <Money money={cost} player={props.player} /> to purchase this Sleeve.
</Typography>
<Button onClick={purchase}>Purchase</Button>
</Grid>
</Grid>
</Paper>
);
}

47
src/PersonObjects/Resleeving/ui/ResleeveRoot.tsx
View File

@ -1,9 +1,13 @@
import React, { useState } from "react";
import { IPlayer } from "../../IPlayer";
import { generateResleeves } from "../Resleeving";
import { Resleeve } from "../Resleeve";
import { ResleeveElem } from "./ResleeveElem";
import { use } from "../../../ui/Context";
import Typography from "@mui/material/Typography";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import Box from "@mui/material/Box";
const SortOption: {
[key: string]: string | undefined;
@ -69,28 +73,25 @@ const SortFunctions: {
TotalNumAugmentations: (a: Resleeve, b: Resleeve): number => a.augmentations.length - b.augmentations.length,
};
interface IProps {
player: IPlayer;
}
export function ResleeveRoot(props: IProps): React.ReactElement {
export function ResleeveRoot(): React.ReactElement {
const player = use.Player();
const [sort, setSort] = useState(SortOption.Cost);
// Randomly create all Resleeves if they dont already exist
if (props.player.resleeves.length === 0) {
props.player.resleeves = generateResleeves();
if (player.resleeves.length === 0) {
player.resleeves = generateResleeves();
}
function onSortChange(event: React.ChangeEvent<HTMLSelectElement>): void {
function onSortChange(event: SelectChangeEvent<string>): void {
setSort(event.target.value);
}
const sortFunction = SortFunctions[sort];
if (sortFunction === undefined) throw new Error(`sort function '${sort}' is undefined`);
props.player.resleeves.sort(sortFunction);
player.resleeves.sort(sortFunction);
return (
<>
<p style={{ display: "block", width: "75%" }}>
<Typography>
Re-sleeving is the process of digitizing and transferring your consciousness into a new human body, or 'sleeve'.
Here at VitaLife, you can purchase new specially-engineered bodies for the re-sleeve process. Many of these
bodies even come with genetic and cybernetic Augmentations!
@ -104,17 +105,19 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
<br />
<br />
NOTE: The stats and multipliers displayed on this page do NOT include your bonuses from Source-File.
</p>
<p style={{ display: "inline-block" }}>Sort By: </p>
<select className="dropdown" defaultValue={sort} onChange={onSortChange}>
{Object.keys(SortOption).map((opt) => (
<option key={opt} value={opt}>
{SortOption[opt]}
</option>
))}
</select>
{props.player.resleeves.map((resleeve, i) => (
<ResleeveElem key={i} player={props.player} resleeve={resleeve} />
</Typography>
<Box display="flex" alignItems="center">
<Typography>Sort By: </Typography>
<Select value={sort} onChange={onSortChange}>
{Object.keys(SortOption).map((opt) => (
<MenuItem key={opt} value={opt}>
{SortOption[opt]}
</MenuItem>
))}
</Select>
</Box>
{player.resleeves.map((resleeve, i) => (
<ResleeveElem key={i} player={player} resleeve={resleeve} />
))}
</>
);

4
src/Terminal/commands/runScript.ts
View File

@ -2,7 +2,7 @@ import { ITerminal } from "../ITerminal";
import { IRouter } from "../../ui/Router";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { BaseServer } from "../../Server/BaseServer";
import { logBoxCreate } from "../../ui/React/LogBox";
import { LogBoxEvents } from "../../ui/React/LogBoxManager";
import { startWorkerScript } from "../../NetscriptWorker";
import { RunningScript } from "../../Script/RunningScript";
import { findRunningScript } from "../../Script/ScriptHelpers";
@ -84,7 +84,7 @@ export function runScript(
`Running script with ${numThreads} thread(s), pid ${runningScript.pid} and args: ${JSON.stringify(args)}.`,
);
if (tailFlag) {
logBoxCreate(runningScript);
LogBoxEvents.emit(runningScript);
}
return;
}

8
src/Terminal/commands/tail.ts
View File

@ -2,10 +2,10 @@ import { ITerminal } from "../ITerminal";
import { IRouter } from "../../ui/Router";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { BaseServer } from "../../Server/BaseServer";
import { logBoxCreate } from "../../ui/React/LogBox";
import { findRunningScriptByPid } from "../../Script/ScriptHelpers";
import { isScriptFilename } from "../../Script/isScriptFilename";
import { compareArrays } from "../../utils/helpers/compareArrays";
import { LogBoxEvents } from "../../ui/React/LogBoxManager";
export function tail(
terminal: ITerminal,
@ -34,7 +34,7 @@ export function tail(
// match, use it!
for (let i = 0; i < server.runningScripts.length; ++i) {
if (server.runningScripts[i].filename === scriptName && compareArrays(server.runningScripts[i].args, args)) {
logBoxCreate(server.runningScripts[i]);
LogBoxEvents.emit(server.runningScripts[i]);
return;
}
}
@ -53,7 +53,7 @@ export function tail(
// If there's only 1 possible choice, use that.
if (candidates.length === 1) {
logBoxCreate(candidates[0]);
LogBoxEvents.emit(candidates[0]);
return;
}
@ -73,7 +73,7 @@ export function tail(
terminal.error("No such script exists");
return;
}
logBoxCreate(runningScript);
LogBoxEvents.emit(runningScript);
}
} catch (e) {
terminal.error(e + "");

18
src/engine.tsx
View File

@ -42,7 +42,7 @@ import { Money } from "./ui/React/Money";
import { Hashes } from "./ui/React/Hashes";
import { Reputation } from "./ui/React/Reputation";
import { dialogBoxCreate } from "./ui/React/DialogBox";
import { AlertEvents } from "./ui/React/AlertManager";
import { exceptionAlert } from "./utils/helpers/exceptionAlert";
import { startTampering } from "./Exploits/tampering";
@ -399,12 +399,16 @@ const Engine: {
Player.lastUpdate = Engine._lastUpdate;
Engine.start(); // Run main game loop and Scripts loop
const timeOfflineString = convertTimeMsToTimeElapsedString(time);
dialogBoxCreate(
<>
Offline for {timeOfflineString}. While you were offline, your scripts generated{" "}
<Money money={offlineHackingIncome} />, your Hacknet Nodes generated {hacknetProdInfo} and you gained{" "}
{Reputation(offlineReputation)} divided amongst your factions.
</>,
setTimeout(
() =>
AlertEvents.emit(
<>
Offline for {timeOfflineString}. While you were offline, your scripts generated{" "}
<Money money={offlineHackingIncome} />, your Hacknet Nodes generated {hacknetProdInfo} and you gained{" "}
{Reputation(offlineReputation)} divided amongst your factions.
</>,
),
250,
);
} else {
// No save found, start new game

6
src/ui/ActiveScripts/WorkerScriptAccordion.tsx
View File

@ -28,7 +28,7 @@ import { killWorkerScript } from "../../Netscript/killWorkerScript";
import { WorkerScript } from "../../Netscript/WorkerScript";
import { dialogBoxCreate } from "../React/DialogBox";
import { logBoxCreate } from "../React/LogBox";
import { LogBoxEvents } from "../React/LogBoxManager";
import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions";
import { arrayToString } from "../../utils/helpers/arrayToString";
import { Money } from "../React/Money";
@ -50,7 +50,9 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
const workerScript = props.workerScript;
const scriptRef = workerScript.scriptRef;
const logClickHandler = logBoxCreate.bind(null, scriptRef);
function logClickHandler(): void {
LogBoxEvents.emit(scriptRef);
}
const killScript = killWorkerScript.bind(null, scriptRef as any, scriptRef.server);
function killScriptClickHandler(): void {

6
src/ui/GameRoot.tsx
View File

@ -67,6 +67,8 @@ import { BladeburnerCinematic } from "../Bladeburner/ui/BladeburnerCinematic";
import { workerScripts } from "../Netscript/WorkerScripts";
import { Unclickable } from "../Exploits/Unclickable";
import { Snackbar } from "./React/Snackbar";
import { LogBoxManager } from "./React/LogBoxManager";
import { AlertManager } from "./React/AlertManager";
import { enterBitNode } from "../RedPill";
import { Context } from "./Context";
@ -334,7 +336,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
) : page === Page.Bladeburner ? (
<BladeburnerRoot />
) : page === Page.Resleeves ? (
<ResleeveRoot player={player} />
<ResleeveRoot />
) : page === Page.Travel ? (
<TravelAgencyRoot p={player} router={Router} />
) : page === Page.StockMarket ? (
@ -394,6 +396,8 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
)}
<Unclickable />
<Snackbar />
<LogBoxManager />
<AlertManager />
</Context.Router.Provider>
</Context.Player.Provider>
);

50
src/ui/React/AlertManager.tsx Normal file
View File

@ -0,0 +1,50 @@
import React, { useState, useEffect } from "react";
import { EventEmitter } from "../../utils/EventEmitter";
import { Modal } from "../../ui/React/Modal";
import Typography from "@mui/material/Typography";
export const AlertEvents = new EventEmitter<[string | JSX.Element]>();
interface Alert {
id: string;
text: string | JSX.Element;
}
let i = 0;
export function AlertManager(): React.ReactElement {
const [alerts, setAlerts] = useState<Alert[]>([]);
useEffect(
() =>
AlertEvents.subscribe((text: string | JSX.Element) => {
const id = i + "";
i++;
setAlerts((old) => {
return [
...old,
{
id: id,
text: text,
},
];
});
}),
[],
);
function close(): void {
console.log("close");
setAlerts((old) => {
return old.slice(0, -1);
});
}
return (
<>
{alerts.length > 0 && (
<Modal open={true} onClose={close}>
<Typography>{alerts[0].text}</Typography>
</Modal>
)}
</>
);
}

134
src/ui/React/LogBox.tsx
View File

@ -1,134 +0,0 @@
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { killWorkerScript } from "../../Netscript/killWorkerScript";
import { RunningScript } from "../../Script/RunningScript";
import { createElement } from "../uiHelpers/createElement";
import { removeElementById } from "../uiHelpers/removeElementById";
let gameContainer: HTMLElement;
(function () {
function getGameContainer(): void {
const container = document.getElementById("root");
if (container == null) {
throw new Error(`Failed to find game container DOM element`);
}
gameContainer = container;
document.removeEventListener("DOMContentLoaded", getGameContainer);
}
document.addEventListener("DOMContentLoaded", getGameContainer);
})();
interface IProps {
script: RunningScript;
container: HTMLElement;
id: string;
}
function ScriptLogPopup(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
useEffect(() => {
const id = setInterval(rerender, 1000);
return () => clearInterval(id);
}, []);
function close(): void {
const content = document.getElementById(props.id);
if (content == null) return;
ReactDOM.unmountComponentAtNode(content);
removeElementById(props.id);
}
useEffect(() => {
function closeHandler(event: KeyboardEvent): void {
if (event.keyCode === 27) {
close();
}
}
document.addEventListener("keydown", closeHandler);
return () => {
document.removeEventListener("keydown", closeHandler);
};
}, []);
function kill(): void {
killWorkerScript(props.script, props.script.server, true);
close();
}
function drag(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
event.preventDefault();
let x = event.clientX;
let y = event.clientY;
let left = props.container.offsetLeft + props.container.clientWidth / 2;
let top = props.container.offsetTop + props.container.clientWidth / 5;
function mouseMove(event: MouseEvent): void {
left += event.clientX - x;
top += event.clientY - y;
props.container.style.left = left + "px";
props.container.style.top = top + "px";
// reset right and bottom to avoid the window stretching
props.container.style.right = "";
props.container.style.bottom = "";
x = event.clientX;
y = event.clientY;
}
function mouseUp(): void {
document.removeEventListener("mouseup", mouseUp);
document.removeEventListener("mousemove", mouseMove);
}
document.addEventListener("mouseup", mouseUp);
document.addEventListener("mousemove", mouseMove);
}
return (
<>
<div className="log-box-header" onMouseDown={drag}>
<p>
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
</p>
<div>
<button className="log-box-button" onClick={kill}>
Kill Script
</button>
<button className="log-box-button" onClick={close}>
Close
</button>
</div>
</div>
<div className="log-box-log-container">
<p>
{props.script.logs.map(
(line: string, i: number): JSX.Element => (
<span key={i} style={{ whiteSpace: "pre-line" }}>
{line}
<br />
</span>
),
)}
</p>
</div>
</>
);
}
export function logBoxCreate(script: RunningScript): void {
const id = script.server + "-" + script.filename + script.args.map((x: any): string => `${x}`).join("-");
if (document.getElementById(id) !== null) return;
const container = createElement("div", {
class: "log-box-container",
id: id,
});
gameContainer.appendChild(container);
ReactDOM.render(<ScriptLogPopup script={script} id={id} container={container} />, container);
}

161
src/ui/React/LogBoxManager.tsx Normal file
View File

@ -0,0 +1,161 @@
import React, { useState, useEffect, useRef } from "react";
import { EventEmitter } from "../../utils/EventEmitter";
import { RunningScript } from "../../Script/RunningScript";
import { killWorkerScript } from "../../Netscript/killWorkerScript";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
interface Log {
id: string;
script: RunningScript;
}
export function LogBoxManager(): React.ReactElement {
const [logs, setLogs] = useState<Log[]>([]);
useEffect(
() =>
LogBoxEvents.subscribe((script: RunningScript) => {
const id = script.server + "-" + script.filename + script.args.map((x: any): string => `${x}`).join("-");
setLogs((old) => {
return [
...old,
{
id: id,
script: script,
},
];
});
}),
[],
);
function close(id: string): void {
setLogs((old) => old.filter((l) => l.id !== id));
}
return (
<>
{logs.map((log) => (
<LogWindow key={log.id} script={log.script} id={log.id} onClose={() => close(log.id)} />
))}
</>
);
}
interface IProps {
script: RunningScript;
id: string;
onClose: () => void;
}
function LogWindow(props: IProps): React.ReactElement {
const container = useRef<HTMLDivElement>(null);
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
useEffect(() => {
const id = setInterval(rerender, 1000);
return () => clearInterval(id);
}, []);
useEffect(() => {
function closeHandler(event: KeyboardEvent): void {
if (event.keyCode === 27) {
props.onClose();
}
}
document.addEventListener("keydown", closeHandler);
return () => {
document.removeEventListener("keydown", closeHandler);
};
}, []);
function kill(): void {
killWorkerScript(props.script, props.script.server, true);
props.onClose();
}
function drag(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
const c = container.current;
if (c === null) return;
event.preventDefault();
let x = event.clientX;
let y = event.clientY;
let left = c.offsetLeft + c.clientWidth / 2;
let top = c.offsetTop + c.clientWidth / 5;
function mouseMove(event: MouseEvent): void {
const c = container.current;
if (c === null) return;
left += event.clientX - x;
top += event.clientY - y;
c.style.left = left + "px";
c.style.top = top + "px";
// reset right and bottom to avoid the window stretching
c.style.right = "";
c.style.bottom = "";
x = event.clientX;
y = event.clientY;
}
function mouseUp(): void {
document.removeEventListener("mouseup", mouseUp);
document.removeEventListener("mousemove", mouseMove);
}
document.addEventListener("mouseup", mouseUp);
document.addEventListener("mousemove", mouseMove);
}
return (
<Paper
style={{
display: "flex",
flexFlow: "column",
backgroundColor: "gray",
width: "50%",
position: "fixed",
left: "50%",
top: "40%",
margin: "-10% 0 0 -25%",
height: "auto",
maxHeight: "50%",
zIndex: 10,
border: "2px solid $hacker-green",
}}
ref={container}
>
<Paper
style={{
cursor: "grab",
}}
>
<Box display="flex" alignItems="center" onMouseDown={drag}>
<Typography color="primary" variant="h6" noWrap component="div">
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
</Typography>
<Box display="flex" marginLeft="auto">
<Button onClick={kill}>Kill Script</Button>
<Button onClick={props.onClose}>Close</Button>
</Box>
</Box>
</Paper>
<Paper>
{props.script.logs.map(
(line: string, i: number): JSX.Element => (
<Typography key={i} style={{ whiteSpace: "pre-line" }}>
{line}
<br />
</Typography>
),
)}
</Paper>
</Paper>
);
}

4
src/ui/React/WorldMap.tsx
View File

@ -33,7 +33,7 @@ interface IProps {
export function WorldMap(props: IProps): React.ReactElement {
// prettier-ignore
return (
<div className="noselect">
<>
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> ,_ . ._. _. .</Typography>
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~-</Typography>
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_</Typography>
@ -56,6 +56,6 @@ export function WorldMap(props: IProps): React.ReactElement {
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> / ,' ~</Typography>
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> ',| ~</Typography>
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> ~'</Typography>
</div>
</>
);
}

5
webpack.config.js
View File

@ -12,6 +12,7 @@ module.exports = (env, argv) => {
const isDevServer = (env || {}).devServer === true;
const runInContainer = (env || {}).runInContainer === true;
const isDevelopment = argv.mode === "development";
const isFastRefresh = argv.fast === "true";
const outputDirectory = isDevServer ? "dist-dev" : "dist";
const entry = "./src/index.tsx";
@ -130,7 +131,7 @@ module.exports = (env, argv) => {
columns: true,
module: true,
}),
isDevelopment && new ReactRefreshWebpackPlugin(),
isFastRefresh && new ReactRefreshWebpackPlugin(),
new DeadCodePlugin({
patterns: ["src/**/*.(js|jsx|css|ts|tsx)"],
exclude: ["**/*.(stories|spec).(js|jsx)"],
@ -150,7 +151,7 @@ module.exports = (env, argv) => {
use: {
loader: "babel-loader",
options: {
plugins: [isDevelopment && require.resolve("react-refresh/babel")].filter(Boolean),
plugins: [isFastRefresh && require.resolve("react-refresh/babel")].filter(Boolean),
cacheDirectory: true,
},
},