Webatrice: i18n (#4562)

* implement i18n capability

* reset package.lock file

* remove custom fallback

* fix relative path for i18n files

* check for language support before fetch request

* add LanguageDropdown component, es translation file to prove functionality

* remove boilerplate

* bundle default english translation with app

* add missing file

* rollup component-level i18n files

* cleanup

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/package-lock.json

@@ -7352,9 +7352,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.8",
+      "version": "1.14.7",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz",
-      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA=="
+      "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -7929,6 +7929,14 @@
         "terser": "^4.6.3"
       }
     },
+    "html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "requires": {
+        "void-elements": "3.1.0"
+      }
+    },
     "html-webpack-plugin": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@@ -8193,6 +8201,22 @@
       "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
       "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
     },
+    "i18next": {
+      "version": "21.6.12",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-21.6.12.tgz",
+      "integrity": "sha512-xlGTPdu2g5PZEUIE6TA1mQ9EIAAv9nMFONzgwAIrKL/KTmYYWufQNGgOmp5Og1PvgUji+6i1whz0rMdsz1qaKw==",
+      "requires": {
+        "@babel/runtime": "^7.12.0"
+      }
+    },
+    "i18next-browser-languagedetector": {
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.3.tgz",
+      "integrity": "sha512-T+oGXHXtrur14CGnZZ7qQ07X38XJQEI00b/4ILrtO6xPbwTlQ1wtMZC2H+tBULixHuVUXv8LKbxfjyITJkezUg==",
+      "requires": {
+        "@babel/runtime": "^7.14.6"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13198,6 +13222,16 @@
         "@babel/runtime": "^7.12.5"
       }
     },
