feat: locales editing page

packages/locales/lib/human/en.json

@@ -765,5 +765,18 @@
   "reset_spawnpoints": "Reset Spawnpoints",
   "reset_submission_cells": "Reset Submission Cells",
   "hisuian": "Hisuian",
-  "spacial_rend_range": "Spacial Rend Range"
+  "spacial_rend_range": "Spacial Rend Range",
+  "key": "Key",
+  "ai": "AI",
+  "human": "Human",
+  "locales": "Locales",
+  "instructions": "Instructions",
+  "locale_instructions_1": "Select a language from the dropdown",
+  "locale_instructions_2": "Enter the desired translations in the \"Human\" column",
+  "locale_instructions_3": "Click the \"$t(download)\" button to download a JSON file",
+  "locale_instructions_4": "Fork the GitHub repo link below",
+  "locale_instructions_5": "Create a new branch and name it the language you are translating",
+  "locale_instructions_6": "Replace the contents of \"packages/locales/lib/human/{{lng}}.json\" with the file you downloaded",
+  "locale_instructions_7": "Create a pull request",
+  "locale_instructions_8": "Wait for the pull request to be reviewed and merged"
 }

packages/locales/lib/index.js

@@ -1,7 +1,12 @@
 const { create } = require('./create')
 const { missing } = require('./missing')
 const { generate } = require('./generate')
-const { readLocaleDirectory, writeAll, getStatus } = require('./utils')
+const {
+  readLocaleDirectory,
+  writeAll,
+  getStatus,
+  readAndParseJson,
+} = require('./utils')
 
 const locales = readLocaleDirectory(true).map((x) => x.replace('.json', ''))
 const status = getStatus()
@@ -12,3 +17,4 @@ module.exports.create = create
 module.exports.missing = missing
 module.exports.generate = generate
 module.exports.writeAll = writeAll
+module.exports.readAndParseJson = readAndParseJson

packages/locales/lib/missing.js

@@ -5,27 +5,34 @@ const { resolve } = require('path')
 const { log, HELPERS } = require('@rm/logger')
 const { readAndParseJson, readLocaleDirectory } = require('./utils')
 
