47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { Grid, Typography } from "@mui/material";
|
|
import { useAtomValue } from "jotai";
|
|
import { gameEvalAtom } from "../states";
|
|
|
|
export default function Accuracies() {
|
|
const gameEval = useAtomValue(gameEvalAtom);
|
|
|
|
if (!gameEval) return null;
|
|
|
|
return (
|
|
<Grid
|
|
item
|
|
container
|
|
xs={12}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
columnGap={{ xs: "8vw", sm: 6, md: 8 }}
|
|
>
|
|
<Typography
|
|
align="center"
|
|
sx={{ backgroundColor: "white", color: "black" }}
|
|
borderRadius="5px"
|
|
lineHeight={1}
|
|
padding={1}
|
|
fontWeight="bold"
|
|
border={`1px solid #424242`}
|
|
>
|
|
{`${gameEval?.accuracy.white.toFixed(1)} %`}
|
|
</Typography>
|
|
|
|
<Typography align="center">Accuracies</Typography>
|
|
|
|
<Typography
|
|
align="center"
|
|
sx={{ backgroundColor: "black", color: "white" }}
|
|
borderRadius="5px"
|
|
lineHeight={1}
|
|
padding={1}
|
|
fontWeight="bold"
|
|
border={`1px solid #424242`}
|
|
>
|
|
{`${gameEval?.accuracy.black.toFixed(1)} %`}
|
|
</Typography>
|
|
</Grid>
|
|
);
|
|
}
|