+    "react-i18next": {
+      "version": "11.15.5",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.15.5.tgz",
+      "integrity": "sha512-vBWuVEQgrhZrGKpyv8FmJ7Zs5jRQWl794Tte7yzJ0okZqqi3jd6j2pLYNg441WcREsbIOvWdiDXbY7W6E93p1A==",
+      "requires": {
+        "@babel/runtime": "^7.14.5",
+        "html-escaper": "^2.0.2",
+        "html-parse-stringify": "^3.0.1"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -15740,9 +15774,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.7",
+      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
-      "integrity": "sha512-HxWkieX+STA38EDk7CE9MEryFeHCKzgagxlGvsdS7WBImq9Mk+PGwiT56w82WI3aicwJA8REp42Cxo98c8FZMA==",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -15851,6 +15885,11 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

webclient/package.json

@@ -13,6 +13,8 @@
     "dexie": "^3.0.3",
     "final-form": "^4.20.4",
     "final-form-set-field-touched": "^1.0.1",
+    "i18next": "^21.6.10",
+    "i18next-browser-languagedetector": "^6.1.3",
     "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
@@ -21,6 +23,7 @@
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.7",
     "react-final-form-listeners": "^1.0.3",
+    "react-i18next": "^11.15.3",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",

webclient/prebuild.js

@@ -1,16 +1,23 @@
 const fse = require('fs-extra');
+const path = require('path');
 const util = require('util');
 const exec = util.promisify(require('child_process').exec);
 
-const protoFilesDir = './public/pb';
+const ROOT_DIR = './src';
-const serverPropsFile = './src/server-props.json';
+const PUBLIC_DIR = './public';
-const masterProtoFile = './src/proto-files.json';
+
+const protoFilesDir = `${PUBLIC_DIR}/pb`;
+const i18nDefaultFile = `${ROOT_DIR}/i18n-default.json`;
+const serverPropsFile = `${ROOT_DIR}/server-props.json`;
+const masterProtoFile = `${ROOT_DIR}/proto-files.json`;
 
 const sharedFiles = [
   ['../common/pb', protoFilesDir],
-  ['../cockatrice/resources/countries', './src/images/countries'],
+  ['../cockatrice/resources/countries', `${ROOT_DIR}/images/countries`],
 ];
 
+const i18nFileRegex = /\.i18n\.json$/;
+
 
 (async () => {
   // make sure these files finish copying before master file is created
@@ -18,6 +25,7 @@ const sharedFiles = [
 
   createMasterProtoFile();
   createServerProps();
+  createI18NDefault();
 })();
 
 async function copySharedFiles() {
@@ -53,6 +61,37 @@ async function createServerProps() {
   }
 }
 
+async function createI18NDefault() {
+  try {
+    const files = getAllFiles(ROOT_DIR, i18nFileRegex);
+    const allJson = await Promise.all(files.map(file => fse.readJson(file)));
+
+    const rollup = allJson.reduce((acc, json) => ({
+      ...acc,
+      ...json,
+    }), {});
+
+    fse.outputFile(i18nDefaultFile, JSON.stringify(rollup));
+  } catch (e) {
+    console.error(e);
+    process.exitCode = 1;
+  }
+}
+
 async function getCommitHash() {
   return (await exec('git rev-parse HEAD')).stdout.trim();
 }
+
+function getAllFiles(dirPath, regex = /./, allFiles = []) {
+  return fse.readdirSync(dirPath).reduce((files, file) => {
+    const filePath = dirPath + "/" + file;
+
+    if (fse.statSync(filePath).isDirectory()) {
+      files.concat(getAllFiles(filePath, regex, files));
+    } else if (regex.test(file)) {
+      files.push(path.join(__dirname, filePath));
+    }
+
+    return files;
+  }, allFiles);
+}

webclient/public/locales/es-ES/translation.json

@@ -0,0 +1,4 @@
+{
+	"Common": { "disconnect": "Desconectar"},
+	"LoginContainer": { "title": "Acceso" }
+}

webclient/src/common.i18n.json

@@ -0,0 +1,6 @@
+{
+  "Common": {
+    "language": "Translate into English.",
+    "disconnect": "Disconnect"
+  } 
+}

webclient/src/components/CountryDropdown/CountryDropdown.css

@@ -4,9 +4,10 @@
 
 .CountryDropdown-item {
   display: flex;
+  align-items: center;
 }
 
 .CountryDropdown-item__image {
-  width: 1.1em;
+  width: 1.5em;
   margin-right: 1em;
 }

webclient/src/components/LanguageDropdown/LanguageDropdown.css

@@ -0,0 +1,19 @@
+.LanguageDropdown {
+}
+
+.LanguageDropdown-item {
+  display: flex;
+  align-items: center;
+}
+
+.LanguageDropdown-item__image {
+  width: 1.5em;
+}
+
+.MuiSelect-root .LanguageDropdown-item__label {
+  display: none;
+}
+
+.MuiListItem-root .LanguageDropdown-item__image {
+  margin-right: 1em;
+}

webclient/src/components/LanguageDropdown/LanguageDropdown.tsx

@@ -0,0 +1,51 @@
+// eslint-disable-next-line
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Select, MenuItem } from '@material-ui/core';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+
+import { Images } from 'images/Images';
+import { CountryLabel, Language, LanguageCountry } from 'types';
+
+import './LanguageDropdown.css';
+
+const LanguageDropdown = () => {
+  const { i18n } = useTranslation();
+  const [language, setLanguage] = useState(i18n.resolvedLanguage);
+
+  useEffect(() => {
+    if (language !== i18n.resolvedLanguage) {
+      i18n.changeLanguage(language);
+    }
+  }, [language]);
+
+  return (
+    <FormControl variant='outlined' className='LanguageDropdown'>
+      <Select
+        id='LanguageDropdown-select'
+        margin='dense'
+        value={language}
+        fullWidth={true}
+        onChange={e => setLanguage(e.target.value as Language)}
+      >
+        {
+          Object.keys(LanguageCountry).map((lang) => {
+            const country = LanguageCountry[lang];
+
+            return (
+              <MenuItem value={lang} key={lang}>
+                <div className="LanguageDropdown-item">
+                  <img className="LanguageDropdown-item__image" src={Images.Countries[country]} alt={CountryLabel[country]} />
+                  <span className="LanguageDropdown-item__label">{lang}</span>
+                </div>
+              </MenuItem>
+            );
+          })
+        }
+      </Select>
+    </FormControl>
+  )
+};
+
+export default LanguageDropdown;

webclient/src/components/index.ts

@@ -6,6 +6,7 @@ export { default as Header } from './Header/Header';
 export { default as InputField } from './InputField/InputField';
 export { default as InputAction } from './InputAction/InputAction';
 export { default as KnownHosts } from './KnownHosts/KnownHosts';
+export { default as LanguageDropdown } from './LanguageDropdown/LanguageDropdown';
 export { default as Message } from './Message/Message';
 export { default as VirtualList } from './VirtualList/VirtualList';
 export { default as UserDisplay } from './UserDisplay/UserDisplay';

webclient/src/containers/Account/Account.css

@@ -43,7 +43,11 @@
   font-size: 10px;
 }
 
-.account-details img {
+.account-details > img {
   width: 100%;
   margin-bottom: 20px;
 }
+
+.account-details__lang {
+  margin-top: 20px;
+}

webclient/src/containers/Account/Account.tsx

@@ -1,12 +1,13 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
+import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
 import Button from '@material-ui/core/Button';
 import ListItem from '@material-ui/core/ListItem';
 import Paper from '@material-ui/core/Paper';
 
-import { UserDisplay, VirtualList, AuthGuard } from 'components';
+import { UserDisplay, VirtualList, AuthGuard, LanguageDropdown } from 'components';
 import { AuthenticationService, SessionService } from 'api';
 import { ServerSelectors } from 'store';
 import { User } from 'types';
@@ -16,23 +17,21 @@ import AddToIgnore from './AddToIgnore';
 
 import './Account.css';
 
-class Account extends Component<AccountProps> {
+const Account = (props: AccountProps) => {
-  handleAddToBuddies({ userName }) {
+  const { buddyList, ignoreList, serverName, serverVersion, user } = props;
-    SessionService.addToBuddyList(userName);
-  }
-
-  handleAddToIgnore({ userName }) {
-    SessionService.addToIgnoreList(userName);
-  }
-
-  render() {
-    console.log(this.props);
-
-    const { buddyList, ignoreList, serverName, serverVersion, user } = this.props;
   const { country, realName, name, userLevel, accountageSecs, avatarBmp } = user;
-
   let url = URL.createObjectURL(new Blob([avatarBmp], { 'type': 'image/png' }));
 
+  const { t } = useTranslation();
+
+  const handleAddToBuddies = ({ userName }) => {
+    SessionService.addToBuddyList(userName);
+  };
+
+  const handleAddToIgnore = ({ userName }) => {
+    SessionService.addToIgnoreList(userName);
+  };
+
   return (
     <div className="account">
       <AuthGuard />
@@ -50,7 +49,7 @@ class Account extends Component<AccountProps> {
             )) }
           />
           <div className="" style={{ borderTop: '1px solid' }}>
-              <AddToBuddies onSubmit={this.handleAddToBuddies} />
+            <AddToBuddies onSubmit={handleAddToBuddies} />
           </div>
         </Paper>
       </div>
@@ -68,7 +67,7 @@ class Account extends Component<AccountProps> {
             )) }
           />
           <div className="" style={{ borderTop: '1px solid' }}>
-              <AddToIgnore onSubmit={this.handleAddToIgnore} />
+            <AddToIgnore onSubmit={handleAddToIgnore} />
           </div>
         </Paper>
       </div>
@@ -85,17 +84,21 @@ class Account extends Component<AccountProps> {
             <Button size="small" color="primary" variant="contained">Change<br />Password</Button>
             <Button size="small" color="primary" variant="contained">Change<br />Avatar</Button>
           </div>
+
         </Paper>
         <Paper className="account-details">
           <p>Server Name: {serverName}</p>
           <p>Server Version: {serverVersion}</p>
-            <Button color="primary" variant="contained" onClick={() => AuthenticationService.disconnect()}>Disconnect</Button>
+          <Button color="primary" variant="contained" onClick={() => AuthenticationService.disconnect()}>{ t('Common.disconnect') }</Button>
+
+          <div className="account-details__lang">
+            <LanguageDropdown />
+          </div>
         </Paper>
       </div>
     </div>
   )
 }
-}
 
 interface AccountProps {
   buddyList: User[];

webclient/src/containers/App/AppShell.tsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, Suspense } from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter as Router } from 'react-router-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -23,6 +23,7 @@ class AppShell extends Component {
 
   render() {
     return (
+      <Suspense fallback="loading">
         <Provider store={store}>
           <CssBaseline />
           <ToastProvider>
@@ -36,6 +37,7 @@ class AppShell extends Component {
             </div>
           </ToastProvider>
         </Provider>
+      </Suspense>
     );
   }
 }

