add more translations

move descriptions of canvases.json into .js file in oder to translate it

src/canvases.json

@@ -44,8 +44,7 @@
     "cds": 60000,
     "ranked" : true,
     "req": -1,
-    "sd": "2020-01-07",
-    "desc": "Our main canvas, a huge map of the world. Place everywhere you like"
+    "sd": "2020-01-07"
   },
   "1": {
     "ident": "m",
@@ -92,8 +91,7 @@
     "cds": 900000,
     "ranked" : true,
     "req": 20000,
-    "sd": "2020-01-08",
-    "desc": "Moon canvas. Safe space for art. No flags or large text (unless part of art)"
+    "sd": "2020-01-08"
   },
   "2": {
     "ident":"v",
@@ -171,8 +169,7 @@
     "cds": 60000,
     "ranked" : false,
     "req": 0,
-    "sd": "2020-01-08",
-    "desc": "Place Voxels on a 3D canvas with others"
+    "sd": "2020-01-08"
   },
   "3": {
     "ident": "c",
@@ -209,8 +206,7 @@
     "cds": 60000,
     "ranked" : false,
     "req": 0,
-    "sd": "2020-03-15",
-    "desc": "Special canvas to spread awareness of SARS-CoV2"
+    "sd": "2020-03-15"
   },
   "5": {
     "ident": "y",
@@ -241,8 +237,7 @@
     "cds": 4000,
     "ranked": false,
     "req": -1,
-    "sd": "2020-07-05",
-    "desc": "Mirror of PixelZone"
+    "sd": "2020-07-05"
   },
   "6": {
     "ident": "z",
@@ -273,8 +268,7 @@
     "cds": 10000,
     "ranked": false,
     "req": -1,
-    "sd": "2020-07-05",
-    "desc": "Mirror of PixelCanvas"
+    "sd": "2020-07-05"
   },
   "7": {
     "ident": "w",
@@ -293,7 +287,6 @@
     "cds": 1000000,
     "ranked": true,
     "req": 5000,
-    "sd": "2020-11-09",
-    "desc": "Black and White canvas"
+    "sd": "2020-11-09"
   }
 }

src/canvasesDesc.js

@@ -0,0 +1,53 @@
+/*
+ * Create canvases.json with localized translated
+ * descriptions.
+ *
+ * @flow
+ */
+
+import canvases from './canvases.json';
+import ttag from './core/ttag';
+
+/* eslint-disable max-len */
+
+function getCanvases(t) {
+  /*
+   * add descriptions of canvases here
+   * Use the t tab and right `backquotes`
+   */
+  const canvasDesc = {
+    0: t`Our main canvas, a huge map of the world. Place everywhere you like`,
+    1: t`Moon canvas. Safe space for art. No flags or large text (unless part of art)`,
+    2: t`Place Voxels on a 3D canvas with others`,
+    3: t`Special canvas to spread awareness of SARS-CoV2`,
+    5: t`Mirror of PixelZone`,
+    6: t`Mirror of PixelCanvas`,
+    7: t`Black and White canvas`,
+  };
+  /*
+   * no edit below here needed when adding/removing canvas
+   */
+
+  const localicedCanvases = { ...canvases };
+  const canvasKeys = Object.keys(localicedCanvases);
+
+  for (let i = 0; i < canvasKeys.length; i += 1) {
+    const key = canvasKeys[i];
+    localicedCanvases[key].desc = canvasDesc[key] || `Canvas ${key}`;
+  }
+}
+
+
+const lCanvases = {};
+(() => {
+  const langs = Object.keys(ttag);
+  langs.forEach((lang) => {
+    lCanvases[lang] = getCanvases(ttag[lang].t);
+  });
+})();
+
+export function getLocalicedCanvases(lang) {
+  return lCanvases[lang] || lCanvases.default;
+}
+
+export default lCanvases;

src/components/CoordinatesBox.jsx

