Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-27 01:53:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1280 from danielyxie/mui5

Browse Source 
Mui5
This commit is contained in:
hydroflame 2021-09-16 20:14:47 -04:00 committed by GitHub
commit 6d70d9708f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
56 changed files with 2070 additions and 1273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/menupages.scss
View File

@ -8,9 +8,6 @@
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
flex-grow: 1;
overflow-y: scroll;
height: 100vh;
bottom: 0px;
}
#generic-react-container::-webkit-scrollbar {

4
dist/engine.bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/engineStyle.bundle.js vendored
View File

@ -1,2 +1,2 @@
!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1045,0]),o()}({1045:function(n,t,o){"use strict";o.r(t);o(1046),o(1048),o(1050),o(1052),o(1054),o(1056),o(1058),o(1060),o(1062),o(1064),o(1066),o(1068),o(1070),o(1072),o(1074),o(1076),o(1078),o(1080),o(1082),o(1084),o(1086),o(1088),o(1090),o(1092),o(1094),o(1096),o(1098),o(1100),o(1102),o(1104),o(1106)},1048:function(n,t,o){},1050:function(n,t,o){},1052:function(n,t,o){},1054:function(n,t,o){},1056:function(n,t,o){},1058:function(n,t,o){},1060:function(n,t,o){},1062:function(n,t,o){},1064:function(n,t,o){},1066:function(n,t,o){},1068:function(n,t,o){},1070:function(n,t,o){},1072:function(n,t,o){},1074:function(n,t,o){},1076:function(n,t,o){},1078:function(n,t,o){},1080:function(n,t,o){},1082:function(n,t,o){},1084:function(n,t,o){},1086:function(n,t,o){},1088:function(n,t,o){},1090:function(n,t,o){},1092:function(n,t,o){},1094:function(n,t,o){},1096:function(n,t,o){},1098:function(n,t,o){},1100:function(n,t,o){},1102:function(n,t,o){},1104:function(n,t,o){},1106:function(n,t,o){}});
!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1249,0]),o()}({1249:function(n,t,o){"use strict";o.r(t);o(1250),o(1252),o(1254),o(1256),o(1258),o(1260),o(1262),o(1264),o(1266),o(1268),o(1270),o(1272),o(1274),o(1276),o(1278),o(1280),o(1282),o(1284),o(1286),o(1288),o(1290),o(1292),o(1294),o(1296),o(1298),o(1300),o(1302),o(1304),o(1306),o(1308),o(1310)},1252:function(n,t,o){},1254:function(n,t,o){},1256:function(n,t,o){},1258:function(n,t,o){},1260:function(n,t,o){},1262:function(n,t,o){},1264:function(n,t,o){},1266:function(n,t,o){},1268:function(n,t,o){},1270:function(n,t,o){},1272:function(n,t,o){},1274:function(n,t,o){},1276:function(n,t,o){},1278:function(n,t,o){},1280:function(n,t,o){},1282:function(n,t,o){},1284:function(n,t,o){},1286:function(n,t,o){},1288:function(n,t,o){},1290:function(n,t,o){},1292:function(n,t,o){},1294:function(n,t,o){},1296:function(n,t,o){},1298:function(n,t,o){},1300:function(n,t,o){},1302:function(n,t,o){},1304:function(n,t,o){},1306:function(n,t,o){},1308:function(n,t,o){},1310:function(n,t,o){}});
//# sourceMappingURL=engineStyle.bundle.js.map

124
dist/engineStyle.css vendored
View File

