Fix: show final and small final in one column

This commit is contained in:
Dorian Zedler 2022-07-29 01:01:45 +02:00
parent 1f3ad14be0
commit d493777de3
Signed by: dorian
GPG key ID: 989DE36109AFA354

View file

@ -4,9 +4,14 @@ import { useParams } from 'react-router-dom';
import {
convertResultsToSpeedFlowchartResult,
SpeedFlowchartResult,
SpeedRoundPair,
} from '../data/SpeedFlowchart';
import { Card, CardContent, Grid, Skeleton, Typography } from '@mui/material';
interface SpeedRoundPairDummy extends SpeedRoundPair {
dummy: boolean;
}
/**
*
* @return {JSX.Element} speed flowchart page
@ -37,7 +42,17 @@ export default function SpeedFlowchartPage() {
console.log('loading false');
const flowchartResult = convertResultsToSpeedFlowchartResult(r);
console.log(flowchartResult);
const l = flowchartResult.rounds.length;
const dummy: SpeedRoundPairDummy = { dummy: true };
flowchartResult.rounds[l - 2].pairs = [
dummy,
...flowchartResult.rounds[l - 1].pairs,
...flowchartResult.rounds[l - 2].pairs,
];
flowchartResult.rounds[l - 2].roundName = `${
flowchartResult.rounds[l - 1].roundName
} / ${flowchartResult.rounds[l - 2].roundName}`;
flowchartResult.rounds.pop();
setFlowchartResult(flowchartResult);
});
}, []);
@ -56,7 +71,7 @@ export default function SpeedFlowchartPage() {
xs={12}
md={12 / flowchartResult.rounds.length}
>
<Grid item xs={12}>
<Grid item className='center-children' xs={12}>
<Typography variant='h6' fontWeight={'bold'} gutterBottom>
{round.roundName}
</Typography>
@ -70,7 +85,11 @@ export default function SpeedFlowchartPage() {
>
{round.pairs.map((pair, pairKey) => (
<Grid key={`flowchart-column-${roundKey}-pair-${pairKey}`} item>
<Card>
<Card
sx={{
opacity: (pair as SpeedRoundPairDummy).dummy ? 0 : 1,
}}
>
<CardContent>
<Typography
sx={{