diff --git a/package-lock.json b/package-lock.json index 60549996d..e2a5713a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "SEE LICENSE IN license.txt", "dependencies": { "@material-ui/core": "^4.11.3", + "@material-ui/icons": "^4.11.2", "@monaco-editor/react": "^4.2.2", "@types/js-beautify": "^1.13.2", "@types/numeral": "0.0.25", @@ -3150,6 +3151,28 @@ "node": ">=8.0.0" } }, + "node_modules/@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "dependencies": { + "@babel/runtime": "^7.4.4" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "@material-ui/core": "^4.0.0", + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@material-ui/styles": { "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", @@ -28366,6 +28389,14 @@ "react-transition-group": "^4.4.0" } }, + "@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, "@material-ui/styles": { "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz", diff --git a/package.json b/package.json index 8d842943c..f37b563d6 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "@material-ui/core": "^4.11.3", + "@material-ui/icons": "^4.11.2", "@monaco-editor/react": "^4.2.2", "@types/js-beautify": "^1.13.2", "@types/numeral": "0.0.25", diff --git a/src/Augmentation/ui/SourceFileMinus1.tsx b/src/Augmentation/ui/SourceFileMinus1.tsx index 95725f157..e70fc846c 100644 --- a/src/Augmentation/ui/SourceFileMinus1.tsx +++ b/src/Augmentation/ui/SourceFileMinus1.tsx @@ -7,7 +7,7 @@ import * as React from "react"; import { Player } from "../../Player"; import { Exploit, ExploitName } from "../../Exploits/Exploit"; -import { Accordion } from "../../ui/React/Accordion"; +import { BBAccordion } from "../../ui/React/Accordion"; export function SourceFileMinus1(): React.ReactElement { const exploits = Player.exploits; @@ -18,7 +18,7 @@ export function SourceFileMinus1(): React.ReactElement { return (
  • - Source-File -1: Exploits in the BitNodes diff --git a/src/DevMenu.tsx b/src/DevMenu.tsx index 02471361e..186a47cc6 100644 --- a/src/DevMenu.tsx +++ b/src/DevMenu.tsx @@ -18,8 +18,15 @@ import { saveObject } from "./SaveObject"; import { dialogBoxCreate } from "../utils/DialogBox"; import { Money } from "./ui/React/Money"; +import { TextField } from "./ui/React/TextField"; +import { Button } from "./ui/React/Button"; +import { Select } from "./ui/React/Select"; 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 { Theme } from "./ui/React/Theme"; // Update as additional BitNodes get implemented const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; @@ -36,31 +43,35 @@ interface IValueAdjusterProps { } function ValueAdjusterComponent(props: IValueAdjusterProps): React.ReactElement { - const [value, setValue] = useState(0); + const [value, setValue] = useState(""); function onChange(event: React.ChangeEvent): void { - setValue(parseFloat(event.target.value)); + if (event.target.value === "") setValue(""); + else setValue(parseFloat(event.target.value)); } const { title, add, subtract, reset } = props; return ( <> - - - - + placeholder={title} + type="number" + InputProps={{ + startAdornment: ( + add(typeof value !== "string" ? value : 0)}> + + + ), + endAdornment: ( + subtract(typeof value !== "string" ? value : 0)}> + + + ), + }} + /> + ); } @@ -80,7 +91,7 @@ export function DevMenuRoot(props: IProps): React.ReactElement { const [stockPrice, setStockPrice] = useState(0); const [stockSymbol, setStockSymbol] = useState(""); - function setFactionDropdown(event: React.ChangeEvent): void { + function setFactionDropdown(event: React.ChangeEvent): void { setFaction(event.target.value); } @@ -96,7 +107,7 @@ export function DevMenuRoot(props: IProps): React.ReactElement { setServer(event.target.value); } - function setAugmentationDropdown(event: React.ChangeEvent): void { + function setAugmentationDropdown(event: React.FormEventHandler): void { setAugmentation(event.target.value); } @@ -751,824 +762,519 @@ export function DevMenuRoot(props: IProps): React.ReactElement { } return ( -
    -
    -

    Development Menu - Only meant to be used for testing/debugging

    -
    -
    -

    Generic

    -
    -
    - - - - - - -
    -
    - - - - -
    -
    -
    -
    -

    Experience / Stats

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - All: - - - -
    - Hacking: - - -
    - Strength: - - -
    - Defense: - - -
    - Dexterity: - - -
    - Agility: - - -
    - Charisma: - - -
    - Intelligence: - - - - - - -
    - Karma: - - -
    + +
    +
    +

    Development Menu - Only meant to be used for testing/debugging

    -
    -
    -
    -
    -

    Factions

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - Faction: - - -
    - Invites: - - - - -
    - Reputation: - - -
    - Favor: - - -
    - All Reputation: - - - -
    - All Favor: - - - -
    +
    +

    Generic

    -
    -
    -
    -
    -

    Augmentations

    -
    - - - - - - - - - - - -
    - Aug: - - -
    - Queue: - - - -
    +
    + + + + + +
    -
    -
    -
    -
    -

    Source-Files

    -
    - - - - - - - - - - - {validSFN.map((i) => ( - +
    + + + + +
    +
    +
    +
    +

    Experience / Stats

    +
    +
    - Exploits: - - -
    - All: - - - - - -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    - SF-{i}: + All: - + +
    + Hacking: + + +
    + Strength: + + +
    + Defense: + + +
    + Dexterity: + + +
    + Agility: + + +
    + Charisma: + + +
    + Intelligence: + + + + + + +
    + Karma: + + +
    +
    +
    +
    +
    +
    +

    Factions

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Faction: + + +
    + Invites: + + + + +
    + Reputation: + + +
    + Favor: + + +
    + All Reputation: + + + +
    + All Favor: + + + +
    +
    +
    +
    +
    +
    +

    Augmentations

    +
    + + + + + + + + + + + +
    + Aug: + + +
    + Queue: + + + +
    +
    +
    +
    +
    +
    +

    Source-Files

    +
    + + + + + + + + + - ))} - -
    + Exploits: + + +
    + All: + + - - -
    -
    -
    -
    -
    -
    -

    Programs

    + {validSFN.map((i) => ( + + + SF-{i}: + + + + + + + + + ))} + +
    - - - - - - - - - - - -
    - Program: - - -
    - Add: - - - -
    -
    -
    -
    -
    -

    Servers

    -
    - - - - - - - - - - - - - - - - - - - - - - -
    - Server: - - -
    - Root: - - - - -
    - Security: - - - - -
    - Money: - - - - -
    -
    -
    -
    -
    -
    -

    Companies

    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    - Company: - - -
    - Reputation: - - -
    - Favor: - - -
    - All Reputation: - - - -
    - All Favor: - - - -
    -
    -
    - - {props.player.bladeburner instanceof Bladeburner && (
    -

    Bladeburner

    +

    Programs

    - -
    - Rank: + Program: - - - +
    - Cycles: + Add: - - - + +
    - )} - - {props.player.inGang() && (
    -

    Gang

    +

    Servers

    - - - - -
    - Cycles: + Server: - - - -
    -
    -
    - )} - - {props.player.hasCorporation() && ( -
    -
    -
    -

    Corporation

    -
    - - - - + + + + + + + + + + - - - - - - - - -
    - - + +
    - Cycles: + Root: - + + +
    + Security: + + + + +
    + Money: + + - -
    - -
    - -
    -
    -
    - )} - -
    -
    -
    -

    Coding Contracts

    -
    - - - - - - - - - -
    - - -
    - - -
    -
    -
    - - {props.player.hasWseAccount && ( -
    -
    -
    -

    Stock Market

    -
    - - - - - - - - - - - - - - - -
    - Symbol: - - -
    - Price: - - - -
    - Caps: - - -
    -
    -
    - )} - - {props.player.sleeves.length > 0 && ( -
    -
    -
    -

    Sleeves

    -
    - - - - - + + +
    - Shock: - -
    +
    +
    +
    +
    +
    +

    Companies

    +
    + + + + + + + + + + + + + + + + - @@ -1576,26 +1282,300 @@ export function DevMenuRoot(props: IProps): React.ReactElement {
    - + +
    + Reputation: + + +
    + Favor: + + +
    + All Reputation: + + +
    - Sync: + All Favor: - - -
    - )} -
    -
    + {props.player.bladeburner instanceof Bladeburner && (
    -

    Offline time skip:

    +
    +
    +

    Bladeburner

    +
    + + + + + + + + + + + + + +
    + Rank: + + + + +
    + Cycles: + + + + +
    +
    + )} + + {props.player.inGang() && (
    - - - +
    +
    +

    Gang

    +
    + + + + + + + + +
    + Cycles: + + + + +
    +
    +
    + )} + + {props.player.hasCorporation() && ( +
    +
    +
    +

    Corporation

    +
    + + + + + + + + + + + + + + + + + +
    + + +
    + Cycles: + + + + +
    + +
    + +
    +
    +
    + )} + +
    +
    +
    +

    Coding Contracts

    +
    + + + + + + + + + +
    + + +
    + + +
    +
    +
    + + {props.player.hasWseAccount && ( +
    +
    +
    +

    Stock Market

    +
    + + + + + + + + + + + + + + + +
    + Symbol: + + +
    + Price: + + + +
    + Caps: + + +
    +
    +
    + )} + + {props.player.sleeves.length > 0 && ( +
    +
    +
    +

    Sleeves

    +
    + + + + + + + + + + + + + +
    + Shock: + + + + +
    + Sync: + + + + +
    +
    +
    + )} + +
    +
    +
    +

    Offline time skip:

    +
    +
    + + + +
    -
    + ); } diff --git a/src/Diagnostic/FileDiagnosticPopup.tsx b/src/Diagnostic/FileDiagnosticPopup.tsx index 18e582467..42e76bc8f 100644 --- a/src/Diagnostic/FileDiagnosticPopup.tsx +++ b/src/Diagnostic/FileDiagnosticPopup.tsx @@ -1,6 +1,6 @@ import React from "react"; import { AllServers } from "../Server/AllServers"; -import { Accordion } from "../ui/React/Accordion"; +import { BBAccordion } from "../ui/React/Accordion"; import { numeralWrapper } from "../ui/numeralFormat"; interface IServerProps { @@ -40,7 +40,7 @@ export function ServerAccordion(props: IServerProps): React.ReactElement { files.sort((a: File, b: File): number => b.size - a.size); return ( - {server.hostname} ({numeralWrapper.formatBigNumber(totalSize)}b) diff --git a/src/Gang/ui/GangMemberAccordion.tsx b/src/Gang/ui/GangMemberAccordion.tsx index f046d9f0c..33fea6cb6 100644 --- a/src/Gang/ui/GangMemberAccordion.tsx +++ b/src/Gang/ui/GangMemberAccordion.tsx @@ -4,7 +4,7 @@ import React from "react"; import { Gang } from "../Gang"; import { GangMember } from "../GangMember"; -import { Accordion } from "../../ui/React/Accordion"; +import { BBAccordion } from "../../ui/React/Accordion"; import { GangMemberAccordionContent } from "./GangMemberAccordionContent"; interface IProps { @@ -14,7 +14,7 @@ interface IProps { export function GangMemberAccordion(props: IProps): React.ReactElement { return ( - {props.member.name}} panelContent={} diff --git a/src/NetscriptBladeburner.js b/src/NetscriptBladeburner.js deleted file mode 100644 index 2511f1281..000000000 --- a/src/NetscriptBladeburner.js +++ /dev/null @@ -1,11 +0,0 @@ -export function unknownBladeburnerActionErrorMessage(functionName, actionType, actionName) { - return ( - `ERROR: bladeburner.${functionName}() failed due to an invalid action specified. ` + - `Type: ${actionType}, Name: ${actionName}. Note that for contracts and operations, the ` + - `name of the operation is case-sensitive.` - ); -} - -export function unknownBladeburnerExceptionMessage(functionName, err) { - return `bladeburner.${functionName}() failed with exception: ` + err; -} diff --git a/src/RedPill.jsx b/src/RedPill.jsx index 3b4f2d405..eafd4bb21 100644 --- a/src/RedPill.jsx +++ b/src/RedPill.jsx @@ -16,7 +16,7 @@ import ReactDOM from "react-dom"; let redPillFlag = false; function hackWorldDaemon(currentNodeNumber, flume = false, quick = false) { // Clear the screen - const container = document.getElementById("red-pill-content"); + const container = document.getElementById("red-pill-container"); ReactDOM.unmountComponentAtNode(container); Engine.loadRedPillContent(); ReactDOM.render( @@ -85,7 +85,7 @@ function enterBitNode(flume, destroyedBitNode, newBitNode) { Player.intelligence = 1; } redPillFlag = false; - const container = document.getElementById("red-pill-content"); + const container = document.getElementById("red-pill-container"); ReactDOM.unmountComponentAtNode(container); // Set new Bit Node diff --git a/src/StockMarket/ui/StockTicker.tsx b/src/StockMarket/ui/StockTicker.tsx index e41f02aaf..58d4d7cc4 100644 --- a/src/StockMarket/ui/StockTicker.tsx +++ b/src/StockMarket/ui/StockTicker.tsx @@ -18,7 +18,7 @@ import { PositionTypes } from "../data/PositionTypes"; import { IPlayer } from "../../PersonObjects/IPlayer"; import { SourceFileFlags } from "../../SourceFile/SourceFileFlags"; import { numeralWrapper } from "../../ui/numeralFormat"; -import { Accordion } from "../../ui/React/Accordion"; +import { BBAccordion } from "../../ui/React/Accordion"; import { Money } from "../../ui/React/Money"; import { createPopup } from "../../ui/React/createPopup"; @@ -157,7 +157,8 @@ export class StockTicker extends React.Component { createPopup(popupId, PlaceOrderPopup, { text: "Enter the price for your Limit Order", placeText: "Place Buy Limit Order", - place: (price: number) => this.props.placeOrder(this.props.stock, shares, price, OrderTypes.LimitBuy, this.state.position), + place: (price: number) => + this.props.placeOrder(this.props.stock, shares, price, OrderTypes.LimitBuy, this.state.position), popupId: popupId, }); break; @@ -167,7 +168,8 @@ export class StockTicker extends React.Component { createPopup(popupId, PlaceOrderPopup, { text: "Enter the price for your Stop Order", placeText: "Place Buy Stop Order", - place: (price: number) => this.props.placeOrder(this.props.stock, shares, price, OrderTypes.StopBuy, this.state.position), + place: (price: number) => + this.props.placeOrder(this.props.stock, shares, price, OrderTypes.StopBuy, this.state.position), popupId: popupId, }); break; @@ -279,7 +281,8 @@ export class StockTicker extends React.Component { createPopup(popupId, PlaceOrderPopup, { text: "Enter the price for your Limit Order", placeText: "Place Sell Limit Order", - place: (price: number) => this.props.placeOrder(this.props.stock, shares, price, OrderTypes.LimitSell, this.state.position), + place: (price: number) => + this.props.placeOrder(this.props.stock, shares, price, OrderTypes.LimitSell, this.state.position), popupId: popupId, }); break; @@ -289,7 +292,8 @@ export class StockTicker extends React.Component { createPopup(popupId, PlaceOrderPopup, { text: "Enter the price for your Stop Order", placeText: "Place Sell Stop Order", - place: (price: number) => this.props.placeOrder(this.props.stock, shares, price, OrderTypes.StopSell, this.state.position), + place: (price: number) => + this.props.placeOrder(this.props.stock, shares, price, OrderTypes.StopSell, this.state.position), popupId: popupId, }); break; @@ -332,7 +336,7 @@ export class StockTicker extends React.Component { render(): React.ReactNode { return (
  • - } panelContent={
    diff --git a/src/engine.jsx b/src/engine.jsx index 4d102f27a..883534bac 100644 --- a/src/engine.jsx +++ b/src/engine.jsx @@ -265,7 +265,6 @@ const Engine = { routing.navigateTo(Page.WorkInProgress); }, - // TODO reactify loadRedPillContent: function () { Engine.hideAllContent(); const mainMenu = document.getElementById("mainmenu-container"); diff --git a/src/index.html b/src/index.html index 5198b8988..cc1d0d138 100644 --- a/src/index.html +++ b/src/index.html @@ -67,27 +67,6 @@
    - - - - - -
    -
    -

    - - - -
    -
    - -
    @@ -101,9 +80,7 @@ -
    -
    -
    +
    diff --git a/src/ui/ActiveScripts/ServerAccordion.tsx b/src/ui/ActiveScripts/ServerAccordion.tsx index 189f3065e..dbf0bfb5d 100644 --- a/src/ui/ActiveScripts/ServerAccordion.tsx +++ b/src/ui/ActiveScripts/ServerAccordion.tsx @@ -4,7 +4,7 @@ */ import * as React from "react"; -import { Accordion } from "../React/Accordion"; +import { BBAccordion } from "../React/Accordion"; import { ServerAccordionContent } from "./ServerAccordionContent"; import { BaseServer } from "../../Server/BaseServer"; @@ -34,7 +34,7 @@ export function ServerAccordion(props: IProps): React.ReactElement { const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`; return ( - {headerTxt}} panelContent={} /> diff --git a/src/ui/ActiveScripts/WorkerScriptAccordion.tsx b/src/ui/ActiveScripts/WorkerScriptAccordion.tsx index aee4c1ed8..8689adbc2 100644 --- a/src/ui/ActiveScripts/WorkerScriptAccordion.tsx +++ b/src/ui/ActiveScripts/WorkerScriptAccordion.tsx @@ -6,7 +6,7 @@ import * as React from "react"; import { numeralWrapper } from "../numeralFormat"; -import { Accordion } from "../React/Accordion"; +import { BBAccordion } from "../React/Accordion"; import { AccordionButton } from "../React/AccordionButton"; import { killWorkerScript } from "../../Netscript/killWorkerScript"; @@ -41,7 +41,7 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement { const offlineEps = scriptRef.offlineExpGained / scriptRef.offlineRunningTime; return ( - {props.workerScript.name}} panelClass="active-scripts-script-panel" diff --git a/src/ui/React/Accordion.tsx b/src/ui/React/Accordion.tsx index e93ad2cbd..15d614171 100644 --- a/src/ui/React/Accordion.tsx +++ b/src/ui/React/Accordion.tsx @@ -16,7 +16,7 @@ type IState = { panelOpened: boolean; }; -export class Accordion extends React.Component { +export class BBAccordion extends React.Component { constructor(props: IProps) { super(props); diff --git a/src/ui/React/AugmentationAccordion.tsx b/src/ui/React/AugmentationAccordion.tsx index 47c3cedfc..5968b9bd9 100644 --- a/src/ui/React/AugmentationAccordion.tsx +++ b/src/ui/React/AugmentationAccordion.tsx @@ -6,7 +6,7 @@ */ import * as React from "react"; -import { Accordion } from "./Accordion"; +import { BBAccordion } from "./Accordion"; import { Augmentation } from "../../Augmentation/Augmentation"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; @@ -26,7 +26,7 @@ export function AugmentationAccordion(props: IProps): React.ReactElement { if (typeof props.aug.info === "string") { return ( - {displayName}} panelContent={

    @@ -41,7 +41,7 @@ export function AugmentationAccordion(props: IProps): React.ReactElement { } return ( - {displayName}} panelContent={

    diff --git a/src/ui/React/Button.tsx b/src/ui/React/Button.tsx new file mode 100644 index 000000000..8e94179ef --- /dev/null +++ b/src/ui/React/Button.tsx @@ -0,0 +1,47 @@ +/** + * Wrapper around material-ui's Button component that styles it with + * Bitburner's UI theme + */ + +import React from "react"; +import { Button as MuiButton, ButtonProps, makeStyles } from "@material-ui/core"; +import { colors } from "./Theme"; + +const useStyles = makeStyles({ + // Tries to emulate StdButton in buttons.scss + root: { + backgroundColor: "#333", + border: "1px solid #000", + color: colors.primary, + margin: "5px", + padding: "3px 5px", + "&:hover": { + backgroundColor: "#000", + }, + + borderRadius: 0, + }, + textPrimary: { + color: "rgb( 144, 202, 249)", + }, + textSecondary: { + color: "rgb(244, 143, 177)", + }, + disabled: { + backgroundColor: "#333", + color: "#fff", + cursor: "default", + }, +}); + +export const Button: React.FC = (props: ButtonProps) => { + return ( + + ); +}; diff --git a/src/ui/React/MuiButton.tsx b/src/ui/React/MuiButton.tsx index 78a6e5c7c..efba610ee 100644 --- a/src/ui/React/MuiButton.tsx +++ b/src/ui/React/MuiButton.tsx @@ -5,7 +5,6 @@ import React from "react"; import { Button, ButtonProps, makeStyles } from "@material-ui/core"; - const useStyles = makeStyles({ // Tries to emulate StdButton in buttons.scss root: { @@ -17,6 +16,8 @@ const useStyles = makeStyles({ "&:hover": { backgroundColor: "#666", }, + + borderRadius: 0, }, textPrimary: { color: "rgb( 144, 202, 249)", diff --git a/src/ui/React/Options.tsx b/src/ui/React/Options.tsx new file mode 100644 index 000000000..95ddfa582 --- /dev/null +++ b/src/ui/React/Options.tsx @@ -0,0 +1,337 @@ +import React from "react"; + +interface IProps {} + +export function Options(props: IProps): React.ReactElement { + return ( + <> +

    Game Options

    + + ); + /* + +

    Game Options

    +
    +
    + +
    + + + + +
    + + +
    + + + + +
    + + +
    + + + + +
    + + +
    + + + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + + + +
    +
    +
    + + Changelog + + Documentation + Discord + Subreddit + + + + + + + + + +
    + + */ +} diff --git a/src/ui/React/Select.tsx b/src/ui/React/Select.tsx new file mode 100644 index 000000000..4a65a5249 --- /dev/null +++ b/src/ui/React/Select.tsx @@ -0,0 +1,36 @@ +/** + * Wrapper around material-ui's Button component that styles it with + * Bitburner's UI theme + */ + +import React from "react"; +import { Select as MuiSelect, ButtonProps, makeStyles } from "@material-ui/core"; +import { colors } from "./Theme"; + +const useStyles = makeStyles({ + // Tries to emulate StdButton in buttons.scss + root: { + backgroundColor: "#000", + color: colors.primarydark, + margin: "5px", + padding: "3px 5px", + "&:hover": { + backgroundColor: "#000", + }, + + borderRadius: 0, + }, +}); + +export const Select: React.FC = (props: ButtonProps) => { + return ( + + ); +}; diff --git a/src/ui/React/SourceFileAccordion.tsx b/src/ui/React/SourceFileAccordion.tsx index 57ccc73ef..e8a460c91 100644 --- a/src/ui/React/SourceFileAccordion.tsx +++ b/src/ui/React/SourceFileAccordion.tsx @@ -6,7 +6,7 @@ */ import * as React from "react"; -import { Accordion } from "./Accordion"; +import { BBAccordion } from "./Accordion"; import { SourceFile } from "../../SourceFile/SourceFile"; @@ -19,7 +19,7 @@ export function SourceFileAccordion(props: IProps): React.ReactElement { const maxLevel = props.sf.n === 12 ? "∞" : "3"; return ( - {props.sf.name} diff --git a/src/ui/React/TextField.tsx b/src/ui/React/TextField.tsx new file mode 100644 index 000000000..679a27371 --- /dev/null +++ b/src/ui/React/TextField.tsx @@ -0,0 +1,56 @@ +/** + * Wrapper around material-ui's Button component that styles it with + * Bitburner's UI colors + */ + +import React from "react"; +import { TextField as MuiTF, TextFieldProps, makeStyles } from "@material-ui/core"; +import { colors } from "./Theme"; + +const useStyles = makeStyles({ + // Tries to emulate StdButton in buttons.scss + root: { + backgroundColor: "#000", + color: "white", + borderRadius: 0, + "& .MuiInputBase-input": { + color: colors.primary, // Text color + }, + "& .MuiInputBase-input::placeholder::before": { + color: colors.primarydarker, + userSelect: "none", + }, + "& .MuiInput-underline:before": { + borderBottomColor: colors.primarydarker, + }, + "& .MuiInput-underline:hover:before": { + borderBottomColor: colors.primarydark, + }, + "& .MuiInput-underline:after": { + borderBottomColor: colors.primary, + }, + "& .MuiInputLabel-root::before": { + color: colors.primarydark, + }, + "& .MuiInputLabel-root": { + // The little label on the top-right + color: colors.primarydark, // unfocused + userSelect: "none", + "&.Mui-focused": { + color: colors.primary, // focused + }, + }, + }, +}); + +export const TextField: React.FC = (props: TextFieldProps) => { + return ( + + ); +}; diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx new file mode 100644 index 000000000..bdf2966b4 --- /dev/null +++ b/src/ui/React/Theme.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { createMuiTheme } from "@material-ui/core/styles"; + +import { ThemeProvider } from "@material-ui/core/styles"; + +export const colors = { + primary: "#0f0", + primarydark: "#090", + primarydarker: "#030", +}; + +export const theme = createMuiTheme({ + palette: { + primary: { + main: colors.primary, + dark: colors.primarydark, + }, + }, + typography: { + button: { + textTransform: "none", + }, + }, +}); + +interface IProps { + children: JSX.Element[] | JSX.Element; +} + +export const Theme = ({ children }: IProps): React.ReactElement => ( + {children} +);