diff --git a/package-lock.json b/package-lock.json
index d5679cf..cbce72e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3034,6 +3034,15 @@
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
"integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
},
+ "bindings": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+ "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+ "optional": true,
+ "requires": {
+ "file-uri-to-path": "1.0.0"
+ }
+ },
"bluebird": {
"version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -5818,6 +5827,12 @@
"schema-utils": "^2.5.0"
}
},
+ "file-uri-to-path": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+ "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+ "optional": true
+ },
"filesize": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.0.1.tgz",
@@ -6494,6 +6509,14 @@
}
}
},
+ "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.0.0-beta.11",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz",
@@ -6598,6 +6621,42 @@
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
},
+ "i18next": {
+ "version": "20.3.2",
+ "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.2.tgz",
+ "integrity": "sha512-e8CML2R9Ng2sSQOM80wb/PrM2j8mDm84o/T4Amzn9ArVyNX5/ENWxxAXkRpZdTQNDaxKImF93Wep4mAoozFrKw==",
+ "requires": {
+ "@babel/runtime": "^7.12.0"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.14.6",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+ "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
+ "i18next-browser-languagedetector": {
+ "version": "6.1.2",
+ "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-6.1.2.tgz",
+ "integrity": "sha512-YDzIGHhMRvr7M+c8B3EQUKyiMBhfqox4o1qkFvt4QXuu5V2cxf74+NCr+VEkUuU0y+RwcupA238eeolW1Yn80g==",
+ "requires": {
+ "@babel/runtime": "^7.14.6"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.14.6",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+ "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7416,7 +7475,11 @@
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
- "optional": true
+ "optional": true,
+ "requires": {
+ "bindings": "^1.5.0",
+ "nan": "^2.12.1"
+ }
}
}
},
@@ -8475,6 +8538,12 @@
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
},
+ "nan": {
+ "version": "2.14.2",
+ "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+ "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+ "optional": true
+ },
"nanomatch": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -10757,6 +10826,25 @@
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz",
"integrity": "sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA=="
},
+ "react-i18next": {
+ "version": "11.11.1",
+ "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.11.1.tgz",
+ "integrity": "sha512-MtfzPEOvx0ev2cz0HmrEcduuqkktSa5bfeN8Flp0cvN0xP3H3MRSTa8P6pxPtqstHbRe1cD9QBOr5T/FEV2gOw==",
+ "requires": {
+ "@babel/runtime": "^7.14.5",
+ "html-parse-stringify": "^3.0.1"
+ },
+ "dependencies": {
+ "@babel/runtime": {
+ "version": "7.14.6",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+ "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+ "requires": {
+ "regenerator-runtime": "^0.13.4"
+ }
+ }
+ }
+ },
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13287,6 +13375,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",
@@ -13368,7 +13461,11 @@
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
- "optional": true
+ "optional": true,
+ "requires": {
+ "bindings": "^1.5.0",
+ "nan": "^2.12.1"
+ }
},
"glob-parent": {
"version": "3.1.0",
@@ -13648,7 +13745,11 @@
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
"integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
- "optional": true
+ "optional": true,
+ "requires": {
+ "bindings": "^1.5.0",
+ "nan": "^2.12.1"
+ }
},
"glob-parent": {
"version": "3.1.0",
diff --git a/package.json b/package.json
index 2caa1ff..7f7292f 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,12 @@
"@types/node": "^12.12.67",
"@types/react": "^16.9.51",
"@types/react-dom": "^16.9.8",
+ "i18next": "^20.3.2",
+ "i18next-browser-languagedetector": "^6.1.2",
"react": "^16.13.1",
"react-countdown": "^2.3.2",
"react-dom": "^16.13.1",
+ "react-i18next": "^11.11.1",
"react-scripts": "3.4.3",
"react-three-fiber": "^5.0.3",
"three": "^0.125.0",
diff --git a/src/App.tsx b/src/App.tsx
index bda44d7..b2a40e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,12 +3,14 @@ import './App.css'
import Three from './components/three'
import Logo from './components/logo'
import CountDown from './components/countdown'
+import WelcomeToEnjoy from './components/WelcomeToEnjoy'
function App() {
return (
+
)
diff --git a/src/components/WelcomeToEnjoy/index.tsx b/src/components/WelcomeToEnjoy/index.tsx
new file mode 100644
index 0000000..244f9a0
--- /dev/null
+++ b/src/components/WelcomeToEnjoy/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import './style.css';
+
+const WelcomeToEnjoy: React.FC = () => {
+ const { t } = useTranslation('common');
+
+ return (
+
+ {t('welcome_text')}
+
+ );
+};
+
+export default WelcomeToEnjoy;
diff --git a/src/components/WelcomeToEnjoy/style.css b/src/components/WelcomeToEnjoy/style.css
new file mode 100644
index 0000000..5d684b4
--- /dev/null
+++ b/src/components/WelcomeToEnjoy/style.css
@@ -0,0 +1,22 @@
+@keyframes spin {
+ from {
+ -webkit-transform: rotateX(0deg);
+ transform: rotateY(0deg);
+ }
+ to {
+ -webkit-transform: rotateX(360deg);
+ transform: rotateY(-360deg);
+ }
+}
+
+.tervetuloa-nauttimaan-container {
+ position: absolute;
+ left: 0;
+ bottom: 150px;
+ z-index: 999;
+ width: 100%;
+ text-align: center;
+ font-size: 40px;
+ color: #fff;
+ animation: spin 10s linear infinite;
+}
diff --git a/src/i18n.ts b/src/i18n.ts
new file mode 100644
index 0000000..371358a
--- /dev/null
+++ b/src/i18n.ts
@@ -0,0 +1,36 @@
+import i18n, { Resource } from 'i18next';
+import LanguageDetector, { DetectorOptions } from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import commonEn from './locales/en/common.json';
+import commonFi from './locales/fi/common.json';
+import commonDe from './locales/de/common.json';
+import commonRu from './locales/ru/common.json';
+
+const detection: DetectorOptions = {
+ order: [ 'navigator' ],
+};
+
+const resources: Resource = {
+ en: { common: commonEn },
+ fi: { common: commonFi },
+ de: { common: commonDe },
+ ru: { common: commonRu },
+};
+
+i18n
+ .use(LanguageDetector)
+ .use(initReactI18next)
+ .init({
+ detection,
+ resources,
+ ns: [ 'common' ],
+ fallbackLng: 'en',
+ supportedLngs: [ 'en', 'fi', 'de', 'ru' ],
+ interpolation: {
+ escapeValue: false,
+ },
+ debug: false,
+ });
+
+export default i18n;
diff --git a/src/index.tsx b/src/index.tsx
index f5185c1..61c385c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,6 +4,8 @@ import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
+import './i18n';
+
ReactDOM.render(
diff --git a/src/locales/de/common.json b/src/locales/de/common.json
new file mode 100644
index 0000000..dcccc7e
--- /dev/null
+++ b/src/locales/de/common.json
@@ -0,0 +1,3 @@
+{
+ "welcome_text": "Willkommen zu genießen!"
+}
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
new file mode 100644
index 0000000..e1135f3
--- /dev/null
+++ b/src/locales/en/common.json
@@ -0,0 +1,3 @@
+{
+ "welcome_text": "Welcome to enjoy!"
+}
diff --git a/src/locales/fi/common.json b/src/locales/fi/common.json
new file mode 100644
index 0000000..51d2c2c
--- /dev/null
+++ b/src/locales/fi/common.json
@@ -0,0 +1,3 @@
+{
+ "welcome_text": "Tervetuloa nauttimaan!"
+}
diff --git a/src/locales/ru/common.json b/src/locales/ru/common.json
new file mode 100644
index 0000000..f1ab69b
--- /dev/null
+++ b/src/locales/ru/common.json
@@ -0,0 +1,3 @@
+{
+ "welcome_text": "Добро пожаловать, чтобы насладиться!"
+}