diff --git a/README.md b/README.md index 2661d9f..8d7680f 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Please follow the tutorial [Creating a Game](doc/create_game.md). In particular, * Step 5: [How to Run Games Locally](doc/running_locally.md) * Step 7: [How to Update an existing Game](doc/update_game.md) -* Step 8: [How to Publishing a Game](doc/publish_game.md) +* Step 9: [How to Publishing a Game](doc/publish_game.md) * [Troubleshooting](doc/troubleshoot.md) ## Documentation @@ -37,6 +37,17 @@ not fully written yet. Contributions to `lean4game` are always welcome! +### Translation + +The interface can be translated to various languages. For adding a translation, one needs to do the following: + +1. In `client/src/config.json`, add your new language. The "iso" key is the ISO language code, i.e. it should be accepted by "i18next" and "GNU gettext"; the "flag" key is once accepted by [react-country-flag](https://www.npmjs.com/package/react-country-flag). +2. Run `npm run translate`. This should create a new file `client/public/locales/{language}/translation.json`. (alternatively you can copy-paste `client/public/locales/en/translation.json`) +3. Add all translations. +4. Commit the changes you made to `config.json` together with the new `translation.json`. + +For translating games, see [Translating a game](doc/translate.md). + ## Security Providing the use access to a Lean instance running on the server is a severe security risk. That is why we start the Lean server with bubblewrap. diff --git a/client/src/components/landing_page.tsx b/client/src/components/landing_page.tsx index 5178425..be12fc0 100644 --- a/client/src/components/landing_page.tsx +++ b/client/src/components/landing_page.tsx @@ -33,20 +33,12 @@ function GithubIcon({url='https://github.com'}) { } function Tile({gameId, data}: {gameId: string, data: GameTile|undefined}) { - let { t, i18n } = useTranslation() + let { t } = useTranslation() let navigate = useNavigate(); const routeChange = () =>{ navigate(gameId); } - // we use this to reload the tile 1x after the translation is loaded. - let [loadedTranslation, setLoadedTranslation] = React.useState(false) - - // Load the namespace of the game - i18next.loadNamespaces(gameId).catch(err => { - console.warn(`translations for ${gameId} do not exist`) - }).then(() => {setLoadedTranslation(true)}) - if (typeof data === 'undefined') { return <> } @@ -105,8 +97,11 @@ function LandingPage() { const { t, i18n } = useTranslation() - let allTiles = lean4gameConfig.allGames.map((gameId) => { + // Load the namespaces of all games + // TODO: should `allGames` contain game-ids starting with `g/`? + i18next.loadNamespaces(lean4gameConfig.allGames.map(id => `g/${id}`)) + let allTiles = lean4gameConfig.allGames.map((gameId) => { let q = useGetGameInfoQuery({game: `g/${gameId}`}) // if (q.isError) { @@ -122,7 +117,6 @@ function LandingPage() { return q.data?.tile }) - return