-
-
-
+
+
);
}
}
diff --git a/webclient/src/containers/Login/Login.css b/webclient/src/containers/Login/Login.css
index 3bb97690..7166187a 100644
--- a/webclient/src/containers/Login/Login.css
+++ b/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;
diff --git a/webclient/src/containers/Login/Login.i18n.json b/webclient/src/containers/Login/Login.i18n.json
new file mode 100644
index 00000000..fecbd3f8
--- /dev/null
+++ b/webclient/src/containers/Login/Login.i18n.json
@@ -0,0 +1,6 @@
+{
+ "LoginContainer": {
+ "title": "Login",
+ "subtitle": "A cross-platform virtual tabletop for multiplayer card games."
+ }
+}
diff --git a/webclient/src/containers/Login/Login.tsx b/webclient/src/containers/Login/Login.tsx
index f107feb8..04153c98 100644
--- a/webclient/src/containers/Login/Login.tsx
+++ b/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) => {
COCKATRICE
-
-
- buddyList[index].name }
- items={ buddyList.map(user => (
-
-
- )) }
- />
-
-
-
- Buddies Online: ?/{buddyList.length}
-
-
-
-
-
- ignoreList[index].name }
- items={ ignoreList.map(user => (
-
-
- )) }
- />
-
-
-
- Ignored Users Online: ?/{ignoreList.length}
-
-
-
-
-
- 
-
-
-
-
+ return (
+ {name}
-Location: ({country?.toUpperCase()})
-User Level: {userLevel}
-Account Age: {accountageSecs}
-Real Name: {realName}
-
-
-
-
-
- Server Name: {serverName}
-Server Version: {serverVersion}
- -
+
+ )
}
interface AccountProps {
diff --git a/webclient/src/containers/App/AppShell.tsx b/webclient/src/containers/App/AppShell.tsx
index 14ee0077..beec032e 100644
--- a/webclient/src/containers/App/AppShell.tsx
+++ b/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,19 +23,21 @@ class AppShell extends Component {
render() {
return (
-
+
+ buddyList[index].name }
+ items={ buddyList.map(user => (
+
+
+ )) }
+ />
+
- )
- }
+
+ Buddies Online: ?/{buddyList.length}
+
+
+
+
+
+ ignoreList[index].name }
+ items={ ignoreList.map(user => (
+
+
+ )) }
+ />
+
+
+
+ Ignored Users Online: ?/{ignoreList.length}
+
+
+
+
+
+
+
+
+
+
+ {name}
+Location: ({country?.toUpperCase()})
+User Level: {userLevel}
+Account Age: {accountageSecs}
+Real Name: {realName}
+
+
+
+
+
+
+ Server Name: {serverName}
+Server Version: {serverVersion}
+ + +
+
+
-
-
+
+
+
-
+
+
+
+
+
-
-
-
+
Cockatrice is an open source project. { new Date().getUTCFullYear() }
+
{
serverProps.REACT_APP_VERSION && (
@@ -272,6 +276,10 @@ const Login = ({ state, description }: LoginProps) => {
)
}
+
+
Not registered yet?
+
diff --git a/webclient/src/i18n-backend.ts b/webclient/src/i18n-backend.ts
new file mode 100644
index 00000000..d270b350
--- /dev/null
+++ b/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;
diff --git a/webclient/src/i18n-default.json b/webclient/src/i18n-default.json
new file mode 100644
index 00000000..690e5780
--- /dev/null
+++ b/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."}}
\ No newline at end of file
diff --git a/webclient/src/i18n.ts b/webclient/src/i18n.ts
new file mode 100644
index 00000000..8c805354
--- /dev/null
+++ b/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;
diff --git a/webclient/src/index.tsx b/webclient/src/index.tsx
index e165d57f..8cf04158 100644
--- a/webclient/src/index.tsx
+++ b/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 = () => (