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}>
Targets:{" "}
{stage.answers.map((a, i) => {
if (i == stage.currentAnswerIndex)
if (i === stage.currentAnswerIndex)
return (
<span key={`${i}`} style={{ fontSize: "1em", color: Settings.theme.infolight }}>
{a}&nbsp;
@@ -64,20 +64,32 @@ export function Cyberpunk2077Game({ stage }: IProps): React.ReactElement {
gap: 1,
}}
>
{flatGrid.map((item, idx) => (
<Typography
key={idx}
sx={{
fontSize: fontSize,
color: item.color,
border: item.selected ? `2px solid ${Settings.theme.infolight}` : "unset",
lineHeight: "unset",
p: item.selected ? "2px" : "4px",
}}
>
{item.content}
</Typography>
))}
{flatGrid.map((item, idx) => {
let borderStyle = "solid";
let borderColor = "transparent";
if (item.selected) {
borderColor = Settings.theme.infolight;
} else if (hasAugment && item.content === stage.answers[stage.currentAnswerIndex]) {
borderStyle = "dashed";
borderColor = Settings.theme.warning;
}
return (
<Typography
key={idx}
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>
</Paper>
</>