feat(i18n): add english translation for games

gerdesque · Feb 12, 2021 · 1291db4 · 1291db4
1 parent 6aa2b47
commit 1291db4
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 48 deletions.
diff --git a/apps/demol/src/app/app.json b/apps/demol/src/app/app.json
@@ -345,7 +345,8 @@
             },
             {
               "type": "puzzle",
-              "value": "puzzle"
+              "value": "puzzle",
+              "title": "Der Weg scheint noch nicht ganz richtig. Versuch es noch einmal!"
             },
             {
               "type": "redirect",
@@ -368,7 +369,8 @@
             },
             {
               "type": "puzzle",
-              "value": "puzzle"
+              "value": "puzzle",
+              "title": "Der Weg scheint noch nicht ganz richtig. Versuch es noch einmal!"
             },
             {
               "type": "redirect",
@@ -392,7 +394,8 @@
             },
             {
               "type": "puzzle",
-              "value": "puzzle"
+              "value": "puzzle",
+              "title": "Der Weg scheint noch nicht ganz richtig. Versuch es noch einmal!"
             },
             {
               "type": "redirect",

diff --git a/apps/demol/src/app/app.tsx b/apps/demol/src/app/app.tsx
@@ -17,13 +17,17 @@ import { API_URL } from '@gerdesque/data';
 export const App = () => {
   const [character, setCharacter] = usePersistedState('character', 'default');
   const [language, setLanguage] = usePersistedState('language', 'de');
-  const [chapters, setChapters] = useState(language === 'de' ? appDe.chapters : appEn.chapters);
+  const [chapters, setChapters] = useState(appDe.chapters);
+  const [title, setTitle] = useState('Demokratie erleben');
 
   useEffect(() => {
+    setChapters(language === 'de' ? appDe.chapters : appEn.chapters);
+    setTitle(language === 'de' ? 'Demokratie erleben' : 'Living Democracy');
+    document.title = title;
     fetch(`${API_URL}/chapters`)
       .then(_ => _.json())
       .then(setChapters);
-  }, []);
+  }, [language, title]);
 
   const renderChapter = (routerProps) => {
     const chapterLink = routerProps.match.params.link
@@ -35,7 +39,7 @@ export const App = () => {
     <AppContext.Provider value={[character, setCharacter, language, setLanguage]}>
     <BrowserRouter basename="/demokratieerleben2020"> 
       <div className="app">
-        <Nav chapters = {chapters}/>
+        <Nav chapters = {chapters} title={title}/>
         <ScrollIntoView>
         <div className="app-content">
           <Switch>

diff --git a/apps/demol/src/app/app_en.json b/apps/demol/src/app/app_en.json
@@ -345,7 +345,8 @@
             },
             {
               "type": "puzzle",
-              "value": "puzzle"
+              "value": "puzzle",
+              "title": "The path doesn't seem quite right yet. Try it again!"
             },
             {
               "type": "redirect",
@@ -368,7 +369,8 @@
             },
             {
               "type": "puzzle",
-              "value": "puzzle"
+              "value": "puzzle",
+              "title": "The path doesn't seem quite right yet. Try it again!"
             },
             {
               "type": "redirect",
@@ -392,7 +394,8 @@
             },
             {
               "type": "puzzle",
-              "value": "puzzle"
+              "value": "puzzle",
+              "title": "The path doesn't seem quite right yet. Try it again!"
             },
             {
               "type": "redirect",

diff --git a/libs/ui/src/lib/daily/daily.tsx b/libs/ui/src/lib/daily/daily.tsx
@@ -1,24 +1,25 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { DragDropContainer, DropTarget } from 'react-drag-drop-container';
 import shortid from 'shortid';
 import { makeStyles } from '@material-ui/core/styles';
 
 import Image from "../image/image";
-
-
+import { AppContext } from "../chapter/context";
 
 /* eslint-disable-next-line */
 export interface DailyProps {}
 
-const dailyItems = ["Waschen und Baden", "Frühstück", "Wanderungen machen", "Sprechstunde des Lagerarztes", 
-"Lagerruhe - Post- und Zeitungsausgabe", "Tagung des Lagerparlaments", "Gemeinsame Veranstaltungen", "Zeltruhe"];
-const schedule = ["6 Uhr", "8 Uhr", "8 ½ – 12 Uhr ", "8 ½ – 9 ½", "12 ½ – 14 ½ ",
-"18 – 19 Uhr", "19 ½ – 21 Uhr", "21 Uhr"]
-
 export const Daily = (props: DailyProps) => {
-
+  const [,,language] = useContext(AppContext);
   const [result, setResult] = useState(false);
 
+  const dailyItems = language === 'de' ? 
+    ["Waschen und Baden", "Frühstück", "Wanderungen machen", "Sprechstunde des Lagerarztes", 
+    "Lagerruhe - Post- und Zeitungsausgabe", "Tagung des Lagerparlaments", "Gemeinsame Veranstaltungen", "Zeltruhe"] :
+    ["Washing and bathing", "Breakfast", "Hiking", "Consultation hours of the camp doctor", 
+    "Camp rest - mail and newspaper delivery", "Meeting of the camp parliament", "Common events", "Camp rest"];
+  const daily = language === 'de' ? "Tagesplan anzeigen!" : "Show daily schedule!";
+
   const handleClick = () => {
     setResult(true);
     //props.onCheckDaily();
@@ -46,7 +47,7 @@ export const Daily = (props: DailyProps) => {
     return (
       <>
         <Box targetKey="box"/>
-        <p className="redirect" onClick={() => handleClick()}>Tagesplan anzeigen!</p>
+        <p className="redirect" onClick={() => handleClick()}>{daily}</p>
       </>
     )
   }
@@ -118,7 +119,11 @@ const Box = (props) => {
 }
 
 const BoxItem = (props) => {
-
+  const [,,language] = useContext(AppContext);
+  const schedule = language === 'de' ? 
+  ["6 Uhr", "8 Uhr", "8 ½ – 12 Uhr", "8 ½ – 9 ½", "12 ½ – 14 ½ ", "18 – 19 Uhr", "19 ½ – 21 Uhr", "21 Uhr"] :
+  ["6 am", "8 am", "8.30 to 12 am", "8.30 to 9.30 am", "12.30 to 2.30 pm", "6 to 7 pm", "7.30 to 9 pm", "9 pm"]
+
   const handleDrop = (e) => {
     e.stopPropagation();
     props.swap(e.dragData.index, props.index, e.dragData);

diff --git a/libs/ui/src/lib/nav/nav.tsx b/libs/ui/src/lib/nav/nav.tsx
@@ -5,6 +5,7 @@ import { Language } from '../language/language';
 /* eslint-disable-next-line */
 export interface NavProps {
   chapters: any[];
+  title: string;
 }
 
 export const Nav = (props: NavProps) => {
@@ -24,7 +25,7 @@ export const Nav = (props: NavProps) => {
           <Language />
         </li>
         <li className='navigation--item'>
-          <NavLink exact to="/">Demokratie erLeben</NavLink>
+          <NavLink exact to="/">{props.title}</NavLink>
         </li>
         {renderChapterNav()}
       </ul>

diff --git a/libs/ui/src/lib/puzzle/puzzle.tsx b/libs/ui/src/lib/puzzle/puzzle.tsx
@@ -2,9 +2,12 @@ import React, { Component } from "react";
 import { Redirect } from 'react-router-dom';
 import Sound from 'react-sound';
 
+/* eslint-disable-next-line */
+export interface PuzzleProps {
+  title: string;
+}
 
-
-class Puzzle extends Component {
+class Puzzle extends Component<PuzzleProps> {
   state = {
     pieces: [],
     shuffled: [],
@@ -83,7 +86,7 @@ class Puzzle extends Component {
         </div>
         {this.state.chance &&
           <>
-            <p>Der Weg scheint noch nicht ganz richtig. Versuch es noch einmal!</p>
+            <p>{this.props.title}</p>
             <Sound url={`./assets/sounds/game_lost.mp3`} playStatus={this.state.playStatus}
               onFinishedPlaying={() => this.setState({ playStatus: Sound.status.STOPPED })} />
           </>}

diff --git a/libs/ui/src/lib/suitcase/suitcase.tsx b/libs/ui/src/lib/suitcase/suitcase.tsx
@@ -12,7 +12,7 @@ import {AppContext } from '../chapter/context';
 
 export const Suitcase = (props) => {
 
-  const [character, setCharacter] = useContext(AppContext);
+  const [character, setCharacter, language] = useContext(AppContext);
 
   const [drag, setDrag] = useState("");
   const [bagCounter, setBagCounter] = useState(0);
@@ -39,7 +39,8 @@ export const Suitcase = (props) => {
   const dropped = (e) => {
     e.containerElem.style.visibility = "hidden";
     setBagCounter(bagCounter +1);
-    setDrag(`${character} packt ${e.dragData.label} ein.`);
+    language === 'de' ? setDrag(`${character} packt ${e.dragData.label} ein.`) : 
+      setDrag(`${character} packs ${e.dragData.label}.`);
     setRightSound(true);
     if (bagCounter === 4) {
       setWinningSound(true);
@@ -48,24 +49,25 @@ export const Suitcase = (props) => {
   };
 
   const droppedFalseItem = (e) => {
-    setDrag(`${character} braucht ${e.dragData.label} wohl eher nicht.`);
+    language === 'de' ? setDrag(`${character} braucht ${e.dragData.label} wohl eher nicht.`) : 
+      setDrag(`${character} probably doesn't need ${e.dragData.label}.`);
     setLostSound(true);
     setFalseCounter(falseCounter+1);
   };
 
   return (
     <div className='suitcase'>
       <div className='items'>
-        <Items targetKey='bag' label='ein Hemd' image='suitcase_hemd' />
-        <Items targetKey='bag' label='eine Feldflasche' image='suitcase_feldflasche' />        
-        <Items targetKey='negative' label='ein Radio' image='suitcase_radio' />
-        <Items targetKey='bag' label='eine Seife' image='suitcase_seife' />
-        <Items targetKey='negative' label='ein Smartphone' image='suitcase_smartphone' />
-        <Items targetKey='bag' label='eine Zahnbürste' image='suitcase_zahnbürste' />
-        <Items targetKey='negative' label='eine Karaffe' image='suitcase_karaffe' />
-        <Items targetKey='negative' label='eine Topfpflanze' image='suitcase_topfpflanze' />
-        <Items targetKey='bag' label='einen Löffel' image='suitcase_löffel' />
-        <Items targetKey='negative' label='einen Hammer' image='suitcase_hammer' />
+        <Items targetKey='bag' labelDe='ein Hemd' labelEn='a shirt' image='suitcase_hemd' />
+        <Items targetKey='bag' labelDe='eine Feldflasche' labelEn='a water bottle' image='suitcase_feldflasche' />        
+        <Items targetKey='negative' labelDe='ein Radio' labelEn='a radio' image='suitcase_radio' />
+        <Items targetKey='bag' labelDe='eine Seife' labelEn='a soap' image='suitcase_seife' />
+        <Items targetKey='negative' labelDe='ein Smartphone' labelEn='a smartphone' image='suitcase_smartphone' />
+        <Items targetKey='bag' labelDe='eine Zahnbürste' labelEn='a toothbrush' image='suitcase_zahnbürste' />
+        <Items targetKey='negative' labelDe='eine Karaffe' labelEn='a carafe' image='suitcase_karaffe' />
+        <Items targetKey='negative' labelDe='eine Topfpflanze' labelEn='a pot plant' image='suitcase_topfpflanze' />
+        <Items targetKey='bag' labelDe='einen Löffel' labelEn='a spoon' image='suitcase_löffel' />
+        <Items targetKey='negative' labelDe='einen Hammer' labelEn='a hammer' image='suitcase_hammer' />
       </div>
       <DropTarget onHit={(e) => dropped(e)} targetKey='bag'>
         <DropTarget onHit={(e) => droppedFalseItem(e)} targetKey='negative'>
@@ -90,10 +92,11 @@ export const Suitcase = (props) => {
 }
 
 const Items = (props) => {
+  const [,, language] = useContext(AppContext);
   return (
     <DragDropContainer
       targetKey={props.targetKey}
-      dragData={{ label: props.label }}
+      dragData={{ label: language === 'de' ? props.labelDe : props.labelEn }}
       render={() => {
         return <Image value={props.image} />;
       }}

diff --git a/libs/ui/src/lib/tictactoe/tictactoe.tsx b/libs/ui/src/lib/tictactoe/tictactoe.tsx
@@ -1,10 +1,6 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import Sound from 'react-sound';
-
-
-
-/* eslint-disable-next-line */
-export interface TicTacToeProps {}
+import { AppContext } from "../chapter/context";
 
 const Square = ({ value, onClick }) => {
   return (
@@ -26,19 +22,22 @@ const lines = [
 const userSymbol = "X";
 const computerSymbol = "O";
 
-export const TicTacToe = (props: TicTacToeProps) => {
-
+export const TicTacToe = () => {
+  const [,, language] = useContext(AppContext);
   const [squares, setSquares] = useState(Array(9).fill(null));
   const [playStatus, setPlayStatus] = useState(Sound.status.PLAYING);
   const winner = calculateWinner(squares);
+  const winLabel = language === 'de' ? "Du hast gewonnen!" : "You have won!";
+  const drawLabel = language === 'de' ? "Es ist ja nur ein Spiel!" : "It's just a game!";
+  const lostLabel = language === 'de' ? "Ein solidarisches Remis!" : "A draw in solidarity!";
 
   function getStatus() {
     if (winner) {
       document.querySelector('.result').scrollIntoView({ behavior: 'smooth' });
-      return winner === "X" ? "Du hast gewonnen!" : "Es ist ja nur ein Spiel!";
+      return winner === "X" ? winLabel : lostLabel;
     } else if (isBoardFull(squares)) {
       document.querySelector('.result').scrollIntoView({ behavior: 'smooth' });
-      return "Ein solidarisches Remis!";
+      return drawLabel;
     } else {
       return '';
     }