convert Create Program to mui

This commit is contained in:
Nolshine 2021-09-16 02:54:30 +01:00 committed by Olivier Gagnon
parent 5d9f9d2681
commit 5866f47151
2 changed files with 27 additions and 29 deletions

@ -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>
This page displays any programs that you are able to create. Writing the code for a program takes time, which <Box>
can vary based on how complex the program is. If you are working on creating a program you can cancel at any <Typography>
time. Your progress will be saved and you can continue later. This page displays any programs that you are able to create. Writing the code for a program takes time, which
</p> 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.
</Typography>
</Box>
<ButtonGroup>
{getAvailableCreatePrograms(props.player).map((program) => {
const create = program.create;
if (create === null) return <></>;
<ul id="create-program-list"> return (
{getAvailableCreatePrograms(props.player).map((program) => { <Tooltip title={create.tooltip}>
const create = program.create; <Button onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)}>
if (create === null) return <></>; {program.name}
</Button>
return ( </Tooltip>
<a )
key={program.name} })}
className="a-link-button tooltip" </ButtonGroup>
onClick={() => props.player.startCreateProgramWork(program.name, create.time, create.level)} </div>
>
{program.name}
<span className="tooltiptext">{create.tooltip}</span>
</a>
);
})}
</ul>
<br />
<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 () {