@ -1226,117 +1226,11 @@ button {
/**
* Styling for the Character Overview Panel (top-right panel)
*/
#character-overview-wrapper {
#character-overview {
position: fixed;
top: 0;
right: 0; }
#character-overview-container {
display: none;
position: absolute;
/* Stay in place */
right: 0;
top: 0;
height: auto;
/* Full height */
padding: 10px 2px;
border: 2px solid var(--my-highlight-color);
width: auto;
max-width: 280px;
overflow: auto;
/* Enable scroll if needed */
background-color: rgba(57, 54, 54, 0.9);
/* Fallback color */
z-index: 1; }
#character-overview-text {
color: #faffdf; }
#character-overview-text table {
border-collapse: collapse;
margin: auto; }
#character-overview-text td {
padding: 2px;
vertical-align: middle; }
.character-stat-text {
color: #fff;
background-color: #444; }
.character-stat-cell {
text-align: right; }
#character-str-wrapper td,
#character-cha-wrapper td {
padding-top: 10px; }
.character-divider td {
border-top: 1px #aaa solid;
padding-top: 10px; }
#character-hp-wrapper {
color: #dd3434; }
.character-hp-cell {
color: #dd3434; }
#character-money-wrapper {
color: #ffd700; }
.character-money-cell {
color: #ffd700; }
#character-hack-wrapper {
color: #adff2f; }
.character-hack-cell {
color: #adff2f; }
#character-cha-wrapper {
color: #a671d1; }
.character-cha-cell {
color: #a671d1; }
#character-int-wrapper {
color: #6495ed; }
.character-int-cell {
color: #6495ed; }
.character-combat-cell {
color: #faffdf; }
#character-work-wrapper {
color: #adff2f; }
.character-work-cell {
color: #adff2f; }
.character-overview-btn {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 1px 1px 3px #000;
-moz-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
color: #cecece;
display: inline-block;
font-size: 14px;
font-weight: bold;
height: 25px;
background-color: #000;
padding: 5px 8px; }
.character-quick-options {
margin-top: 10px;
text-align: center; }
.character-overview-btn:hover,
.character-overview-btn:focus {
color: #fff;
text-decoration: none;
cursor: pointer; }
/* COLORS */
/* Attributes */
#terminal-container {
@ -1639,17 +1533,15 @@ button {
/* Attributes */
/* CSS for different main menu pages, such as character info, script editor, etc (but excluding
terminal which has its own page) */
.generic-menupage-container {
padding-left: 2px;
#generic-react-container {
-ms-overflow-style: none;
/* for Internet Explorer, Edge */
scrollbar-width: none;
/* for Firefox */
flex-grow: 1; }
#generic-react-container {
padding: 10px;
overflow-y: scroll; }
flex-grow: 1;
overflow-y: scroll;
height: 100vh;
bottom: 0px; }
#generic-react-container::-webkit-scrollbar {
display: none;
@ -3041,7 +2933,9 @@ input[type="checkbox"] {
overflow-x: auto;
overflow: visible;
top: 10px;
width: 45%; }
width: 45%;
vertical-align: top;
margin-top: 10px; }
.cmpy-mgmt-industry-overview-panel {
border: 1px solid #fff;

225
dist/vendor.bundle.js vendored
View File

File diff suppressed because one or more lines are too long

27
index.html
View File

@ -42,21 +42,7 @@
<div id="mainmenu-container" style="display: flex; flex-direction: row">
<!-- Main menu -->
<div id="sidebar" style=""></div>
<!-- Terminal page -->
<div id="terminal-container" style="flex-grow: 1">
<table id="terminal">
<tr id="terminal-input">
<td id="terminal-input-td" tabindex="2">
$
<input type="text" id="terminal-input-text-box" class="terminal-input" tabindex="1" onfocus="this.value = this.value;" autocomplete="off"/>
</td>
</tr>
</table>
</div>
<div class="generic-menupage-container">
<div id="generic-react-container"></div>
</div>
<div id="generic-react-container"></div>
</div>
<div id="infiltration-container" class="generic-fullscreen-container"></div>
@ -89,16 +75,7 @@
</div>
<!-- Character Overview Screen -->
<div id="character-overview-wrapper">
<div id="character-overview-container">
<div id="character-overview-text">
<!-- ReactJS Component -->
</div>
<div class="character-quick-options noselect">
<button id="character-overview-save-button" class="character-overview-btn">Save Game</button>
</div>
</div>
</div>
<div id="character-overview"></div>
<!-- Status text -->
<div id="status-text-container">

1579
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@ -10,9 +10,13 @@
"url": "https://github.com/danielyxie/bitburner/issues"
},
"dependencies": {
"@material-ui/core": "^4.11.3",
"@material-ui/icons": "^4.11.2",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@monaco-editor/react": "^4.2.2",
"@mui/icons-material": "^5.0.0-rc.1",
"@mui/lab": "^5.0.0-alpha.46",
"@mui/material": "^5.0.0-rc.1",
"@mui/styles": "^5.0.0-rc.1",
"@types/js-beautify": "^1.13.2",
"@types/numeral": "0.0.25",
"@types/react": "^17.0.21",

2
src/Casino/Blackjack.tsx
View File

@ -5,7 +5,7 @@ import { Money } from "../ui/React/Money";
import { Game } from "./Game";
import { Deck } from "./CardDeck/Deck";
import { Hand } from "./CardDeck/Hand";
import { InputAdornment } from "@material-ui/core";
import { InputAdornment } from "@mui/material";
import { ReactCard } from "./CardDeck/ReactCard";
import { MuiTextField } from "../ui/React/MuiTextField";
import { MuiButton } from "../ui/React/MuiButton";

2
src/DevMenu.tsx
View File

@ -3,7 +3,7 @@ import { Bladeburner } from "./Bladeburner/Bladeburner";
import { IEngine } from "./IEngine";
import React from "react";
import { Theme } from "./ui/React/Theme";
import { TTheme as Theme } from "./ui/React/Theme";
import { General } from "./DevMenu/ui/General";
import { Stats } from "./DevMenu/ui/Stats";

28
src/DevMenu/ui/Adjuster.tsx
View File

@ -1,11 +1,11 @@
import React, { useState } from "react";
import AddIcon from "@material-ui/icons/Add";
import RemoveIcon from "@material-ui/icons/Remove";
import IconButton from "@material-ui/core/IconButton";
import ExposureZeroIcon from "@material-ui/icons/ExposureZero";
import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
import TextField from "@material-ui/core/TextField";
import Tooltip from "@material-ui/core/Tooltip";
import AddIcon from "@mui/icons-material/Add";
import RemoveIcon from "@mui/icons-material/Remove";
import IconButton from "@mui/material/IconButton";
import ClearIcon from "@mui/icons-material/Clear";
import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
import TextField from "@mui/material/TextField";
import Tooltip from "@mui/material/Tooltip";
interface IProps {
label: string;
@ -37,12 +37,12 @@ export function Adjuster(props: IProps): React.ReactElement {
startAdornment: (
<>
<Tooltip title="Add a lot">
<IconButton color="primary" onClick={tons}>
<IconButton color="primary" onClick={tons} size="large">
<DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />
</IconButton>
</Tooltip>
<Tooltip title="Add">
<IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)}>
<IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)} size="large">
<AddIcon />
</IconButton>
</Tooltip>
@ -51,13 +51,17 @@ export function Adjuster(props: IProps): React.ReactElement {
endAdornment: (
<>
<Tooltip title="Remove">
<IconButton color="primary" onClick={() => subtract(typeof value !== "string" ? value : 0)}>
<IconButton
color="primary"
onClick={() => subtract(typeof value !== "string" ? value : 0)}
size="large"
>
<RemoveIcon />
</IconButton>
</Tooltip>
<Tooltip title="Reset">
<IconButton color="primary" onClick={reset}>
<ExposureZeroIcon />
<IconButton color="primary" onClick={reset} size="large">
<ClearIcon />
</IconButton>
</Tooltip>
</>

28
src/DevMenu/ui/Augmentations.tsx
View File

@ -1,18 +1,18 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Select from "@material-ui/core/Select";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import MenuItem from "@material-ui/core/MenuItem";
import IconButton from "@material-ui/core/IconButton";
import ReplyAllIcon from "@material-ui/icons/ReplyAll";
import ReplyIcon from "@material-ui/icons/Reply";
import ClearIcon from "@material-ui/icons/Clear";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import ReplyAllIcon from "@mui/icons-material/ReplyAll";
import ReplyIcon from "@mui/icons-material/Reply";
import ClearIcon from "@mui/icons-material/Clear";
interface IProps {
player: IPlayer;
@ -21,7 +21,7 @@ interface IProps {
export function Augmentations(props: IProps): React.ReactElement {
const [augmentation, setAugmentation] = useState("Augmented Targeting I");
function setAugmentationDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
function setAugmentationDropdown(event: SelectChangeEvent<string>): void {
setAugmentation(event.target.value as string);
}
function queueAug(): void {
@ -59,17 +59,17 @@ export function Augmentations(props: IProps): React.ReactElement {
value={augmentation}
startAdornment={
<>
<IconButton color="primary" onClick={queueAllAugs}>
<IconButton color="primary" onClick={queueAllAugs} size="large">
<ReplyAllIcon />
</IconButton>
<IconButton color="primary" onClick={queueAug}>
<IconButton color="primary" onClick={queueAug} size="large">
<ReplyIcon />
</IconButton>
</>
}
endAdornment={
<>
<IconButton color="primary" onClick={clearAugs}>
<IconButton color="primary" onClick={clearAugs} size="large">
<ClearIcon />
</IconButton>
</>

8
src/DevMenu/ui/Bladeburner.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Adjuster } from "./Adjuster";
import { IPlayer } from "../../PersonObjects/IPlayer";

16
src/DevMenu/ui/CodingContracts.tsx
View File

@ -1,19 +1,19 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@mui/material/Button";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import { generateContract, generateRandomContract, generateRandomContractOnHome } from "../../CodingContractGenerator";
import { CodingContractTypes } from "../../CodingContracts";
export function CodingContracts(): React.ReactElement {
const [codingcontract, setCodingcontract] = useState("Find Largest Prime Factor");
function setCodingcontractDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
function setCodingcontractDropdown(event: SelectChangeEvent<string>): void {
setCodingcontract(event.target.value as string);
}

16
src/DevMenu/ui/Companies.tsx
View File

@ -1,21 +1,21 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Select from "@material-ui/core/Select";
import Button from "@mui/material/Button";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { Companies as AllCompanies } from "../../Company/Companies";
import MenuItem from "@material-ui/core/MenuItem";
import MenuItem from "@mui/material/MenuItem";
import { Adjuster } from "./Adjuster";
const bigNumber = 1e12;
export function Companies(): React.ReactElement {
const [company, setCompany] = useState("ECorp");
function setCompanyDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
function setCompanyDropdown(event: SelectChangeEvent<string>): void {
setCompany(event.target.value as string);
}
function resetCompanyRep(): void {

10
src/DevMenu/ui/Corporation.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Button from "@mui/material/Button";
import { Adjuster } from "./Adjuster";
import { IPlayer } from "../../PersonObjects/IPlayer";

30
src/DevMenu/ui/Factions.tsx
View File

@ -1,21 +1,21 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Select from "@material-ui/core/Select";
import Button from "@mui/material/Button";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { Adjuster } from "./Adjuster";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { Factions as AllFaction } from "../../Faction/Factions";
import FormControl from "@material-ui/core/FormControl";
import MenuItem from "@material-ui/core/MenuItem";
import IconButton from "@material-ui/core/IconButton";
import ReplyAllIcon from "@material-ui/icons/ReplyAll";
import ReplyIcon from "@material-ui/icons/Reply";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@mui/material/FormControl";
import MenuItem from "@mui/material/MenuItem";
import IconButton from "@mui/material/IconButton";
import ReplyAllIcon from "@mui/icons-material/ReplyAll";
import ReplyIcon from "@mui/icons-material/Reply";
import InputLabel from "@mui/material/InputLabel";
const bigNumber = 1e12;
@ -26,7 +26,7 @@ interface IProps {
export function Factions(props: IProps): React.ReactElement {
const [faction, setFaction] = useState("Illuminati");
function setFactionDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
function setFactionDropdown(event: SelectChangeEvent<string>): void {
setFaction(event.target.value as string);
}
@ -119,10 +119,10 @@ export function Factions(props: IProps): React.ReactElement {
value={faction}
startAdornment={
<>
<IconButton color="primary" onClick={receiveAllInvites}>
<IconButton color="primary" onClick={receiveAllInvites} size="large">
<ReplyAllIcon />
</IconButton>
<IconButton color="primary" onClick={receiveInvite}>
<IconButton color="primary" onClick={receiveInvite} size="large">
<ReplyIcon />
</IconButton>
</>

8
src/DevMenu/ui/Gang.tsx
View File

@ -1,9 +1,9 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Adjuster } from "./Adjuster";
import { IPlayer } from "../../PersonObjects/IPlayer";

10
src/DevMenu/ui/General.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Button from "@mui/material/Button";
import { Money } from "../../ui/React/Money";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { hackWorldDaemon } from "../../RedPill";

16
src/DevMenu/ui/Programs.tsx
View File

@ -1,15 +1,15 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Select from "@material-ui/core/Select";
import Button from "@mui/material/Button";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { Programs as AllPrograms } from "../../Programs/Programs";
import MenuItem from "@material-ui/core/MenuItem";
import MenuItem from "@mui/material/MenuItem";
interface IProps {
player: IPlayer;
@ -17,7 +17,7 @@ interface IProps {
export function Programs(props: IProps): React.ReactElement {
const [program, setProgram] = useState("NUKE.exe");
function setProgramDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
function setProgramDropdown(event: SelectChangeEvent<string>): void {
setProgram(event.target.value as string);
}
function addProgram(): void {

16
src/DevMenu/ui/Servers.tsx
View File

@ -1,20 +1,20 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Select from "@material-ui/core/Select";
import Button from "@mui/material/Button";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { AllServers } from "../../Server/AllServers";
import { HacknetServer } from "../../Hacknet/HacknetServer";
import { GetServerByHostname } from "../../Server/ServerHelpers";
import MenuItem from "@material-ui/core/MenuItem";
import MenuItem from "@mui/material/MenuItem";
export function Servers(): React.ReactElement {
const [server, setServer] = useState("home");
function setServerDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
function setServerDropdown(event: SelectChangeEvent<string>): void {
setServer(event.target.value as string);
}
function rootServer(): void {

10
src/DevMenu/ui/Sleeves.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Button from "@mui/material/Button";
import { IPlayer } from "../../PersonObjects/IPlayer";
interface IProps {

12
src/DevMenu/ui/SourceFiles.tsx
View File

@ -1,14 +1,14 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Button from "@mui/material/Button";
import { PlayerOwnedSourceFile } from "../../SourceFile/PlayerOwnedSourceFile";
import { IPlayer } from "../../PersonObjects/IPlayer";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import ButtonGroup from "@mui/material/ButtonGroup";
// Update as additional BitNodes get implemented
const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

10
src/DevMenu/ui/Stats.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Button from "@mui/material/Button";
import { Adjuster } from "./Adjuster";
import { IPlayer } from "../../PersonObjects/IPlayer";

12
src/DevMenu/ui/StockMarket.tsx
View File

@ -1,12 +1,12 @@
import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import { Money } from "../../ui/React/Money";
import { dialogBoxCreate } from "../../../utils/DialogBox";
import { StockMarket as SM } from "../../StockMarket/StockMarket";

10
src/DevMenu/ui/TimeSkip.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Button from "@material-ui/core/Button";
import Button from "@mui/material/Button";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { saveObject } from "../../SaveObject";
import { IEngine } from "../../IEngine";

24
src/Diagnostic/FileDiagnosticModal.tsx
View File

@ -3,18 +3,18 @@ import { AllServers } from "../Server/AllServers";
import { Modal } from "../ui/React/Modal";
import { numeralWrapper } from "../ui/numeralFormat";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import AccordionDetails from "@material-ui/core/AccordionDetails";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
import AccordionDetails from "@mui/material/AccordionDetails";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
interface IServerProps {
ip: string;

2
src/Infiltration/ui/BackwardGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/BracketGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/BribeGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/CheatCodeGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/Countdown.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
interface IProps {
onFinish: () => void;

2
src/Infiltration/ui/Cyberpunk2077Game.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/Game.tsx
View File

@ -1,7 +1,7 @@
import { IPlayer } from "../../PersonObjects/IPlayer";
import { IEngine } from "../../IEngine";
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { Countdown } from "./Countdown";
import { BracketGame } from "./BracketGame";
import { SlashGame } from "./SlashGame";

6
src/Infiltration/ui/GameTimer.tsx
View File

@ -1,7 +1,7 @@
import LinearProgress from "@material-ui/core/LinearProgress";
import LinearProgress from "@mui/material/LinearProgress";
import React, { useState, useEffect } from "react";
import { withStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import withStyles from '@mui/styles/withStyles';
import Grid from "@mui/material/Grid";
const TimerProgress = withStyles(() => ({
bar: {

2
src/Infiltration/ui/Intro.tsx
View File

@ -2,7 +2,7 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
import { IEngine } from "../../IEngine";
import React from "react";
import { StdButton } from "../../ui/React/StdButton";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
interface IProps {
Player: IPlayer;

2
src/Infiltration/ui/MinesweeperGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/SlashGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

2
src/Infiltration/ui/Victory.tsx
View File

@ -3,7 +3,7 @@ import { IEngine } from "../../IEngine";
import { Factions } from "../../Faction/Factions";
import React, { useState } from "react";
import { StdButton } from "../../ui/React/StdButton";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { Money } from "../../ui/React/Money";
import { Reputation } from "../../ui/React/Reputation";
import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";

2
src/Infiltration/ui/WireCuttingGame.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react";
import Grid from "@material-ui/core/Grid";
import Grid from "@mui/material/Grid";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";

4
src/Programs/ui/ProgramsRoot.tsx
View File

@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { getAvailableCreatePrograms } from "../ProgramHelpers";
import { Box, ButtonGroup, Tooltip, Typography } from "@material-ui/core";
import Button from "@material-ui/core/Button";
import { Box, ButtonGroup, Tooltip, Typography } from "@mui/material";
import Button from "@mui/material/Button";
interface IProps {
player: IPlayer;

135
src/Sidebar/ui/SidebarRoot.tsx
View File

@ -1,47 +1,49 @@
import React, { useState, useEffect } from "react";
import clsx from "clsx";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Typography from "@material-ui/core/Typography";
import Collapse from "@material-ui/core/Collapse";
import { styled, useTheme, Theme, CSSObject } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
import MuiDrawer from "@mui/material/Drawer";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Typography from "@mui/material/Typography";
import Collapse from "@mui/material/Collapse";
import { Theme as BBTheme, colors } from "../../ui/React/Theme";
import { TTheme as BBTheme, colors } from "../../ui/React/Theme";
import ComputerIcon from "@material-ui/icons/Computer";
import LastPageIcon from "@material-ui/icons/LastPage"; // Terminal
import CreateIcon from "@material-ui/icons/Create"; // Create Script
import StorageIcon from "@material-ui/icons/Storage"; // Active Scripts
import BugReportIcon from "@material-ui/icons/BugReport"; // Create Program
import EqualizerIcon from "@material-ui/icons/Equalizer"; // Stats
import ContactsIcon from "@material-ui/icons/Contacts"; // Factions
import DoubleArrowIcon from "@material-ui/icons/DoubleArrow"; // Augmentations
import AccountTreeIcon from "@material-ui/icons/AccountTree"; // Hacknet
import PeopleAltIcon from "@material-ui/icons/PeopleAlt"; // Sleeves
import LocationCityIcon from "@material-ui/icons/LocationCity"; // City
import AirplanemodeActiveIcon from "@material-ui/icons/AirplanemodeActive"; // Travel
import WorkIcon from "@material-ui/icons/Work"; // Job
import TrendingUpIcon from "@material-ui/icons/TrendingUp"; // Stock Market
import FormatBoldIcon from "@material-ui/icons/FormatBold"; // Bladeburner
import BusinessIcon from "@material-ui/icons/Business"; // Corp
import SportsMmaIcon from "@material-ui/icons/SportsMma"; // Gang
import CheckIcon from "@material-ui/icons/Check"; // Milestones
import HelpIcon from "@material-ui/icons/Help"; // Tutorial
import SettingsIcon from "@material-ui/icons/Settings"; // options
import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard"; // Dev
// import MemoryIcon from "@material-ui/icons/Memory";
// import ShareIcon from "@material-ui/icons/Share";
import AccountBoxIcon from "@material-ui/icons/AccountBox";
import PublicIcon from "@material-ui/icons/Public";
import LiveHelpIcon from "@material-ui/icons/LiveHelp";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ComputerIcon from "@mui/icons-material/Computer";
import LastPageIcon from "@mui/icons-material/LastPage"; // Terminal
import CreateIcon from "@mui/icons-material/Create"; // Create Script
import StorageIcon from "@mui/icons-material/Storage"; // Active Scripts
import BugReportIcon from "@mui/icons-material/BugReport"; // Create Program
import EqualizerIcon from "@mui/icons-material/Equalizer"; // Stats
import ContactsIcon from "@mui/icons-material/Contacts"; // Factions
import DoubleArrowIcon from "@mui/icons-material/DoubleArrow"; // Augmentations
import AccountTreeIcon from "@mui/icons-material/AccountTree"; // Hacknet
import PeopleAltIcon from "@mui/icons-material/PeopleAlt"; // Sleeves
import LocationCityIcon from "@mui/icons-material/LocationCity"; // City
import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive"; // Travel
import WorkIcon from "@mui/icons-material/Work"; // Job
import TrendingUpIcon from "@mui/icons-material/TrendingUp"; // Stock Market
import FormatBoldIcon from "@mui/icons-material/FormatBold"; // Bladeburner
import BusinessIcon from "@mui/icons-material/Business"; // Corp
import SportsMmaIcon from "@mui/icons-material/SportsMma"; // Gang
import CheckIcon from "@mui/icons-material/Check"; // Milestones
import HelpIcon from "@mui/icons-material/Help"; // Tutorial
import SettingsIcon from "@mui/icons-material/Settings"; // options
import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard"; // Dev
// import MemoryIcon from "@mui/icons-material/Memory";
// import ShareIcon from "@mui/icons-material/Share";
import AccountBoxIcon from "@mui/icons-material/AccountBox";
import PublicIcon from "@mui/icons-material/Public";
import LiveHelpIcon from "@mui/icons-material/LiveHelp";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { IEngine } from "../../IEngine";
import { IPlayer } from "../../PersonObjects/IPlayer";
@ -57,11 +59,50 @@ import { KEY } from "../../../utils/helpers/keyCodes";
import { FconfSettings } from "../../Fconf/FconfSettings";
import { Page, routing } from "../../ui/navigationTracking";
const drawerWidth = 240;
const openedMixin = (theme: Theme): CSSObject => ({
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
overflowX: "hidden",
});
const closedMixin = (theme: Theme): CSSObject => ({
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: "hidden",
width: `calc(${theme.spacing(7)} + 1px)`,
[theme.breakpoints.up("sm")]: {
width: `calc(${theme.spacing(9)} + 1px)`,
},
});
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
boxSizing: "border-box",
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}),
}));
const useStyles = makeStyles((theme: Theme) =>
createStyles({
drawer: {
width: theme.spacing(31),
flexShrink: 0,
display: "flex",
whiteSpace: "nowrap",
},
drawerOpen: {
@ -338,19 +379,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
const toggleDrawer = (): void => setOpen((old) => !old);
return (
<BBTheme>
<Drawer
variant="permanent"
className={clsx(classes.drawer, {
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
})}
classes={{
paper: clsx({
[classes.drawerOpen]: open,
[classes.drawerClose]: !open,
}),
}}
>
<Drawer open={open} anchor="left" variant="permanent">
<ListItem button onClick={toggleDrawer}>
<ListItemIcon>{!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</ListItemIcon>
<ListItemText primary={<Typography color="primary">Bitburner v{CONSTANTS.Version}</Typography>} />

3
src/Terminal/Terminal.ts
View File

@ -77,7 +77,7 @@ export class Terminal implements ITerminal {
commandHistory: string[] = [];
commandHistoryIndex = 0;
outputHistory: (Output | Link)[] = [{ text: `Bitburner v${CONSTANTS.Version}`, color: "primary" }];
outputHistory: (Output | Link)[] = [new Output(`Bitburner v${CONSTANTS.Version}`, "primary")];
// True if a Coding Contract prompt is opened
contractOpen = false;
@ -489,6 +489,7 @@ export class Terminal implements ITerminal {
}
clear(): void {
// TODO: remove this once we figure out the height issue.
this.outputHistory = [new Output(`Bitburner v${CONSTANTS.Version}`, "primary")];
this.hasChanges = true;
}

17
src/Terminal/ui/TerminalInput.tsx
View File

@ -1,7 +1,9 @@
import React, { useState, useEffect, useRef } from "react";
import Typography from "@material-ui/core/Typography";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Typography from "@mui/material/Typography";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
import TextField from "@mui/material/TextField";
import { KEY } from "../../../utils/helpers/keyCodes";
import { ITerminal } from "../ITerminal";
import { IEngine } from "../../IEngine";
@ -13,21 +15,21 @@ import { FconfSettings } from "../../Fconf/FconfSettings";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
textfield: {
margin: theme.spacing(0),
margin: 0,
width: "100%",
},
input: {
backgroundColor: "#000",
},
nopadding: {
padding: theme.spacing(0),
padding: 0,
},
preformatted: {
whiteSpace: "pre-wrap",
margin: theme.spacing(0),
margin: 0,
},
list: {
padding: theme.spacing(0),
padding: 0,
height: "100%",
},
}),
@ -334,6 +336,7 @@ export function TerminalInput({ terminal, engine, player }: IProps): React.React
</>
)}
<TextField
variant="standard"
color={terminal.action === null ? "primary" : "secondary"}
autoFocus
disabled={terminal.action !== null}

85
src/Terminal/ui/TerminalRoot.tsx
View File

@ -1,10 +1,12 @@
import React, { useState, useEffect } from "react";
import Typography from "@material-ui/core/Typography";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import { Link as MuiLink } from "@material-ui/core";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Box from "@material-ui/core/Box";
import React, { useState, useEffect, useRef } from "react";
import Typography from "@mui/material/Typography";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import { Link as MuiLink } from "@mui/material";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
import Box from "@mui/material/Box";
import { ITerminal, Output, Link } from "../ITerminal";
import { IEngine } from "../../IEngine";
import { IPlayer } from "../../PersonObjects/IPlayer";
@ -45,6 +47,7 @@ interface IProps {
}
export function TerminalRoot({ terminal, engine, player }: IProps): React.ReactElement {
const scrollHook = useRef<HTMLDivElement>(null);
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
@ -57,36 +60,46 @@ export function TerminalRoot({ terminal, engine, player }: IProps): React.ReactE
return () => clearInterval(id);
}, []);
const hook = scrollHook.current;
if (hook !== null) {
setTimeout(() => hook.scrollIntoView(true), 10);
}
const classes = useStyles();
return (
<Box position="fixed" bottom="0" width="100%" px={1}>
<List classes={{ root: classes.list }}>
{terminal.outputHistory.map((item, i) => {
if (item instanceof Output)
return (
<ListItem key={i} classes={{ root: classes.nopadding }}>
<Typography classes={{ root: classes.preformatted }} color={item.color} paragraph={false}>
{item.text}
</Typography>
</ListItem>
);
if (item instanceof Link)
return (
<ListItem key={i} classes={{ root: classes.nopadding }}>
<MuiLink
classes={{ root: classes.preformatted }}
color={"secondary"}
paragraph={false}
onClick={() => terminal.connectToServer(player, item.hostname)}
>
&gt;&nbsp;{item.hostname}
</MuiLink>
</ListItem>
);
})}
</List>
{terminal.action !== null && <ActionTimer terminal={terminal} />}
<TerminalInput player={player} engine={engine} terminal={terminal} />
</Box>
<>
<Box width="100%" minHeight="100vh" px={1}>
<List classes={{ root: classes.list }}>
{terminal.outputHistory.map((item, i) => {
if (item instanceof Output)
return (
<ListItem key={i} classes={{ root: classes.nopadding }}>
<Typography classes={{ root: classes.preformatted }} color={item.color} paragraph={false}>
{item.text}
</Typography>
</ListItem>
);
if (item instanceof Link)
return (
<ListItem key={i} classes={{ root: classes.nopadding }}>
<MuiLink
classes={{ root: classes.preformatted }}
color={"secondary"}
paragraph={false}
onClick={() => terminal.connectToServer(player, item.hostname)}
>
&gt;&nbsp;{item.hostname}
</MuiLink>
</ListItem>
);
})}
</List>
{terminal.action !== null && <ActionTimer terminal={terminal} />}
<div ref={scrollHook}></div>
</Box>
<Box position="sticky" bottom={0} width="100%" px={1}>
<TerminalInput player={player} engine={engine} terminal={terminal} />
</Box>
</>
);
}

504
src/ThirdParty/raphael.min.js vendored
View File

@ -2613,265 +2613,263 @@
});
};
})(ce));
return (
(ue.attr = function (t, r) {
if (t && e.is(t, T) && e.is(t[0], "object"))
for (var i = 0, n = t.length; i < n; i++) this.items[i].attr(t[i]);
else for (var a = 0, s = this.items.length; a < s; a++) this.items[a].attr(t, r);
return this;
}),
(ue.clear = function () {
for (; this.length; ) this.pop();
}),
(ue.splice = function (t, e, r) {
(t = t < 0 ? w(this.length + t, 0) : t), (e = w(0, k(this.length - t, e)));
var i,
n = [],
a = [],
s = [];
for (i = 2; i < arguments.length; i++) s.push(arguments[i]);
for (i = 0; i < e; i++) a.push(this[t + i]);
for (; i < this.length - t; i++) n.push(this[t + i]);
var o = s.length;
for (i = 0; i < o + n.length; i++) this.items[t + i] = this[t + i] = i < o ? s[i] : n[i - o];
for (i = this.items.length = this.length -= e - o; this[i]; ) delete this[i++];
return new he(a);
}),
(ue.exclude = function (t) {
for (var e = 0, r = this.length; e < r; e++) if (this[e] == t) return this.splice(e, 1), !0;
}),
(ue.animate = function (t, r, i, n) {
(e.is(i, "function") || !i) && (n = i || null);
return (ue.attr = function (t, r) {
if (t && e.is(t, T) && e.is(t[0], "object"))
for (var i = 0, n = t.length; i < n; i++) this.items[i].attr(t[i]);
else for (var a = 0, s = this.items.length; a < s; a++) this.items[a].attr(t, r);
return this;
}),
(ue.clear = function () {
for (; this.length; ) this.pop();
}),
(ue.splice = function (t, e, r) {
(t = t < 0 ? w(this.length + t, 0) : t), (e = w(0, k(this.length - t, e)));
var i,
n = [],
a = [],
s = [];
for (i = 2; i < arguments.length; i++) s.push(arguments[i]);
for (i = 0; i < e; i++) a.push(this[t + i]);
for (; i < this.length - t; i++) n.push(this[t + i]);
var o = s.length;
for (i = 0; i < o + n.length; i++) this.items[t + i] = this[t + i] = i < o ? s[i] : n[i - o];
for (i = this.items.length = this.length -= e - o; this[i]; ) delete this[i++];
return new he(a);
}),
(ue.exclude = function (t) {
for (var e = 0, r = this.length; e < r; e++) if (this[e] == t) return this.splice(e, 1), !0;
}),
(ue.animate = function (t, r, i, n) {
(e.is(i, "function") || !i) && (n = i || null);
var a,
s,
o = this.items.length,
l = o,
h = this;
if (!o) return this;
n &&
(s = function () {
!--o && n.call(h);
}),
(i = e.is(i, "string") ? i : s);
var u = e.animation(t, r, i, s);
for (a = this.items[--l].animate(u); l--; )
this.items[l] && !this.items[l].removed && this.items[l].animateWith(a, u, u),
(this.items[l] && !this.items[l].removed) || o--;
return this;
}),
(ue.insertAfter = function (t) {
for (var e = this.items.length; e--; ) this.items[e].insertAfter(t);
return this;
}),
(ue.getBBox = function () {
for (var t = [], e = [], r = [], i = [], n = this.items.length; n--; )
if (!this.items[n].removed) {
var a = this.items[n].getBBox();
t.push(a.x), e.push(a.y), r.push(a.x + a.width), i.push(a.y + a.height);
}
return {
x: (t = k[c](0, t)),
y: (e = k[c](0, e)),
x2: (r = w[c](0, r)),
y2: (i = w[c](0, i)),
width: r - t,
height: i - e,
};
}),
(ue.clone = function (t) {
t = this.paper.set();
for (var e = 0, r = this.items.length; e < r; e++) t.push(this.items[e].clone());
return t;
}),
(ue.toString = function () {
return "Raphaël‘s set";
}),
(ue.glow = function (t) {
var e = this.paper.set();
return (
this.forEach(function (r, i) {
var n = r.glow(t);
n != null &&
n.forEach(function (t, r) {
e.push(t);
});
}),
e
);
}),
(ue.isPointInside = function (t, e) {
var r = !1;
return (
this.forEach(function (i) {
if (i.isPointInside(t, e)) return (r = !0), !1;
}),
r
);
}),
(e.registerFont = function (t) {
if (!t.face) return t;
this.fonts = this.fonts || {};
var e = { w: t.w, face: {}, glyphs: {} },
r = t.face["font-family"];
for (var i in t.face) t.face[o](i) && (e.face[i] = t.face[i]);
if ((this.fonts[r] ? this.fonts[r].push(e) : (this.fonts[r] = [e]), !t.svg))
for (var n in ((e.face["units-per-em"] = F(t.face["units-per-em"], 10)), t.glyphs))
if (t.glyphs[o](n)) {
var a = t.glyphs[n];
if (
((e.glyphs[n] = {
w: a.w,
k: {},
d:
a.d &&
"M" +
a.d.replace(/[mlcxtrv]/g, function (t) {
return (
{
l: "L",
c: "C",
x: "z",
t: "m",
r: "l",
v: "c",
}[t] || "M"
);
}) +
"z",
}),
a.k)
)
for (var s in a.k) a[o](s) && (e.glyphs[n].k[s] = a.k[s]);
}
return t;
}),
(i.getFont = function (t, r, i, n) {
if (
((n = n || "normal"),
(i = i || "normal"),
(r = +r || { normal: 400, bold: 700, lighter: 300, bolder: 800 }[r] || 400),
e.fonts)
) {
var a,
s,
o = this.items.length,
l = o,
h = this;
if (!o) return this;
n &&
(s = function () {
!--o && n.call(h);
}),
(i = e.is(i, "string") ? i : s);
var u = e.animation(t, r, i, s);
for (a = this.items[--l].animate(u); l--; )
this.items[l] && !this.items[l].removed && this.items[l].animateWith(a, u, u),
(this.items[l] && !this.items[l].removed) || o--;
return this;
}),
(ue.insertAfter = function (t) {
for (var e = this.items.length; e--; ) this.items[e].insertAfter(t);
return this;
}),
(ue.getBBox = function () {
for (var t = [], e = [], r = [], i = [], n = this.items.length; n--; )
if (!this.items[n].removed) {
var a = this.items[n].getBBox();
t.push(a.x), e.push(a.y), r.push(a.x + a.width), i.push(a.y + a.height);
}
return {
x: (t = k[c](0, t)),
y: (e = k[c](0, e)),
x2: (r = w[c](0, r)),
y2: (i = w[c](0, i)),
width: r - t,
height: i - e,
};
}),
(ue.clone = function (t) {
t = this.paper.set();
for (var e = 0, r = this.items.length; e < r; e++) t.push(this.items[e].clone());
return t;
}),
(ue.toString = function () {
return "Raphaël‘s set";
}),
(ue.glow = function (t) {
var e = this.paper.set();
return (
this.forEach(function (r, i) {
var n = r.glow(t);
n != null &&
n.forEach(function (t, r) {
e.push(t);
});
}),
e
);
}),
(ue.isPointInside = function (t, e) {
var r = !1;
return (
this.forEach(function (i) {
if (i.isPointInside(t, e)) return (r = !0), !1;
}),
r
);
}),
(e.registerFont = function (t) {
if (!t.face) return t;
this.fonts = this.fonts || {};
var e = { w: t.w, face: {}, glyphs: {} },
r = t.face["font-family"];
for (var i in t.face) t.face[o](i) && (e.face[i] = t.face[i]);
if ((this.fonts[r] ? this.fonts[r].push(e) : (this.fonts[r] = [e]), !t.svg))
for (var n in ((e.face["units-per-em"] = F(t.face["units-per-em"], 10)), t.glyphs))
if (t.glyphs[o](n)) {
var a = t.glyphs[n];
if (
((e.glyphs[n] = {
w: a.w,
k: {},
d:
a.d &&
"M" +
a.d.replace(/[mlcxtrv]/g, function (t) {
return (
{
l: "L",
c: "C",
x: "z",
t: "m",
r: "l",
v: "c",
}[t] || "M"
);
}) +
"z",
}),
a.k)
)
for (var s in a.k) a[o](s) && (e.glyphs[n].k[s] = a.k[s]);
s = e.fonts[t];
if (!s) {
var l = new RegExp("(^|\\s)" + t.replace(/[^\w\d\s+!~.:_-]/g, d) + "(\\s|$)", "i");
for (var h in e.fonts)
if (e.fonts[o](h) && l.test(h)) {
s = e.fonts[h];
break;
}
return t;
}),
(i.getFont = function (t, r, i, n) {
if (
((n = n || "normal"),
(i = i || "normal"),
(r = +r || { normal: 400, bold: 700, lighter: 300, bolder: 800 }[r] || 400),
e.fonts)
) {
var a,
s = e.fonts[t];
if (!s) {
var l = new RegExp("(^|\\s)" + t.replace(/[^\w\d\s+!~.:_-]/g, d) + "(\\s|$)", "i");
for (var h in e.fonts)
if (e.fonts[o](h) && l.test(h)) {
s = e.fonts[h];
break;
}
}
if (s)
for (
var u = 0, c = s.length;
u < c &&
((a = s[u]).face["font-weight"] != r ||
(a.face["font-style"] != i && a.face["font-style"]) ||
a.face["font-stretch"] != n);
u++
);
return a;
}
}),
(i.print = function (t, r, i, a, s, o, l, h) {
(o = o || "middle"), (l = w(k(l || 0, 1), -1)), (h = w(k(h || 1, 3), 1));
var u,
c = x(i)[v](d),
f = 0,
p = 0,
g = d;
if ((e.is(a, "string") && (a = this.getFont(a)), a)) {
u = (s || 16) / a.face["units-per-em"];
if (s)
for (
var y = a.face.bbox[v](n),
m = +y[0],
b = y[3] - y[1],
_ = 0,
B = +y[1] + (o == "baseline" ? b + +a.face.descent : b / 2),
C = 0,
S = c.length;
C < S;
C++
) {
if (c[C] == "\n") (f = 0), (T = 0), (p = 0), (_ += b * h);
else {
var A = (p && a.glyphs[c[C - 1]]) || {},
T = a.glyphs[c[C]];
(f += p ? (A.w || a.w) + ((A.k && A.k[c[C]]) || 0) + a.w * l : 0), (p = 1);
}
T &&
T.d &&
(g += e.transformPath(T.d, ["t", f * u, _ * u, "s", u, u, m, B, "t", (t - m) / u, (r - B) / u]));
var u = 0, c = s.length;
u < c &&
((a = s[u]).face["font-weight"] != r ||
(a.face["font-style"] != i && a.face["font-style"]) ||
a.face["font-stretch"] != n);
u++
);
return a;
}
}),
(i.print = function (t, r, i, a, s, o, l, h) {
(o = o || "middle"), (l = w(k(l || 0, 1), -1)), (h = w(k(h || 1, 3), 1));
var u,
c = x(i)[v](d),
f = 0,
p = 0,
g = d;
if ((e.is(a, "string") && (a = this.getFont(a)), a)) {
u = (s || 16) / a.face["units-per-em"];
for (
var y = a.face.bbox[v](n),
m = +y[0],
b = y[3] - y[1],
_ = 0,
B = +y[1] + (o == "baseline" ? b + +a.face.descent : b / 2),
C = 0,
S = c.length;
C < S;
C++
) {
if (c[C] == "\n") (f = 0), (T = 0), (p = 0), (_ += b * h);
else {
var A = (p && a.glyphs[c[C - 1]]) || {},
T = a.glyphs[c[C]];
(f += p ? (A.w || a.w) + ((A.k && A.k[c[C]]) || 0) + a.w * l : 0), (p = 1);
}
T &&
T.d &&
(g += e.transformPath(T.d, ["t", f * u, _ * u, "s", u, u, m, B, "t", (t - m) / u, (r - B) / u]));
}
return this.path(g).attr({ fill: "#000", stroke: "none" });
}),
(i.add = function (t) {
if (e.is(t, "array"))
for (var r, i = this.set(), n = 0, s = t.length; n < s; n++)
(r = t[n] || {}), a[o](r.type) && i.push(this[r.type]().attr(r));
return i;
}),
(e.format = function (t, r) {
var i = e.is(r, T) ? [0][f](r) : arguments;
return (
t &&
e.is(t, "string") &&
i.length - 1 &&
(t = t.replace(s, function (t, e) {
return i[++e] == null ? d : i[e];
})),
t || d
);
}),
(e.fullfill =
((oe = /\{([^\}]+)\}/g),
(le = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g),
function (t, e) {
return String(t).replace(oe, function (t, r) {
return (function (t, e, r) {
var i = r;
return (
e.replace(le, function (t, e, r, n, a) {
(e = e || n), i && (e in i && (i = i[e]), typeof i == "function" && a && (i = i()));
}),
(i = (i == null || i == r ? t : i) + "")
);
})(t, r, e);
});
})),
(e.ninja = function () {
if (h.was) l.win.Raphael = h.is;
else {
window.Raphael = void 0;
try {
delete window.Raphael;
} catch (t) {}
}
return e;
}),
(e.st = ue),
t.on("raphael.DOMload", function () {
r = !0;
}),
(function (t, r, i) {
t.readyState == null &&
t.addEventListener &&
(t.addEventListener(
"DOMContentLoaded",
(i = function () {
t.removeEventListener("DOMContentLoaded", i, !1), (t.readyState = "complete");
}),
!1,
),
(t.readyState = "loading")),
(function r() {
/in/.test(t.readyState) ? setTimeout(r, 9) : e.eve("raphael.DOMload");
})();
})(document),
e
);
}
return this.path(g).attr({ fill: "#000", stroke: "none" });
}),
(i.add = function (t) {
if (e.is(t, "array"))
for (var r, i = this.set(), n = 0, s = t.length; n < s; n++)
(r = t[n] || {}), a[o](r.type) && i.push(this[r.type]().attr(r));
return i;
}),
(e.format = function (t, r) {
var i = e.is(r, T) ? [0][f](r) : arguments;
return (
t &&
e.is(t, "string") &&
i.length - 1 &&
(t = t.replace(s, function (t, e) {
return i[++e] == null ? d : i[e];
})),
t || d
);
}),
(e.fullfill =
((oe = /\{([^\}]+)\}/g),
(le = /(?:(?:^|\.)(.+?)(?=\[|\.|$|\()|\[('|")(.+?)\2\])(\(\))?/g),
function (t, e) {
return String(t).replace(oe, function (t, r) {
return (function (t, e, r) {
var i = r;
return (
e.replace(le, function (t, e, r, n, a) {
(e = e || n), i && (e in i && (i = i[e]), typeof i == "function" && a && (i = i()));
}),
(i = (i == null || i == r ? t : i) + "")
);
})(t, r, e);
});
})),
(e.ninja = function () {
if (h.was) l.win.Raphael = h.is;
else {
window.Raphael = void 0;
try {
delete window.Raphael;
} catch (t) {}
}
return e;
}),
(e.st = ue),
t.on("raphael.DOMload", function () {
r = !0;
}),
(function (t, r, i) {
t.readyState == null &&
t.addEventListener &&
(t.addEventListener(
"DOMContentLoaded",
(i = function () {
t.removeEventListener("DOMContentLoaded", i, !1), (t.readyState = "complete");
}),
!1,
),
(t.readyState = "loading")),
(function r() {
/in/.test(t.readyState) ? setTimeout(r, 9) : e.eve("raphael.DOMload");
})();
})(document),
e;
}.apply(e, i)) || (t.exports = n);
},
function (t, e, r) {

14
src/engine.jsx
View File

@ -26,7 +26,7 @@ import { SidebarRoot } from "./Sidebar/ui/SidebarRoot";
import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
import { ResleeveRoot } from "./PersonObjects/Resleeving/ui/ResleeveRoot";
import { GameOptionsRoot } from "./ui/React/GameOptionsRoot";
import { Theme } from "./ui/React/Theme";
import { TTheme as Theme } from "./ui/React/Theme";
import { SleeveRoot } from "./PersonObjects/Sleeve/ui/SleeveRoot";
import { displayInfiltrationContent } from "./Infiltration/Helper";
import {
@ -408,6 +408,7 @@ const Engine = {
},
displayCharacterOverviewInfo: function () {
console.log("rendering");
ReactDOM.render(
<Theme>
<CharacterOverview player={Player} save={() => saveObject.saveGame(Engine.indexedDb)} />
@ -803,7 +804,12 @@ const Engine = {
removeLoadingScreen();
}
ReactDOM.render(<SidebarRoot engine={this} player={Player} />, document.getElementById("sidebar"));
ReactDOM.render(
<Theme>
<SidebarRoot engine={this} player={Player} />
</Theme>,
document.getElementById("sidebar"),
);
},
setDisplayElements: function () {
@ -834,6 +840,8 @@ const Engine = {
// Initialization
init: function () {
// Player was working cancel button
Engine.displayCharacterOverviewInfo();
if (Player.isWorking) {
var cancelButton = document.getElementById("work-in-progress-cancel-button");
cancelButton.addEventListener("click", function () {
@ -863,8 +871,6 @@ const Engine = {
}
Engine.loadWorkInProgressContent();
Engine.displayCharacterOverviewInfo();
} else {
Engine.loadTerminalContent();
}

26
src/ui/React/CharacterOverview.tsx
View File

@ -1,23 +1,23 @@
// Root React Component for the Corporation UI
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import makeStyles from '@mui/styles/makeStyles';
import { IPlayer } from "../../PersonObjects/IPlayer";
import { numeralWrapper } from "../../ui/numeralFormat";
import { Reputation } from "./Reputation";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Box from "@material-ui/core/Box";
import Typography from "@material-ui/core/Typography";
import Divider from "@material-ui/core/Divider";
import Button from "@material-ui/core/Button";
import Collapse from "@material-ui/core/Collapse";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse";
import { colors } from "./Theme";

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

@ -1,8 +1,8 @@
import React from "react";
import { Modal } from "./Modal";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
interface IProps {
open: boolean;

50
src/ui/React/GameOptionsRoot.tsx
View File

@ -2,20 +2,23 @@ import React, { useState } from "react";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";
import Grid from "@material-ui/core/Grid";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Link from "@material-ui/core/Link";
import Tooltip from "@material-ui/core/Tooltip";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
import Typography from "@mui/material/Typography";
import Slider from "@mui/material/Slider";
import Grid from "@mui/material/Grid";
import FormControlLabel from "@mui/material/FormControlLabel";
import Switch from "@mui/material/Switch";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import MenuItem from "@mui/material/MenuItem";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import Link from "@mui/material/Link";
import Tooltip from "@mui/material/Tooltip";
import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
import { ConfirmationModal } from "./ConfirmationModal";
@ -24,12 +27,12 @@ import { Settings } from "../../Settings/Settings";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
width: theme.spacing(50),
padding: theme.spacing(2),
width: 50,
padding: 2,
userSelect: "none",
},
pad: {
padding: theme.spacing(2),
padding: 2,
},
}),
);
@ -142,7 +145,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
setDisableTextEffects(event.target.checked);
Settings.DisableTextEffects = event.target.checked;
}
function handleLocaleChange(event: React.ChangeEvent<{ value: unknown }>): void {
function handleLocaleChange(event: SelectChangeEvent<string>): void {
setLocale(event.target.value as string);
Settings.Locale = event.target.value as string;
}
@ -544,10 +547,13 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</Grid>
<FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
<ConfirmationModal
onConfirm={() => {props.delete(); setDeleteOpen(false);}}
open={deleteGameOpen}
onClose={() => setDeleteOpen(false)}
confirmationText={"Really delete your game? (It's permanent!)"}
onConfirm={() => {
props.delete();
setDeleteOpen(false);
}}
open={deleteGameOpen}
onClose={() => setDeleteOpen(false)}
confirmationText={"Really delete your game? (It's permanent!)"}
/>
</div>
);

12
src/ui/React/Modal.tsx
View File

@ -1,8 +1,10 @@
import React from "react";
import { makeStyles, createStyles, Theme } from "@material-ui/core";
import M from "@material-ui/core/Modal";
import Backdrop from "@material-ui/core/Backdrop";
import Fade from "@material-ui/core/Fade";
import { Theme } from "@mui/material";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
import M from "@mui/material/Modal";
import Backdrop from "@mui/material/Backdrop";
import Fade from "@mui/material/Fade";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@ -15,7 +17,7 @@ const useStyles = makeStyles((theme: Theme) =>
backgroundColor: theme.palette.background.paper,
border: "2px solid " + theme.palette.primary.main,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
padding: 2,
maxWidth: "80%",
maxHeight: "80%",
overflow: "auto",

3
src/ui/React/MuiButton.tsx
View File

@ -4,7 +4,8 @@
*/
import React from "react";
import { Button, ButtonProps, makeStyles } from "@material-ui/core";
import { Button, ButtonProps } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles({
// Tries to emulate StdButton in buttons.scss
root: {

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

@ -4,7 +4,9 @@
*/
import React from "react";
import { Paper, PaperProps, makeStyles } from "@material-ui/core";
import { Paper, PaperProps } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
const useStyles = makeStyles({
root: {

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

@ -4,7 +4,9 @@
*/
import React from "react";
import { makeStyles, TextField, TextFieldProps } from "@material-ui/core";
import { TextField, TextFieldProps } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
const backgroundColorStyles = {
backgroundColor: "rgba(57, 54, 54, 0.9)",

3
src/ui/React/Select.tsx
View File

@ -4,7 +4,8 @@
*/
import React from "react";
import { Select as MuiSelect, SelectProps, makeStyles } from "@material-ui/core";
import { Select as MuiSelect, SelectProps } from "@mui/material";
import makeStyles from '@mui/styles/makeStyles';
import { colors } from "./Theme";
const useStyles = makeStyles({

205
src/ui/React/Theme.tsx
View File

@ -1,5 +1,10 @@
import React from "react";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { createTheme, ThemeProvider, Theme, StyledEngineProvider, adaptV4Theme } from "@mui/material/styles";
declare module "@mui/styles/defaultTheme" {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DefaultTheme extends Theme {}
}
export const colors = {
primarylight: "#0f0",
@ -27,7 +32,7 @@ export const colors = {
int: "#6495ed",
};
export const theme = createMuiTheme({
export const theme = createTheme({
palette: {
primary: {
light: colors.primarylight,
@ -54,138 +59,174 @@ export const theme = createMuiTheme({
textTransform: "none",
},
},
overrides: {
components: {
MuiInputBase: {
root: {
backgroundColor: colors.well,
},
input: {
color: colors.primary,
"&::placeholder": {
userSelect: "none",
color: colors.primarydark,
styleOverrides: {
root: {
backgroundColor: colors.well,
},
input: {
color: colors.primary,
"&::placeholder": {
userSelect: "none",
color: colors.primarydark,
},
},
},
},
MuiInput: {
root: {
backgroundColor: colors.well,
borderBottomColor: "#fff",
},
underline: {
"&:hover": {
borderBottomColor: colors.primarydark,
styleOverrides: {
root: {
backgroundColor: colors.well,
borderBottomColor: "#fff",
},
"&:before": {
borderBottomColor: colors.primary,
},
"&:after": {
borderBottomColor: colors.primarylight,
underline: {
"&:hover": {
borderBottomColor: colors.primarydark,
},
"&:before": {
borderBottomColor: colors.primary,
},
"&:after": {
borderBottomColor: colors.primarylight,
},
},
},
},
MuiInputLabel: {
root: {
color: colors.primarydark, // why is this switched?
userSelect: "none",
"&:before": {
color: colors.primarylight,
styleOverrides: {
root: {
color: colors.primarydark, // why is this switched?
userSelect: "none",
"&:before": {
color: colors.primarylight,
},
},
},
},
MuiButton: {
root: {
backgroundColor: "#333",
border: "1px solid " + colors.well,
color: colors.primary,
margin: "5px",
padding: "3px 5px",
"&:hover": {
backgroundColor: colors.black,
},
styleOverrides: {
root: {
backgroundColor: "#333",
border: "1px solid " + colors.well,
color: colors.primary,
margin: "5px",
padding: "3px 5px",
"&:hover": {
backgroundColor: colors.black,
},
borderRadius: 0,
borderRadius: 0,
},
},
},
MuiSelect: {
icon: {
color: colors.primary,
styleOverrides: {
icon: {
color: colors.primary,
},
},
},
MuiMenu: {
list: {
backgroundColor: colors.well,
styleOverrides: {
list: {
backgroundColor: colors.well,
},
},
},
MuiMenuItem: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiAccordionSummary: {
root: {
backgroundColor: "#111",
styleOverrides: {
root: {
backgroundColor: "#111",
},
},
},
MuiAccordionDetails: {
root: {
backgroundColor: colors.black,
styleOverrides: {
root: {
backgroundColor: colors.black,
},
},
},
MuiIconButton: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiTooltip: {
tooltip: {
fontSize: "1em",
color: colors.primary,
backgroundColor: colors.well,
borderRadius: 0,
border: "2px solid white",
styleOverrides: {
tooltip: {
fontSize: "1em",
color: colors.primary,
backgroundColor: colors.well,
borderRadius: 0,
border: "2px solid white",
},
},
},
MuiSvgIcon: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiDrawer: {
paper: {
"&::-webkit-scrollbar": {
// webkit
display: "none",
styleOverrides: {
paper: {
"&::-webkit-scrollbar": {
// webkit
display: "none",
},
scrollbarWidth: "none", // firefox
backgroundColor: colors.black,
},
paperAnchorDockedLeft: {
borderRight: "1px solid " + colors.welllight,
},
scrollbarWidth: "none", // firefox
backgroundColor: colors.black,
},
paperAnchorDockedLeft: {
borderRight: "1px solid " + colors.welllight,
},
},
MuiDivider: {
root: {
backgroundColor: colors.welllight,
styleOverrides: {
root: {
backgroundColor: colors.welllight,
},
},
},
MuiFormControlLabel: {
root: {
color: colors.primary,
styleOverrides: {
root: {
color: colors.primary,
},
},
},
MuiSwitch: {
switchBase: {
color: colors.primarydark,
},
track: {
backgroundColor: colors.welllight,
styleOverrides: {
switchBase: {
color: colors.primarydark,
},
track: {
backgroundColor: colors.welllight,
},
},
},
MuiPaper: {
root: {
backgroundColor: colors.black,
border: "1px solid " + colors.welllight,
styleOverrides: {
root: {
backgroundColor: colors.black,
border: "1px solid " + colors.welllight,
},
},
},
},
@ -195,6 +236,8 @@ interface IProps {
children: JSX.Element[] | JSX.Element;
}
export const Theme = ({ children }: IProps): React.ReactElement => (
<ThemeProvider theme={theme}>{children}</ThemeProvider>
export const TTheme = ({ children }: IProps): React.ReactElement => (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>{children}</ThemeProvider>
</StyledEngineProvider>
);