-async function missing() {
-  const localTranslations = readLocaleDirectory(true)
+/**
+ *
+ * @param {string} fileName
+ * @returns {Promise<import('./generate').I18nObject>}
+ */
+async function missing(fileName) {
   const englishRef = await readAndParseJson('en.json', true)
+  const humanLocales = await readAndParseJson(fileName, true)
+  /** @type {import('./generate').I18nObject} */
+  const missingKeys = {}
 
-  await Promise.allSettled(
-    localTranslations.map(async (fileName) => {
-      const humanLocales = await readAndParseJson(fileName, true)
-      const aiLocales = await readAndParseJson(fileName, false)
-      const combined = {
-        ...aiLocales,
-        ...humanLocales,
+  Object.keys(englishRef)
+    .sort()
+    .forEach((key) => {
+      if (!humanLocales[key] && !key.startsWith('locale_selection_')) {
+        missingKeys[key] = process.argv.includes('--ally')
+          ? `t('${key}')`
+          : englishRef[key]
       }
-      const missingKeys = {}
+    })
+  return missingKeys
+}
 
-      Object.keys(englishRef).forEach((key) => {
-        if (!combined[key] && !key.startsWith('locale_selection_')) {
-          missingKeys[key] = process.argv.includes('--ally')
-            ? `t('${key}')`
-            : englishRef[key]
-        }
-      })
+async function missingAll() {
+  const localTranslations = readLocaleDirectory(true)
+  await Promise.allSettled(
+    localTranslations.map(async (fileName) => {
+      const missingKeys = await missing(fileName)
       await fs.writeFile(
         resolve(
           __dirname,
@@ -44,5 +51,5 @@ async function missing() {
 module.exports.missing = missing
 
 if (require.main === module) {
-  missing().then(() => process.exit(0))
+  missingAll().then(() => process.exit(0))
 }

server/src/graphql/resolvers.js

@@ -3,6 +3,7 @@ const { resolve } = require('path')
 const { GraphQLJSON } = require('graphql-type-json')
 const { S2LatLng, S2RegionCoverer, S2LatLngRect } = require('nodes2ts')
 const config = require('@rm/config')
+const { missing, readAndParseJson } = require('@rm/locales')
 
 const buildDefaultFilters = require('../services/filters/builder/base')
 const filterComponents = require('../services/functions/filterComponents')
@@ -198,6 +199,16 @@ const resolvers = {
       }
       return {}
     },
+    locales: async (_, { locale }) => {
+      const missingLocales = await missing(`${locale}.json`)
+      return locale
+        ? {
+            missing: Object.keys(missingLocales),
+            human: await readAndParseJson(`${locale}.json`, true),
+            ai: await readAndParseJson(`${locale}.json`, false),
+          }
+        : { missing: null, human: null, ai: null }
+    },
     motdCheck: (_, { clientIndex }, { req, perms }) => {
       const motd = config.getMapConfig(req).messageOfTheDay
       return (

server/src/graphql/typeDefs/index.graphql

@@ -23,6 +23,7 @@ type Query {
     filters: JSON
   ): [Gym]
   gymsSingle(id: ID, perm: String): Gym
+  locales(locale: String): Locales
   motdCheck(clientIndex: Int): Boolean
   nests(
     minLat: Float

server/src/graphql/typeDefs/map.graphql

@@ -216,3 +216,9 @@ type ValidUserObj {
   loggedIn: Boolean
   admin: Boolean
 }
+
+type Locales {
+  human: JSON
+  ai: JSON
+  missing: JSON
+}

src/assets/css/main.css

@@ -554,3 +554,9 @@ input[type='time']::-webkit-calendar-picker-indicator {
   opacity: 90%;
   z-index: 9;
 }
+
+.locales-layout {
+  display: grid;
+  grid-template-rows: auto 1fr auto; /* Header, table, footer */
+  min-height: 100vh;
+}

src/components/virtual/Table.jsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import { TableVirtuoso } from 'react-virtuoso'
+
+const VirtuosoTableComponents = {
+  Scroller: React.forwardRef((props, ref) => (
+    <TableContainer component={Paper} {...props} ref={ref} />
+  )),
+  Table: (props) => (
+    <Table
+      {...props}
+      sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }}
+    />
+  ),
+  TableHead,
+  // eslint-disable-next-line no-unused-vars
+  TableRow: ({ item: _, ...props }) => <TableRow {...props} />,
+  TableBody: React.forwardRef((props, ref) => (
+    <TableBody {...props} ref={ref} />
+  )),
+}
+
+/** @param {import('react-virtuoso').TableVirtuosoProps} props */
+export function VirtualTable(props) {
+  return <TableVirtuoso components={VirtuosoTableComponents} {...props} />
+}

src/pages/index.jsx

@@ -10,6 +10,7 @@ import { BlockedPage } from './Blocked'
 import { ErrorPage } from './Error'
 import { DataManagerPage } from './data'
 import { ResetPage } from './Reset'
+import { LocalesPage } from './locales'
 
 const Playground = React.lazy(() =>
   import('./playground').then(({ PlaygroundPage }) => ({
@@ -44,6 +45,7 @@ const playgroundRoute = (
 )
 const errorRoute = <ErrorPage />
 const resetRoute = <ResetPage />
+const localesPage = <LocalesPage />
 
 export function Pages() {
   return (
@@ -52,6 +54,7 @@ export function Pages() {
       <Route path="reset" element={resetRoute} />
       <Route path="login" element={loginRoute} />
       <Route path="data-management" element={dataRoute} />
+      <Route path="locales" element={localesPage} />
       <Route path="playground" element={playgroundRoute} />
       <Route path="blocked/:info" element={blockedRoute} />
       <Route path="@/:lat/:lon" element={mapRoute} />

src/pages/locales/components/AllSwitch.jsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Switch from '@mui/material/Switch'
+import { useTranslation } from 'react-i18next'
+
+import { useLocalesStore } from '../hooks/store'
+
+export function AllSwitch() {
+  const { t } = useTranslation()
+  const all = useLocalesStore((s) => s.all)
+  return (
+    <FormControlLabel
+      control={
+        <Switch
+          checked={all}
+          onChange={(_, checked) => useLocalesStore.setState({ all: checked })}
+        />
+      }
+      label={t('all')}
+    />
+  )
+}

src/pages/locales/components/EditLocale.jsx

@@ -0,0 +1,34 @@
+// @ts-check
+import * as React from 'react'
+import TextField from '@mui/material/TextField'
+import { useLocalesStore } from '../hooks/store'
+
+/** @param {{ name: string } & import('@mui/material').TextFieldProps} props */
+export function EditLocale({ name, type, ...props }) {
+  const value = useLocalesStore((s) => s.custom[name] || '')
+  const isScrolling = useLocalesStore((s) => s.isScrolling)
+  /** @type {import('@mui/material').TextFieldProps['onChange']} */
+  const onChange = React.useCallback(
+    (event) => {
+      useLocalesStore.setState((prev) => ({
+        custom: {
+          ...prev.custom,
+          [name]:
+            type === 'number' ? +event.target.value || 0 : event.target.value,
+        },
+      }))
+    },
+    [name],
+  )
+  return (
+    <TextField
+      fullWidth
+      type={type}
+      value={value}
+      onChange={onChange}
+      multiline={type === 'text' && !isScrolling}
+      size="small"
+      {...props}
+    />
+  )
+}

src/pages/locales/components/LocalesFooter.jsx

@@ -0,0 +1,35 @@
+// @ts-check
+import * as React from 'react'
+import Grid from '@mui/material/Unstable_Grid2'
+import Button from '@mui/material/Button'
+import GitHubIcon from '@mui/icons-material/GitHub'
+import { useTranslation } from 'react-i18next'
+
+import { downloadLocales } from '../hooks/store'
+import { AllSwitch } from './AllSwitch'
+
+const github = <GitHubIcon />
+
+export function LocalesFooter() {
+  const { t } = useTranslation()
+  return (
+    <Grid component="footer" container justifyContent="space-evenly" py={1}>
+      <Grid xs={4} sm={2} className="flex-center">
+        <AllSwitch />
+      </Grid>
+      <Grid xs={4} sm={2} className="flex-center">
+        <Button onClick={downloadLocales}>{t('download')}</Button>
+      </Grid>
+      <Grid xs={4} sm={2} className="flex-center">
+        <Button
+          startIcon={github}
+          color="secondary"
+          href="https://github.com/WatWowMap/ReactMap"
+          target="_blank"
+        >
+          {t('contribute')}
+        </Button>
+      </Grid>
+    </Grid>
+  )
+}

src/pages/locales/components/LocalesHeader.jsx

@@ -0,0 +1,51 @@
+// @ts-check
+import * as React from 'react'
+import Grid from '@mui/material/Unstable_Grid2'
+import Typography from '@mui/material/Typography'
+import Collapse from '@mui/material/Collapse'
+import Button from '@mui/material/Button'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { useTranslation } from 'react-i18next'
+
+import { LocaleSelection } from '@components/inputs/LocaleSelection'
+
+import { useLocalesStore } from '../hooks/store'
+
+const expandMore = <ExpandMoreIcon />
+
+export function LocalesHeader() {
+  const { t, i18n } = useTranslation()
+  const instructions = useLocalesStore((s) => s.instructions)
+  return (
+    <Grid component="header" container className="flex-center" p={2}>
+      <Grid xs={6} sm={4}>
+        <Typography variant="h4">{t('locales')}</Typography>
+      </Grid>
+      <Grid xs={6} sm={4}>
+        <LocaleSelection />
+      </Grid>
+      <Grid xs={12} sm={4} textAlign="right">
+        <Button
+          color="secondary"
+          onClick={() =>
+            useLocalesStore.setState((prev) => ({
+              instructions: !prev.instructions,
+            }))
+          }
+          endIcon={expandMore}
+        >
+          {t('instructions')}
+        </Button>
+      </Grid>
+      <Grid component={Collapse} in={instructions} xs={12} sm={8}>
+        <ol>
+          {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+            <Typography key={i} component="li">
+              {t(`locale_instructions_${i}`, { lng: i18n.language })}
+            </Typography>
+          ))}
+        </ol>
+      </Grid>
+    </Grid>
+  )
+}