support arbitrary docker containers as games

client/src/App.tsx

@@ -16,7 +16,7 @@ function App() {
   const params = useParams();
   return (
     <div className="app">
-      <GameIdContext.Provider value={params.gameId}>
+      <GameIdContext.Provider value={"g/" + params.owner + "/" + params.repo}>
         <Outlet />
       </GameIdContext.Provider>
     </div>

client/src/LandingPage/index.html

@@ -23,7 +23,7 @@
 
     <div class="game-list">
 
-      <div class="game" onclick="location.href='#/game/adam';" style="cursor: pointer;">
+      <div class="game" onclick="location.href='#/g/hhu-adam/Robo';" style="cursor: pointer;">
         <div class="wrapper">
           <div class="title">Formaloversum</div>
           <div class="short-description">Erkunde das Leansche Universum mit deinem Robo,
@@ -66,7 +66,7 @@
         </table>
       </div>
 
-      <div class="game" onclick="location.href='#/game/nng';" style="cursor: pointer;">
+      <div class="game" onclick="location.href='#/g/hhu-adam/NNG4';" style="cursor: pointer;">
         <div class="wrapper">
           <div class="title">Natural Number Game</div>
           <div class="short-description">

client/src/components/LandingPage.tsx

@@ -47,8 +47,7 @@ function GameTile({
 
   let navigate = useNavigate();
   const routeChange = () =>{
-    let path = `game/${gameId}`;
-    navigate(path);
+    navigate(gameId);
   }
 
   return <div className="game" onClick={routeChange}>
@@ -108,7 +107,7 @@ function LandingPage() {
 
       <GameTile
         title="Formaloversum"
-        gameId="adam"
+        gameId="g/hhu-adam/Robo"
         intro="Erkunde das Leansche Universum mit deinem Robo, welcher dir bei der Verständigung mit den Formalosophen zur Seite steht."
         description="
 Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet danach verschiedene Bereiche des Bachelorstudiums an.
@@ -120,7 +119,7 @@ Dieses Spiel führt die Grundlagen zur Beweisführung in Lean ein und schneidet
 
       <GameTile
         title="Natural Number Game"
-        gameId="nng"
+        gameId="g/hhu-adam/NNG4"
         intro="The classical introduction game for Lean."
         description="In this game you recreate the natural numbers $\mathbb{N}$ from the Peano axioms,
 learning the basics about theorem proving in Lean.

client/src/components/Level.tsx

@@ -221,8 +221,8 @@ function PlayableLevel({worldId, levelId}) {
             </div>
           }
           {levelId >= gameInfo.data?.worldSize[worldId] ?
-          <Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
-          <Button to={`/game/${gameId}/world/${worldId}/level/${levelId + 1}`}>
+          <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
+          <Button to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}>
             Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>}
 
         </div>}
@@ -257,8 +257,8 @@ function Introduction({worldId}) {
       </div>
       <div className="conclusion">
         {0 == gameInfo.data?.worldSize[worldId] ?
-        <Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
-        <Button to={`/game/${gameId}/world/${worldId}/level/1`}>
+        <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button> :
+        <Button to={`/${gameId}/world/${worldId}/level/1`}>
           Start&nbsp;<FontAwesomeIcon icon={faArrowRight} />
         </Button>}
       </div>
@@ -272,7 +272,7 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
 
   return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
     <div>
-    <Button to={`/game/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button>
+    <Button to={`/${gameId}`}><FontAwesomeIcon icon={faHome} /></Button>
       <span className="app-bar-title">
         {gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
       </span>
@@ -282,10 +282,10 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
         {levelTitle}
       </span>
       <Button disabled={levelId <= 0} inverted={true}
-        to={`/game/${gameId}/world/${worldId}/level/${levelId - 1}`}
+        to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
         ><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
       <Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
-        to={`/game/${gameId}/world/${worldId}/level/${levelId + 1}`}
+        to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}
         >Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
     </div>
 

client/src/components/Welcome.tsx

@@ -39,7 +39,7 @@ function LevelIcon({ worldId, levelId, position }) {
 
   // TODO: relative positioning?
   return (
-    <Link to={`/game/${gameId}/world/${worldId}/level/${levelId}`}>
+    <Link to={`/${gameId}/world/${worldId}/level/${levelId}`}>
       <circle fill={completed ? "green" :"#999"} cx={x} cy={y} r={r} />
     </Link>
   )
@@ -76,13 +76,13 @@ function Welcome() {
       for (let i = 1; i <= gameInfo.data.worldSize[id]; i++) {
         svgElements.push(
           <LevelIcon
-            key={`/game/${gameId}/world/${id}/level/${i}`}
+            key={`/${gameId}/world/${id}/level/${i}`}
             position={position} worldId={id} levelId={i} />
         )
       }
 
       svgElements.push(
-        <Link key={`world${id}`} to={`/game/${gameId}/world/${id}/level/0`}>
+        <Link key={`world${id}`} to={`/${gameId}/world/${id}/level/0`}>
           <circle className="world-circle" cx={s*position.x} cy={s*position.y} r={R}
               fill="#1976d2"/>
           <foreignObject className="world-title-wrapper" x={s*position.x} y={s*position.y}

client/src/index.tsx

@@ -22,19 +22,18 @@ const router = createHashRouter([
   {
     path: "/",
     element: <LandingPage />,
-    // loader: () => redirect("/game/adam")
   },
   {
-    path: "/game/:gameId",
+    path: "/g/:owner/:repo",
     element: <App />,
     errorElement: <ErrorPage />,
     children: [
       {
-        path: "/game/:gameId",
+        path: "/g/:owner/:repo",
         element: <Welcome />,
       },
       {
-        path: "/game/:gameId/world/:worldId/level/:levelId",
+        path: "/g/:owner/:repo/world/:worldId/level/:levelId",
         element: <Level />,
       },
     ],