Skip to content

Commit

Permalink
almost done settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@chuigda
chuigda committed Apr 29, 2024
1 parent 5e82a5f commit 269c426
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 43 deletions.
81 changes: 40 additions & 41 deletions src/components/settings/SettingsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,10 +243,10 @@ export default function Page() {

<Tabs.Panel value="inputs">
<Text size="lg" fw={500} className={classes.title}>
Inputs
{t("Settings.Inputs")}
</Text>
<Text size="xs" c="dimmed" mt={3} mb="lg">
Customize the input settings
{t("Settings.Inputs.Desc")}
</Text>
<Group
justify="space-between"
Expand All @@ -255,9 +255,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Text Move Input</Text>
<Text>{t("Settings.Inputs.TextInput")}</Text>
<Text size="xs" c="dimmed">
Enter moves in text format
{t("Settings.Inputs.TextInput.Desc")}
</Text>
</div>
<SettingsSwitch atom={moveInputAtom} />
Expand All @@ -269,20 +269,20 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Spell Check</Text>
<Text>{t("Settings.Inputs.SpellCheck")}</Text>
<Text size="xs" c="dimmed">
Enable or disable spell check on text inputs
{t("Settings.Inputs.SpellCheck.Desc")}
</Text>
</div>
<SettingsSwitch atom={spellCheckAtom} />
</Group>
</Tabs.Panel>
<Tabs.Panel value="report">
<Text size="lg" fw={500} className={classes.title}>
Opening Report
{t("Settings.OpeningReport")}
</Text>
<Text size="xs" c="dimmed" mt={3} mb="lg">
Customize the opening report settings
{t("Settings.OpeningReport.Desc")}
</Text>
<Group
justify="space-between"
Expand All @@ -291,9 +291,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Percentage Coverage</Text>
<Text>{t("Settings.OpeningReport.PercentCoverage")}</Text>
<Text size="xs" c="dimmed">
Percentage of moves covered in each position
{t("Settings.OpeningReport.PercentCoverage.Desc")}
</Text>
</div>
<SettingsNumberInput
Expand All @@ -311,10 +311,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Minimum Games</Text>
<Text>{t("Settings.OpeningReport.MinGames")}</Text>
<Text size="xs" c="dimmed">
Minimum number of games in each position for it to be
considered
{t("Settings.OpeningReport.MinGames.Desc")}
</Text>
</div>
<SettingsNumberInput atom={minimumGamesAtom} min={0} step={1} />
Expand All @@ -323,10 +322,10 @@ export default function Page() {

<Tabs.Panel value="anarchy">
<Text size="lg" fw={500} className={classes.title}>
Anarchy
{t("Settings.Anarchy")}
</Text>
<Text size="xs" c="dimmed" mt={3} mb="lg">
Fun options
{t("Settings.Anarchy.Desc")}
</Text>
<Group
justify="space-between"
Expand All @@ -335,9 +334,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Forced En Croissant</Text>
<Text>{t("Settings.Anarchy.ForcedEnCroissant")}</Text>
<Text size="xs" c="dimmed">
{"Forces you to play En Croissant, if it's a legal move."}
{t("Settings.Anarchy.ForcedEnCroissant.Desc")}
</Text>
</div>
<SettingsSwitch atom={forcedEnPassantAtom} />
Expand All @@ -346,10 +345,10 @@ export default function Page() {

<Tabs.Panel value="appearance">
<Text size="lg" fw={500} className={classes.title}>
Appearance
{t("Settings.Appearance")}
</Text>
<Text size="xs" c="dimmed" mt={3} mb="lg">
Customize the look of the app
{t("Settings.Appearance.Desc")}
</Text>
<Group
justify="space-between"
Expand All @@ -358,9 +357,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Theme</Text>
<Text>{t("Settings.Appearance.Theme")}</Text>
<Text size="xs" c="dimmed">
Overall color scheme
{t("Settings.Appearance.Theme.Desc")}
</Text>
</div>
<ThemeButton />
Expand All @@ -372,9 +371,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Title Bar</Text>
<Text>{t("Settings.Appearance.TitleBar")}</Text>
<Text size="xs" c="dimmed">
Choose between native or custom title bar
{t("Settings.Appearance.TitleBar.Desc")}
</Text>
</div>
<Select
Expand All @@ -393,9 +392,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Font Size</Text>
<Text>{t("Settings.Appearance.FontSize")}</Text>
<Text size="xs" c="dimmed">
Overall font size
{t("Settings.Appearance.FontSize.Desc")}
</Text>
</div>
<FontSizeSlider />
Expand All @@ -407,9 +406,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Piece Set</Text>
<Text>{t("Settings.Appearance.PieceSet")}</Text>
<Text size="xs" c="dimmed">
Pieces used on the boards
{t("Settings.Appearance.PieceSet.Desc")}
</Text>
</div>
<PiecesSelect />
Expand All @@ -421,9 +420,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Board image</Text>
<Text>{t("Settings.Appearance.BoardImage")}</Text>
<Text size="xs" c="dimmed">
Image used as the background of the board
{t("Settings.Appearance.BoardImage.Desc")}
</Text>
</div>
<BoardSelect />
Expand All @@ -435,9 +434,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Accent Color</Text>
<Text>{t("Settings.Appearance.AccentColor")}</Text>
<Text size="xs" c="dimmed">
Main color of the app
{t("Settings.Appearance.AccentColor.Desc")}
</Text>
</div>
<div style={{ width: 200 }}>
Expand All @@ -448,10 +447,10 @@ export default function Page() {

<Tabs.Panel value="sound">
<Text size="lg" fw={500} className={classes.title}>
Sound
{t("Settings.Sound")}
</Text>
<Text size="xs" c="dimmed" mt={3} mb="lg">
Customize the sound settings
{t("Settings.Sound.Desc")}
</Text>
<Group
justify="space-between"
Expand All @@ -460,9 +459,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Volume</Text>
<Text>{t("Settings.Sound.Volume")}</Text>
<Text size="xs" c="dimmed">
Overall volume
{t("Settings.Sound.Volume.Desc")}
</Text>
</div>
<VolumeSlider />
Expand All @@ -474,9 +473,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Sound collection</Text>
<Text>{t("Settings.Sound.Collection")}</Text>
<Text size="xs" c="dimmed">
Collection of sounds used
{t("Settings.Sound.Collection.Desc")}
</Text>
</div>
<SoundSelect />
Expand Down Expand Up @@ -521,10 +520,10 @@ export default function Page() {

<Tabs.Panel value="directories">
<Text size="lg" fw={500} className={classes.title}>
Directories
{t("Settings.Directories")}
</Text>
<Text size="xs" c="dimmed" mt={3} mb="lg">
Customize the directories used by the app
{t("Settings.Directories.Desc")}
</Text>
<Group
justify="space-between"
Expand All @@ -533,9 +532,9 @@ export default function Page() {
className={classes.item}
>
<div>
<Text>Files directory</Text>
<Text>{t("Settings.Directories.Files")}</Text>
<Text size="xs" c="dimmed">
This is where your games in the Files page are stored
{t("Settings.Directories.Files.Desc")}
</Text>
</div>
<FileInput
Expand Down
7 changes: 5 additions & 2 deletions src/components/settings/ThemeButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ import {
useMantineColorScheme,
} from "@mantine/core";
import { IconMoon, IconSun } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";

export default function ThemeButton() {
const { t } = useTranslation();

const { colorScheme, setColorScheme } = useMantineColorScheme();

return (
Expand All @@ -22,7 +25,7 @@ export default function ThemeButton() {
label: (
<Center>
<IconSun size="1rem" stroke={1.5} />
<Box ml={10}>Light</Box>
<Box ml={10}>{t("Settings.Appearance.Theme.Light")}</Box>
</Center>
),
},
Expand All @@ -31,7 +34,7 @@ export default function ThemeButton() {
label: (
<Center>
<IconMoon size="1rem" stroke={1.5} />
<Box ml={10}>Dark</Box>
<Box ml={10}>{t("Settings.Appearance.Theme.Dark")}</Box>
</Center>
),
},
Expand Down
38 changes: 38 additions & 0 deletions src/translation/en_US.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,5 +282,43 @@ export const en_US = {
"Settings.PreviewBoard.Desc": "Show a preview of the board when hovering over a move in the engine analysis",
"Settings.ScrollThroughMoves": "Scroll Through Moves",
"Settings.ScrollThroughMoves.Desc": "Enable or disable scrolling through moves on the chessboard",
"Settings.Inputs.Desc": "Customize the input settings",
"Settings.Inputs.TextInput": "Text Move Input",
"Settings.Inputs.TextInput.Desc": "Enter moves in text format",
"Settings.Inputs.SpellCheck": "Spell Check",
"Settings.Inputs.SpellCheck.Desc": "Enable or disable spell check on text inputs",
"Settings.OpeningReport.Desc": "Customize the opening report settings",
"Settings.OpeningReport.PercentCoverage": "Percent Coverage",
"Settings.OpeningReport.PercentCoverage.Desc": "Percentage of moves covered in each position",
"Settings.OpeningReport.MinGames": "Minimum Games",
"Settings.OpeningReport.MinGames.Desc": "Minimum number of games in each position for it to be considered",
"Settings.Anarchy.Desc": "Fun options",
"Settings.Anarchy.ForcedEnCroissant": "Forced En Croissant",
"Settings.Anarchy.ForcedEnCroissant.Desc": "Forces you to play En Croissant, if it's a legal move.",
"Settings.Appearance.Desc": "Customize the look of the app",
"Settings.Appearance.Theme": "Theme",
"Settings.Appearance.Theme.Desc": "Overall color scheme",
"Settings.Appearance.Theme.Light": "Light",
"Settings.Appearance.Theme.Dark": "Dark",
"Settings.Appearance.TitleBar": "Title Bar",
"Settings.Appearance.TitleBar.Desc": "Choose between native or custom title bar",
"Settings.Appearance.TitleBar.Native": "Native",
"Settings.Appearance.TitleBar.Custom": "Custom",
"Settings.Appearance.FontSize": "Font Size",
"Settings.Appearance.FontSize.Desc": "Overall font size",
"Settings.Appearance.PieceSet": "Piece Set",
"Settings.Appearance.PieceSet.Desc": "Pieces used on the boards",
"Settings.Appearance.BoardImage": "Board Image",
"Settings.Appearance.BoardImage.Desc": "Image used as the background of the board",
"Settings.Appearance.AccentColor": "Accent Color",
"Settings.Appearance.AccentColor.Desc": "Main color of the app",
"Settings.Sound.Desc": "Customize the sound settings",
"Settings.Sound.Volume": "Volume",
"Settings.Sound.Volume.Desc": "Overall volume",
"Settings.Sound.Collection": "Sound collection",
"Settings.Sound.Collection.Desc": "Collection of sounds used",
"Settings.Directories.Desc": "Customize the directories used by the app",
"Settings.Directories.Files": "Files directory",
"Settings.Directories.Files.Desc": "This is where your games in the Files page are stored",
}
}
38 changes: 38 additions & 0 deletions src/translation/zh_CN.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,5 +282,43 @@ export const zh_CN = {
"Settings.PreviewBoard.Desc": "在引擎分析中，当鼠标悬停在着法上时显示一个预览棋盘",
"Settings.ScrollThroughMoves": "滚动着法",
"Settings.ScrollThroughMoves.Desc": "在引擎分析中，用鼠标滚轮在着法之间快速切换",
"Settings.Inputs.Desc": "自定义输入选项",
"Settings.Inputs.TextInput": "文本输入着法",
"Settings.Inputs.TextInput.Desc": "以文本方式输入着法",
"Settings.Inputs.SpellCheck": "拼写检查",
"Settings.Inputs.SpellCheck.Desc": "启用或禁用文本输入的拼写检查",
"Settings.OpeningReport.Desc": "自定义开局报告",
"Settings.OpeningReport.PercentCoverage": "覆盖率百分比",
"Settings.OpeningReport.PercentCoverage.Desc": "每个局面中的着法覆盖率百分比",
"Settings.OpeningReport.MinGames": "最小对局数",
"Settings.OpeningReport.MinGames.Desc": "每个局面中被考虑的最小对局数",
"Settings.Anarchy.Desc": "有趣的选项",
"Settings.Anarchy.ForcedEnCroissant": "强制 En Croissant",
"Settings.Anarchy.ForcedEnCroissant.Desc": "如果 En Croissant 是合法的着法，强制走出这一着",
"Settings.Appearance.Desc": "自定义应用程序的外观",
"Settings.Appearance.Theme": "主题",
"Settings.Appearance.Theme.Desc": "总体的颜色主题",
"Settings.Appearance.Theme.Light": "亮",
"Settings.Appearance.Theme.Dark": "暗",
"Settings.Appearance.TitleBar": "标题栏",
"Settings.Appearance.TitleBar.Desc": "使用原生或自定义标题栏",
"Settings.Appearance.TitleBar.Native": "Native",
"Settings.Appearance.TitleBar.Custom": "Custom",
"Settings.Appearance.FontSize": "字体大小",
"Settings.Appearance.FontSize.Desc": "应用程序中的字体大小",
"Settings.Appearance.PieceSet": "棋子",
"Settings.Appearance.PieceSet.Desc": "棋盘上使用的棋子",
"Settings.Appearance.BoardImage": "棋盘图案",
"Settings.Appearance.BoardImage.Desc": "棋盘背景图案",
"Settings.Appearance.AccentColor": "主题色",
"Settings.Appearance.AccentColor.Desc": "应用程序的主题色",
"Settings.Sound.Desc": "自定义声音选项",
"Settings.Sound.Volume": "音量",
"Settings.Sound.Volume.Desc": "总音量",
"Settings.Sound.Collection": "声音集",
"Settings.Sound.Collection.Desc": "使用的声音集",
"Settings.Directories.Desc": "自定义应用程序使用的目录",
"Settings.Directories.Files": "文件目录",
"Settings.Directories.Files.Desc": "这是你在文件页面中的对局存储的位置",
}
}

0 comments on commit 269c426

Please sign in to comment.