webclient/src/containers/Login/Login.css

@@ -185,11 +185,15 @@
   margin-top: 30px;
 }
 
-.login-footer_register {
+.login-footer__register {
   margin-bottom: 10px;
   font-weight: bold;
 }
 
+.login-footer__language {
+  margin-top: 20px;
+}
+
 .login-content__connectionStatus {
   text-align: center;
   margin: 20px 0;

webclient/src/containers/Login/Login.i18n.json

@@ -0,0 +1,6 @@
+{
+  "LoginContainer": {
+    "title": "Login",
+    "subtitle": "A cross-platform virtual tabletop for multiplayer card games."
+  }
+}

webclient/src/containers/Login/Login.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
@@ -6,9 +7,9 @@ import Button from '@material-ui/core/Button';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 
-
 import { AuthenticationService } from 'api';
 import { RegistrationDialog, RequestPasswordResetDialog, ResetPasswordDialog, AccountActivationDialog } from 'dialogs';
+import { LanguageDropdown } from 'components';
 import { LoginForm } from 'forms';
 import { useReduxEffect, useFireOnce } from 'hooks';
 import { Images } from 'images';
@@ -58,6 +59,8 @@ const useStyles = makeStyles(theme => ({
 
 const Login = ({ state, description }: LoginProps) => {
   const classes = useStyles();
+  const { t } = useTranslation();
+
   const isConnected = AuthenticationService.isConnected(state);
 
   const [hostIdToRemember, setHostIdToRemember] = useState(null);
@@ -239,8 +242,8 @@ const Login = ({ state, description }: LoginProps) => {
               <img src={Images.Logo} alt="logo" />
               <span>COCKATRICE</span>
             </div>
-            <Typography variant="h1">Login</Typography>
+            <Typography variant="h1">{ t('LoginContainer.title') }</Typography>
-            <Typography variant="subtitle1">A cross-platform virtual tabletop for multiplayer card games.</Typography>
+            <Typography variant="subtitle1">{ t('LoginContainer.subtitle') }</Typography>
             <div className="login-form">
               <LoginForm
                 onSubmit={handleLogin}
@@ -258,13 +261,14 @@ const Login = ({ state, description }: LoginProps) => {
             }
 
             <div className="login-footer">
-              <div className="login-footer_register">
+              <div className="login-footer__register">
                 <span>Not registered yet?</span>
                 <Button color="primary" onClick={openRegistrationDialog}>Create an account</Button>
               </div>
               <Typography variant="subtitle2">
                 Cockatrice is an open source project. { new Date().getUTCFullYear() }
               </Typography>
+
               {
                 serverProps.REACT_APP_VERSION && (
                   <Typography variant="subtitle2">
@@ -272,6 +276,10 @@ const Login = ({ state, description }: LoginProps) => {
                   </Typography>
                 )
               }
+
+              <div className="login-footer__language">
+                <LanguageDropdown />
+              </div>
             </div>
           </div>
           <div className="login-content__description">

webclient/src/i18n-backend.ts

@@ -0,0 +1,21 @@
+import { ModuleType } from 'i18next';
+
+import { Language } from 'types';
+
+class I18nBackend {
+  static type: ModuleType = 'backend';
+  static BASE_URL = `${process.env.PUBLIC_URL}/locales`;
+
+  read(language, namespace, callback) {
+    if (!Language[language]) {
+      callback(true, null);
+      return;
+    }
+
+    fetch(`${I18nBackend.BASE_URL}/${Language[language]}/${namespace}.json`)
+      .then(resp => resp.json().then(json => callback(null, json)))
+      .catch(error => callback(error, null));
+  }
+}
+
+export default I18nBackend;

webclient/src/i18n-default.json

@@ -0,0 +1 @@
+{"Common":{"language":"Translate into English.","disconnect":"Disconnect"},"LoginContainer":{"title":"Login","subtitle":"A cross-platform virtual tabletop for multiplayer card games."}}

webclient/src/i18n.ts

@@ -0,0 +1,30 @@
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import { Language } from 'types';
+
+import I18nBackend from './i18n-backend';
+
+// Bundle default translation with application
+import translation from './i18n-default.json';
+
+i18n
+  .use(I18nBackend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: Language['en-US'],
+    resources: {
+      [Language['en-US']]: { translation },
+    },
+    partialBundledLanguages: true,
+
+    interpolation: {
+      // not needed for react as it escapes by default
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

webclient/src/index.tsx

@@ -1,12 +1,15 @@
 import { ThemeProvider } from '@material-ui/styles';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 
-import { materialTheme } from './material-theme';
 
 import { AppShell } from 'containers';
 
+import { materialTheme } from './material-theme';
+import './i18n';
+
+import './index.css';
+
 const appWithMaterialTheme = () => (
   <ThemeProvider theme={materialTheme}>
     <AppShell />

webclient/src/translations/en.json

@@ -1,3 +0,0 @@
-{
-    
-}

webclient/src/types/index.ts

@@ -11,3 +11,4 @@ export * from './sort';
 export * from './forms';
 export * from './message';
 export * from './settings';
+export * from './languages';

webclient/src/types/languages.ts

@@ -0,0 +1,11 @@
+import { CountryLabel } from './countries';
+
+export enum Language {
+  'en-US' = 'en-US',
+  'es-ES' = 'es-ES',
+}
+
+export enum LanguageCountry {
+  'en-US' = 'us',
+  'es-ES' = 'es',
+}