add search parameter to set language #220

client/src/app.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Outlet, useParams } from "react-router-dom";
+import { Outlet, useParams, useSearchParams } from "react-router-dom";
 import { useEffect, useState } from 'react';
 
 import '@fontsource/roboto/300.css';
@@ -11,20 +11,22 @@ import './css/reset.css';
 import './css/app.css';
 import { PageContext, PreferencesContext} from './components/infoview/context';
 import UsePreferences from "./state/hooks/use_preferences"
-import i18n from './i18n';
 import { Navigation } from './components/navigation';
 import { useSelector } from 'react-redux';
 import { changeTypewriterMode, selectOpenedIntro, selectTypewriterMode } from './state/progress';
 import { useAppDispatch } from './hooks';
 import { Popup, PopupContext } from './components/popup/popup';
 import { useGetGameInfoQuery } from './state/api';
+import lean4gameConfig from './config.json'
+import { useTranslation } from 'react-i18next';
 
 export const GameIdContext = React.createContext<{
   gameId: string,
   worldId: string|null,
   levelId: number|null}>({gameId: null, worldId: null, levelId: null});
 
 function App() {
+  let { t, i18n } = useTranslation()
 
   const params = useParams()
   const gameId = (params.owner && params.repo) ? "g/" + params.owner + "/" + params.repo : null
@@ -41,16 +43,39 @@ function App() {
   const [page, setPage] = useState(0)
   const [popupContent, setPopupContent] = useState(null)
   const gameInfo = useGetGameInfoQuery({game: gameId})
-
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const openedIntro = useSelector(selectOpenedIntro(gameId))
 
+  // mobile only: game intro should only be shown once and skipped afterwards
   useEffect(() => {
     if (openedIntro && !worldId && page == 0) {
       setPage(1)
     }
   }, [openedIntro])
 
+  // option to pass language as `?lang=de` in the URL
+  useEffect(() => {
+    let urlLang = searchParams.get("lang")
+    let availableLangs = gameInfo.data?.tile?.languages
+    if (gameId) {
+      if (availableLangs?.includes(urlLang)) {
+        setLanguage(urlLang)
+        // Delete the search param as we processed it.
+        searchParams.delete('lang')
+        setSearchParams(searchParams)
+      }
+    } else {
+      if (urlLang in lean4gameConfig.newLanguages) {
+        setLanguage(urlLang)
+        // Delete the search param as we processed it.
+        searchParams.delete('lang')
+        setSearchParams(searchParams)
+      }
+    }
+  }, [gameId, gameInfo.data?.tile?.languages])
+
+  // set the correct language
   useEffect(() => {
     let availableLangs = gameInfo.data?.tile?.languages
     if (gameId && availableLangs?.length > 0 && !(availableLangs.includes(language))) {

client/src/components/navigation.tsx

@@ -214,7 +214,7 @@ function MobileNavigationLevel () {
 
 /** The skeleton of the navigation which is the same across all layouts. */
 export function Navigation () {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const { gameId, worldId } = useContext(GameIdContext)
   const { mobile, language, setLanguage } = useContext(PreferencesContext)
   const { setPopupContent } = useContext(PopupContext)
@@ -249,7 +249,7 @@ export function Navigation () {
       {(!gameId || gameInfo.data?.tile?.languages.length > 1) &&
         // Language button only visible if the game exists in `>1` languages
         <NavButton
-          iconElement={langNavOpen ? null : <Flag iso={language} />}
+          iconElement={langNavOpen ? null : <Flag iso={i18n.language} />}
           icon={langNavOpen ? faXmark : null}
           title={langNavOpen ? t('close language menu') : t('open language menu')}
           onClick={toggleLangNav}

doc/client.md

@@ -0,0 +1,9 @@
+# Client
+
+This document describes features of the frontent/client side.
+
+
+## URL
+
+You can add `?lang=de` at the end of the URL to specify the language that should be set. This
+will change the user's preferred language to the one specified.