feat: add nav to settings

src/common/__tests__/queryPath.test.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright (C) 2021-present Rong "Mantle" Bao
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/ .
+ */
+
+import { queryPath } from "../queryPath"
+
+describe("queryPath", () => {
+  it("should get correct path by ID", () => {
+    const routes = [
+      {
+        path: "/path_2",
+        id: 2,
+      },
+      {
+        path: "/path_1",
+        id: 1,
+      },
+    ] as const
+    const result = queryPath(routes, 1)
+    expect(result).toStrictEqual("/path_1")
+  })
+
+  it("should return first match if multiple entries have the same ID", () => {
+    const routes = [
+      {
+        path: "/path_0",
+        id: 0,
+      },
+      {
+        path: "/path_1_1",
+        id: 1,
+      },
+      {
+        path: "/path_2",
+        id: 2,
+      },
+      {
+        path: "/path_1_2",
+        id: 1,
+      },
+    ] as const
+    const result = queryPath(routes, 1)
+    expect(result).toStrictEqual("/path_1_1")
+  })
+
+  it("should handle erroneous inputs gracefully", () => {
+    const routes = [
+      {
+        path: null,
+        id: 1,
+      },
+    ] as const
+    expect(queryPath(null, 1)).toStrictEqual("#")
+    expect(queryPath(undefined, 1)).toStrictEqual("#")
+    expect(queryPath([], 1)).toStrictEqual("#")
+    expect(queryPath(routes, 1)).toStrictEqual("#")
+  })
+})

src/common/index.ts

