gorkem-bwl
34b1a9cdc2
The game monitor type relies on each game's native query protocol — many require a config file change on the game server (e.g. Minecraft Java needs `enable-query=true` in `server.properties`). Without that, the monitor silently fails to reach the server. Append a sentence to the game-type general settings description that: - tells the user some games need server-side queries enabled - points them to the GameDig supported-games list for protocol details Implementation: - Use <Trans> with a `gamedigLink` slot so the link renders inline - Loosen ConfigBox `subtitle` from `string` to `React.ReactNode` so the subtitle can host the <Trans> output - Update all 16 locale files. Six (de, es, ru, th, zh-CN, zh-TW) get a full translation of the new sentence; nine empty ones (ar, cs, fi, fr, ja, pt-BR, tr, uk, vi) fall back to the English string per the locale gap policy
80 lines
1.8 KiB
TypeScript
80 lines
1.8 KiB
TypeScript
import Stack from "@mui/material/Stack";
|
|
import Box from "@mui/material/Box";
|
|
import Typography from "@mui/material/Typography";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { LAYOUT } from "@/Utils/Theme/constants";
|
|
export const SplitBox = ({
|
|
left,
|
|
right,
|
|
}: {
|
|
left: React.ReactNode;
|
|
right: React.ReactNode;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isSmall = useMediaQuery(theme.breakpoints.down("md"));
|
|
return (
|
|
<Stack
|
|
direction={isSmall ? "column" : "row"}
|
|
bgcolor={theme.palette.background.paper}
|
|
border={1}
|
|
borderColor={theme.palette.divider}
|
|
borderRadius={theme.shape.borderRadius}
|
|
>
|
|
<Box
|
|
padding={theme.spacing(LAYOUT.XXL)}
|
|
borderRight={isSmall ? 0 : 1}
|
|
borderBottom={isSmall ? 1 : 0}
|
|
borderColor={theme.palette.divider}
|
|
flex={0.7}
|
|
sx={{
|
|
background:
|
|
theme.palette.mode === "dark"
|
|
? "linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.02) 100%)"
|
|
: "linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.02) 100%)",
|
|
}}
|
|
>
|
|
{left}
|
|
</Box>
|
|
<Box
|
|
flex={1}
|
|
padding={theme.spacing(LAYOUT.XXL)}
|
|
>
|
|
{right}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export const ConfigBox = ({
|
|
title,
|
|
subtitle,
|
|
leftContent,
|
|
rightContent,
|
|
}: {
|
|
title: string;
|
|
subtitle: React.ReactNode;
|
|
leftContent?: React.ReactNode;
|
|
rightContent: React.ReactNode;
|
|
}) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<SplitBox
|
|
left={
|
|
<Stack spacing={theme.spacing(LAYOUT.XS)}>
|
|
<Typography
|
|
component="h2"
|
|
variant="eyebrow"
|
|
color="text.secondary"
|
|
>
|
|
{title}
|
|
</Typography>
|
|
<Typography component="p">{subtitle}</Typography>
|
|
{leftContent}
|
|
</Stack>
|
|
}
|
|
right={rightContent}
|
|
/>
|
|
);
|
|
};
|