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

Active Scripts

Browse Source
This commit is contained in:
Olivier Gagnon 2021-09-18 00:16:02 -04:00
parent 907314e76b
commit 1996deaf0a
17 changed files with 289 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/loader.scss
View File

@ -32,7 +32,7 @@
.loaderoverlay {
$spinnerBoxSize: 200px;
$themeColor: #6f3;
$themeColor: #0c0;
position: absolute;
width: 100%;

2
css/styles.scss
View File

@ -4,7 +4,7 @@
@import "reset";
:root {
--my-font-color: #6f3;
--my-font-color: #0c0;
--my-background-color: #000;
--my-highlight-color: #fff;
--my-prompt-color: #f92672;

6
src/Casino/Blackjack.tsx
View File

@ -340,15 +340,13 @@ export class Blackjack extends Game<Props, State> {
{/* Buttons */}
{!gameInProgress ? (
<div>
<MuiButton color="primary" onClick={this.startOnClick} disabled={wagerInvalid || !this.canStartGame()}>
<MuiButton onClick={this.startOnClick} disabled={wagerInvalid || !this.canStartGame()}>
Start
</MuiButton>
</div>
) : (
<div>
<MuiButton color="primary" onClick={this.playerHit}>
Hit
</MuiButton>
<MuiButton onClick={this.playerHit}>Hit</MuiButton>
<MuiButton color="secondary" onClick={this.playerStay}>
Stay
</MuiButton>

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

@ -37,12 +37,12 @@ export function Adjuster(props: IProps): React.ReactElement {
startAdornment: (
<>
<Tooltip title="Add a lot">
<IconButton color="primary" onClick={tons} size="large">
<IconButton onClick={tons} size="large">
<DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />
</IconButton>
</Tooltip>
<Tooltip title="Add">
<IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)} size="large">
<IconButton onClick={() => add(typeof value !== "string" ? value : 0)} size="large">
<AddIcon />
</IconButton>
</Tooltip>
@ -51,16 +51,12 @@ export function Adjuster(props: IProps): React.ReactElement {
endAdornment: (
<>
<Tooltip title="Remove">
<IconButton
color="primary"
onClick={() => subtract(typeof value !== "string" ? value : 0)}
size="large"
>
<IconButton onClick={() => subtract(typeof value !== "string" ? value : 0)} size="large">
<RemoveIcon />
</IconButton>
</Tooltip>
<Tooltip title="Reset">
<IconButton color="primary" onClick={reset} size="large">
<IconButton onClick={reset} size="large">
<ClearIcon />
</IconButton>
</Tooltip>

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

@ -53,23 +53,21 @@ export function Augmentations(props: IProps): React.ReactElement {
</td>
<td>
<Select
id="dev-augs-dropdown"
className="dropdown"
onChange={setAugmentationDropdown}
value={augmentation}
startAdornment={
<>
<IconButton color="primary" onClick={queueAllAugs} size="large">
<IconButton onClick={queueAllAugs} size="large">
<ReplyAllIcon />
</IconButton>
<IconButton color="primary" onClick={queueAug} size="large">
<IconButton onClick={queueAug} size="large">
<ReplyIcon />
</IconButton>
</>
}
endAdornment={
<>
<IconButton color="primary" onClick={clearAugs} size="large">
<IconButton onClick={clearAugs} size="large">
<ClearIcon />
</IconButton>
</>

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

@ -119,10 +119,10 @@ export function Factions(props: IProps): React.ReactElement {
value={faction}
startAdornment={
<>
<IconButton color="primary" onClick={receiveAllInvites} size="large">
<IconButton onClick={receiveAllInvites} size="large">
<ReplyAllIcon />
</IconButton>
<IconButton color="primary" onClick={receiveInvite} size="large">
<IconButton onClick={receiveInvite} size="large">
<ReplyIcon />
</IconButton>
</>

8
src/Fconf/Fconf.js
View File

@ -207,10 +207,10 @@ function setTheme() {
/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_BACKGROUND_COLOR) &&
/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(FconfSettings.THEME_PROMPT_COLOR)
) {
document.body.style.setProperty("--my-highlight-color", FconfSettings.THEME_HIGHLIGHT_COLOR);
document.body.style.setProperty("--my-font-color", FconfSettings.THEME_FONT_COLOR);
document.body.style.setProperty("--my-background-color", FconfSettings.THEME_BACKGROUND_COLOR);
document.body.style.setProperty("--my-prompt-color", FconfSettings.THEME_PROMPT_COLOR);
// document.body.style.setProperty("--my-highlight-color", FconfSettings.THEME_HIGHLIGHT_COLOR);
// document.body.style.setProperty("--my-font-color", FconfSettings.THEME_FONT_COLOR);
// document.body.style.setProperty("--my-background-color", FconfSettings.THEME_BACKGROUND_COLOR);
// document.body.style.setProperty("--my-prompt-color", FconfSettings.THEME_PROMPT_COLOR);
}
}

2
src/NetscriptWorker.js
View File

@ -586,7 +586,7 @@ export function createAndAddWorkerScript(runningScriptObj, server, parent) {
* Updates the online running time stat of all running scripts
*/
export function updateOnlineScriptTimes(numCycles = 1) {
var time = (numCycles * Engine._idleSpeed) / 1000; //seconds
var time = (numCycles * CONSTANTS._idleSpeed) / 1000; //seconds
for (const ws of workerScripts.values()) {
ws.scriptRef.onlineRunningTime += time;
}

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

@ -333,18 +333,18 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Drawer open={open} anchor="left" variant="permanent">
<ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>
<ListItemIcon>
{!open ? <ChevronRightIcon color={"primary"} /> : <ChevronLeftIcon color={"primary"} />}
{!open ? <ChevronRightIcon color="primary" /> : <ChevronLeftIcon color="primary" />}
</ListItemIcon>
<ListItemText primary={<Typography color="primary">Bitburner v{CONSTANTS.Version}</Typography>} />
<ListItemText primary={<Typography>Bitburner v{CONSTANTS.Version}</Typography>} />
</ListItem>
<Divider />
<List>
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
<ListItemIcon>
<ComputerIcon color={"primary"} />
<ComputerIcon color="primary" />
</ListItemIcon>
<ListItemText primary={<Typography color="primary">Hacking</Typography>} />
{hackingOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
<ListItemText primary={<Typography>Hacking</Typography>} />
{hackingOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItem>
<Collapse in={hackingOpen} timeout="auto" unmountOnExit>
<List>
@ -435,10 +435,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
<ListItemIcon>
<AccountBoxIcon color={"primary"} />
<AccountBoxIcon color="primary" />
</ListItemIcon>
<ListItemText primary={<Typography color="primary">Character</Typography>} />
{characterOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
<ListItemText primary={<Typography>Character</Typography>} />
{characterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItem>
<Collapse in={characterOpen} timeout="auto" unmountOnExit>
<ListItem
@ -545,10 +545,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
<ListItemIcon>
<PublicIcon color={"primary"} />
<PublicIcon color="primary" />
</ListItemIcon>
<ListItemText primary={<Typography color="primary">World</Typography>} />
{worldOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
<ListItemText primary={<Typography>World</Typography>} />
{worldOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItem>
<Collapse in={worldOpen} timeout="auto" unmountOnExit>
<ListItem
@ -678,10 +678,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
<Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
<ListItemIcon>
<LiveHelpIcon color={"primary"} />
<LiveHelpIcon color="primary" />
</ListItemIcon>
<ListItemText primary={<Typography color="primary">Help</Typography>} />
{helpOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
<ListItemText primary={<Typography>Help</Typography>} />
{helpOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
</ListItem>
<Collapse in={helpOpen} timeout="auto" unmountOnExit>
<ListItem

1
src/ui/ActiveScripts/ActiveScriptsRoot.tsx
View File

@ -10,6 +10,7 @@ import { ServerAccordions } from "./ServerAccordions";
import { WorkerScript } from "../../Netscript/WorkerScript";
import Typography from "@mui/material/Typography";
import TextField from "@mui/material/TextField";
type IProps = {
workerScripts: Map<number, WorkerScript>;

30
src/ui/ActiveScripts/ServerAccordion.tsx
View File

@ -5,10 +5,14 @@
import * as React from "react";
import Typography from "@mui/material/Typography";
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 ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Paper from "@mui/material/Paper";
import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess";
import { ServerAccordionContent } from "./ServerAccordionContent";
import { BaseServer } from "../../Server/BaseServer";
@ -22,6 +26,7 @@ type IProps = {
};
export function ServerAccordion(props: IProps): React.ReactElement {
const [open, setOpen] = React.useState(false);
const server = props.server;
// Accordion's header text
@ -38,15 +43,14 @@ export function ServerAccordion(props: IProps): React.ReactElement {
const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`;
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography style={{ whiteSpace: "pre-wrap" }} color="primary">
{headerTxt}
</Typography>
</AccordionSummary>
<AccordionDetails>
<>
<ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
<ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{headerTxt}</Typography>} />
{open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
</ListItemButton>
<Collapse in={open} timeout={0} unmountOnExit>
<ServerAccordionContent workerScripts={props.workerScripts} />
</AccordionDetails>
</Accordion>
</Collapse>
</>
);
}

79
src/ui/ActiveScripts/ServerAccordionContent.tsx
View File

@ -2,6 +2,10 @@ import React, { useState } from "react";
import { WorkerScript } from "../../Netscript/WorkerScript";
import { WorkerScriptAccordion } from "./WorkerScriptAccordion";
import { AccordionButton } from "../React/AccordionButton";
import Paper from "@mui/material/Paper";
import List from "@mui/material/List";
import TablePagination from "@mui/material/TablePagination";
import { TablePaginationActionsAll } from "../React/TablePaginationActionsAll";
const pageSize = 20;
@ -10,63 +14,34 @@ interface IProps {
}
export function ServerAccordionContent(props: IProps): React.ReactElement {
if (props.workerScripts.length > pageSize) {
return <ServerAccordionContentPaginated workerScripts={props.workerScripts} />;
}
return (
<ul>
{props.workerScripts.map((ws) => {
return <WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />;
})}
</ul>
);
}
export function ServerAccordionContentPaginated(props: IProps): React.ReactElement {
const [page, setPage] = useState(0);
const scripts: React.ReactElement[] = [];
const maxPage = Math.ceil(props.workerScripts.length / pageSize);
const maxScript = Math.min((page + 1) * pageSize, props.workerScripts.length);
for (let i = page * pageSize; i < maxScript; i++) {
const ws = props.workerScripts[i];
scripts.push(<WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />);
}
const [rowsPerPage, setRowsPerPage] = useState(10);
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
function capPage(page: number): number {
if (page < 0) {
page = 0;
}
if (maxPage - 1 < page) {
page = maxPage - 1;
}
return page;
}
// in case we're on an invalid page number because scripts were killed.
const capped = capPage(page);
if (capped !== page) setPage(capped);
function changePage(n: number): void {
setPage((newPage) => {
newPage += n;
newPage = Math.round(newPage);
return capPage(newPage);
});
}
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<>
<ul>{scripts}</ul>
<AccordionButton onClick={() => changePage(-1e99)} text="<<" />
<AccordionButton onClick={() => changePage(-1)} text="<" />
<span className="text">
{page + 1} / {maxPage}
</span>
<AccordionButton onClick={() => changePage(1)} text=">" />
<AccordionButton onClick={() => changePage(1e99)} text=">>" />
<List>
{props.workerScripts.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((ws) => (
<WorkerScriptAccordion key={`${ws.name}_${ws.args}`} workerScript={ws} />
))}
</List>
<TablePagination
rowsPerPageOptions={[10, 15, 20]}
component="div"
count={props.workerScripts.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActionsAll}
/>
</>
);
}

58
src/ui/ActiveScripts/ServerAccordions.tsx
View File

@ -6,10 +6,16 @@ import React, { useState, useEffect } from "react";
import { ServerAccordion } from "./ServerAccordion";
import TextField from "@mui/material/TextField";
import Typography from "@mui/material/Typography";
import Paper from "@mui/material/Paper";
import List from "@mui/material/List";
import TablePagination from "@mui/material/TablePagination";
import { WorkerScript } from "../../Netscript/WorkerScript";
import { WorkerScriptStartStopEventEmitter } from "../../Netscript/WorkerScriptStartStopEventEmitter";
import { getServer } from "../../Server/ServerHelpers";
import { BaseServer } from "../../Server/BaseServer";
import { TablePaginationActionsAll } from "../React/TablePaginationActionsAll";
// Map of server hostname -> all workerscripts on that server for all active scripts
interface IServerData {
@ -32,6 +38,9 @@ type IState = {
const subscriberId = "ActiveScriptsUI";
export function ServerAccordions(props: IProps): React.ReactElement {
const [filter, setFilter] = useState("");
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
@ -45,6 +54,20 @@ export function ServerAccordions(props: IProps): React.ReactElement {
return () => WorkerScriptStartStopEventEmitter.removeSubscriber(subscriberId);
}, []);
const handleChangePage = (event: unknown, newPage: number) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
function handleFilterChange(event: React.ChangeEvent<HTMLInputElement>): void {
setFilter(event.target.value);
setPage(0);
}
const serverToScriptMap: IServerToScriptsMap = {};
for (const ws of props.workerScripts.values()) {
const server = getServer(ws.serverIp);
@ -65,13 +88,40 @@ export function ServerAccordions(props: IProps): React.ReactElement {
if (data !== undefined) data.workerScripts.push(ws);
}
const filtered = Object.values(serverToScriptMap).filter((data) => data && data.server.hostname.includes(filter));
return (
<ul className="active-scripts-list" id="active-scripts-list">
{Object.values(serverToScriptMap).map((data) => {
<>
<TextField
value={filter}
onChange={handleFilterChange}
color="primary"
autoFocus
variant="standard"
InputProps={{
startAdornment: <Typography m={1}>Filter:</Typography>,
spellCheck: false,
}}
/>
<List>
{filtered.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((data) => {
return (
data && <ServerAccordion key={data.server.hostname} server={data.server} workerScripts={data.workerScripts} />
data && (
<ServerAccordion key={data.server.hostname} server={data.server} workerScripts={data.workerScripts} />
)
);
})}
</ul>
</List>
<TablePagination
rowsPerPageOptions={[10, 15, 20]}
component="div"
count={filtered.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActionsAll}
/>
</>
);
}

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

@ -7,6 +7,8 @@ import * as React from "react";
import { numeralWrapper } from "../numeralFormat";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import Accordion from "@mui/material/Accordion";
import AccordionSummary from "@mui/material/AccordionSummary";
@ -15,6 +17,12 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { AccordionButton } from "../React/AccordionButton";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess";
import { killWorkerScript } from "../../Netscript/killWorkerScript";
import { WorkerScript } from "../../Netscript/WorkerScript";
@ -30,6 +38,7 @@ type IProps = {
};
export function WorkerScriptAccordion(props: IProps): React.ReactElement {
const [open, setOpen] = React.useState(false);
const workerScript = props.workerScript;
const scriptRef = workerScript.scriptRef;
@ -48,11 +57,13 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
const offlineEps = scriptRef.offlineExpGained / scriptRef.offlineRunningTime;
return (
<Accordion TransitionProps={{ unmountOnExit: true }}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography color="primary">{props.workerScript.name}</Typography>
</AccordionSummary>
<AccordionDetails>
<>
<ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
<ListItemText primary={<Typography style={{ whiteSpace: "pre-wrap" }}>{props.workerScript.name}</Typography>} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout={0} unmountOnExit>
<Box m={3}>
<pre>Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}</pre>
<pre>Args: {arrayToString(props.workerScript.args)}</pre>
<pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>
@ -80,7 +91,8 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
<IconButton onClick={killScriptClickHandler}>
<DeleteIcon color="error" />
</IconButton>
</AccordionDetails>
</Accordion>
</Box>
</Collapse>
</>
);
}

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

@ -257,7 +257,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<FormControlLabel
control={<Switch color="primary" checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
control={<Switch checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
label={
<Tooltip
title={
@ -275,13 +275,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<FormControlLabel
control={
<Switch
color="primary"
checked={suppressFactionInvites}
onChange={handleSuppressFactionInvitesChange}
/>
}
control={<Switch checked={suppressFactionInvites} onChange={handleSuppressFactionInvitesChange} />}
label={
<Tooltip
title={
@ -299,11 +293,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<ListItem>
<FormControlLabel
control={
<Switch
color="primary"
checked={suppressTravelConfirmations}
onChange={handleSuppressTravelConfirmationsChange}
/>
<Switch checked={suppressTravelConfirmations} onChange={handleSuppressTravelConfirmationsChange} />
}
label={
<Tooltip
@ -323,7 +313,6 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<FormControlLabel
control={
<Switch
color="primary"
checked={suppressBuyAugmentationConfirmation}
onChange={handleSuppressBuyAugmentationConfirmationChange}
/>
@ -344,11 +333,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<ListItem>
<FormControlLabel
control={
<Switch
color="primary"
checked={suppressHospitalizationPopup}
onChange={handleSuppressHospitalizationPopupChange}
/>
<Switch checked={suppressHospitalizationPopup} onChange={handleSuppressHospitalizationPopupChange} />
}
label={
<Tooltip
@ -368,11 +353,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<ListItem>
<FormControlLabel
control={
<Switch
color="primary"
checked={suppressBladeburnerPopup}
onChange={handleSuppressBladeburnerPopupChange}
/>
<Switch checked={suppressBladeburnerPopup} onChange={handleSuppressBladeburnerPopupChange} />
}
label={
<Tooltip
@ -391,7 +372,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
)}
<ListItem>
<FormControlLabel
control={<Switch color="primary" checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
control={<Switch checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
label={
<Tooltip
title={
@ -409,7 +390,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<FormControlLabel
control={<Switch color="primary" checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
control={<Switch checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
label={
<Tooltip title={<Typography>If this is set all ASCII art will be disabled.</Typography>}>
<Typography>Disable ascii art</Typography>
@ -419,9 +400,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</ListItem>
<ListItem>
<FormControlLabel
control={
<Switch color="primary" checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />
}
control={<Switch checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />}
label={
<Tooltip
title={

69
src/ui/React/TablePaginationActionsAll.tsx Normal file
View File

@ -0,0 +1,69 @@
import * as React from "react";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
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 TableFooter from "@mui/material/TableFooter";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import IconButton from "@mui/material/IconButton";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import LastPageIcon from "@mui/icons-material/LastPage";
interface TablePaginationActionsProps {
count: number;
page: number;
rowsPerPage: number;
onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
}
export function TablePaginationActionsAll(props: TablePaginationActionsProps) {
const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;
const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, 0);
};
const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
<IconButton onClick={handleFirstPageButtonClick} disabled={page === 0} aria-label="first page">
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
{theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</Box>
);
}

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

@ -23,6 +23,10 @@ export const colors = {
warning: "#cc0",
warningdark: "#990",
infolight: "#69f",
info: "#36c",
infodark: "#039",
welllight: "#444",
well: "#222",
white: "#fff",
@ -53,6 +57,11 @@ export const theme = createTheme({
main: colors.error,
dark: colors.errordark,
},
info: {
light: colors.infolight,
main: colors.info,
dark: colors.infodark,
},
warning: {
light: colors.warninglight,
main: colors.warning,
@ -73,6 +82,7 @@ export const theme = createTheme({
styleOverrides: {
root: {
backgroundColor: colors.well,
color: colors.primary,
},
input: {
"&::placeholder": {
@ -114,22 +124,22 @@ export const theme = createTheme({
},
},
},
// MuiButton: {
// styleOverrides: {
// root: {
// backgroundColor: "#333",
// border: "1px solid " + colors.well,
// // color: colors.primary,
// margin: "5px",
// padding: "3px 5px",
// "&:hover": {
// backgroundColor: colors.black,
// },
MuiButton: {
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: {
styleOverrides: {
icon: {
@ -233,11 +243,19 @@ export const theme = createTheme({
MuiPaper: {
styleOverrides: {
root: {
borderRadius: 0,
backgroundColor: colors.black,
border: "1px solid " + colors.welllight,
},
},
},
MuiTablePagination: {
styleOverrides: {
select: {
color: colors.primary,
},
},
},
},
});