Skip to content

Commit

Permalink
BUGFIX: Wrong size of table cell in Import Save Comparison UI (#1659)
Browse files Browse the repository at this point in the history
  • Loading branch information
@catloversg
catloversg authored Sep 21, 2024
1 parent 70e16bf commit ade92ed
Showing 1 changed file with 111 additions and 78 deletions.
189 changes: 111 additions & 78 deletions src/ui/React/ImportSave/ImportSave.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ const useStyles = makeStyles()((theme: Theme) => ({
"& .MuiTable-root": {
"& .MuiTableCell-root": {
borderBottom: `1px solid ${Settings.theme.welllight}`,
width: "30%",
},
"& .MuiTableCell-root:last-child": {
width: "10%",
},

"& .MuiTableHead-root .MuiTableRow-root": {
Expand Down Expand Up @@ -94,6 +98,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
const [currentData, setCurrentData] = useState<ImportData | undefined>();
const [isImportModalOpen, { on: openImportModal, off: closeImportModal }] = useBoolean(false);
const [isSkillsExpanded, { toggle: toggleSkillsExpand }] = useBoolean(true);
const [isOthersExpanded, { toggle: toggleOthersExpand }] = useBoolean(true);
const [headback, setHeadback] = useState(false);

const handleGoBack = (): void => {
Expand Down Expand Up @@ -165,7 +170,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell></TableCell>
<TableCell>Current Game</TableCell>
<TableCell>Being Imported</TableCell>
<TableCell width={56}></TableCell>
<TableCell></TableCell>
</TableRow>
</TableHead>

Expand Down Expand Up @@ -230,6 +235,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
)}
</TableCell>
</TableRow>

<TableRow>
<TableCell colSpan={4}>
<IconButton aria-label="expand row" size="small" onClick={toggleSkillsExpand}>
Expand All @@ -252,7 +258,7 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableCell className={classes.skillTitle}>{skill}</TableCell>
<TableCell>{formatNumberNoSuffix(currentSkill, 0)}</TableCell>
<TableCell>{formatNumberNoSuffix(importSkill, 0)}</TableCell>
<TableCell width={56}>
<TableCell>
{currentSkill !== importSkill && <ComparisonIcon isBetter={importSkill > currentSkill} />}
</TableCell>
</TableRow>
Expand All @@ -269,86 +275,113 @@ export const ImportSave = (props: { saveData: SaveData; automatic: boolean }): J
<TableRow>{/* empty row to keep even/odd coloring */}</TableRow>

<TableRow>
<TableCell>Augmentations</TableCell>
<TableCell>{currentData.playerData?.augmentations}</TableCell>
<TableCell>{importData.playerData?.augmentations}</TableCell>
<TableCell>
{importData.playerData?.augmentations !== currentData.playerData?.augmentations && (
<ComparisonIcon
isBetter={
(importData.playerData?.augmentations ?? 0) > (currentData.playerData?.augmentations ?? 0)
}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<TableCell>Factions</TableCell>
<TableCell>{currentData.playerData?.factions}</TableCell>
<TableCell>{importData.playerData?.factions}</TableCell>
<TableCell>
{importData.playerData?.factions !== currentData.playerData?.factions && (
<ComparisonIcon
isBetter={(importData.playerData?.factions ?? 0) > (currentData.playerData?.factions ?? 0)}
/>
)}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Achievements</TableCell>
<TableCell>{currentData.playerData?.achievements}</TableCell>
<TableCell>{importData.playerData?.achievements}</TableCell>
<TableCell>
{importData.playerData?.achievements !== currentData.playerData?.achievements && (
<ComparisonIcon
isBetter={(importData.playerData?.achievements ?? 0) > (currentData.playerData?.achievements ?? 0)}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<Tooltip title="The total SF levels owned, except for SF-1 Exploit levels.">
<TableCell>Source File Levels</TableCell>
</Tooltip>
<TableCell>{currentData.playerData?.sourceFiles}</TableCell>
<TableCell>{importData.playerData?.sourceFiles}</TableCell>
<TableCell>
{importData.playerData?.sourceFiles !== currentData.playerData?.sourceFiles && (
<ComparisonIcon
isBetter={(importData.playerData?.sourceFiles ?? 0) > (currentData.playerData?.sourceFiles ?? 0)}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<Tooltip title="Number of exploits owned.">
<TableCell>Exploits</TableCell>
</Tooltip>
<TableCell>{currentData.playerData?.exploits}</TableCell>
<TableCell>{importData.playerData?.exploits}</TableCell>
<TableCell>
{importData.playerData?.exploits !== currentData.playerData?.exploits && (
<ComparisonIcon
isBetter={(importData.playerData?.exploits ?? 0) > (currentData.playerData?.exploits ?? 0)}
/>
)}
<TableCell colSpan={4}>
<IconButton aria-label="expand row" size="small" onClick={toggleOthersExpand}>
{isOthersExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
Others
</TableCell>
</TableRow>

<TableRow>
<Tooltip title="The player's current BitNode.">
<TableCell>BitNode</TableCell>
</Tooltip>
<TableCell>
{currentData.playerData?.bitNode}-{currentData.playerData?.bitNodeLevel}
</TableCell>
<TableCell>
{importData.playerData?.bitNode}-{importData.playerData?.bitNodeLevel}
<TableCell colSpan={4} padding="none">
<Collapse in={isOthersExpanded}>
<Table>
<TableBody>
<TableRow>
<TableCell>Augmentations</TableCell>
<TableCell>{currentData.playerData?.augmentations}</TableCell>
<TableCell>{importData.playerData?.augmentations}</TableCell>
<TableCell>
{importData.playerData?.augmentations !== currentData.playerData?.augmentations && (
<ComparisonIcon
isBetter={
(importData.playerData?.augmentations ?? 0) >
(currentData.playerData?.augmentations ?? 0)
}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<TableCell>Factions</TableCell>
<TableCell>{currentData.playerData?.factions}</TableCell>
<TableCell>{importData.playerData?.factions}</TableCell>
<TableCell>
{importData.playerData?.factions !== currentData.playerData?.factions && (
<ComparisonIcon
isBetter={
(importData.playerData?.factions ?? 0) > (currentData.playerData?.factions ?? 0)
}
/>
)}
</TableCell>
</TableRow>
<TableRow>
<TableCell>Achievements</TableCell>
<TableCell>{currentData.playerData?.achievements}</TableCell>
<TableCell>{importData.playerData?.achievements}</TableCell>
<TableCell>
{importData.playerData?.achievements !== currentData.playerData?.achievements && (
<ComparisonIcon
isBetter={
(importData.playerData?.achievements ?? 0) > (currentData.playerData?.achievements ?? 0)
}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<Tooltip title="The total SF levels owned, except for SF-1 Exploit levels.">
<TableCell>Source File Levels</TableCell>
</Tooltip>
<TableCell>{currentData.playerData?.sourceFiles}</TableCell>
<TableCell>{importData.playerData?.sourceFiles}</TableCell>
<TableCell>
{importData.playerData?.sourceFiles !== currentData.playerData?.sourceFiles && (
<ComparisonIcon
isBetter={
(importData.playerData?.sourceFiles ?? 0) > (currentData.playerData?.sourceFiles ?? 0)
}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<Tooltip title="Number of exploits owned.">
<TableCell>Exploits</TableCell>
</Tooltip>
<TableCell>{currentData.playerData?.exploits}</TableCell>
<TableCell>{importData.playerData?.exploits}</TableCell>
<TableCell>
{importData.playerData?.exploits !== currentData.playerData?.exploits && (
<ComparisonIcon
isBetter={
(importData.playerData?.exploits ?? 0) > (currentData.playerData?.exploits ?? 0)
}
/>
)}
</TableCell>
</TableRow>

<TableRow>
<Tooltip title="The player's current BitNode.">
<TableCell>BitNode</TableCell>
</Tooltip>
<TableCell>
{currentData.playerData?.bitNode}-{currentData.playerData?.bitNodeLevel}
</TableCell>
<TableCell>
{importData.playerData?.bitNode}-{importData.playerData?.bitNodeLevel}
</TableCell>
<TableCell></TableCell>
</TableRow>
</TableBody>
</Table>
</Collapse>
</TableCell>
<TableCell></TableCell>
</TableRow>
</TableBody>
</Table>
Expand Down

0 comments on commit ade92ed

Please sign in to comment.