@@ -31,6 +31,7 @@ import {
 import { flushed } from "./flushed"
 import { formatDuration } from "./formatDuration"
 import { isNil } from "./isNil"
+import { queryPath } from "./queryPath"
 import { rearrange } from "./rearrange"
 import { waitForEvent } from "./waitForEvent"
 
@@ -54,5 +55,6 @@ export {
   waitForEvent,
   isNil,
   formatDuration,
+  queryPath,
 }
 export type { ISize, TPosition }

src/common/queryPath.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2021-present Rong "Mantle" Bao
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/ .
+ */
+
+import { filter, head } from "lodash"
+
+export type TRoute = {
+  readonly id: number | null
+  readonly path: string | null
+} | null
+
+export type TRoutes = readonly TRoute[] | null | undefined
+
+export function queryPath(routes: TRoutes, id: number): string {
+  return head(filter(routes, (r) => r?.id === id))?.path ?? "#"
+}

src/i18n/locales/en/index.json

@@ -1,5 +1,5 @@
 {
-  "cap_start": "START",
+  "cap_start": "START GAME",
   "typ_version": "Version {{version}}",
   "cap_settings": "Settings",
   "cap_about": "About",

src/i18n/locales/en/settings.json

@@ -1,4 +1,8 @@
 {
+  "typ_h_settings": "Settings",
+  "cap_home": "Home",
+  "cap_game": "Start game",
+  "typ_helper_save": "All changes made on this page will be saved immediately to local storage.",
   "cap_open_button": "Open file...",
   "msg_color_scheme_invalid": "Invalid color scheme file. Please check your file format.",
   "msg_game_map_invalid": "Invalid game map file. Please check your file format.",

src/i18n/locales/zh/index.json

@@ -1,5 +1,5 @@
 {
-  "cap_start": "开始",
+  "cap_start": "开始游戏",
   "typ_version": "版本 {{version}}",
   "cap_settings": "设置",
   "cap_about": "关于",

src/i18n/locales/zh/settings.json

@@ -1,4 +1,8 @@
 {
+  "typ_h_settings": "设置",
+  "cap_home": "主页",
+  "cap_game": "开始游戏",
+  "typ_helper_save": "本页面上的更改会实时保存至本地存储。",
   "cap_open_button": "打开文件...",
   "msg_color_scheme_invalid": "选择的主题文件无效。请检查格式。",
   "msg_game_map_invalid": "选择的布局文件无效。请检查格式。",

src/pages/index.tsx

@@ -17,7 +17,6 @@
 
 import { graphql, Link, PageProps } from "gatsby"
 import { useI18next } from "gatsby-plugin-react-i18next"
-import { filter, head } from "lodash"
 import React from "react"
 
 import FavoriteIcon from "@mui/icons-material/Favorite"
@@ -32,17 +31,15 @@ import Stack from "@mui/material/Stack"
 import Tooltip from "@mui/material/Tooltip"
 import Typography from "@mui/material/Typography"
 
+import { queryPath } from "../common"
 import { CommonHead } from "../components"
 import { PageID } from "../PageID"
 
 const App = ({ data }: PageProps<Queries.IndexPageQuery>) => {
   const routes = data.site?.siteMetadata?.navRoutes
-  const gamePagePath =
-    head(filter(routes, (r) => r?.id === PageID.PAGE_GAME))?.path ?? "#"
-  const settingsPagePath =
-    head(filter(routes, (r) => r?.id === PageID.PAGE_SETTINGS))?.path ?? "#"
-  const aboutPagePath =
-    head(filter(routes, (r) => r?.id === PageID.PAGE_ABOUT))?.path ?? "#"
+  const gamePagePath = queryPath(routes, PageID.PAGE_GAME)
+  const settingsPagePath = queryPath(routes, PageID.PAGE_SETTINGS)
+  const aboutPagePath = queryPath(routes, PageID.PAGE_ABOUT)
 
   const { t } = useI18next()
 

src/pages/settings.tsx

@@ -19,11 +19,13 @@ import validateColorScheme from "ajv-json-loader!../json/schema/ColorScheme.json
 import validateMap from "ajv-json-loader!../json/schema/Map.json.schema"
 
 import FileSaver from "file-saver"
-import { graphql } from "gatsby"
+import { Link, PageProps, graphql } from "gatsby"
 import { useI18next } from "gatsby-plugin-react-i18next"
 import { useSnackbar } from "notistack"
 import React from "react"
 
+import HomeIcon from "@mui/icons-material/Home"
+import PlayArrowIcon from "@mui/icons-material/PlayArrow"
 import Button from "@mui/material/Button"
 import Container from "@mui/material/Container"
 import FormControl from "@mui/material/FormControl"
@@ -34,6 +36,9 @@ import Stack from "@mui/material/Stack"
 import TextField from "@mui/material/TextField"
 import Typography from "@mui/material/Typography"
 
+import { IconButton, Tooltip } from "@mui/material"
+import { PageID } from "../PageID"
+import { queryPath } from "../common"
 import { CommonHead, FileFormControl, NumberFormControl } from "../components"
 import { customizationFacade } from "../customization"
 
@@ -42,9 +47,13 @@ const tryParseInt = (s: string): readonly [boolean, number] => {
   return [!isNaN(v), v]
 }
 
-const App = () => {
+const App = ({ data }: PageProps<Queries.SettingsPageQuery>) => {
   const { t, changeLanguage, languages, language } = useI18next()
 
+  const routes = data.site?.siteMetadata?.navRoutes
+  const homePagePath = queryPath(routes, PageID.PAGE_HOME)
+  const gamePagePath = queryPath(routes, PageID.PAGE_GAME)
+
   const assistanceGridAppearanceOptions = [
     {
       value: "visible",
@@ -78,6 +87,34 @@ const App = () => {
       }}
     >
       <Stack direction="column" spacing={5}>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <Tooltip title={t("cap_home")}>
+            <IconButton
+              size="large"
+              aria-label="home"
+              component={Link}
+              to={homePagePath}
+            >
+              <HomeIcon />
+            </IconButton>
+          </Tooltip>
+          <Typography variant="h4">{t("typ_h_settings")}</Typography>
+          <Tooltip title={t("cap_game")}>
+            <IconButton
+              size="large"
+              aria-label="game"
+              component={Link}
+              to={gamePagePath}
+            >
+              <PlayArrowIcon />
+            </IconButton>
+          </Tooltip>
+        </Stack>
+        <Typography variant="body1">{t("typ_helper_save")}</Typography>
         <Stack direction="column" spacing={3}>
           <Typography
             variant="h5"
@@ -420,6 +457,14 @@ export const Head = CommonHead
 
 export const query = graphql`
   query SettingsPage($language: String!) {
+    site {
+      siteMetadata {
+        navRoutes {
+          id
+          path
+        }
+      }
+    }
     locales: allLocale(
       filter: { ns: { in: ["settings"] }, language: { eq: $language } }
     ) {