more progress on internationalisation

client/src/components/app_bar.tsx

@@ -55,7 +55,7 @@ function MobileNavButtons({pageNumber, setPageNumber}:
 }
 
 /** button to toggle dropdown menu. */
-function MenuButton({navOpen, setNavOpen}) {
+export function MenuButton({navOpen, setNavOpen}) {
   return <Button to="" className="btn toggle-width" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}}>
     {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
   </Button>
@@ -127,16 +127,16 @@ function InputModeButton({setNavOpen, isDropdown}) {
  *
  * Note: Do not translate the word "Impressum"! German GDPR needs this.
 */
-function ImpressumButton({setNavOpen, toggleImpressum, isDropdown}) {
+export function ImpressumButton({setNavOpen, toggleImpressum, isDropdown}) {
   const { t } = useTranslation()
   return <Button className="btn btn-inverted"
     title={t("information, Impressum, privacy policy")} inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
     <FontAwesomeIcon icon={faCircleInfo} />
-    {isDropdown && <>&nbsp;{t("Impressum")}</>}
+    {isDropdown && <>&nbsp;Impressum</>}
   </Button>
 }
 
-function PreferencesButton({setNavOpen, togglePreferencesPopup}) {
+export function PreferencesButton({setNavOpen, togglePreferencesPopup}) {
   const { t } = useTranslation()
   return <Button title={t("Preferences")} inverted="true" to="" onClick={() => {togglePreferencesPopup(); setNavOpen(false)}}>
     <FontAwesomeIcon icon={faGear} />&nbsp;{t("Preferences")}

client/src/components/landing_page.tsx

@@ -16,6 +16,8 @@ import { GameTile, useGetGameInfoQuery } from '../state/api'
 import path from 'path';
 
 import lean4gameConfig from '../config.json'
+import { PreferencesPopup } from './popup/preferences';
+import { ImpressumButton, MenuButton, PreferencesButton } from './app_bar';
 
 const flag = {
   'Dutch': '🇳🇱',
@@ -84,24 +86,28 @@ function LandingPage() {
 
   const navigate = useNavigate();
 
-  const [impressum, setImpressum] = React.useState(false);
-  const openImpressum = () => setImpressum(true);
-  const closeImpressum = () => setImpressum(false);
+  const [impressumPopup, setImpressumPopup] = React.useState(false);
+  const [preferencesPopup, setPreferencesPopup] = React.useState(false);
+  const [navOpen, setNavOpen] = React.useState(false);
+  const openImpressum = () => setImpressumPopup(true);
+  const closeImpressum = () => setImpressumPopup(false);
+  const toggleImpressum = () => setImpressumPopup(!impressumPopup);
+  const closePreferencesPopup = () => setPreferencesPopup(false);
+  const togglePreferencesPopup = () => setPreferencesPopup(!preferencesPopup);
 
   let allTiles = lean4gameConfig.allGames.map((gameId) => (useGetGameInfoQuery({game: `g/${gameId}`}).data?.tile))
   const { t, i18n } = useTranslation()
 
   return <div className="landing-page">
     <header style={{backgroundImage: `url(${bgImage})`}}>
-      <nav>
+      <nav className="landing-page-nav">
         <GithubIcon url="https://github.com/leanprover-community/lean4game"/>
+        <MenuButton navOpen={navOpen} setNavOpen={setNavOpen}/>
+        <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
+            <ImpressumButton setNavOpen={setNavOpen} toggleImpressum={toggleImpressum} isDropdown={true} />
+            <PreferencesButton setNavOpen={setNavOpen} togglePreferencesPopup={togglePreferencesPopup}/>
+        </div>
       </nav>
-      <div>
-      <button onClick={() => i18n.changeLanguage("en")}>{flag["English"]}</button>
-      <button onClick={() => i18n.changeLanguage("fr")}>{flag["French"]}</button>
-      <button onClick={() => i18n.changeLanguage("de")}>{flag["German"]}</button>
-      {/* Add more buttons for other languages as needed */}
-    </div>
       <div id="main-title">
         <h1>{t("Lean Game Server")}</h1>
         <p>
@@ -185,7 +191,8 @@ function LandingPage() {
     <footer>
       {/* Do not translate "Impressum", it's needed for German GDPR */}
       <a className="link" onClick={openImpressum}>Impressum</a>
-      {impressum? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
+      {impressumPopup? <PrivacyPolicyPopup handleClose={closeImpressum} />: null}
+      {preferencesPopup ? <PreferencesPopup handleClose={closePreferencesPopup} /> : null}
     </footer>
   </div>
 

client/src/components/level.tsx

@@ -62,7 +62,6 @@ function Level() {
   const levelId = parseInt(params.levelId)
   const worldId = params.worldId
 
-  const {layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage} = React.useContext(PreferencesContext)
   const gameId = React.useContext(GameIdContext)
   const gameInfo = useGetGameInfoQuery({game: gameId})
 
@@ -84,7 +83,7 @@ function Level() {
       <PlayableLevel key={`${worldId}/${levelId}`} impressum={impressum} setImpressum={setImpressum} toggleInfo={toggleInfo} togglePreferencesPopup={togglePreferencesPopup}/>}
     {impressum ? <PrivacyPolicyPopup handleClose={closeImpressum} /> : null}
     {info ? <InfoPopup info={gameInfo.data?.info} handleClose={closeInfo}/> : null}
-    {preferencesPopup ? <PreferencesPopup layout={layout} isSavePreferences={isSavePreferences} setLayout={setLayout} setIsSavePreferences={setIsSavePreferences} handleClose={closePreferencesPopup} language={language} setLanguage={setLanguage}/> : null}
+    {preferencesPopup ? <PreferencesPopup handleClose={closePreferencesPopup} /> : null}
   </WorldLevelIdContext.Provider>
 }
 

client/src/components/popup/preferences.tsx

@@ -8,31 +8,28 @@ import lean4gameConfig from '../../config.json'
 
 import FormControlLabel from '@mui/material/FormControlLabel';
 
-import { IPreferencesContext } from "../infoview/context"
+import { IPreferencesContext, PreferencesContext } from "../infoview/context"
 import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
 
-interface PreferencesPopupProps extends Omit<IPreferencesContext, 'mobile'> {
-  handleClose: () => void
-}
-
-export function PreferencesPopup({ layout, setLayout, isSavePreferences, language, setIsSavePreferences, handleClose, setLanguage }: PreferencesPopupProps) {
+export function PreferencesPopup({ handleClose }: { handleClose: () => void }) {
   let { t } = useTranslation()
+  const {layout, isSavePreferences, language, setLayout, setIsSavePreferences, setLanguage} = React.useContext(PreferencesContext)
 
   const marks = [
     {
       value: 0,
-      label: 'Mobile',
+      label: t('Mobile'),
       key: "mobile"
     },
     {
       value: 1,
-      label: 'Auto',
+      label: t('Auto'),
       key: "auto"
     },
     {
       value: 2,
-      label: 'Desktop',
+      label: t('Desktop'),
       key: "desktop"
     },
   ];

client/src/components/welcome.tsx

@@ -135,7 +135,7 @@ function Welcome() {
     {eraseMenu? <ErasePopup handleClose={closeEraseMenu}/> : null}
     {uploadMenu? <UploadPopup handleClose={closeUploadMenu}/> : null}
     {info ? <InfoPopup info={gameInfo.data?.info} handleClose={closeInfo}/> : null}
-    {preferencesPopup ? <PreferencesPopup layout={layout} isSavePreferences={isSavePreferences} setLayout={setLayout} setIsSavePreferences={setIsSavePreferences} handleClose={closePreferencesPopup} language={language} setLanguage={setLanguage}/> : null}
+    {preferencesPopup ? <PreferencesPopup handleClose={closePreferencesPopup} /> : null}
   </>
 }
 

client/src/css/landing_page.css

@@ -36,6 +36,13 @@ a {
   padding-bottom: 80px;
 }
 
+.landing-page-nav {
+  position: relative;
+}
+
+#menu-btn {
+  background-color: unset;
+}
 
 @media screen and (max-width: 440px) {
   .game-list {

client/src/index.tsx

@@ -21,7 +21,14 @@ let root_object: RouteObject = single_game ? {
   loader: () => redirect("/g/local/game")
 } : {
   path: "/",
-  element: <LandingPage />,
+  element: <App />,
+  errorElement: <ErrorPage />,
+  children: [
+    {
+      path: "/",
+      element: <LandingPage />,
+    }
+  ]
 }
 
 const router = createHashRouter([