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>
<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 () {