mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-22 22:22:26 +01:00
IMPROVEMENT: partial migration @mui/styles to tss-react (#1338)
This commit is contained in:
parent
e622b9b904
commit
cb92643c7e
package-lock.jsonpackage.json
src
Achievements
BitNode/ui
Bladeburner/ui
Casino/CardDeck
Corporation/ui
CotMG/ui
DevMenu/ui
Faction/ui
Gang/ui
Locations/ui
PersonObjects/Sleeve/ui
Sidebar/ui
Terminal
ui
27
package-lock.json
generated
27
package-lock.json
generated
@ -43,7 +43,8 @@
|
|||||||
"react-resizable": "^3.0.5",
|
"react-resizable": "^3.0.5",
|
||||||
"react-syntax-highlighter": "^15.5.0",
|
"react-syntax-highlighter": "^15.5.0",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"sprintf-js": "^1.1.3"
|
"sprintf-js": "^1.1.3",
|
||||||
|
"tss-react": "^4.9.10"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.0",
|
"@babel/core": "^7.23.0",
|
||||||
@ -16896,6 +16897,30 @@
|
|||||||
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
|
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"node_modules/tss-react": {
|
||||||
|
"version": "4.9.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.10.tgz",
|
||||||
|
"integrity": "sha512-uQj+r8mOKy0tv+/GAIzViVG81w/WeTCOF7tjsDyNjlicnWbxtssYwTvVjWT4lhWh5FSznDRy6RFp0BDdoLbxyg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/cache": "*",
|
||||||
|
"@emotion/serialize": "*",
|
||||||
|
"@emotion/utils": "*"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/react": "^11.4.1",
|
||||||
|
"@emotion/server": "^11.4.0",
|
||||||
|
"@mui/material": "^5.0.0",
|
||||||
|
"react": "^16.8.0 || ^17.0.2 || ^18.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/server": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"@mui/material": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/type-check": {
|
"node_modules/type-check": {
|
||||||
"version": "0.4.0",
|
"version": "0.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
|
||||||
|
@ -43,7 +43,8 @@
|
|||||||
"react-resizable": "^3.0.5",
|
"react-resizable": "^3.0.5",
|
||||||
"react-syntax-highlighter": "^15.5.0",
|
"react-syntax-highlighter": "^15.5.0",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"sprintf-js": "^1.1.3"
|
"sprintf-js": "^1.1.3",
|
||||||
|
"tss-react": "^4.9.10"
|
||||||
},
|
},
|
||||||
"description": "A cyberpunk-themed incremental game",
|
"description": "A cyberpunk-themed incremental game",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -86,13 +87,13 @@
|
|||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
"react-refresh": "^0.14.0",
|
"react-refresh": "^0.14.0",
|
||||||
|
"rehype-mathjax": "^4.0.3",
|
||||||
|
"remark-math": "^5.1.1",
|
||||||
"style-loader": "^3.3.3",
|
"style-loader": "^3.3.3",
|
||||||
"typescript": "^5.2.2",
|
"typescript": "^5.2.2",
|
||||||
"webpack": "^5.88.2",
|
"webpack": "^5.88.2",
|
||||||
"webpack-cli": "^5.1.4",
|
"webpack-cli": "^5.1.4",
|
||||||
"webpack-dev-server": "^4.15.2",
|
"webpack-dev-server": "^4.15.2"
|
||||||
"remark-math": "^5.1.1",
|
|
||||||
"rehype-mathjax": "^4.0.3"
|
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14"
|
"node": ">=14"
|
||||||
|
@ -1,26 +1,22 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
|
|
||||||
import { AchievementList } from "./AchievementList";
|
import { AchievementList } from "./AchievementList";
|
||||||
import { achievements } from "./Achievements";
|
import { achievements } from "./Achievements";
|
||||||
import { Typography } from "@mui/material";
|
import { Typography } from "@mui/material";
|
||||||
import { Player } from "@player";
|
import { Player } from "@player";
|
||||||
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
root: {
|
root: {
|
||||||
width: 50,
|
width: 50,
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
userSelect: "none",
|
userSelect: "none",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function AchievementsRoot(): JSX.Element {
|
export function AchievementsRoot(): JSX.Element {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<div className={classes.root} style={{ width: "90%" }}>
|
<div className={classes.root} style={{ width: "90%" }}>
|
||||||
<Typography variant="h4">Achievements</Typography>
|
<Typography variant="h4">Achievements</Typography>
|
||||||
|
@ -3,8 +3,7 @@ import { BitNodes } from "../BitNode";
|
|||||||
import { PortalModal } from "./PortalModal";
|
import { PortalModal } from "./PortalModal";
|
||||||
import { CinematicText } from "../../ui/React/CinematicText";
|
import { CinematicText } from "../../ui/React/CinematicText";
|
||||||
import { Player } from "@player";
|
import { Player } from "@player";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Tooltip from "@mui/material/Tooltip";
|
import Tooltip from "@mui/material/Tooltip";
|
||||||
@ -12,8 +11,7 @@ import { Settings } from "../../Settings/Settings";
|
|||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import { CompletedProgramName } from "@enums";
|
import { CompletedProgramName } from "@enums";
|
||||||
|
|
||||||
const useStyles = makeStyles(() =>
|
const useStyles = makeStyles()(() => ({
|
||||||
createStyles({
|
|
||||||
portal: {
|
portal: {
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
fontFamily: "inherit",
|
fontFamily: "inherit",
|
||||||
@ -37,8 +35,7 @@ const useStyles = makeStyles(() =>
|
|||||||
level3: {
|
level3: {
|
||||||
color: Settings.theme.bnlvl3,
|
color: Settings.theme.bnlvl3,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
interface IPortalProps {
|
interface IPortalProps {
|
||||||
n: number;
|
n: number;
|
||||||
@ -48,7 +45,7 @@ interface IPortalProps {
|
|||||||
}
|
}
|
||||||
function BitNodePortal(props: IPortalProps): React.ReactElement {
|
function BitNodePortal(props: IPortalProps): React.ReactElement {
|
||||||
const [portalOpen, setPortalOpen] = useState(false);
|
const [portalOpen, setPortalOpen] = useState(false);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const bitNode = BitNodes[`BitNode${props.n}`];
|
const bitNode = BitNodes[`BitNode${props.n}`];
|
||||||
if (bitNode == null) {
|
if (bitNode == null) {
|
||||||
return <>O</>;
|
return <>O</>;
|
||||||
|
@ -5,16 +5,14 @@ import { KEY } from "../../utils/helpers/keyCodes";
|
|||||||
|
|
||||||
import { Box, List, ListItem, Paper, TextField, Typography } from "@mui/material";
|
import { Box, List, ListItem, Paper, TextField, Typography } from "@mui/material";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import { useRerender } from "../../ui/React/hooks";
|
import { useRerender } from "../../ui/React/hooks";
|
||||||
|
|
||||||
interface ILineProps {
|
interface ILineProps {
|
||||||
content: React.ReactNode;
|
content: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
textfield: {
|
textfield: {
|
||||||
margin: theme.spacing(0),
|
margin: theme.spacing(0),
|
||||||
width: "100%",
|
width: "100%",
|
||||||
@ -33,8 +31,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
padding: theme.spacing(0),
|
padding: theme.spacing(0),
|
||||||
height: "100%",
|
height: "100%",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
function Line(props: ILineProps): React.ReactElement {
|
function Line(props: ILineProps): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
@ -49,7 +46,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function Console(props: IProps): React.ReactElement {
|
export function Console(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const [command, setCommand] = useState("");
|
const [command, setCommand] = useState("");
|
||||||
const consoleInput = useRef<HTMLInputElement>(null);
|
const consoleInput = useRef<HTMLInputElement>(null);
|
||||||
useRerender(1000);
|
useRerender(1000);
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import React, { FC } from "react";
|
import React, { FC } from "react";
|
||||||
import { Card, Suit } from "./Card";
|
import { Card, Suit } from "./Card";
|
||||||
|
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@ -10,8 +9,7 @@ interface Props {
|
|||||||
hidden?: boolean;
|
hidden?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(() =>
|
const useStyles = makeStyles()(() => ({
|
||||||
createStyles({
|
|
||||||
card: {
|
card: {
|
||||||
padding: "10px",
|
padding: "10px",
|
||||||
border: "solid 1px #808080",
|
border: "solid 1px #808080",
|
||||||
@ -34,11 +32,10 @@ const useStyles = makeStyles(() =>
|
|||||||
fontSize: "20px",
|
fontSize: "20px",
|
||||||
fontFamily: "sans-serif",
|
fontFamily: "sans-serif",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export const ReactCard: FC<Props> = ({ card, hidden }) => {
|
export const ReactCard: FC<Props> = ({ card, hidden }) => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
let suit: React.ReactNode;
|
let suit: React.ReactNode;
|
||||||
switch (card.suit) {
|
switch (card.suit) {
|
||||||
case Suit.Clubs:
|
case Suit.Clubs:
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
// React Component for displaying an Industry's warehouse information
|
// React Component for displaying an Industry's warehouse information
|
||||||
// (right-side panel in the Industry UI)
|
// (right-side panel in the Industry UI)
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { createStyles, makeStyles } from "@mui/styles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
|
import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
|
||||||
import * as corpConstants from "../data/Constants";
|
import * as corpConstants from "../data/Constants";
|
||||||
import { CityName, CorpUnlockName } from "@enums";
|
import { CityName, CorpUnlockName } from "@enums";
|
||||||
@ -32,16 +32,14 @@ interface WarehouseProps {
|
|||||||
rerender: () => void;
|
rerender: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(() =>
|
const useStyles = makeStyles()(() => ({
|
||||||
createStyles({
|
|
||||||
retainHeight: {
|
retainHeight: {
|
||||||
minHeight: "3em",
|
minHeight: "3em",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
function WarehouseRoot(props: WarehouseProps): React.ReactElement {
|
function WarehouseRoot(props: WarehouseProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const corp = useCorporation();
|
const corp = useCorporation();
|
||||||
const division = useDivision();
|
const division = useDivision();
|
||||||
const [smartSupplyOpen, setSmartSupplyOpen] = useState(false);
|
const [smartSupplyOpen, setSmartSupplyOpen] = useState(false);
|
||||||
|
@ -2,19 +2,16 @@ import * as React from "react";
|
|||||||
import { formatMoney } from "../../ui/formatNumber";
|
import { formatMoney } from "../../ui/formatNumber";
|
||||||
import { Corporation } from "../Corporation";
|
import { Corporation } from "../Corporation";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
unbuyable: {
|
unbuyable: {
|
||||||
color: theme.palette.action.disabled,
|
color: theme.palette.action.disabled,
|
||||||
},
|
},
|
||||||
money: {
|
money: {
|
||||||
color: theme.colors.money,
|
color: theme.colors.money,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
money: number;
|
money: number;
|
||||||
@ -22,7 +19,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function MoneyCost(props: IProps): React.ReactElement {
|
export function MoneyCost(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
if (!(props.corp.funds > props.money)) return <span className={classes.unbuyable}>{formatMoney(props.money)}</span>;
|
if (!(props.corp.funds > props.money)) return <span className={classes.unbuyable}>{formatMoney(props.money)}</span>;
|
||||||
|
|
||||||
return <span className={classes.money}>{formatMoney(props.money)}</span>;
|
return <span className={classes.money}>{formatMoney(props.money)}</span>;
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
|
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import { TableCell as MuiTableCell, TableCellProps } from "@mui/material";
|
import { TableCell as MuiTableCell, TableCellProps } from "@mui/material";
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles()({
|
||||||
root: {
|
root: {
|
||||||
border: "1px solid white",
|
border: "1px solid white",
|
||||||
width: "5px",
|
width: "5px",
|
||||||
@ -16,7 +16,7 @@ export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
|
|||||||
<MuiTableCell
|
<MuiTableCell
|
||||||
{...props}
|
{...props}
|
||||||
classes={{
|
classes={{
|
||||||
root: useStyles().root,
|
root: useStyles().classes.root,
|
||||||
...props.classes,
|
...props.classes,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -2,7 +2,7 @@ import React, { useCallback } from "react";
|
|||||||
|
|
||||||
import { Accordion, AccordionSummary, AccordionDetails, Button, ButtonGroup, Typography } from "@mui/material";
|
import { Accordion, AccordionSummary, AccordionDetails, Button, ButtonGroup, Typography } from "@mui/material";
|
||||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||||
import { makeStyles } from "@mui/styles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
import { Player } from "@player";
|
import { Player } from "@player";
|
||||||
import { Sleeve } from "../../PersonObjects/Sleeve/Sleeve";
|
import { Sleeve } from "../../PersonObjects/Sleeve/Sleeve";
|
||||||
@ -11,7 +11,7 @@ import { MaxSleevesFromCovenant } from "../../PersonObjects/Sleeve/SleeveCovenan
|
|||||||
|
|
||||||
// Update as additional BitNodes get implemented
|
// Update as additional BitNodes get implemented
|
||||||
const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
|
const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles()({
|
||||||
group: {
|
group: {
|
||||||
display: "inline-flex",
|
display: "inline-flex",
|
||||||
placeItems: "center",
|
placeItems: "center",
|
||||||
@ -23,7 +23,7 @@ const useStyles = makeStyles({
|
|||||||
});
|
});
|
||||||
|
|
||||||
export function SourceFilesDev({ parentRerender }: { parentRerender: () => void }): React.ReactElement {
|
export function SourceFilesDev({ parentRerender }: { parentRerender: () => void }): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
const setSF = useCallback(
|
const setSF = useCallback(
|
||||||
(sfN: number, sfLvl: number) => () => {
|
(sfN: number, sfLvl: number) => () => {
|
||||||
|
@ -11,8 +11,7 @@ import { Reputation } from "../../ui/React/Reputation";
|
|||||||
import { Favor } from "../../ui/React/Favor";
|
import { Favor } from "../../ui/React/Favor";
|
||||||
import { MathJax } from "better-react-mathjax";
|
import { MathJax } from "better-react-mathjax";
|
||||||
|
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Tooltip from "@mui/material/Tooltip";
|
import Tooltip from "@mui/material/Tooltip";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
@ -24,14 +23,12 @@ interface IProps {
|
|||||||
factionInfo: FactionInfo;
|
factionInfo: FactionInfo;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(() =>
|
const useStyles = makeStyles()({
|
||||||
createStyles({
|
|
||||||
noformat: {
|
noformat: {
|
||||||
whiteSpace: "pre-wrap",
|
whiteSpace: "pre-wrap",
|
||||||
lineHeight: "1em",
|
lineHeight: "1em",
|
||||||
},
|
},
|
||||||
}),
|
});
|
||||||
);
|
|
||||||
|
|
||||||
function DefaultAssignment(): React.ReactElement {
|
function DefaultAssignment(): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
@ -46,7 +43,7 @@ function DefaultAssignment(): React.ReactElement {
|
|||||||
|
|
||||||
export function Info(props: IProps): React.ReactElement {
|
export function Info(props: IProps): React.ReactElement {
|
||||||
useRerender(200);
|
useRerender(200);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
const Assignment = props.factionInfo.assignment ?? DefaultAssignment;
|
const Assignment = props.factionInfo.assignment ?? DefaultAssignment;
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function GangMemberStats(props: IProps): React.ReactElement {
|
export function GangMemberStats(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
const asc = {
|
const asc = {
|
||||||
hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
|
hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
|
||||||
|
@ -18,15 +18,13 @@ import { Page } from "../../ui/Router";
|
|||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
city: City;
|
city: City;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
location: {
|
location: {
|
||||||
color: theme.colors.maplocation,
|
color: theme.colors.maplocation,
|
||||||
whiteSpace: "nowrap",
|
whiteSpace: "nowrap",
|
||||||
@ -34,8 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
padding: "0px",
|
padding: "0px",
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
function toLocation(location: Location): void {
|
function toLocation(location: Location): void {
|
||||||
if (location.name === LocationName.TravelAgency) {
|
if (location.name === LocationName.TravelAgency) {
|
||||||
@ -97,7 +94,7 @@ function ASCIICity(props: IProps): React.ReactElement {
|
|||||||
Y: 24,
|
Y: 24,
|
||||||
Z: 25,
|
Z: 25,
|
||||||
};
|
};
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
const lineElems = (s: string): (string | React.ReactElement)[] => {
|
const lineElems = (s: string): (string | React.ReactElement)[] => {
|
||||||
const elems: (string | React.ReactElement)[] = [];
|
const elems: (string | React.ReactElement)[] = [];
|
||||||
|
@ -33,7 +33,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function StatsElement(props: IProps): React.ReactElement {
|
export function StatsElement(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Table sx={{ display: "table", mb: 1, width: "100%" }}>
|
<Table sx={{ display: "table", mb: 1, width: "100%" }}>
|
||||||
@ -109,7 +109,7 @@ export function StatsElement(props: IProps): React.ReactElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function EarningsElement(props: IProps): React.ReactElement {
|
export function EarningsElement(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
let data: (string | JSX.Element)[][] = [];
|
let data: (string | JSX.Element)[][] = [];
|
||||||
if (isSleeveCrimeWork(props.sleeve.currentWork)) {
|
if (isSleeveCrimeWork(props.sleeve.currentWork)) {
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import React, { useMemo, useCallback, useState, useEffect } from "react";
|
import React, { useMemo, useCallback, useState, useEffect } from "react";
|
||||||
import { KEYCODE } from "../../utils/helpers/keyCodes";
|
import { KEYCODE } from "../../utils/helpers/keyCodes";
|
||||||
import { styled, Theme, CSSObject } from "@mui/material/styles";
|
import { styled, Theme, CSSObject } from "@mui/material/styles";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import MuiDrawer from "@mui/material/Drawer";
|
import MuiDrawer from "@mui/material/Drawer";
|
||||||
import List from "@mui/material/List";
|
import List from "@mui/material/List";
|
||||||
import Divider from "@mui/material/Divider";
|
import Divider from "@mui/material/Divider";
|
||||||
@ -100,14 +99,12 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open"
|
|||||||
}),
|
}),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
active: {
|
active: {
|
||||||
borderLeft: "3px solid " + theme.palette.primary.main,
|
borderLeft: "3px solid " + theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
listitem: {},
|
listitem: {},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function SidebarRoot(props: { page: Page }): React.ReactElement {
|
export function SidebarRoot(props: { page: Page }): React.ReactElement {
|
||||||
useRerender(200);
|
useRerender(200);
|
||||||
@ -256,7 +253,7 @@ export function SidebarRoot(props: { page: Page }): React.ReactElement {
|
|||||||
return () => document.removeEventListener("keydown", handleShortcuts);
|
return () => document.removeEventListener("keydown", handleShortcuts);
|
||||||
}, [canJob, clickPage, props.page]);
|
}, [canJob, clickPage, props.page]);
|
||||||
|
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const [open, setOpen] = useState(Settings.IsSidebarOpened);
|
const [open, setOpen] = useState(Settings.IsSidebarOpened);
|
||||||
const toggleDrawer = (): void =>
|
const toggleDrawer = (): void =>
|
||||||
setOpen((old) => {
|
setOpen((old) => {
|
||||||
|
@ -7,8 +7,7 @@ import type { ProgramFilePath } from "../../Paths/ProgramFilePath";
|
|||||||
import type { ContentFilePath } from "../../Paths/ContentFile";
|
import type { ContentFilePath } from "../../Paths/ContentFile";
|
||||||
import type { ScriptFilePath } from "../../Paths/ScriptFilePath";
|
import type { ScriptFilePath } from "../../Paths/ScriptFilePath";
|
||||||
|
|
||||||
import createStyles from "@mui/styles/createStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import { BaseServer } from "../../Server/BaseServer";
|
import { BaseServer } from "../../Server/BaseServer";
|
||||||
import { Router } from "../../ui/GameRoot";
|
import { Router } from "../../ui/GameRoot";
|
||||||
import { Page } from "../../ui/Router";
|
import { Page } from "../../ui/Router";
|
||||||
@ -109,7 +108,7 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
|
|||||||
folders.sort();
|
folders.sort();
|
||||||
|
|
||||||
function SegmentGrid(props: { colSize: string; children: React.ReactChild[] }): React.ReactElement {
|
function SegmentGrid(props: { colSize: string; children: React.ReactChild[] }): React.ReactElement {
|
||||||
const classes = makeStyles({
|
const { classes } = makeStyles()({
|
||||||
segmentGrid: {
|
segmentGrid: {
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "repeat(auto-fill, var(--colSize))",
|
gridTemplateColumns: "repeat(auto-fill, var(--colSize))",
|
||||||
@ -123,15 +122,13 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
function ClickableContentFileLink(props: { path: ScriptFilePath | TextFilePath }): React.ReactElement {
|
function ClickableContentFileLink(props: { path: ScriptFilePath | TextFilePath }): React.ReactElement {
|
||||||
const classes = makeStyles((theme: Theme) =>
|
const { classes } = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
link: {
|
link: {
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
textDecorationLine: "underline",
|
textDecorationLine: "underline",
|
||||||
color: theme.palette.warning.main,
|
color: theme.palette.warning.main,
|
||||||
},
|
},
|
||||||
}),
|
}))();
|
||||||
)();
|
|
||||||
const fullPath = combinePath(baseDirectory, props.path);
|
const fullPath = combinePath(baseDirectory, props.path);
|
||||||
function onClick() {
|
function onClick() {
|
||||||
let content;
|
let content;
|
||||||
@ -155,7 +152,7 @@ export function ls(args: (string | number | boolean)[], server: BaseServer): voi
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ClickableMessageLink(props: { path: FilePath }): React.ReactElement {
|
function ClickableMessageLink(props: { path: FilePath }): React.ReactElement {
|
||||||
const classes = makeStyles({
|
const { classes } = makeStyles()({
|
||||||
link: {
|
link: {
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
textDecorationLine: "underline",
|
textDecorationLine: "underline",
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import { createStyles, makeStyles } from "@mui/styles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import { Paper, Popper, TextField, Typography } from "@mui/material";
|
import { Paper, Popper, TextField, Typography } from "@mui/material";
|
||||||
|
|
||||||
import { KEY, KEYCODE } from "../../utils/helpers/keyCodes";
|
import { KEY, KEYCODE } from "../../utils/helpers/keyCodes";
|
||||||
@ -10,8 +10,7 @@ import { getTabCompletionPossibilities } from "../getTabCompletionPossibilities"
|
|||||||
import { Settings } from "../../Settings/Settings";
|
import { Settings } from "../../Settings/Settings";
|
||||||
import { longestCommonStart } from "../../utils/StringHelperFunctions";
|
import { longestCommonStart } from "../../utils/StringHelperFunctions";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
input: {
|
input: {
|
||||||
backgroundColor: theme.colors.backgroundprimary,
|
backgroundColor: theme.colors.backgroundprimary,
|
||||||
},
|
},
|
||||||
@ -31,8 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
pointerEvents: "none",
|
pointerEvents: "none",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
// Save command in case we de-load this screen.
|
// Save command in case we de-load this screen.
|
||||||
let command = "";
|
let command = "";
|
||||||
@ -46,7 +44,7 @@ export function TerminalInput(): React.ReactElement {
|
|||||||
const [searchResults, setSearchResults] = useState<string[]>([]);
|
const [searchResults, setSearchResults] = useState<string[]>([]);
|
||||||
const [searchResultsIndex, setSearchResultsIndex] = useState(0);
|
const [searchResultsIndex, setSearchResultsIndex] = useState(0);
|
||||||
const [autofilledValue, setAutofilledValue] = useState(false);
|
const [autofilledValue, setAutofilledValue] = useState(false);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
// If we have no data in the current terminal history, let's initialize it from the player save
|
// If we have no data in the current terminal history, let's initialize it from the player save
|
||||||
if (Terminal.commandHistory.length === 0 && Player.terminalCommandHistory.length > 0) {
|
if (Terminal.commandHistory.length === 0 && Player.terminalCommandHistory.length > 0) {
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
import React, { useState, useEffect, useRef } from "react";
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import { Link as MuiLink, Typography } from "@mui/material";
|
import { Link as MuiLink, Typography } from "@mui/material";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
|
||||||
import { Output, Link, RawOutput } from "../OutputTypes";
|
import { Output, Link, RawOutput } from "../OutputTypes";
|
||||||
@ -16,8 +15,7 @@ import { ANSIITypography } from "../../ui/React/ANSIITypography";
|
|||||||
import { useRerender } from "../../ui/React/hooks";
|
import { useRerender } from "../../ui/React/hooks";
|
||||||
import { TerminalActionTimer } from "./TerminalActionTimer";
|
import { TerminalActionTimer } from "./TerminalActionTimer";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
container: {
|
container: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
@ -35,8 +33,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
margin: theme.spacing(0),
|
margin: theme.spacing(0),
|
||||||
width: "100%",
|
width: "100%",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function TerminalRoot(): React.ReactElement {
|
export function TerminalRoot(): React.ReactElement {
|
||||||
const scrollHook = useRef<HTMLUListElement>(null);
|
const scrollHook = useRef<HTMLUListElement>(null);
|
||||||
@ -82,7 +79,7 @@ export function TerminalRoot(): React.ReactElement {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<div className={classes.container}>
|
<div className={classes.container}>
|
||||||
<ul key={key} id="terminal" className={classes.entries} ref={scrollHook}>
|
<ul key={key} id="terminal" className={classes.entries} ref={scrollHook}>
|
||||||
|
@ -16,8 +16,7 @@ import Typography from "@mui/material/Typography";
|
|||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
import ListItemButton from "@mui/material/ListItemButton";
|
import ListItemButton from "@mui/material/ListItemButton";
|
||||||
import ListItemText from "@mui/material/ListItemText";
|
import ListItemText from "@mui/material/ListItemText";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
import Collapse from "@mui/material/Collapse";
|
import Collapse from "@mui/material/Collapse";
|
||||||
import ExpandLess from "@mui/icons-material/ExpandLess";
|
import ExpandLess from "@mui/icons-material/ExpandLess";
|
||||||
import ExpandMore from "@mui/icons-material/ExpandMore";
|
import ExpandMore from "@mui/icons-material/ExpandMore";
|
||||||
@ -29,7 +28,7 @@ import { MoneyRate } from "../React/MoneyRate";
|
|||||||
import { RecentScript } from "../../Netscript/RecentScripts";
|
import { RecentScript } from "../../Netscript/RecentScripts";
|
||||||
import { LogBoxEvents } from "../React/LogBoxManager";
|
import { LogBoxEvents } from "../React/LogBoxManager";
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles()({
|
||||||
noborder: {
|
noborder: {
|
||||||
borderBottom: "none",
|
borderBottom: "none",
|
||||||
},
|
},
|
||||||
@ -40,7 +39,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function RecentScriptAccordion(props: IProps): React.ReactElement {
|
export function RecentScriptAccordion(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
const recentScript = props.recentScript;
|
const recentScript = props.recentScript;
|
||||||
|
|
||||||
|
@ -11,15 +11,13 @@ import { Player } from "@player";
|
|||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
|
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import Table from "@mui/material/Table";
|
import Table from "@mui/material/Table";
|
||||||
import TableBody from "@mui/material/TableBody";
|
import TableBody from "@mui/material/TableBody";
|
||||||
import TableCell from "@mui/material/TableCell";
|
import TableCell from "@mui/material/TableCell";
|
||||||
import TableRow from "@mui/material/TableRow";
|
import TableRow from "@mui/material/TableRow";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
cell: {
|
cell: {
|
||||||
borderBottom: "none",
|
borderBottom: "none",
|
||||||
padding: theme.spacing(1),
|
padding: theme.spacing(1),
|
||||||
@ -29,10 +27,9 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
size: {
|
size: {
|
||||||
width: "1px",
|
width: "1px",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
export function ScriptProduction(): React.ReactElement {
|
export function ScriptProduction(): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const prodRateSinceLastAug = Player.scriptProdSinceLastAug / (Player.playtimeSinceLastAug / 1000);
|
const prodRateSinceLastAug = Player.scriptProdSinceLastAug / (Player.playtimeSinceLastAug / 1000);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -18,7 +18,7 @@ import IconButton from "@mui/material/IconButton";
|
|||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import DeleteIcon from "@mui/icons-material/Delete";
|
||||||
import ListItemButton from "@mui/material/ListItemButton";
|
import ListItemButton from "@mui/material/ListItemButton";
|
||||||
import ListItemText from "@mui/material/ListItemText";
|
import ListItemText from "@mui/material/ListItemText";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
import Collapse from "@mui/material/Collapse";
|
import Collapse from "@mui/material/Collapse";
|
||||||
import ExpandLess from "@mui/icons-material/ExpandLess";
|
import ExpandLess from "@mui/icons-material/ExpandLess";
|
||||||
@ -34,7 +34,7 @@ import { arrayToString } from "../../utils/helpers/ArrayHelpers";
|
|||||||
import { Money } from "../React/Money";
|
import { Money } from "../React/Money";
|
||||||
import { MoneyRate } from "../React/MoneyRate";
|
import { MoneyRate } from "../React/MoneyRate";
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles()({
|
||||||
noborder: {
|
noborder: {
|
||||||
borderBottom: "none",
|
borderBottom: "none",
|
||||||
},
|
},
|
||||||
@ -45,7 +45,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function WorkerScriptAccordion(props: IProps): React.ReactElement {
|
export function WorkerScriptAccordion(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const [open, setOpen] = React.useState(false);
|
const [open, setOpen] = React.useState(false);
|
||||||
const workerScript = props.workerScript;
|
const workerScript = props.workerScript;
|
||||||
const scriptRef = workerScript.scriptRef;
|
const scriptRef = workerScript.scriptRef;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { createStyles, makeStyles } from "@mui/styles";
|
|
||||||
import { Box, Typography } from "@mui/material";
|
import { Box, Typography } from "@mui/material";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
import { Player } from "@player";
|
import { Player } from "@player";
|
||||||
import { installAugmentations } from "../Augmentation/AugmentationHelpers";
|
import { installAugmentations } from "../Augmentation/AugmentationHelpers";
|
||||||
@ -75,9 +75,7 @@ import { GoRoot } from "../Go/ui/GoRoot";
|
|||||||
|
|
||||||
const htmlLocation = location;
|
const htmlLocation = location;
|
||||||
|
|
||||||
const useStyles = makeStyles(
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
(theme: Theme) =>
|
|
||||||
createStyles({
|
|
||||||
root: {
|
root: {
|
||||||
"-ms-overflow-style": "none" /* for Internet Explorer, Edge */,
|
"-ms-overflow-style": "none" /* for Internet Explorer, Edge */,
|
||||||
"scrollbar-width": "none" /* for Firefox */,
|
"scrollbar-width": "none" /* for Firefox */,
|
||||||
@ -88,12 +86,10 @@ const useStyles = makeStyles(
|
|||||||
boxSizing: "border-box",
|
boxSizing: "border-box",
|
||||||
width: "1px",
|
width: "1px",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
{ name: "GameRoot" },
|
|
||||||
);
|
|
||||||
|
|
||||||
const uninitialized = (): void => {
|
const uninitialized = (): void => {
|
||||||
throw new Error("Router called before initialization");
|
throw new Error("Router called before initialization - uninitialized");
|
||||||
};
|
};
|
||||||
|
|
||||||
const MAX_PAGES_IN_HISTORY = 10;
|
const MAX_PAGES_IN_HISTORY = 10;
|
||||||
@ -101,14 +97,14 @@ const MAX_PAGES_IN_HISTORY = 10;
|
|||||||
export let Router: IRouter = {
|
export let Router: IRouter = {
|
||||||
isInitialized: false,
|
isInitialized: false,
|
||||||
page: () => {
|
page: () => {
|
||||||
throw new Error("Router called before initialization");
|
throw new Error("Router called before initialization - page");
|
||||||
},
|
},
|
||||||
allowRouting: uninitialized,
|
allowRouting: uninitialized,
|
||||||
toPage: () => {
|
toPage: () => {
|
||||||
throw new Error("Router called before initialization");
|
throw new Error("Router called before initialization - toPage");
|
||||||
},
|
},
|
||||||
back: () => {
|
back: () => {
|
||||||
throw new Error("Router called before initialization");
|
throw new Error("Router called before initialization - back");
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -119,7 +115,7 @@ function determineStartPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function GameRoot(): React.ReactElement {
|
export function GameRoot(): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
const [pages, setPages] = useState<PageWithContext[]>(() => [{ page: determineStartPage() }]);
|
const [pages, setPages] = useState<PageWithContext[]>(() => [{ page: determineStartPage() }]);
|
||||||
const pageWithContext = pages[0];
|
const pageWithContext = pages[0];
|
||||||
|
@ -14,8 +14,7 @@ import AccountTreeIcon from "@mui/icons-material/AccountTree";
|
|||||||
import StorageIcon from "@mui/icons-material/Storage";
|
import StorageIcon from "@mui/icons-material/Storage";
|
||||||
import LocationCityIcon from "@mui/icons-material/LocationCity";
|
import LocationCityIcon from "@mui/icons-material/LocationCity";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
iTutorialPrevStep,
|
iTutorialPrevStep,
|
||||||
@ -31,8 +30,7 @@ interface IContent {
|
|||||||
canNext: boolean;
|
canNext: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
textfield: {
|
textfield: {
|
||||||
borderBottom: "1px solid " + theme.palette.primary.main,
|
borderBottom: "1px solid " + theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
@ -40,11 +38,10 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
whiteSpace: "pre",
|
whiteSpace: "pre",
|
||||||
backgroundColor: theme.palette.background.paper,
|
backgroundColor: theme.palette.background.paper,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function InteractiveTutorialRoot(): React.ReactElement {
|
export function InteractiveTutorialRoot(): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const rerender = useRerender();
|
const rerender = useRerender();
|
||||||
|
|
||||||
const tutorialScriptName = `n00dles.js`;
|
const tutorialScriptName = `n00dles.js`;
|
||||||
|
@ -2,13 +2,11 @@ import React from "react";
|
|||||||
import SyntaxHighlighter from "react-syntax-highlighter";
|
import SyntaxHighlighter from "react-syntax-highlighter";
|
||||||
import { monokaiSublime as theme } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
import { monokaiSublime as theme } from "react-syntax-highlighter/dist/esm/styles/hljs";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import { CodeProps } from "react-markdown/lib/ast-to-react";
|
import { CodeProps } from "react-markdown/lib/ast-to-react";
|
||||||
import { Typography } from "@mui/material";
|
import { Typography } from "@mui/material";
|
||||||
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
pre: {
|
pre: {
|
||||||
borderRadius: "6px",
|
borderRadius: "6px",
|
||||||
},
|
},
|
||||||
@ -21,11 +19,10 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
display: "inline",
|
display: "inline",
|
||||||
backgroundColor: theme.palette.background.paper,
|
backgroundColor: theme.palette.background.paper,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export const Pre = (props: React.PropsWithChildren<object>): React.ReactElement => {
|
export const Pre = (props: React.PropsWithChildren<object>): React.ReactElement => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<Typography component="span" classes={{ root: classes.pre }}>
|
<Typography component="span" classes={{ root: classes.pre }}>
|
||||||
{props.children}
|
{props.children}
|
||||||
@ -34,7 +31,7 @@ export const Pre = (props: React.PropsWithChildren<object>): React.ReactElement
|
|||||||
};
|
};
|
||||||
|
|
||||||
const InlineCode = (props: React.PropsWithChildren<CodeProps>): React.ReactElement => (
|
const InlineCode = (props: React.PropsWithChildren<CodeProps>): React.ReactElement => (
|
||||||
<Typography component="span" classes={{ root: useStyles().code }}>
|
<Typography component="span" classes={{ root: useStyles().classes.code }}>
|
||||||
{props.children}
|
{props.children}
|
||||||
</Typography>
|
</Typography>
|
||||||
);
|
);
|
||||||
|
@ -1,12 +1,9 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import { ListItemText, Table, TableCell, TableCellProps, TableRow, Typography } from "@mui/material";
|
import { ListItemText, Table, TableCell, TableCellProps, TableRow, Typography } from "@mui/material";
|
||||||
import { LiProps, TableDataCellProps, TableHeaderCellProps } from "react-markdown/lib/ast-to-react";
|
import { LiProps, TableDataCellProps, TableHeaderCellProps } from "react-markdown/lib/ast-to-react";
|
||||||
|
import { makeStyles } from "tss-react/mui";
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
th: { whiteSpace: "pre", fontWeight: "bold" },
|
th: { whiteSpace: "pre", fontWeight: "bold" },
|
||||||
td: { whiteSpace: "pre" },
|
td: { whiteSpace: "pre" },
|
||||||
blockquote: {
|
blockquote: {
|
||||||
@ -16,8 +13,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
paddingLeft: "16px",
|
paddingLeft: "16px",
|
||||||
paddingRight: "16px",
|
paddingRight: "16px",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export const h1 = (props: React.PropsWithChildren<object>): React.ReactElement => (
|
export const h1 = (props: React.PropsWithChildren<object>): React.ReactElement => (
|
||||||
// We are just going to cheat and lower every h# by 1.
|
// We are just going to cheat and lower every h# by 1.
|
||||||
@ -78,7 +74,7 @@ const fixAlign = (align: React.CSSProperties["textAlign"]): TableCellProps["alig
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Td = (props: React.PropsWithChildren<TableDataCellProps>): React.ReactElement => {
|
export const Td = (props: React.PropsWithChildren<TableDataCellProps>): React.ReactElement => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const align = fixAlign(props.style?.textAlign);
|
const align = fixAlign(props.style?.textAlign);
|
||||||
const content = props.children?.map((child, i) => {
|
const content = props.children?.map((child, i) => {
|
||||||
if (child === "<br />") return <br key={i} />;
|
if (child === "<br />") return <br key={i} />;
|
||||||
@ -94,7 +90,7 @@ export const Td = (props: React.PropsWithChildren<TableDataCellProps>): React.Re
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Th = (props: React.PropsWithChildren<TableHeaderCellProps>): React.ReactElement => {
|
export const Th = (props: React.PropsWithChildren<TableHeaderCellProps>): React.ReactElement => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const align = fixAlign(props.style?.textAlign);
|
const align = fixAlign(props.style?.textAlign);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -115,6 +111,6 @@ export const tr = (props: React.PropsWithChildren<object>): React.ReactElement =
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Blockquote = (props: React.PropsWithChildren<object>): React.ReactElement => {
|
export const Blockquote = (props: React.PropsWithChildren<object>): React.ReactElement => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return <blockquote className={classes.blockquote}>{props.children}</blockquote>;
|
return <blockquote className={classes.blockquote}>{props.children}</blockquote>;
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import { Typography } from "@mui/material";
|
import { Typography } from "@mui/material";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import { Settings } from "../../Settings/Settings";
|
import { Settings } from "../../Settings/Settings";
|
||||||
|
|
||||||
@ -10,8 +9,7 @@ import { Settings } from "../../Settings/Settings";
|
|||||||
// eslint-disable-next-line no-control-regex
|
// eslint-disable-next-line no-control-regex
|
||||||
const ANSI_ESCAPE = new RegExp("\u{001b}\\[(?<code>.*?)m", "ug");
|
const ANSI_ESCAPE = new RegExp("\u{001b}\\[(?<code>.*?)m", "ug");
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
success: {
|
success: {
|
||||||
whiteSpace: "pre-wrap",
|
whiteSpace: "pre-wrap",
|
||||||
overflowWrap: "anywhere",
|
overflowWrap: "anywhere",
|
||||||
@ -47,8 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
color: theme.palette.warning.main,
|
color: theme.palette.warning.main,
|
||||||
"--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
|
"--padForFlushBg": (Settings.styles.lineHeight - 1) / 2 + "em",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
const lineClass = (classes: Record<string, string>, s: string): string => {
|
const lineClass = (classes: Record<string, string>, s: string): string => {
|
||||||
const lineClassMap: Record<string, string> = {
|
const lineClassMap: Record<string, string> = {
|
||||||
@ -67,7 +64,7 @@ type ANSIITypographyProps = {
|
|||||||
|
|
||||||
export const ANSIITypography = React.memo(function ANSIITypography(props: ANSIITypographyProps): React.ReactElement {
|
export const ANSIITypography = React.memo(function ANSIITypography(props: ANSIITypographyProps): React.ReactElement {
|
||||||
const text = String(props.text);
|
const text = String(props.text);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const parts = [];
|
const parts = [];
|
||||||
|
|
||||||
// Build a look-alike regex match to place at the front of the matches list
|
// Build a look-alike regex match to place at the front of the matches list
|
||||||
|
@ -1,17 +1,14 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
aug: {
|
aug: {
|
||||||
color: theme.colors.combat,
|
color: theme.colors.combat,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function Augmentation({ name }: { name: string }): JSX.Element {
|
export function Augmentation({ name }: { name: string }): JSX.Element {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return <span className={classes.aug}>{name}</span>;
|
return <span className={classes.aug}>{name}</span>;
|
||||||
}
|
}
|
||||||
|
@ -6,8 +6,7 @@ import { Box, Button, IconButton, Table, TableBody, TableCell, TableRow, Tooltip
|
|||||||
import SaveIcon from "@mui/icons-material/Save";
|
import SaveIcon from "@mui/icons-material/Save";
|
||||||
import ClearAllIcon from "@mui/icons-material/ClearAll";
|
import ClearAllIcon from "@mui/icons-material/ClearAll";
|
||||||
import { Theme, useTheme } from "@mui/material/styles";
|
import { Theme, useTheme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
import { Player } from "@player";
|
import { Player } from "@player";
|
||||||
import { formatHp, formatMoney, formatSkill } from "../formatNumber";
|
import { formatHp, formatMoney, formatSkill } from "../formatNumber";
|
||||||
@ -129,7 +128,7 @@ interface DataRowProps {
|
|||||||
cellType: "cellNone" | "cell";
|
cellType: "cellNone" | "cell";
|
||||||
}
|
}
|
||||||
export function DataRow({ name, showBar, color, cellType }: DataRowProps): React.ReactElement {
|
export function DataRow({ name, showBar, color, cellType }: DataRowProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const isSkill = name in skillNameMap;
|
const isSkill = name in skillNameMap;
|
||||||
const skillBar = showBar && isSkill ? <SkillBar name={name as SkillRowName} color={color} /> : <></>;
|
const skillBar = showBar && isSkill ? <SkillBar name={name as SkillRowName} color={color} /> : <></>;
|
||||||
return (
|
return (
|
||||||
@ -171,7 +170,7 @@ export function CharacterOverview({ parentOpen, save, killScripts }: OverviewPro
|
|||||||
}, 600);
|
}, 600);
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, [parentOpen]);
|
}, [parentOpen]);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -243,7 +242,7 @@ function ActionText({ action }: { action: ActionIdentifier }): React.ReactElemen
|
|||||||
}
|
}
|
||||||
|
|
||||||
function BladeburnerText(): React.ReactElement {
|
function BladeburnerText(): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const rerender = useRerender();
|
const rerender = useRerender();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const clearSubscription = OverviewEventEmitter.subscribe(rerender);
|
const clearSubscription = OverviewEventEmitter.subscribe(rerender);
|
||||||
@ -284,7 +283,7 @@ const onClickFocusWork = (): void => {
|
|||||||
Router.toPage(Page.Work);
|
Router.toPage(Page.Work);
|
||||||
};
|
};
|
||||||
function WorkInProgressOverview({ tooltip, children, header }: WorkInProgressOverviewProps): React.ReactElement {
|
function WorkInProgressOverview({ tooltip, children, header }: WorkInProgressOverviewProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
@ -409,8 +408,7 @@ function Work(): React.ReactElement {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
workCell: {
|
workCell: {
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
maxWidth: "200px",
|
maxWidth: "200px",
|
||||||
@ -454,7 +452,6 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
int: {
|
int: {
|
||||||
color: theme.colors.int,
|
color: theme.colors.int,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export { useStyles };
|
export { useStyles };
|
||||||
|
1
src/ui/React/Constants.ts
Normal file
1
src/ui/React/Constants.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export const logBoxBaseZIndex = 1500;
|
@ -1,18 +1,15 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { formatFavor } from "../formatNumber";
|
import { formatFavor } from "../formatNumber";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
favor: {
|
favor: {
|
||||||
color: theme.colors.rep,
|
color: theme.colors.rep,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function Favor({ favor }: { favor: number | string }): React.ReactElement {
|
export function Favor({ favor }: { favor: number | string }): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return <span className={classes.favor}>{typeof favor === "number" ? formatFavor(favor) : favor}</span>;
|
return <span className={classes.favor}>{typeof favor === "number" ? formatFavor(favor) : favor}</span>;
|
||||||
}
|
}
|
||||||
|
@ -1,18 +1,15 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { formatHashes } from "../formatNumber";
|
import { formatHashes } from "../formatNumber";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
money: {
|
money: {
|
||||||
color: theme.colors.money,
|
color: theme.colors.money,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function Hashes({ hashes }: { hashes: number | string }): React.ReactElement {
|
export function Hashes({ hashes }: { hashes: number | string }): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return <span className={classes.money}>{typeof hashes === "number" ? formatHashes(hashes) : hashes}</span>;
|
return <span className={classes.money}>{typeof hashes === "number" ? formatHashes(hashes) : hashes}</span>;
|
||||||
}
|
}
|
||||||
|
@ -15,8 +15,7 @@ import TableCell from "@mui/material/TableCell";
|
|||||||
import Tooltip from "@mui/material/Tooltip";
|
import Tooltip from "@mui/material/Tooltip";
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
|
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
|
|
||||||
import WarningIcon from "@mui/icons-material/Warning";
|
import WarningIcon from "@mui/icons-material/Warning";
|
||||||
@ -41,8 +40,7 @@ import { ComparisonIcon } from "./ComparisonIcon";
|
|||||||
import { SaveData } from "../../../types";
|
import { SaveData } from "../../../types";
|
||||||
import { handleGetSaveDataError } from "../../../Netscript/ErrorMessages";
|
import { handleGetSaveDataError } from "../../../Netscript/ErrorMessages";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
root: {
|
root: {
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
maxWidth: "1000px",
|
maxWidth: "1000px",
|
||||||
@ -83,8 +81,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
skillTitle: {
|
skillTitle: {
|
||||||
textTransform: "capitalize",
|
textTransform: "capitalize",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
// TODO: move to game constants and/or extract as an enum
|
// TODO: move to game constants and/or extract as an enum
|
||||||
const playerSkills: (keyof Skills)[] = ["hacking", "strength", "defense", "dexterity", "agility", "charisma"];
|
const playerSkills: (keyof Skills)[] = ["hacking", "strength", "defense", "dexterity", "agility", "charisma"];
|
||||||
@ -92,7 +89,7 @@ const playerSkills: (keyof Skills)[] = ["hacking", "strength", "defense", "dexte
|
|||||||
let initialAutosave = 0;
|
let initialAutosave = 0;
|
||||||
|
|
||||||
export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): JSX.Element => {
|
export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): JSX.Element => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const [importData, setImportData] = useState<ImportData | undefined>();
|
const [importData, setImportData] = useState<ImportData | undefined>();
|
||||||
const [currentData, setCurrentData] = useState<ImportData | undefined>();
|
const [currentData, setCurrentData] = useState<ImportData | undefined>();
|
||||||
const [isImportModalOpen, { on: openImportModal, off: closeImportModal }] = useBoolean(false);
|
const [isImportModalOpen, { on: openImportModal, off: closeImportModal }] = useBoolean(false);
|
||||||
|
@ -2,14 +2,14 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"
|
|||||||
import { EventEmitter } from "../../utils/EventEmitter";
|
import { EventEmitter } from "../../utils/EventEmitter";
|
||||||
import { RunningScript } from "../../Script/RunningScript";
|
import { RunningScript } from "../../Script/RunningScript";
|
||||||
import { killWorkerScriptByPid } from "../../Netscript/killWorkerScript";
|
import { killWorkerScriptByPid } from "../../Netscript/killWorkerScript";
|
||||||
|
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
|
|
||||||
import Draggable, { DraggableEvent } from "react-draggable";
|
import Draggable, { DraggableEvent } from "react-draggable";
|
||||||
import { ResizableBox, ResizeCallbackData } from "react-resizable";
|
import { ResizableBox, ResizeCallbackData } from "react-resizable";
|
||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
|
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
|
||||||
import CloseIcon from "@mui/icons-material/Close";
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||||
@ -25,7 +25,8 @@ import { Settings } from "../../Settings/Settings";
|
|||||||
import { ANSIITypography } from "./ANSIITypography";
|
import { ANSIITypography } from "./ANSIITypography";
|
||||||
import { useRerender } from "./hooks";
|
import { useRerender } from "./hooks";
|
||||||
import { dialogBoxCreate } from "./DialogBox";
|
import { dialogBoxCreate } from "./DialogBox";
|
||||||
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
import { logBoxBaseZIndex } from "./Constants";
|
||||||
let layerCounter = 0;
|
let layerCounter = 0;
|
||||||
|
|
||||||
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
|
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
|
||||||
@ -143,8 +144,7 @@ interface LogWindowProps {
|
|||||||
hidden: boolean;
|
hidden: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles(() =>
|
const useStyles = makeStyles()({
|
||||||
createStyles({
|
|
||||||
logs: {
|
logs: {
|
||||||
overflowY: "scroll",
|
overflowY: "scroll",
|
||||||
overflowX: "hidden",
|
overflowX: "hidden",
|
||||||
@ -161,15 +161,12 @@ const useStyles = makeStyles(() =>
|
|||||||
padding: "0",
|
padding: "0",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
},
|
},
|
||||||
}),
|
});
|
||||||
);
|
|
||||||
|
|
||||||
export const logBoxBaseZIndex = 1500;
|
|
||||||
|
|
||||||
function LogWindow({ hidden, script, onClose }: LogWindowProps): React.ReactElement {
|
function LogWindow({ hidden, script, onClose }: LogWindowProps): React.ReactElement {
|
||||||
const draggableRef = useRef<HTMLDivElement>(null);
|
const draggableRef = useRef<HTMLDivElement>(null);
|
||||||
const rootRef = useRef<Draggable>(null);
|
const rootRef = useRef<Draggable>(null);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const container = useRef<HTMLDivElement>(null);
|
const container = useRef<HTMLDivElement>(null);
|
||||||
const textArea = useRef<HTMLDivElement>(null);
|
const textArea = useRef<HTMLDivElement>(null);
|
||||||
const rerender = useRerender(Settings.TailRenderInterval);
|
const rerender = useRerender(Settings.TailRenderInterval);
|
||||||
|
@ -4,13 +4,11 @@ import Box from "@mui/material/Box";
|
|||||||
import IconButton from "@mui/material/IconButton";
|
import IconButton from "@mui/material/IconButton";
|
||||||
import Fade from "@mui/material/Fade";
|
import Fade from "@mui/material/Fade";
|
||||||
import M from "@mui/material/Modal";
|
import M from "@mui/material/Modal";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
|
||||||
import { SxProps } from "@mui/system";
|
import { SxProps } from "@mui/system";
|
||||||
import CloseIcon from "@mui/icons-material/Close";
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
modal: {
|
modal: {
|
||||||
display: "flex",
|
display: "flex",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
@ -38,8 +36,7 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
width: 20,
|
width: 20,
|
||||||
height: 20,
|
height: 20,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
interface ModalProps {
|
interface ModalProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@ -49,7 +46,7 @@ interface ModalProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const Modal = ({ open, onClose, children, sx }: ModalProps): React.ReactElement => {
|
export const Modal = ({ open, onClose, children, sx }: ModalProps): React.ReactElement => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
const [content, setContent] = useState(children);
|
const [content, setContent] = useState(children);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) return;
|
if (!open) return;
|
||||||
|
@ -2,26 +2,23 @@ import * as React from "react";
|
|||||||
import { formatMoney } from "../formatNumber";
|
import { formatMoney } from "../formatNumber";
|
||||||
import { Player } from "@player";
|
import { Player } from "@player";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
unbuyable: {
|
unbuyable: {
|
||||||
color: theme.palette.action.disabled,
|
color: theme.palette.action.disabled,
|
||||||
},
|
},
|
||||||
money: {
|
money: {
|
||||||
color: theme.colors.money,
|
color: theme.colors.money,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
money: number | string;
|
money: number | string;
|
||||||
forPurchase?: boolean;
|
forPurchase?: boolean;
|
||||||
}
|
}
|
||||||
export function Money(props: IProps): React.ReactElement {
|
export function Money(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
if (props.forPurchase) {
|
if (props.forPurchase) {
|
||||||
if (typeof props.money !== "number")
|
if (typeof props.money !== "number")
|
||||||
throw new Error("if value is for a purchase, money should be number, contact dev");
|
throw new Error("if value is for a purchase, money should be number, contact dev");
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
import React, { useState, useEffect, useRef, useMemo } from "react";
|
||||||
import Draggable, { DraggableEventHandler } from "react-draggable";
|
import Draggable, { DraggableEventHandler } from "react-draggable";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import Collapse from "@mui/material/Collapse";
|
import Collapse from "@mui/material/Collapse";
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||||
@ -13,7 +13,7 @@ import { Settings } from "../../Settings/Settings";
|
|||||||
import { Box, Button, Typography } from "@mui/material";
|
import { Box, Button, Typography } from "@mui/material";
|
||||||
import { debounce } from "lodash";
|
import { debounce } from "lodash";
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles()({
|
||||||
overviewContainer: {
|
overviewContainer: {
|
||||||
position: "fixed",
|
position: "fixed",
|
||||||
top: 0,
|
top: 0,
|
||||||
@ -68,7 +68,7 @@ export function Overview({ children, mode }: IProps): React.ReactElement {
|
|||||||
const [open, setOpen] = useState(Settings.overview.opened);
|
const [open, setOpen] = useState(Settings.overview.opened);
|
||||||
const [x, setX] = useState(Settings.overview.x);
|
const [x, setX] = useState(Settings.overview.x);
|
||||||
const [y, setY] = useState(Settings.overview.y);
|
const [y, setY] = useState(Settings.overview.y);
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
const CurrentIcon = open ? KeyboardArrowUpIcon : KeyboardArrowDownIcon;
|
const CurrentIcon = open ? KeyboardArrowUpIcon : KeyboardArrowDownIcon;
|
||||||
const LeftIcon = mode === "tutorial" ? SchoolIcon : EqualizerIcon;
|
const LeftIcon = mode === "tutorial" ? SchoolIcon : EqualizerIcon;
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import LinearProgress from "@mui/material/LinearProgress";
|
import LinearProgress from "@mui/material/LinearProgress";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import withStyles from "@mui/styles/withStyles";
|
import { withStyles } from "tss-react/mui";
|
||||||
|
|
||||||
export const ProgressBar = withStyles((theme: Theme) => ({
|
export const ProgressBar = withStyles(LinearProgress, (theme: Theme) => ({
|
||||||
root: {
|
root: {
|
||||||
backgroundColor: theme.palette.background.paper,
|
backgroundColor: theme.palette.background.paper,
|
||||||
},
|
},
|
||||||
@ -10,4 +10,4 @@ export const ProgressBar = withStyles((theme: Theme) => ({
|
|||||||
transition: "none",
|
transition: "none",
|
||||||
backgroundColor: theme.palette.primary.main,
|
backgroundColor: theme.palette.primary.main,
|
||||||
},
|
},
|
||||||
}))(LinearProgress);
|
}));
|
||||||
|
@ -1,19 +1,16 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { formatReputation } from "../formatNumber";
|
import { formatReputation } from "../formatNumber";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import createStyles from "@mui/styles/createStyles";
|
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
reputation: {
|
reputation: {
|
||||||
color: theme.colors.rep,
|
color: theme.colors.rep,
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
export function Reputation({ reputation }: { reputation: number | string }): React.ReactElement {
|
export function Reputation({ reputation }: { reputation: number | string }): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<span className={classes.reputation}>
|
<span className={classes.reputation}>
|
||||||
{typeof reputation === "number" ? formatReputation(reputation) : reputation}
|
{typeof reputation === "number" ? formatReputation(reputation) : reputation}
|
||||||
|
@ -2,17 +2,16 @@ import type { ToastVariant } from "@enums";
|
|||||||
|
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useSnackbar, SnackbarProvider as SB } from "notistack";
|
import { useSnackbar, SnackbarProvider as SB } from "notistack";
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import { EventEmitter } from "../../utils/EventEmitter";
|
import { EventEmitter } from "../../utils/EventEmitter";
|
||||||
import Alert from "@mui/material/Alert";
|
import Alert from "@mui/material/Alert";
|
||||||
import Paper from "@mui/material/Paper";
|
import Paper from "@mui/material/Paper";
|
||||||
import { logBoxBaseZIndex } from "./LogBoxManager";
|
import { logBoxBaseZIndex } from "./Constants";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
children: React.ReactNode | React.ReactNode[];
|
children: React.ReactNode | React.ReactNode[];
|
||||||
}
|
}
|
||||||
|
const useStyles = makeStyles()({
|
||||||
const useStyles = makeStyles(() => ({
|
|
||||||
snackbar: {
|
snackbar: {
|
||||||
// Log popup z-index increments, so let's add a padding to be well above them.
|
// Log popup z-index increments, so let's add a padding to be well above them.
|
||||||
zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
|
zIndex: `${logBoxBaseZIndex + 1000} !important` as any,
|
||||||
@ -21,10 +20,10 @@ const useStyles = makeStyles(() => ({
|
|||||||
alignSelf: "center",
|
alignSelf: "center",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}));
|
});
|
||||||
|
|
||||||
export function SnackbarProvider(props: IProps): React.ReactElement {
|
export function SnackbarProvider(props: IProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<SB
|
<SB
|
||||||
dense
|
dense
|
||||||
|
@ -54,7 +54,7 @@ export function StatsProgressBar({
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function StatsProgressOverviewCell({ progress: skill, color }: IStatsOverviewCellProps): React.ReactElement {
|
export function StatsProgressOverviewCell({ progress: skill, color }: IStatsOverviewCellProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
return (
|
return (
|
||||||
<TableCell
|
<TableCell
|
||||||
component="th"
|
component="th"
|
||||||
|
@ -19,7 +19,7 @@ interface IProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const StatsRow = ({ name, color, children, data }: IProps): React.ReactElement => {
|
export const StatsRow = ({ name, color, children, data }: IProps): React.ReactElement => {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
|
|
||||||
let content = "";
|
let content = "";
|
||||||
if (data) {
|
if (data) {
|
||||||
|
@ -2,7 +2,7 @@ import React, { ReactNode, ReactElement } from "react";
|
|||||||
|
|
||||||
import { Table, TableCell } from "./Table";
|
import { Table, TableCell } from "./Table";
|
||||||
import { TableBody, TableRow, Table as MuiTable, Typography } from "@mui/material";
|
import { TableBody, TableRow, Table as MuiTable, Typography } from "@mui/material";
|
||||||
import { makeStyles } from "@mui/styles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
interface StatsTableProps {
|
interface StatsTableProps {
|
||||||
rows: ReactNode[][];
|
rows: ReactNode[][];
|
||||||
@ -12,14 +12,14 @@ interface StatsTableProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = (paddingLeft: string) =>
|
const useStyles = (paddingLeft: string) =>
|
||||||
makeStyles({
|
makeStyles()({
|
||||||
firstCell: { textAlign: "left" },
|
firstCell: { textAlign: "left" },
|
||||||
nonFirstCell: { textAlign: "right", paddingLeft: paddingLeft },
|
nonFirstCell: { textAlign: "right", paddingLeft: paddingLeft },
|
||||||
})();
|
})();
|
||||||
|
|
||||||
export function StatsTable({ rows, title, wide, paddingLeft }: StatsTableProps): ReactElement {
|
export function StatsTable({ rows, title, wide, paddingLeft }: StatsTableProps): ReactElement {
|
||||||
const T = wide ? MuiTable : Table;
|
const T = wide ? MuiTable : Table;
|
||||||
const classes = useStyles(paddingLeft ?? "0.5em");
|
const { classes } = useStyles(paddingLeft ?? "0.5em");
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{title && <Typography>{title}</Typography>}
|
{title && <Typography>{title}</Typography>}
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { TableCell as MuiTableCell, TableCellProps, Table as MuiTable, TableProps } from "@mui/material";
|
import { TableCell as MuiTableCell, TableCellProps, Table as MuiTable, TableProps } from "@mui/material";
|
||||||
|
|
||||||
import makeStyles from "@mui/styles/makeStyles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
|
|
||||||
const useStyles = makeStyles({
|
const useStyles = makeStyles()({
|
||||||
root: {
|
root: {
|
||||||
borderBottom: "none",
|
borderBottom: "none",
|
||||||
},
|
},
|
||||||
@ -17,7 +17,7 @@ export const TableCell: React.FC<TableCellProps> = (props: TableCellProps) => {
|
|||||||
<MuiTableCell
|
<MuiTableCell
|
||||||
{...props}
|
{...props}
|
||||||
classes={{
|
classes={{
|
||||||
root: useStyles().root,
|
root: useStyles().classes.root,
|
||||||
...props.classes,
|
...props.classes,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@ -29,7 +29,7 @@ export const Table: React.FC<TableProps> = (props: TableProps) => {
|
|||||||
<MuiTable
|
<MuiTable
|
||||||
{...props}
|
{...props}
|
||||||
classes={{
|
classes={{
|
||||||
root: useStyles().small,
|
root: useStyles().classes.small,
|
||||||
...props.classes,
|
...props.classes,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { createStyles, makeStyles } from "@mui/styles";
|
import { makeStyles } from "tss-react/mui";
|
||||||
import { Tooltip, Typography } from "@mui/material";
|
import { Tooltip, Typography } from "@mui/material";
|
||||||
import { Theme } from "@mui/material/styles";
|
import { Theme } from "@mui/material/styles";
|
||||||
|
|
||||||
@ -11,8 +11,7 @@ interface ICityProps {
|
|||||||
onTravel: (city: CityName) => void;
|
onTravel: (city: CityName) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const useStyles = makeStyles((theme: Theme) =>
|
const useStyles = makeStyles()((theme: Theme) => ({
|
||||||
createStyles({
|
|
||||||
travel: {
|
travel: {
|
||||||
color: theme.colors.maplocation,
|
color: theme.colors.maplocation,
|
||||||
lineHeight: "1em",
|
lineHeight: "1em",
|
||||||
@ -24,11 +23,10 @@ const useStyles = makeStyles((theme: Theme) =>
|
|||||||
lineHeight: "1em",
|
lineHeight: "1em",
|
||||||
whiteSpace: "pre",
|
whiteSpace: "pre",
|
||||||
},
|
},
|
||||||
}),
|
}));
|
||||||
);
|
|
||||||
|
|
||||||
function City(props: ICityProps): React.ReactElement {
|
function City(props: ICityProps): React.ReactElement {
|
||||||
const classes = useStyles();
|
const { classes } = useStyles();
|
||||||
if (props.city !== props.currentCity) {
|
if (props.city !== props.currentCity) {
|
||||||
return (
|
return (
|
||||||
<Tooltip title={<Typography>{props.city}</Typography>}>
|
<Tooltip title={<Typography>{props.city}</Typography>}>
|
||||||
|
Loading…
Reference in New Issue
Block a user