added locale chooser

src/App.css

@@ -22,6 +22,11 @@ footer{
     margin: 10vmin 0 0 0;
 }
 
+.locale_chooser{
+    margin: -8vmin 10vmin 10vmin 10vmin;
+    text-align: center;
+}
+
 .App {
     text-align: center;
 

src/App.js

@@ -10,11 +10,9 @@ import purpleBG from './purpleBG.png'
 import empty_1x1 from './empty_1x1.png'
 
 import 'intl-pluralrules'
-import { AppLocalizationProvider } from './l10n.js'
+import { AppLocalizationProvider, locales } from './l10n.js'
 import { withLocalization, Localized } from './Localized.js'
 
-const userLocales = ['de'] || navigator.languages
-// const userLocales = navigator.languages
 
 const frameSize = 1080
 
@@ -348,8 +346,41 @@ const AppLocalized = withLocalization(App)
 
 
 function AppWrapper() {
-    return <AppLocalizationProvider key="AppLocalizationProvider" userLocales={userLocales}>
-        <AppLocalized />
+    const [userLocales, setUserLocales] = useState(navigator.languages)
+    const [currentLocale, setCurrentLocale] = useState(null)
+
+    const handleLanguageChange = useCallback(event => {
+        setUserLocales([event.target.dataset.locale])
+    }, [setUserLocales])
+
+    const handleCurrentLocalesChange = useCallback(currentLocales => {
+        setCurrentLocale(currentLocales.length > 0 ? currentLocales[0] : '')
+    }, [setCurrentLocale])
+
+    return <AppLocalizationProvider
+        key="AppLocalizationProvider"
+        userLocales={userLocales}
+        onLocaleChange={handleCurrentLocalesChange}
+    >
+        <>
+            <AppLocalized />
+
+            <div className="locale_chooser">
+                {
+                    Object.entries(locales)
+                    .map(([locale, name]) => {
+                        return <button
+                            className={locale === currentLocale ? 'choosen' : ''}
+                            key={locale}
+                            data-locale={locale}
+                            onClick={handleLanguageChange}
+                        >
+                            {name}
+                        </button>
+                    })
+                }
+            </div>
+        </>
     </AppLocalizationProvider>
 }
 export default withLocalization(AppWrapper)

src/l10n.js

@@ -7,10 +7,13 @@ import { ReactLocalization, LocalizationProvider } from '@fluent/react'
 import { FluentBundle, FluentResource } from '@fluent/bundle'
 import { negotiateLanguages } from '@fluent/langneg'
 
-const _supportedLocales_ = [
-    'de',
-    'en',
-]
+
+export const locales = {
+    de: 'Deutsch',
+    en: 'English',
+}
+
+const _supportedLocales_ = Object.keys(locales)
 const _defaultLocale_ = 'en'
 
 
@@ -46,10 +49,10 @@ async function createMessagesGenerator(currentLocales) {
     }
 }
 
-export function AppLocalizationProvider({ userLocales, children }){
+export function AppLocalizationProvider({ userLocales, children, onLocaleChange }){
     const [bundles, setBundles] = useState(getDefaultBundles())
 
-    useEffect(event => {
+    useEffect(() => {
         async function loadBundles() {
             const currentLocales = negotiateLanguages(
                 userLocales,
@@ -57,6 +60,10 @@ export function AppLocalizationProvider({ userLocales, children }){
                 { defaultLocale: _defaultLocale_ }
             )
             
+            if (!!onLocaleChange) {
+                onLocaleChange(currentLocales)
+            }
+
             const generateBundles = await createMessagesGenerator(currentLocales)
             setBundles( new ReactLocalization(generateBundles()) )
         }