feat: add local games on landing page

client/src/components/landing_page.tsx

@@ -19,18 +19,16 @@ import { navOpenAtom } from '../store/navigation-atoms';
 import { gameIdAtom } from '../store/location-atoms';
 import { gameInfoAtomFamily } from '../store/query-atoms';
 import { preferencesAtom } from '../store/preferences-atoms';
+import { gameTilesAtom } from '../store/tiles-atoms';
+import { GameTileWithName } from '../store/api';
 
-function Tile({gameId}: {gameId: string}) {
+function Tile({tileWithName}: {tileWithName: GameTileWithName}) {
   const { t, i18n } = useTranslation()
-  const [{ data: gameInfo }] = useAtom(gameInfoAtomFamily(gameId))
   const [, navigateToGame] = useAtom(gameIdAtom)
   const [preferences] = useAtom(preferencesAtom)
 
-  const gameTile = gameInfo?.tile
-
-  if (!gameTile) {
-    return <></>
-  }
+  const gameTile = tileWithName.tile
+  const gameId = `g/${tileWithName.owner}/${tileWithName.game}`
 
   return <div className="game" onClick={() => navigateToGame(gameId)}>
       <div className="wrapper">
@@ -77,6 +75,7 @@ function Tile({gameId}: {gameId: string}) {
 function LandingPage() {
   const [, setPopup] = useAtom(popupAtom)
   const [navOpen] = useAtom(navOpenAtom)
+  const [tiles] = useAtom(gameTilesAtom)
 
   const [usageCPU, setUsageCPU] = React.useState<number>()
   const [usageMem, setUsageMem] = React.useState<number>()
@@ -86,8 +85,7 @@ function LandingPage() {
   const { t, i18n } = useTranslation()
 
   // Load the namespaces of all games
-  // TODO: should `allGames` contain game-ids starting with `g/`?
-  i18n.loadNamespaces(lean4gameConfig.allGames.map(id => `g/${id}`))
+  i18n.loadNamespaces(tiles.map(tileWithName => `g/${tileWithName.owner}/${tileWithName.game}`))
 
   /** Parse `games/stats.csv` if present and display server capacity. */
   React.useEffect(() => {
@@ -126,12 +124,12 @@ function LandingPage() {
     </header>
     <div className="game-list">
       {
-      lean4gameConfig.allGames.map((id, i) => (
-          <Tile
-            key={id}
-            gameId={`g/${id}`}
+      tiles.map((tileWithName, i) => {
+          return <Tile
+            key={tileWithName.owner + tileWithName.game}
+            tileWithName={tileWithName}
           />
-        ))
+        })
       }
       {/* {allTiles.filter(x => x != null).length == 0 ?
         <p>

client/src/config.json

@@ -1,15 +1,4 @@
 {
-  "allGames": [
-    "leanprover-community/nng4",
-    "hhu-adam/robo",
-    "alexkontorovich/realanalysisgame",
-    "djvelleman/stg4",
-    "trequetrum/lean4game-logic",
-    "emilyriehl/reintroductiontoproofs",
-    "jadabouhawili/knightsandknaves-lean4game",
-    "zrtmrh/linearalgebragame"
-  ],
-
   "languages": [
     {
       "iso": "en",

client/src/store/api.ts

@@ -16,6 +16,12 @@ export interface GameTile {
   image: string
 }
 
+export interface GameTileWithName {
+  owner: string
+  game: string
+  tile: GameTile
+}
+
 export interface GameInfo {
   title?: string,
   introduction: string,

client/src/store/tiles-atoms.ts

@@ -0,0 +1,17 @@
+import { atomWithQuery } from "jotai-tanstack-query"
+import { GameTileWithName } from "./api"
+import { atom } from "jotai"
+
+
+const gameTilesQueryAtom = atomWithQuery<GameTileWithName[]>((get) => {
+  return {
+    queryKey: ['gameTiles'],
+    queryFn: async () => {
+      const res = await fetch(`${window.location.origin}/api/games`)
+      return res.json()
+    },
+  }
+})
+
+/** Tiles of all available games */
+export const gameTilesAtom = atom(get => get(gameTilesQueryAtom).data ?? [])

client/vite.config.ts

@@ -69,6 +69,9 @@ export default defineConfig({
       '/data': {
         target: `http://localhost:${backendPort}`,
       },
+      '/api': {
+        target: `http://localhost:${backendPort}`,
+      },
       '/i18n': {
         target: `http://localhost:${backendPort}`,
       },

relay/src/index.ts

@@ -19,6 +19,9 @@ const gameManager = new GameManager(__dirname)
 const PORT = process.env.PORT || 8080
 const API = process.env.API_PORT
 
+const environment = process.env.NODE_ENV;
+const isDevelopment = environment === 'development';
+
 let router = express.Router();
 router.get('/import/status/:owner/:repo', importStatus)
 router.get('/import/trigger/:owner/:repo', importTrigger)
@@ -101,6 +104,63 @@ const server = app
       }
     })
   })
+  // endpoint `games`: list of available games for landing page
+  .use('/api/games', async (req: any, res: any) => {
+    try {
+      const games = [];
+
+      // TODO: should be a config file
+      const featuredGameNames = [
+        {owner: "leanprover-community", game: "nng4"},
+        {owner: "hhu-adam", game: "robo"},
+        {owner: "alexkontorovich", game: "realanalysisgame"},
+        {owner: "djvelleman", game: "stg4"},
+        {owner: "trequetrum", game: "lean4game-logic"},
+        {owner: "emilyriehl", game: "reintroductiontoproofs"},
+        {owner: "jadabouhawili", game: "knightsandknaves-lean4game"},
+        {owner: "zrtmrh", game: "linearalgebragame"}
+      ]
+
+      // Load featured games
+      for (const entry of featuredGameNames) {
+        const gameJsonPath = path.join(__dirname, "..", "..", "..", "games", entry.owner, entry.game, ".lake", "gamedata", "game.json")
+        let gameJson : any;
+          try {
+            const raw = await fs.promises.readFile(gameJsonPath, "utf-8");
+            gameJson = JSON.parse(raw);
+          } catch (err) {
+            continue
+          }
+          games.push({owner: entry.owner, game: entry.game, tile: gameJson.tile})
+      }
+
+      // Load local games
+      if (isDevelopment){
+        const BASE_DIR = path.join(__dirname, "..", "..", "..", "..")
+        const entries = await fs.promises.readdir(BASE_DIR, {
+          withFileTypes: true,
+        });
+
+        for (const entry of entries) {
+          if (!entry.isDirectory()) continue;
+          const gameJsonPath = path.join(BASE_DIR, entry.name, ".lake", "gamedata", "game.json");
+          let gameJson : any;
+          try {
+            const raw = await fs.promises.readFile(gameJsonPath, "utf-8");
+            gameJson = JSON.parse(raw);
+          } catch (err) {
+            continue
+          }
+          games.push({owner: "local", game: entry.name, tile: gameJson.tile})
+        }
+      }
+
+      res.json(games);
+    } catch (err) {
+      console.error(err);
+      res.status(500).json({ error: "Failed to load game tiles" });
+    }
+  })
   .use('/', router)
   .listen(PORT, () => console.log(`Server listening on ${PORT}`));
 

relay/tsconfig.json

@@ -19,5 +19,5 @@
     "skipLibCheck": true,
     "sourceMap": true
   },
-  "include": ["./src/"]
+  "include": ["./src/", "src/config.json"]
 }