convert milestones to mui

This commit is contained in:
Olivier Gagnon 2021-09-22 03:33:15 -04:00
parent 61dd393bb5
commit 64c7831c81

@ -3,6 +3,9 @@ import { Milestones } from "../Milestones";
import { Milestone } from "../Milestone"; import { Milestone } from "../Milestone";
import * as React from "react"; import * as React from "react";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
interface IProps { interface IProps {
player: IPlayer; player: IPlayer;
} }
@ -21,25 +24,25 @@ export function MilestonesRoot(props: IProps): JSX.Element {
const milestones = Milestones.map((milestone: Milestone, i: number) => { const milestones = Milestones.map((milestone: Milestone, i: number) => {
if (i <= n + 1) { if (i <= n + 1) {
return ( return (
<ul key={i}> <Typography key={i}>
<p>
[{milestone.fulfilled(props.player) ? "x" : " "}] {milestone.title} [{milestone.fulfilled(props.player) ? "x" : " "}] {milestone.title}
</p> </Typography>
</ul>
); );
} }
}); });
return ( return (
<div className="milestones-container"> <>
<h1>Milestones</h1> <Typography variant="h4">Milestones</Typography>
<p> <Box mx={2}>
Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset when <Typography>
you install Augmentations. Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset
</p> when you install Augmentations.
</Typography>
<br /> <br />
<h2>Completing fl1ght.exe</h2> <Typography>Completing fl1ght.exe</Typography>
<li>{milestones}</li> {milestones}
</div> </Box>
</>
); );
} }