testing first translations for client files

2021-01-29 02:43:03 +01:00 · 2021-01-29 02:43:03 +01:00 · 6367e2926f
commit 6367e2926f
parent 0c5ab8bf97
30 changed files with 511 additions and 104 deletions
--- a/i18n/de.mo
+++ b/i18n/de.mo
--- a/i18n/de.po
+++ b/i18n/de.po
@ -3,11 +3,372 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Plural-Forms: nplurals = 2; plural = (n != 1);\n"
 "Language: de\n"
-"MIME-Version: 1.0\n"
+"mime-version: 1.0\n"
 "Content-Transfer-Encoding: 8bit\n"
+"Project-Id-Version: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"X-Generator: Poedit 2.3\n"

-#: src/components/ForgotPasswordModal.jsx:20
-#: src/components/RegisterModal.jsx:21
+#: src/components/ForgotPasswordModal.jsx:20 src/components/RegisterModal.jsx:21
 #: src/components/UserAreaModal.jsx:128
 msgid "Consider joining us on Guilded:"
-msgstr "Sprich zu uns und anderen Spielern auf guilded:"
+msgstr "Triff uns und andere Spieler auf guilded:"
+
+#: src/components/HelpModal.jsx:63 src/components/HelpModal.jsx:80
+msgid "Controls"
+msgstr "Steuerung"
+
+#: src/components/HelpModal.jsx:65
+msgid "Click a color in palette to select it"
+msgstr "Klicke auf eine Farbe in der Palette um sie auszuwählen"
+
+#: src/components/HelpModal.jsx:66
+#, javascript-format
+msgid "Press ${ bindG } to toggle grid"
+msgstr "Drücke ${ bindG } um das Raster ein- und auszuschalten"
+
+#: src/components/HelpModal.jsx:34 src/components/HelpModal.jsx:35
+msgid "Privacy Policy"
+msgstr "Datenschutzerklärung"
+
+#: src/components/HelpModal.jsx:36 src/components/HelpModal.jsx:37
+msgid "Terms of Service"
+msgstr "Nutzungsbedingungen"
+
+#: src/components/HelpModal.jsx:40
+msgid "your IP"
+msgstr "deine IP"
+
+#: src/components/HelpModal.jsx:46
+msgid "Place color pixels on a large canvas with other players online!"
+msgstr "Zeichne gemeinsam mit anderen Spielern auf einer großen Leinwand online!"
+
+#: src/components/HelpModal.jsx:52
+msgid "Have fun!"
+msgstr "Viel Spaß!"
+
+#: src/components/HelpModal.jsx:54
+msgid "recommended"
+msgstr "empfohlen"
+
+#: src/components/HelpModal.jsx:55
+msgid "Source on "
+msgstr "Quelltext auf "
+
+#: src/components/HelpModal.jsx:56
+msgid "Map Data"
+msgstr "Karten Dateien"
+
+#: src/components/HelpModal.jsx:59
+msgid "Detected as Proxy?"
+msgstr "Als Proxy erkannt?"
+
+#: src/components/HelpModal.jsx:61
+#, javascript-format
+msgid ""
+"If you got detected as proxy, but you are none, please go to our ${ guildedLink } "
+"or send us an e-mail with ${ getIPLink } to ${ mailLink }. Do not post your IP "
+"anywhere else. We are sorry for the inconvenience."
+msgstr ""
+"Solltest do als Proxy erkannt sein, aber du benutzt keines, bitte kontaktiere uns "
+"auf ${ guildedLink } oder sende uns eine Mail mit ${ getIPLink } auf "
+"${ mailLink }. Sende deine IP zu niemanden sonst. Wir entschuldigen uns für die "
+"Unannehmlichkeiten."
+
+#: src/components/HelpModal.jsx:67
+msgid "Press ${ bindX } to toggle showing of pixel activity"
+msgstr "Drücke ${ bindX } um Pixel Aktivität anzuzeigen"
+
+#: src/components/HelpModal.jsx:68
+#, javascript-format
+msgid "Press ${ bindH } to toggle historical view"
+msgstr "Drücke ${ bindH } um zur historischen Ansicht zu wechseln"
+
+#: src/components/HelpModal.jsx:69
+msgid "Press ${ bindR } to copy coordinates"
+msgstr "Drücke ${ bindR } um aktuelle Koordinaten zu kopieren"
+
+#: src/components/HelpModal.jsx:70
+#, javascript-format
+msgid "Press ${ bindQ } or ${ bindE } to zoom"
+msgstr "Drücke ${ bindQ } oder ${ bindE } um zu zoomen"
+
+#: src/components/HelpModal.jsx:71 src/components/HelpModal.jsx:82
+#, javascript-format
+msgid "Press ${ bindW }, ${ bindA }, ${ bindS }, ${ bindD } to move"
+msgstr "Drücke ${ bindW }, ${ bindA }, ${ bindS }, ${ bindD } zum navigieren"
+
+#: src/components/HelpModal.jsx:72 src/components/HelpModal.jsx:83
+#, javascript-format
+msgid "Press ${ bindAUp }, ${ bindALeft }, ${ bindADown }, ${ bindARight } to move"
+msgstr ""
+"Drücke ${ bindAUp }, ${ bindALeft }, ${ bindADown }, ${ bindARight } zum "
+"navigieren"
+
+#: src/components/HelpModal.jsx:73
+msgid "Drag ${ mouseSymbol } mouse or ${ touchSymbol } pan to move"
+msgstr ""
+"Ziehe mit der ${ mouseSymbol } Maus oder ${ touchSymbol } wische zum navigieren"
+
+#: src/components/HelpModal.jsx:74
+#, javascript-format
+msgid "Scroll ${ mouseSymbol } mouse wheel or ${ touchSymbol } pinch to zoom"
+msgstr ""
+"Scrolle ${ mouseSymbol } mit them Mausrad oder ${ touchSymbol } benutze Zwei-"
+"Finger-Zoom um zu zoomen"
+
+#: src/components/HelpModal.jsx:75
+msgid "Hold left ${ bindShift } for placing while moving mouse"
+msgstr ""
+"Halte die linke ${ bindShift } Taste gedrückt um Pixel unter der Maus zu setzen"
+
+#: src/components/HelpModal.jsx:76
+#, javascript-format
+msgid ""
+"Hold right ${ bindShift } for placing while moving mouse according to historical "
+"view"
+msgstr ""
+"Halte die rechte ${ bindShift } Taste gedrückt um Pixel unter der Maus nach der "
+"aktuellen historischen Ansicht zu setzen"
+
+#: src/components/HelpModal.jsx:78 src/components/HelpModal.jsx:90
+msgid ""
+"Click ${ mouseSymbol } middle mouse button or ${ touchSymbol } long-tap to select "
+"current hovering color"
+msgstr ""
+"Klicke ${ mouseSymbol } die mittlere Maustaste oder ${ touchSymbol } tippe lange "
+"um eine Farbe von der Leinwand auszuwählen"
+
+#: src/components/HelpModal.jsx:84
+msgid "Press ${ bindE } and ${ bindC } to fly up and down"
+msgstr "Drücke ${ bindE } oder ${ bindC } um hoch und runter zu fliegen"
+
+#: src/components/HelpModal.jsx:85
+#, javascript-format
+msgid "${ mouseSymbol } Hold left mouse button and drag mouse to rotate"
+msgstr "${ mouseSymbol } Halte die linke Maustaste gedrückt und ziehe um zu rotieren"
+
+#: src/components/HelpModal.jsx:86
+#, javascript-format
+msgid ""
+"${ mouseSymbol } Scroll mouse wheel or hold ${ mouseSymbol } middle mouse button "
+"and drag to zoom"
+msgstr ""
+"${ mouseSymbol } Scrolle mit dem Mausrad oder halte ${ mouseSymbol } die mittlere "
+"Maustaste gedrückt und ziehe um zu zoomen"
+
+#: src/components/HelpModal.jsx:87
+msgid "${ mouseSymbol } Right click and drag mouse to pan"
+msgstr ""
+"${ mouseSymbol } Halte die rechte Maustaste gedrückt und ziehe um dich zu bewegen"
+
+#: src/components/HelpModal.jsx:77 src/components/HelpModal.jsx:88
+#, javascript-format
+msgid "${ mouseSymbol } Left click or ${ touchSymbol } tap to place a pixel"
+msgstr ""
+"${ mouseSymbol } Linksklick oder ${ touchSymbol } tippe um ein Pixel zu platzieren"
+
+#: src/components/HelpModal.jsx:89
+#, javascript-format
+msgid ""
+"${ mouseSymbol } Right click or ${ touchSymbol } double-tap to remove a pixel"
+msgstr ""
+"${ mouseSymbol } Rechtsklick oder ${ touchSymbol } tippe zweimal um ein Voxel zu "
+"entfernen"
+
+#: src/components/HelpModal.jsx:92
+msgid "Partners:"
+msgstr "Partner:"
+
+#: src/components/HelpModal.jsx:97
+#, javascript-format
+msgid ""
+"This site is protected by reCAPTCHA and the Google ${ reCaptchaPP } and "
+"${ reCaptchaTOS } apply."
+msgstr ""
+"Diese Seite ist mit Google reCaptcha geschützt und deren ${ reCaptchaPP } und "
+"${ reCaptchaTOS } gelten."
+
+#: src/components/HelpModal.jsx:103
+msgid ""
+"This site is protected by hCAPTCHA and its ${ hCaptchaPP } and ${ hCaptchaTOS } "
+"apply."
+msgstr ""
+"Diese Seite ist mit hCaptcha geschützt und deren ${ hCaptchaPP } und "
+"${ hCaptchaTOS } gelten."
+
+#: src/components/HelpModal.jsx:113
+msgid "Welcome to PixelPlanet.fun"
+msgstr "Willkommen auf PixelPlanet.fun"
+
+#: src/components/HelpModal.jsx:47
+msgid ""
+"Our main canvas is a huge worldmap, you can place wherever you like, but you will "
+"have to wait a specific Cooldown between pixels. You can check out the cooldown "
+"and requiremnts on the Canvas Selection menu (globe button on top). Some canvases "
+"have a different cooldown for replacing a user-set pixels than placing on a unset "
+"pixel. i.e. 4s/7s means 4s on fresh pixels and 7s on already set pixels."
+msgstr ""
+"Unsere standard Leinwand ist eine große Weltkarte. Pixel können überall gesetzen "
+"werden, aber es kann nur eine begrenzte Anzahl and Pixels per Zeit platziert "
+"werden. Die Vorraussetzungen und die Wartezeit sind im Auswahlmenu zu sehen "
+"(Globus Taste am oberen Bildschirmrand). Manche Leinwände haben eine niedrigere "
+"Wartezeit für ungesetzte Pixel im Vergleich zu von anderen Spielern gesetzte "
+"Pixel. z.B. 4s/7s heißt dass man 4s für jedes neue Pixel warten muss, allerdings "
+"7s wenn man über ein Pixel eines anderen Spielers setzt."
+
+#: src/components/HelpModal.jsx:51
+msgid ""
+"Higher zoomlevels take some time to update, the 3D globe gets updated at least "
+"once per day."
+msgstr ""
+"Die höheren Zoomlevel brauchen etwas Zeit um aktualisiert zu werden, der 3D "
+"Globus wird mindestens einmal pro tag neu geladen."
+
+#: src/components/HelpModal.jsx:57
+msgid ""
+"The bare map data that we use, together with converted OpenStreetMap tiles for "
+"orientation, can be downloaded from mega.nz here: "
+msgstr ""
+"Die Kartendaten welche wir benutzen, zusammen mit konvertierten OpenStreetMap  "
+"Kacheln zur orientierung können auf mega.nz heruntergeladen werden: "
+
+#: src/components/CanvasSwitchButton.jsx:20
+msgid "Canvas Selection"
+msgstr "Leinwand auswahl"
+
+#: src/components/Chat.jsx:143
+msgid "Channel settings"
+msgstr "Channel Einstellungen"
+
+#: src/components/Chat.jsx:152
+msgid "maximize"
+msgstr "maximieren"
+
+#: src/components/Chat.jsx:168
+msgid "Start chatting here"
+msgstr "Beginne hier zu chatten"
+
+#: src/components/Chat.jsx:200
+msgid "Chat here"
+msgstr "Chatte hier"
+
+#: src/components/ChatButton.jsx:61
+msgid "Close Chat"
+msgstr "Schließe Chat"
+
+#: src/components/ChatButton.jsx:61
+msgid "Open Chat"
+msgstr "Öffne Chat"
+
+#: src/components/CoordinatesBox.jsx:26
+msgid "Copy to Clipboard"
+msgstr "Kopiere in die Zwischenablage"
+
+#: src/components/DownloadButton.jsx:37
+msgid "Make Screenshot"
+msgstr "Erstelle eine Bildschirmaufnahme"
+
+#: src/components/ExpandMenuButton.jsx:19
+msgid "Close Menu"
+msgstr "Schließe Menü"
+
+#: src/components/ExpandMenuButton.jsx:19
+msgid "Open Menu"
+msgstr "Öffne Menü"
+
+#: src/components/GlobeButton.jsx:31
+msgid "Globe View"
+msgstr "Globus Ansicht"
+
+#: src/components/HelpButton.jsx:20
+msgid "Help"
+msgstr "Hilfe"
+
+#: src/components/LogInButton.jsx:20
+msgid "User Area"
+msgstr "Spielerbereich"
+
+#: src/components/OnlineBox.jsx:21
+msgid "User online"
+msgstr "Spieler anwesend"
+
+#: src/components/OnlineBox.jsx:23
+msgid "Pixel gesetzt"
+msgstr "Pixel plaziert"
+
+#: src/components/PalselButton.jsx:25
+msgid "Close Palette"
+msgstr "Schließe Palette"
+
+#: src/components/PalselButton.jsx:25
+msgid "Open Palette"
+msgstr "Öffne Palette"
+
+#: src/components/SettingsButton.jsx:20
+msgid "Settings"
+msgstr "Einstellungen"
+
+#: src/components/HelpModal.jsx:15
+msgctxt "keybinds"
+msgid "G"
+msgstr ""
+
+#: src/components/HelpModal.jsx:16
+msgctxt "keybinds"
+msgid "X"
+msgstr ""
+
+#: src/components/HelpModal.jsx:17
+msgctxt "keybinds"
+msgid "H"
+msgstr ""
+
+#: src/components/HelpModal.jsx:18
+msgctxt "keybinds"
+msgid "R"
+msgstr ""
+
+#: src/components/HelpModal.jsx:19
+msgctxt "keybinds"
+msgid "Q"
+msgstr ""
+
+#: src/components/HelpModal.jsx:21
+msgctxt "keybinds"
+msgid "W"
+msgstr ""
+
+#: src/components/HelpModal.jsx:22
+msgctxt "keybinds"
+msgid "A"
+msgstr ""
+
+#: src/components/HelpModal.jsx:23
+msgctxt "keybinds"
+msgid "S"
+msgstr ""
+
+#: src/components/HelpModal.jsx:24
+msgctxt "keybinds"
+msgid "D"
+msgstr ""
+
+#: src/components/HelpModal.jsx:20
+msgctxt "keybinds"
+msgid "E"
+msgstr ""
+
+#: src/components/HelpModal.jsx:31
+msgctxt "keybinds"
+msgid "Shift"
+msgstr ""
+
+#: src/components/HelpModal.jsx:32
+msgctxt "keybinds"
+msgid "C"
+msgstr ""
--- a/i18n/es.po
+++ b/i18n/es.po
@ -1,13 +0,0 @@
-msgid ""
-msgstr ""
-"Content-Type: text/plain; charset=utf-8\n"
-"Plural-Forms: nplurals = 2; plural = (n != 1);\n"
-"Language: de\n"
-"MIME-Version: 1.0\n"
-"Content-Transfer-Encoding: 8bit\n"
-
-#: src/components/ForgotPasswordModal.jsx:20
-#: src/components/RegisterModal.jsx:21
-#: src/components/UserAreaModal.jsx:128
-msgid "Consider joining us on Guilded:"
-msgstr "Sprich zu uns und anderen Spielern auf guilded:"
--- a/scripts/bundle.js
+++ b/scripts/bundle.js
@ -41,11 +41,11 @@ async function bundle() {
    const regex = /core-js\/fn\/set-immediate/g;
    const files = [
      path.resolve(
-        '..', 'node_modules',
+        __dirname, '..', 'node_modules',
        'image-q', 'dist', 'esm', 'basicAPI.js',
      ),
      path.resolve(
-        '..', 'node_modules',
+        __dirname, '..', 'node_modules',
        'image-q', 'dist', 'esm', 'helper.js',
      ),
    ];
--- a/scripts/minifyCss.js
+++ b/scripts/minifyCss.js
@ -25,7 +25,7 @@ async function minifyCss() {
  console.log('Minifying css');
  const assets = {};
  FILES.forEach((file) => {
-    const input = fs.readFileSync(`${FOLDER}/${file}`, 'utf8');
+    const input = fs.readFileSync(path.resolve(FOLDER, file), 'utf8');
    const options = {};
    const output = new CleanCSS(options).minify(input);
    if (output.warnings && output.warnings.length > 0) {
@ -44,11 +44,11 @@ async function minifyCss() {
    const hash = crypto.createHash('md5').update(output.styles).digest('hex');
    const key = file.substr(0, file.indexOf('.'));
    const filename = `${key}.${hash.substr(0, 8)}.css`;
-    fs.writeFileSync(`${assetdir}/${filename}`, output.styles, 'utf8');
+    fs.writeFileSync(path.resolve(assetdir,filename), output.styles, 'utf8');
    assets[key] = `/assets/${filename}`;
  });
  const json = JSON.stringify(assets);
-  fs.writeFileSync(`${builddir}/styleassets.json`, json);
+  fs.writeFileSync(path.resolve(builddir, styleassets.json), json);
 }

 export default minifyCss;
--- a/src/components/Admintools.jsx
+++ b/src/components/Admintools.jsx
@ -1,6 +1,5 @@
 /*
- * Html for adminpage
- *
+ * Admintools
 * @flow
 */

--- a/src/components/CanvasSwitchButton.jsx
+++ b/src/components/CanvasSwitchButton.jsx
@ -6,6 +6,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { FaGlobe } from 'react-icons/fa';
+import { t } from 'ttag';

 import { showCanvasSelectionModal } from '../actions';

@ -16,6 +17,7 @@ const CanvasSwitchButton = ({ open }) => (
    className="actionbuttons"
    onClick={open}
    role="button"
+    title={t`Canvas Selection`}
    tabIndex={-1}
  >
    <FaGlobe />
--- a/src/components/Chat.jsx
+++ b/src/components/Chat.jsx
@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import useStayScrolled from 'react-stay-scrolled';
 import { connect } from 'react-redux';
+import { t } from 'ttag';

 import type { State } from '../reducers';
 import ChatMessage from './ChatMessage';
@ -139,6 +140,7 @@ const Chat = ({
            );
          }}
          role="button"
+          title={t`Channel settings`}
          tabIndex={-1}
        >⚙</span>
        &nbsp;
@ -147,6 +149,7 @@ const Chat = ({
          <span
            onClick={triggerModal}
            role="button"
+            title={t`maximize`}
            tabIndex={-1}
          >↷</span>
          )}
@ -162,7 +165,7 @@ const Chat = ({
          && (
          <ChatMessage
            name="info"
-            msgArray={splitChatMessage('Start chatting here', nameRegExp)}
+            msgArray={splitChatMessage(t`Start chatting here`, nameRegExp)}
            country="xx"
            uid={0}
          />
@ -194,7 +197,7 @@ const Chat = ({
              id="chatmsginput"
              maxLength="200"
              type="text"
-              placeholder="Chat here"
+              placeholder={t`Chat here`}
            />
            <button
              style={{ flexGrow: 0 }}
@ -213,7 +216,7 @@ const Chat = ({
          role="button"
          tabIndex={0}
        >
-          You must be logged in to chat
+          {t`You must be logged in to chat`}
        </div>
      )}
    </div>
--- a/src/components/ChatButton.jsx
+++ b/src/components/ChatButton.jsx
@ -8,6 +8,7 @@ import React, {
 } from 'react';
 import { connect } from 'react-redux';
 import { MdForum } from 'react-icons/md';
+import { t } from 'ttag';

 import { showChatModal } from '../actions';

@ -57,6 +58,7 @@ const ChatButton = ({
      className="actionbuttons"
      onClick={open}
      role="button"
+      title={(chatOpen) ? t`Close Chat` : t`Open Chat`}
      tabIndex={0}
    >
      {(unreadAny) && (
--- a/src/components/CoordinatesBox.jsx
+++ b/src/components/CoordinatesBox.jsx
@ -5,6 +5,8 @@

 import React from 'react';
 import { connect } from 'react-redux';
+import { t } from 'ttag';
+
 import copy from '../utils/clipboard';
 import { notify } from '../actions';

@ -21,7 +23,7 @@ const CoordinatesBox = ({ view, hover, notifyCopy }) => (
    className="coorbox"
    onClick={() => { copy(window.location.hash); notifyCopy(); }}
    role="button"
-    title="Copy to Clipboard"
+    title={t`Copy to Clipboard`}
    tabIndex="0"
  >{
    renderCoordinates(hover
--- a/src/components/DownloadButton.jsx
+++ b/src/components/DownloadButton.jsx
@ -7,6 +7,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { MdFileDownload } from 'react-icons/md';
 import fileDownload from 'js-file-download';
+import { t } from 'ttag';

 import { getRenderer } from '../ui/renderer';

@ -33,6 +34,7 @@ const DownloadButton = ({ view }) => (
    id="downloadbutton"
    className="actionbuttons"
    role="button"
+    title={t`Make Screenshot`}
    tabIndex={0}
    onClick={() => download(view)}
  >
--- a/src/components/ExpandMenuButton.jsx
+++ b/src/components/ExpandMenuButton.jsx
@ -7,6 +7,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { MdExpandMore, MdExpandLess } from 'react-icons/md';
+import { t } from 'ttag';

 import { toggleOpenMenu } from '../actions';

@ -15,6 +16,7 @@ const ExpandMenuButton = ({ menuOpen, expand }) => (
    id="menubutton"
    className="actionbuttons"
    role="button"
+    title={(menuOpen) ? t`Close Menu` : t`Open Menu`}
    tabIndex={-1}
    onClick={expand}
  >
--- a/src/components/GlobeButton.jsx
+++ b/src/components/GlobeButton.jsx
@ -6,6 +6,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { Md3DRotation } from 'react-icons/md';
+import { t } from 'ttag';

 import type { State } from '../reducers';

@ -27,6 +28,7 @@ const GlobeButton = ({
    role="button"
    tabIndex={-1}
    id="globebutton"
+    title={t`Globe View`}
    className="actionbuttons"
    onClick={() => globe(canvasId, canvasIdent, canvasSize, view)}
  >
--- a/src/components/HelpButton.jsx
+++ b/src/components/HelpButton.jsx
@ -6,6 +6,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { FaQuestion } from 'react-icons/fa';
+import { t } from 'ttag';

 import { showHelpModal } from '../actions';

@ -16,6 +17,7 @@ const HelpButton = ({ open }) => (
    className="actionbuttons"
    onClick={open}
    role="button"
+    title={t`Help`}
    tabIndex={-1}
  >
    <FaQuestion />
--- a/src/components/HelpModal.jsx
+++ b/src/components/HelpModal.jsx
@ -4,77 +4,113 @@
 */

 import React from 'react';
+import { c, t, jt } from 'ttag';
+import { GiMouse } from 'react-icons/gi';
+import { MdTouchApp } from 'react-icons/md';

 /* eslint-disable max-len */


-const HelpModal = () => (
-  <p style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
-    <p className="modaltext">Place color pixels on a large canvas with other players online!
-      Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific
-      Cooldown between pixels. You can check out the cooldown and requiremnts on the Canvas Selection menu (globe button on top).
-      Some canvases have a different cooldown for replacing a user-set pixels than placing on a unset pixel. i.e. 4s/7s means 4s on fresh
-      pixels and 7s on already set pixels.
-      Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.
-      Have fun!</p>
-    <p>Guilded (recommended): <a href="./guilded" target="_blank" rel="noopener noreferrer">pixelplanet.fun/guilded</a></p>
-    <p>Source on <a href="https://github.com/pixelplanetdev/pixelplanet" target="_blank" rel="noopener noreferrer">github</a></p>
-    <p>Reddit: <a href="https://www.reddit.com/r/PixelPlanetFun/" target="_blank" rel="noopener noreferrer">r/PixelPlanetFun</a></p>
-    <p className="modaltitle">Map Data</p>
-    <p className="modaltext">The bare map data that we use, together with converted OpenStreetMap tiles for orientation,
-      can be downloaded from mega.nz here: <a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
-    <p className="modaltitle">Detected as Proxy?</p>
-    <p className="modaltext">If you got detected as proxy, but you are none, please send us an e-mail with <a href="https://www.whatismyip.com/">your IP</a> to <a href="mailto:pixelplanetdev@gmail.com">pixelplanetdev@gmail.com</a>. Do not post your IP anywhere else. We are sorry for the inconvenience.</p>
-    <h3 className="modaltitle">2D Controls</h3>
-    <p className="modaltext">Click a color in palette to select</p>
-    <p className="modaltext">Press <kbd>G</kbd> to toggle grid</p>
-    <p className="modaltext">Press <kbd>X</kbd> to toggle showing of pixel activity</p>
-    <p className="modaltext">Press <kbd>H</kbd> to toggle historical view</p>
-    <p className="modaltext">Press <kbd>R</kbd> to copy coordinates</p>
-    <p className="modaltext">Press <kbd>Q</kbd> or <kbd>E</kbd> to zoom</p>
-    <p className="modaltext">Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
-    <p className="modaltext">Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
-    <p className="modaltext">Drag mouse to move</p>
-    <p className="modaltext">Scroll mouse wheel to zoom</p>
-    <p className="modaltext">Click middle mouse button to current hovering color</p>
-    <p className="modaltext">Hold left shift for placing while moving mouse</p>
-    <p className="modaltext">Hold right shift for placing while moving mouse according to historical view</p>
-    <p className="modaltext">Pinch to zoom (on touch devices)</p>
-    <p className="modaltext">Pan to move (on touch devices)</p>
-    <p className="modaltext">Click or tap to place a pixel</p>
-    <h3 className="modaltitle">3D Controls</h3>
-    <p className="modaltext">Press <kbd>W</kbd>,<kbd>A</kbd>,<kbd>S</kbd>, <kbd>D</kbd> to move</p>
-    <p className="modaltext">Press <kbd>↑</kbd>,<kbd>←</kbd>,<kbd>↓</kbd>, <kbd>→</kbd> to move</p>
-    <p className="modaltext">Press <kbd>E</kbd> and <kbd>C</kbd> to fly up and down</p>
-    <p className="modaltext">Scroll mouse wheel to zoom</p>
-    <p className="modaltext">Left click and drag mouse to rotate</p>
-    <p className="modaltext">Middle click and drag mouse to zoom</p>
-    <p className="modaltext">Right click and drag mouse to pan</p>
-    <p className="modaltext">Left Click or tap to place a pixel</p>
-    <p className="modaltext">Right Click of double tap to remove a pixel</p>
-    <p>Partners: <a href="https://www.crazygames.com/c/io" target="_blank" rel="noopener noreferrer">crazygames.com</a></p>
-    { (typeof window.hcaptcha === 'undefined')
-      ? (
-        <p className="modaltext">
-          <small>This site is protected by reCAPTCHA and the Google&nbsp;
-            <a href="https://policies.google.com/privacy">Privacy Policy</a>&nbsp;and&nbsp;
-            <a href="https://policies.google.com/terms">Terms of Service</a>&nbsp;apply.
-          </small>
-        </p>
-      ) : (
-        <p className="modaltext">
-          <small>This site is protected by hCAPTCHA and its&nbsp;
-            <a href="https://hcaptcha.com/privacy">Privacy Policy</a>&nbsp;and&nbsp;
-            <a href="https://hcaptcha.com/terms">Terms of Service</a>&nbsp;apply.
-          </small>
-        </p>
-      )}
-  </p>
-);
+const HelpModal = () => {
+  const bindG = <kbd>{c('keybinds').t`G`}</kbd>;
+  const bindX = <kbd>{c('keybinds').t`X`}</kbd>;
+  const bindH = <kbd>{c('keybinds').t`H`}</kbd>;
+  const bindR = <kbd>{c('keybinds').t`R`}</kbd>;
+  const bindQ = <kbd>{c('keybinds').t`Q`}</kbd>;
+  const bindE = <kbd>{c('keybinds').t`E`}</kbd>;
+  const bindW = <kbd>{c('keybinds').t`W`}</kbd>;
+  const bindA = <kbd>{c('keybinds').t`A`}</kbd>;
+  const bindS = <kbd>{c('keybinds').t`S`}</kbd>;
+  const bindD = <kbd>{c('keybinds').t`D`}</kbd>;
+  const bindAUp = <kbd>↑</kbd>;
+  const bindALeft = <kbd>←</kbd>;
+  const bindADown = <kbd>↓</kbd>;
+  const bindARight = <kbd>→</kbd>;
+  const mouseSymbol = <kbd><GiMouse /></kbd>;
+  const touchSymbol = <kbd><MdTouchApp /></kbd>;
+  const bindShift = <kbd>⇧ {c('keybinds').t`Shift`}</kbd>;
+  const bindC = <kbd>{c('keybinds').t`C`}</kbd>;
+
+  const hCaptchaPP = <a href="https://hcaptcha.com/privacy">{t`Privacy Policy`}</a>;
+  const reCaptchaPP = <a href="https://policies.google.com/privacy">{t`Privacy Policy`}</a>;
+  const hCaptchaTOS = <a href="https://hcaptcha.com/terms">{t`Terms of Service`}</a>;
+  const reCaptchaTOS = <a href="https://policies.google.com/terms">{t`Terms of Service`}</a>;
+
+  const guildedLink = <a href="https://pixelplanet.fun/guilded">guilded</a>;
+  const getIPLink = <a href="https://www.whatismyip.com/">{t`your IP`}</a>;
+  const mailLink = <a href="mailto:pixelplanetdev@gmail.com">pixelplanetdev@gmail.com</a>;
+
+  return (
+    <p style={{ textAlign: 'center', paddingLeft: '5%', paddingRight: '5%' }}>
+      <p className="modaltext">
+        {t`Place color pixels on a large canvas with other players online!`}<br />
+        {t`Our main canvas is a huge worldmap, you can place wherever you like, but you will have to wait a specific \
+Cooldown between pixels. You can check out the cooldown and requiremnts on the Canvas Selection menu (globe button on top). \
+Some canvases have a different cooldown for replacing a user-set pixels than placing on a unset pixel. i.e. 4s/7s means 4s on fresh \
+pixels and 7s on already set pixels.`}<br />
+        {t`Higher zoomlevels take some time to update, the 3D globe gets updated at least once per day.`}<br />
+        {t`Have fun!`}
+      </p>
+      <p>Guilded ({t`recommended`}): <a href="./guilded" target="_blank" rel="noopener noreferrer">pixelplanet.fun/guilded</a></p>
+      <p>{t`Source on `}<a href="https://github.com/pixelplanetdev/pixelplanet" target="_blank" rel="noopener noreferrer">github</a></p>
+      <p className="modaltitle">{t`Map Data`}</p>
+      <p className="modaltext">{t`The bare map data that we use, together with converted OpenStreetMap tiles for orientation, \
+can be downloaded from mega.nz here: `}<a href="https://mega.nz/#!JpkBwAbJ!EnSLlZmKv3kEBE0HDhakTgAZZycD3ELjduajJxPGaXo">pixelplanetmap.zip</a> (422MB)</p>
+      <p className="modaltitle">{t`Detected as Proxy?`}</p>
+      <div className="modaltext">
+        <p>{jt`If you got detected as proxy, but you are none, please go to our ${guildedLink} or send us an e-mail with ${getIPLink} to ${mailLink}. Do not post your IP anywhere else. We are sorry for the inconvenience.`}</p>
+      </div>
+      <h3 className="modaltitle">2D {t`Controls`}</h3>
+      <div className="modaltext" style={{ lineHeight: 1.8 }}>
+        {t`Click a color in palette to select it`}<br />
+        {jt`Press ${bindG} to toggle grid`}<br />
+        {jt`Press ${bindX} to toggle showing of pixel activity`}<br />
+        {jt`Press ${bindH} to toggle historical view`}<br />
+        {jt`Press ${bindR} to copy coordinates`}<br />
+        {jt`Press ${bindQ} or ${bindE} to zoom`}<br />
+        {jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br />
+        {jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br />
+        {jt`Drag ${mouseSymbol} mouse or ${touchSymbol} pan to move`}<br />
+        {jt`Scroll ${mouseSymbol} mouse wheel or ${touchSymbol} pinch to zoom`}<br />
+        {jt`Hold left ${bindShift} for placing while moving mouse`}<br />
+        {jt`Hold right ${bindShift} for placing while moving mouse according to historical view`}<br />
+        {jt`${mouseSymbol} Left click or ${touchSymbol} tap to place a pixel`}<br />
+        {jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
+      </div>
+      <h3 className="modaltitle">3D {t`Controls`}</h3>
+      <div className="modaltext" style={{ lineHeight: 1.8 }}>
+        {jt`Press ${bindW}, ${bindA}, ${bindS}, ${bindD} to move`}<br />
+        {jt`Press ${bindAUp}, ${bindALeft}, ${bindADown}, ${bindARight} to move`}<br />
+        {jt`Press ${bindE} and ${bindC} to fly up and down`}<br />
+        {jt`${mouseSymbol} Hold left mouse button and drag mouse to rotate`}<br />
+        {jt`${mouseSymbol} Scroll mouse wheel or hold ${mouseSymbol} middle mouse button and drag to zoom`}<br />
+        {jt`${mouseSymbol} Right click and drag mouse to pan`}<br />
+        {jt`${mouseSymbol} Left click or ${touchSymbol} tap to place a pixel`}<br />
+        {jt`${mouseSymbol} Right click or ${touchSymbol} double-tap to remove a pixel`}<br />
+        {jt`Click ${mouseSymbol} middle mouse button or ${touchSymbol} long-tap to select current hovering color`}<br />
+      </div>
+      <p>{t`Partners:`} <a href="https://www.crazygames.com/c/io" target="_blank" rel="noopener noreferrer">crazygames.com</a></p>
+      { (typeof window.hcaptcha === 'undefined')
+        ? (
+          <p className="modaltext">
+            <small>
+              {jt`This site is protected by reCAPTCHA and the Google ${reCaptchaPP} and ${reCaptchaTOS} apply.`}
+            </small>
+          </p>
+        ) : (
+          <p className="modaltext">
+            <small>
+              {jt`This site is protected by hCAPTCHA and its ${hCaptchaPP} and ${hCaptchaTOS} apply.`}
+            </small>
+          </p>
+        )}
+    </p>
+  );
+};

 const data = {
  content: HelpModal,
-  title: 'Welcome to PixelPlanet.fun',
+  title: t`Welcome to PixelPlanet.fun`,
 };

 export default data;
--- a/src/components/LogInButton.jsx
+++ b/src/components/LogInButton.jsx
@ -6,6 +6,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { MdPerson } from 'react-icons/md';
+import { t } from 'ttag';

 import { showUserAreaModal } from '../actions';

@ -16,6 +17,7 @@ const LogInButton = ({ open }) => (
    className="actionbuttons"
    onClick={open}
    role="button"
+    title={t`User Area`}
    tabIndex={-1}
  >
    <MdPerson />
--- a/src/components/OnlineBox.jsx
+++ b/src/components/OnlineBox.jsx
@ -7,6 +7,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { FaUser, FaPaintBrush } from 'react-icons/fa';
 import { numberToString } from '../core/utils';
+import { t } from 'ttag';


 import type { State } from '../reducers';
@ -17,9 +18,9 @@ const OnlineBox = ({ online, totalPixels, name }) => (
    {(online || name)
      ? (
        <div className="onlinebox">
-          {(online) && <span>{online} <FaUser />&nbsp;</span>}
+          {(online) && <span title={t`User online`}>{online} <FaUser />&nbsp;</span>}
          {(name != null)
-              && <span>{numberToString(totalPixels)} <FaPaintBrush /></span>}
+              && <span title={t`Pixel gesetzt`}>{numberToString(totalPixels)} <FaPaintBrush /></span>}
        </div>
      ) : null}
  </div>
--- a/src/components/PalselButton.jsx
+++ b/src/components/PalselButton.jsx
@ -7,6 +7,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { MdPalette } from 'react-icons/md';
+import { t } from 'ttag';

 import { toggleOpenPalette } from '../actions';

@ -21,6 +22,7 @@ const PalselButton = ({
      backgroundColor: palette.colors[selectedColor],
    }}
    role="button"
+    title={(paletteOpen) ? t`Close Palette` : t`Open Palette`}
    tabIndex={0}
    onClick={onToggle}
  >
--- a/src/components/SettingsButton.jsx
+++ b/src/components/SettingsButton.jsx
@ -6,6 +6,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { FaCog } from 'react-icons/fa';
+import { t } from 'ttag';

 import { showSettingsModal } from '../actions';

@ -16,6 +17,7 @@ const SettingsButton = ({ open }) => (
    className="actionbuttons"
    onClick={open}
    role="button"
+    title={t`Settings`}
    tabIndex={-1}
  >
    <FaCog />
--- a/src/routes/api/auth/index.js
+++ b/src/routes/api/auth/index.js
@ -25,7 +25,7 @@ import change_mail from './change_mail';
 import restore_password from './restore_password';
 import mclink from './mclink';

-import getHtml from '../../../components/RedirectionPage';
+import getHtml from '../../../ssr-components/RedirectionPage';

 import getMe from '../../../core/me';

--- a/src/routes/api/auth/verify.js
+++ b/src/routes/api/auth/verify.js
@ -6,7 +6,7 @@
 import type { Request, Response } from 'express';

 import webSockets from '../../../socket/websockets';
-import getHtml from '../../../components/RedirectionPage';
+import getHtml from '../../../ssr-components/RedirectionPage';
 import { getHostFromRequest } from '../../../utils/ip';
 import mailProvider from '../../../core/mail';

--- a/src/routes/reset_password.js
+++ b/src/routes/reset_password.js
@ -12,7 +12,7 @@ import type { Request, Response } from 'express';

 import redis from '../data/redis';
 import logger from '../core/logger';
-import getPasswordResetHtml from '../components/PasswordReset';
+import getPasswordResetHtml from '../ssr-components/PasswordReset';
 import { MINUTE } from '../core/constants';

 import mailProvider from '../core/mail';
--- a/src/ssr-components/Globe.jsx
+++ b/src/ssr-components/Globe.jsx
--- a/src/ssr-components/Html.jsx
+++ b/src/ssr-components/Html.jsx
--- a/src/ssr-components/Main.jsx
+++ b/src/ssr-components/Main.jsx
--- a/src/ssr-components/PasswordReset.jsx
+++ b/src/ssr-components/PasswordReset.jsx
--- a/src/ssr-components/RedirectionPage.jsx
+++ b/src/ssr-components/RedirectionPage.jsx
--- a/src/web.js
+++ b/src/web.js
@ -26,8 +26,8 @@ import {
  admintools,
  resetPassword,
 } from './routes';
-import generateGlobePage from './components/Globe';
-import generateMainPage from './components/Main';
+import generateGlobePage from './ssr-components/Globe';
+import generateMainPage from './ssr-components/Main';

 import { SECOND, MONTH } from './core/constants';
 import { PORT, DISCORD_INVITE, GUILDED_INVITE } from './core/config';
--- a/webpack.config.client.babel.js
+++ b/webpack.config.client.babel.js
@ -11,7 +11,7 @@ import pkg from './package.json';
 /*
 * Emit a file with assets paths
 */
-const assetPlugin =  new AssetsPlugin({
+const assetPlugin = new AssetsPlugin({
  path: path.resolve(__dirname, 'build'),
  filename: 'assets.json',
  entrypoints: true,
@ -54,9 +54,9 @@ export function buildWebpackClientConfig(development, analyze, locale) {

    entry: {
      [(locale !== 'default') ? `client-${locale}` : 'client']:
-        ['./src/client.js'],
+        [path.resolve(__dirname, 'src', 'client.js')],
      [(locale !== 'default') ? `globe-${locale}` : 'globe']:
-        ['./src/globe.js'],
+        [path.resolve(__dirname, 'src', 'globe.js')],
    },

    output: {
--- a/webpack.config.web.babel.js
+++ b/webpack.config.web.babel.js
@ -48,8 +48,8 @@ export default {
  mode: (isDebug) ? 'development' : 'production',

  entry: {
-    web: ['./src/web.js'],
-    backup: ['./src/backup.js'],
+    web: [path.resolve(__dirname, 'src', 'web.js')],
+    backup: [path.resolve(__dirname, 'src', 'web.js')],
  },

  output: {