@@ -34,7 +34,7 @@ const CoordinatesBox = ({ view, hover, notifyCopy }) => (
 function mapDispatchToProps(dispatch) {
   return {
     notifyCopy() {
-      dispatch(notify('Copied!'));
+      dispatch(notify(t`Copied!`));
     },
   };
 }

src/controls/keypress.js

@@ -2,6 +2,7 @@
  * keypress actions
  * @flow
  */
+import { t } from 'ttag';
 import store from '../ui/store';
 import copy from '../utils/clipboard';
 import {
@@ -55,7 +56,7 @@ function onKeyPress(event: KeyboardEvent) {
       const { hover } = state.gui;
       const text = hover.join('_');
       copy(text);
-      store.dispatch(notify('Copied!'));
+      store.dispatch(notify(t`Copied!`));
       return;
     }
     case 'p':

src/core/me.js

@@ -6,11 +6,11 @@
  * @flow
  */
 // eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import { getLocalicedCanvases } from '../canvasesDesc';
 import chatProvider from './ChatProvider';
 
 
-export default async function getMe(user) {
+export default async function getMe(user, lang = 'default') {
   const userdata = user.getUserData();
   // sanitize data
   const {
@@ -30,7 +30,7 @@ export default async function getMe(user) {
   delete userdata.mailVerified;
   delete userdata.mcVerified;
 
-  userdata.canvases = canvases;
+  userdata.canvases = getLocalicedCanvases(lang);
   userdata.channels = {
     ...chatProvider.defaultChannels,
     ...userdata.channels,

src/core/ttag.js

@@ -13,7 +13,7 @@ const ttags = {
   default: new TTag(),
 };
 
-function populateTTags() {
+(() => {
   const langs = Object.keys(LOCALES);
   langs.forEach((lang) => {
     const ttag = new TTag();
@@ -21,14 +21,10 @@ function populateTTags() {
     ttag.useLocale(lang);
     ttags[lang] = ttag;
   });
-}
-populateTTags();
+})();
 
 export function getTTag(lang) {
-  if (ttags[lang]) {
-    return ttags[lang];
-  }
-  return ttags.default;
+  return ttags[lang] || ttags.default;
 }
 
-export default ttags.default;
+export default ttags;

src/ssr-components/Globe.jsx

@@ -22,8 +22,6 @@ const styles = [{
   cssText: globeCss,
 }];
 
-const title = 'PixelPlanet.fun 3DGlobe';
-const description = 'pixelplanet globe';
 const defaultScripts = assets.globe.js.map(
   (s) => ASSET_SERVER + s,
 );
@@ -50,8 +48,8 @@ function generateGlobePage(lang: string): string {
 
   const html = ReactDOM.renderToStaticMarkup(
     <Html
-      title={title}
-      description={description}
+      title={t`PixelPlanet.Fun 3DGlobe`}
+      description={t`A 3D globe of our whole map`}
       scripts={scripts}
       body={<Globe />}
       styles={styles}

src/ui/placePixel.js

@@ -5,6 +5,7 @@
  *
  * @flow
  * */
+import { t } from 'ttag';
 import {
   notify,
   setPlaceAllowed,
@@ -49,10 +50,10 @@ function requestFromQueue(store) {
     pixelTimeout = null;
     store.dispatch(setPlaceAllowed(true));
     store.dispatch(sweetAlert(
-      'Error :(',
-      'Didn\'t get an answer from pixelplanet. Maybe try to refresh?',
+      t`Error :(`,
+      t`Didn't get an answer from pixelplanet. Maybe try to refresh?`,
       'error',
-      'OK',
+      t`OK`,
     ));
   }, 5000);
 
@@ -202,36 +203,36 @@ export function receivePixelReturn(
       store.dispatch(placedPixels(pxlCnt));
       break;
     case 1:
-      errorTitle = 'Invalid Canvas';
-      msg = 'This canvas doesn\'t exist';
+      errorTitle = t`Invalid Canvas`;
+      msg = t`This canvas doesn't exist`;
       break;
     case 2:
-      errorTitle = 'Invalid Coordinates';
-      msg = 'x out of bounds';
+      errorTitle = t`Invalid Coordinates`;
+      msg = t`x out of bounds`;
       break;
     case 3:
-      errorTitle = 'Invalid Coordinates';
-      msg = 'y out of bounds';
+      errorTitle = t`Invalid Coordinates`;
+      msg = t`y out of bounds`;
       break;
     case 4:
-      errorTitle = 'Invalid Coordinates';
-      msg = 'z out of bounds';
+      errorTitle = t`Invalid Coordinates`;
+      msg = t`z out of bounds`;
       break;
     case 5:
-      errorTitle = 'Wrong Color';
-      msg = 'Invalid color selected';
+      errorTitle = t`Wrong Color`;
+      msg = t`Invalid color selected`;
       break;
     case 6:
-      errorTitle = 'Just for registered Users';
-      msg = 'You have to be logged in to place on this canvas';
+      errorTitle = t`Just for registered Users`;
+      msg = t`You have to be logged in to place on this canvas`;
       break;
     case 7:
-      errorTitle = 'Place more :)';
+      errorTitle = t`Place more :)`;
       // eslint-disable-next-line max-len
-      msg = 'You can not access this canvas yet. You need to place more pixels';
+      msg = t`You can not access this canvas yet. You need to place more pixels`;
       break;
     case 8:
-      store.dispatch(notify('Pixel protected!'));
+      store.dispatch(notify(t`Pixel protected!`));
       break;
     case 9:
       // pixestack used up
@@ -247,21 +248,21 @@ export function receivePixelReturn(
       return;
     case 11:
 
-      errorTitle = 'No Proxies Allowed :(';
-      msg = 'You are using a Proxy.';
+      errorTitle = t`No Proxies Allowed :(`;
+      msg = t`You are using a Proxy.`;
       break;
     default:
-      errorTitle = 'Weird';
-      msg = 'Couldn\'t set Pixel';
+      errorTitle = t`Weird`;
+      msg = t`Couldn't set Pixel`;
   }
 
   if (msg) {
     store.dispatch(pixelFailure());
     store.dispatch(sweetAlert(
-      (errorTitle || `Error ${retCode}`),
+      (errorTitle || t`Error ${retCode}`),
       msg,
       'error',
-      'OK',
+      t`OK`,
     ));
   }