add interface buttons for i18n #179

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>
       </>
     }

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>

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) {

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;
+}