From a9447a70d4402ec71a708f1827b1f20654f75372 Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Sat, 23 Mar 2024 01:11:42 +0100
Subject: [PATCH] add interface buttons for i18n #179

---
 client/src/components/app_bar.tsx           | 19 ++++++++++++++++
 client/src/components/popup/preferences.tsx | 24 ++++++++++++++++++++-
 client/src/components/welcome.tsx           |  3 +--
 client/src/css/level.css                    |  9 ++++++++
 package-lock.json                           | 12 +++++++++++
 package.json                                |  1 +
 6 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/client/src/components/app_bar.tsx b/client/src/components/app_bar.tsx
index 2fdb338..bce6524 100644
--- a/client/src/components/app_bar.tsx
+++ b/client/src/components/app_bar.tsx
@@ -13,6 +13,7 @@ import { changedOpenedIntro, selectCompleted, selectDifficulty, selectProgress }
 import { useAppDispatch, useAppSelector } from '../hooks'
 import { Button } from './button'
 import { downloadProgress } from './popup/erase'
+import ReactCountryFlag from "react-country-flag"
 
 /** navigation buttons for mobile welcome page to switch between intro/tree/inventory. */
 function MobileNavButtons({pageNumber, setPageNumber}:
@@ -127,6 +128,22 @@ function ImpressumButton({setNavOpen, toggleImpressum, isDropdown}) {
   </Button>
 }
 
+/** button to toggle iimpressum popup */
+function LanguageButton({setNavOpen, toggleLangNav, isDropdown}) {
+  return <Button className="btn btn-inverted language-btn"
+    title="language" inverted="true" to="" onClick={(ev) => {toggleLangNav(ev); setNavOpen(false)}}>
+    <ReactCountryFlag countryCode="GB"
+      className="emojiFlag"
+      style={{
+          height: '1.3em',
+          width: '1.6em',
+      }}
+      title="English"
+    />
+    {isDropdown && <>&nbsp;Language</>}
+  </Button>
+}
+
 /**  button to go back to welcome page */
 function HomeButton({isDropdown}) {
   const gameId = React.useContext(GameIdContext)
@@ -237,6 +254,7 @@ export function LevelAppBar({isLoading, levelTitle, toggleImpressum, pageNumber=
           <HomeButton isDropdown={true} />
           <InputModeButton setNavOpen={setNavOpen} isDropdown={true}/>
           <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
+          <LanguageButton setNavOpen={setNavOpen} toggleLangNav={() => {}} isDropdown={true} />
         </div>
       </> :
       <>
@@ -253,6 +271,7 @@ export function LevelAppBar({isLoading, levelTitle, toggleImpressum, pageNumber=
           <NextButton worldSize={gameInfo.data?.worldSize[worldId]} difficulty={difficulty} completed={completed} setNavOpen={setNavOpen} />
           <InputModeButton setNavOpen={setNavOpen} isDropdown={false}/>
           <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={false} />
+          <LanguageButton setNavOpen={setNavOpen} toggleLangNav={() => {}} isDropdown={false} />
         </div>
       </>
     }
diff --git a/client/src/components/popup/preferences.tsx b/client/src/components/popup/preferences.tsx
index aadc319..47d1465 100644
--- a/client/src/components/popup/preferences.tsx
+++ b/client/src/components/popup/preferences.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Input, Typography } from '@mui/material'
+import { Input, MenuItem, Select, Typography } from '@mui/material'
 import Markdown from '../markdown'
 import { Switch, Button, ButtonGroup } from '@mui/material';
 import Box from '@mui/material/Box';
@@ -8,6 +8,7 @@ import Slider from '@mui/material/Slider';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 import { IPreferencesContext } from "../infoview/context"
+import ReactCountryFlag from 'react-country-flag';
 
 interface PreferencesPopupProps extends Omit<IPreferencesContext, 'mobile'> {
     handleClose: () => void
@@ -42,6 +43,27 @@ export function PreferencesPopup({ layout, setLayout, isSavePreferences, setIsSa
         <div className="modal">
             <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
             <Typography variant="body1" component="div" className="settings">
+                <div className='preferences-category'>
+                    <div className='category-title'>
+                        <h3>Language</h3>
+                    </div>
+                    <div className='preferences-item first leave-left-gap'>
+                        <FormControlLabel
+                            control={
+                                <Box sx={{ width: 300 }}>
+                                    <Select
+                                        value={'GB'}
+                                        label={"Language"}>
+                                        <MenuItem value={'GB'}>
+                                            <ReactCountryFlag countryCode="GB"/>&nbsp;English
+                                        </MenuItem>
+                                    </Select>
+                                </Box>
+                            }
+                            label=""
+                        />
+                    </div>
+                </div>
                 <div className='preferences-category'>
                     <div className='category-title'>
                         <h3>Layout</h3>
diff --git a/client/src/components/welcome.tsx b/client/src/components/welcome.tsx
index 5d4b3de..a7c1697 100644
--- a/client/src/components/welcome.tsx
+++ b/client/src/components/welcome.tsx
@@ -42,7 +42,7 @@ function IntroductionPanel({introduction, setPageNumber}: {introduction: string,
       {text?.map(((t, i) =>
         t.trim() ?
           <Hint key={`intro-p-${i}`}
-            hint={{text: t, hidden: false}}
+            hint={{text: t, hidden: false, rawText: t, varNames: []}}
             step={0} selected={null} toggleSelection={undefined} />
         : <></>
       ))}
@@ -94,7 +94,6 @@ function Welcome() {
   function toggleUploadMenu() {setUploadMenu(!uploadMenu)}
   function togglePreferencesPopup() {setPreferencesPopup(!preferencesPopup)}
 
-
   // set the window title
   useEffect(() => {
     if (gameInfo.data?.title) {
diff --git a/client/src/css/level.css b/client/src/css/level.css
index b04b12a..1fbd8db 100644
--- a/client/src/css/level.css
+++ b/client/src/css/level.css
@@ -373,3 +373,12 @@ td code  {
 /* .proof .step {
   border: 2px solid rgb(0, 123, 255);
 } */
+
+.nav-btns {
+  height: 2rem;
+}
+
+.nav-btns .language-btn {
+  background: #DDF6FF;
+  text-align: center;
+}
diff --git a/package-lock.json b/package-lock.json
index ff05b9c..47d5876 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "octokit": "^3.1.2",
         "path-browserify": "^1.0.1",
         "react": "^18.2.0",
+        "react-country-flag": "^3.1.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^8.0.4",
         "react-native": "^0.72.3",
@@ -13084,6 +13085,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-country-flag": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
+      "integrity": "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g==",
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-devtools-core": {
       "version": "4.28.5",
       "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-4.28.5.tgz",
diff --git a/package.json b/package.json
index 72053c4..5b30a6c 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "octokit": "^3.1.2",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.4",
     "react-native": "^0.72.3",