mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-24 23:22:29 +01:00
convert Create Program to mui
This commit is contained in:
parent
5d9f9d2681
commit
5866f47151
@ -2,6 +2,9 @@ import React, { useState, useEffect } from "react";
|
|||||||
import { IPlayer } from "../../PersonObjects/IPlayer";
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
||||||
import { getAvailableCreatePrograms } from "../ProgramHelpers";
|
import { getAvailableCreatePrograms } from "../ProgramHelpers";
|
||||||
|
|
||||||
|
import { Box, ButtonGroup, Tooltip, Typography } from "@material-ui/core";
|
||||||
|
import Button from "@material-ui/core/Button";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
player: IPlayer;
|
player: IPlayer;
|
||||||
}
|
}
|
||||||
@ -19,34 +22,29 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<p id="create-program-page-text">
|
<div>
|
||||||
|
<Box>
|
||||||
|
<Typography>
|
||||||
This page displays any programs that you are able to create. Writing the code for a program takes time, which
|
This page displays any programs that you are able to create. Writing the code for a program takes time, which
|
||||||
can vary based on how complex the program is. If you are working on creating a program you can cancel at any
|
can vary based on how complex the program is. If you are working on creating a program you can cancel at any
|
||||||
time. Your progress will be saved and you can continue later.
|
time. Your progress will be saved and you can continue later.
|
||||||
</p>
|
</Typography>
|
||||||
|
</Box>
|
||||||
<ul id="create-program-list">
|
<ButtonGroup>
|
||||||
{getAvailableCreatePrograms(props.player).map((program) => {
|
{getAvailableCreatePrograms(props.player).map((program) => {
|
||||||
const create = program.create;
|
const create = program.create;
|
||||||
if (create === null) return <></>;
|
if (create === null) return <></>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a
|
<Tooltip title={create.tooltip}>
|
||||||
key={program.name}
|
<Button onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}>
|
||||||
className="a-link-button tooltip"
|
|
||||||
onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}
|
|
||||||
>
|
|
||||||
{program.name}
|
{program.name}
|
||||||
<span className="tooltiptext">{create.tooltip}</span>
|
</Button>
|
||||||
</a>
|
</Tooltip>
|
||||||
);
|
)
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ButtonGroup>
|
||||||
<br />
|
</div>
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
</>
|
</>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
@ -152,7 +152,7 @@ const Engine = {
|
|||||||
Engine.Display.content.style.display = "block";
|
Engine.Display.content.style.display = "block";
|
||||||
routing.navigateTo(Page.CreateProgram);
|
routing.navigateTo(Page.CreateProgram);
|
||||||
MainMenuLinks.CreateProgram.classList.add("active");
|
MainMenuLinks.CreateProgram.classList.add("active");
|
||||||
ReactDOM.render(<ProgramsRoot player={Player} />, Engine.Display.content);
|
ReactDOM.render(<Theme><ProgramsRoot player={Player} /></Theme>, Engine.Display.content);
|
||||||
},
|
},
|
||||||
|
|
||||||
loadFactionsContent: function () {
|
loadFactionsContent: function () {
|
||||||
|
Loading…
Reference in New Issue
Block a user