UI: Improve visual effect of "SoA - Flood of Poseidon" augmentation (#2781)

This commit is contained in:
catloversg
2026-05-19 05:03:59 +07:00
committed by GitHub
parent d060b6b1f0
commit 64b25469ea
+27 -15
View File
@@ -43,7 +43,7 @@ export function Cyberpunk2077Game({ stage }: IProps): React.ReactElement {
<Typography variant="h5" color={Settings.theme.primary}> <Typography variant="h5" color={Settings.theme.primary}>
Targets:{" "} Targets:{" "}
{stage.answers.map((a, i) => { {stage.answers.map((a, i) => {
if (i == stage.currentAnswerIndex) if (i === stage.currentAnswerIndex)
return ( return (
<span key={`${i}`} style={{ fontSize: "1em", color: Settings.theme.infolight }}> <span key={`${i}`} style={{ fontSize: "1em", color: Settings.theme.infolight }}>
{a}&nbsp; {a}&nbsp;
@@ -64,20 +64,32 @@ export function Cyberpunk2077Game({ stage }: IProps): React.ReactElement {
gap: 1, gap: 1,
}} }}
> >
{flatGrid.map((item, idx) => ( {flatGrid.map((item, idx) => {
<Typography let borderStyle = "solid";
key={idx} let borderColor = "transparent";
sx={{ if (item.selected) {
fontSize: fontSize, borderColor = Settings.theme.infolight;
color: item.color, } else if (hasAugment && item.content === stage.answers[stage.currentAnswerIndex]) {
border: item.selected ? `2px solid ${Settings.theme.infolight}` : "unset", borderStyle = "dashed";
lineHeight: "unset", borderColor = Settings.theme.warning;
p: item.selected ? "2px" : "4px", }
}} return (
> <Typography
{item.content} key={idx}
</Typography> sx={{
))} fontSize: fontSize,
color: item.color,
// Always use a 2px border to avoid small symbol position shifts caused by size changes (element vs
// element + 2px border).
border: `2px ${borderStyle} ${borderColor}`,
lineHeight: "unset",
p: item.selected ? "2px" : "4px",
}}
>
{item.content}
</Typography>
);
})}
</Box> </Box>
</Paper> </Paper>
</> </>