From 39be34e83a3f3f164729ade27a8966fd6e06109a Mon Sep 17 00:00:00 2001
From: Jon Eugster <eugster.jon@gmail.com>
Date: Fri, 29 Mar 2024 12:27:14 +0100
Subject: [PATCH] improve landing page

---
 client/src/components/landing_page.tsx | 31 ++++++++++++++++++++------
 client/src/components/level.tsx        |  4 +++-
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/client/src/components/landing_page.tsx b/client/src/components/landing_page.tsx
index 30fb2d4..5178425 100644
--- a/client/src/components/landing_page.tsx
+++ b/client/src/components/landing_page.tsx
@@ -43,7 +43,9 @@ function Tile({gameId, data}: {gameId: string, data: GameTile|undefined}) {
   let [loadedTranslation, setLoadedTranslation] = React.useState(false)
 
   // Load the namespace of the game
-  i18next.loadNamespaces(gameId).catch(err => {}).then(() => {setLoadedTranslation(true)})
+  i18next.loadNamespaces(gameId).catch(err => {
+    console.warn(`translations for ${gameId} do not exist`)
+  }).then(() => {setLoadedTranslation(true)})
 
   if (typeof data === 'undefined') {
     return <></>
@@ -77,10 +79,8 @@ function Tile({gameId, data}: {gameId: string, data: GameTile|undefined}) {
         <td>
           {data.languages.map((lang) => {
             let langOpt = lean4gameConfig.languages.find((e) => e.iso == lang)
-            if (langOpt) {
-              return <ReactCountryFlag title={langOpt.name} countryCode={langOpt.flag} className="emojiFlag"/>
-            } else
-              return <></>
+            return <ReactCountryFlag key={`flag-${lang}`} title={langOpt?.name} countryCode={langOpt?.flag} className="emojiFlag"/>
+
           })}
         </td>
       </tr>
@@ -103,9 +103,26 @@ function LandingPage() {
   const closePreferencesPopup = () => setPreferencesPopup(false);
   const togglePreferencesPopup = () => setPreferencesPopup(!preferencesPopup);
 
-  let allTiles = lean4gameConfig.allGames.map((gameId) => (useGetGameInfoQuery({game: `g/${gameId}`}).data?.tile))
   const { t, i18n } = useTranslation()
 
+  let allTiles = lean4gameConfig.allGames.map((gameId) => {
+
+    let q =  useGetGameInfoQuery({game: `g/${gameId}`})
+
+    // if (q.isError) {
+    //   if (q.error?.originalStatus === 404) {
+    //     // Handle 404 error
+    //     console.log('File not found');
+    //   } else {
+    //     // Suppress additional console.error messages
+    //     console.error(q.error);
+    //   }
+    // }
+
+    return q.data?.tile
+  })
+
+
   return <div className="landing-page">
     <header style={{backgroundImage: `url(${bgImage})`}}>
       <nav className="landing-page-nav">
@@ -128,7 +145,7 @@ function LandingPage() {
       </div>
     </header>
     <div className="game-list">
-      {allTiles.length == 0 ?
+      {allTiles.filter(x => x != null).length == 0 ?
         <p>
           <Trans>
             No Games loaded. Use <a>http://localhost:3000/#/g/local/FOLDER</a> to open a
diff --git a/client/src/components/level.tsx b/client/src/components/level.tsx
index 260a196..b95b38b 100644
--- a/client/src/components/level.tsx
+++ b/client/src/components/level.tsx
@@ -67,7 +67,9 @@ function Level() {
   const gameId = React.useContext(GameIdContext)
 
   // Load the namespace of the game
-  i18next.loadNamespaces(gameId)
+  i18next.loadNamespaces(gameId).catch(err => {
+    console.warn(`translations for ${gameId} do not exist.`)
+  })
 
   const gameInfo = useGetGameInfoQuery({game: gameId})