Refactor sleeve stats row to JSX element

This commit is contained in:
nickofolas 2022-03-10 22:47:18 -06:00
parent 8ce1660f8a
commit 7b309c2624

@ -25,13 +25,14 @@ interface ITableRowData {
exp?: number; exp?: number;
} }
export const generateTableRow = ( interface IStatsRowProps {
name: string, name: string;
color: string, color: string;
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types classes: any;
classes: any, data: ITableRowData;
data: ITableRowData }
): React.ReactElement => {
export const SleeveStatsRow = ({ name, color, classes, data }: IStatsRowProps): React.ReactElement => {
let content; let content;
if (data.content !== undefined) { if (data.content !== undefined) {
@ -66,50 +67,44 @@ export function StatsElement(props: IProps): React.ReactElement {
return ( return (
<Table sx={{ display: 'table', mb: 1, width: '100%' }}> <Table sx={{ display: 'table', mb: 1, width: '100%' }}>
<TableBody> <TableBody>
{generateTableRow("City", Settings.theme.primary, classes, { <SleeveStatsRow name="City" color={Settings.theme.primary} classes={classes}
content: props.sleeve.city data={{ content: props.sleeve.city }}
})} />
{generateTableRow("HP", Settings.theme.hp, classes, { <SleeveStatsRow name="HP" color={Settings.theme.hp} classes={classes}
content: `${numeralWrapper.formatHp(props.sleeve.hp)} / ${numeralWrapper.formatHp(props.sleeve.max_hp)}` data={{ content: `${numeralWrapper.formatHp(props.sleeve.hp)} / ${numeralWrapper.formatHp(props.sleeve.max_hp)}` }}
})} />
{generateTableRow("Hacking", Settings.theme.hack, classes, { <SleeveStatsRow name="Hacking" color={Settings.theme.hack} classes={classes}
level: props.sleeve.hacking, data={{ level: props.sleeve.hacking, exp: props.sleeve.hacking_exp }}
exp: props.sleeve.hacking_exp />
})} <SleeveStatsRow name="Strength" color={Settings.theme.combat} classes={classes}
{generateTableRow("Strength", Settings.theme.combat, classes, { data={{ level: props.sleeve.strength, exp: props.sleeve.strength_exp }}
level: props.sleeve.strength, />
exp: props.sleeve.strength_exp <SleeveStatsRow name="Defense" color={Settings.theme.combat} classes={classes}
})} data={{ level: props.sleeve.defense, exp: props.sleeve.defense_exp }}
{generateTableRow("Defense", Settings.theme.combat, classes, { />
level: props.sleeve.defense, <SleeveStatsRow name="Dexterity" color={Settings.theme.combat} classes={classes}
exp: props.sleeve.defense_exp data={{ level: props.sleeve.dexterity, exp: props.sleeve.dexterity_exp }}
})} />
{generateTableRow("Dexterity", Settings.theme.combat, classes, { <SleeveStatsRow name="Agility" color={Settings.theme.combat} classes={classes}
level: props.sleeve.dexterity, data={{ level: props.sleeve.agility, exp: props.sleeve.agility_exp }}
exp: props.sleeve.dexterity_exp />
})} <SleeveStatsRow name="Charisma" color={Settings.theme.cha} classes={classes}
{generateTableRow("Agility", Settings.theme.combat, classes, { data={{ level: props.sleeve.charisma, exp: props.sleeve.charisma_exp }}
level: props.sleeve.agility, />
exp: props.sleeve.agility_exp
})}
{generateTableRow("Charisma", Settings.theme.cha, classes, {
level: props.sleeve.charisma,
exp: props.sleeve.charisma_exp
})}
<TableRow> <TableRow>
<TableCell classes={{ root: classes.cellNone }}> <TableCell classes={{ root: classes.cellNone }}>
<br /> <br />
</TableCell> </TableCell>
</TableRow> </TableRow>
{generateTableRow("Shock", Settings.theme.primary, classes, { <SleeveStatsRow name="Shock" color={Settings.theme.primary} classes={classes}
content: numeralWrapper.formatSleeveShock(100 - props.sleeve.shock) data={{ content: numeralWrapper.formatSleeveShock(100 - props.sleeve.shock) }}
})} />
{generateTableRow("Sync", Settings.theme.primary, classes, { <SleeveStatsRow name="Sync" color={Settings.theme.primary} classes={classes}
content: numeralWrapper.formatSleeveSynchro(props.sleeve.sync) data={{ content: numeralWrapper.formatSleeveSynchro(props.sleeve.sync) }}
})} />
{generateTableRow("Memory", Settings.theme.primary, classes, { <SleeveStatsRow name="Memory" color={Settings.theme.primary} classes={classes}
content: numeralWrapper.formatSleeveMemory(props.sleeve.memory) data={{ content: numeralWrapper.formatSleeveMemory(props.sleeve.memory) }}
})} />
</TableBody> </TableBody>
</Table> </Table>
) )