Merge pull request #69 from boardgamers/glcanvas

Glcanvas
boardgamers · Oct 14, 2024 · 62294ab · 62294ab
2 parents 192eefc + 1ade555
commit 62294ab
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 21 deletions.
diff --git a/apps/api/app/resources.ts b/apps/api/app/resources.ts
@@ -33,20 +33,35 @@ router.get("/game/:game_name/:game_version/iframe", async (ctx) => {
     gameInfo?.viewer?.alternate?.url && ctx.query.alternate === "1" ? gameInfo?.viewer.alternate : gameInfo.viewer;
   const viewerUrl = ctx.query.customViewerUrl || viewer.url;
 
-  ctx.body = `
-    <html>
-      <head>
-        <meta charset="UTF-8">
-        ${viewer.dependencies.scripts.map((dep) => `<${"script"} src='${dep}'></${"script"}>`).join("\n")}
-        <${"script"} src='${viewerUrl}' type='text/javascript'> </${"script"}>
-        ${viewer.dependencies.stylesheets
-          .map((dep) => `<link type='text/css' rel='stylesheet' href='${dep}'></link>`)
-          .join("\n")}
+  const stylesheets = viewer.dependencies.stylesheets
+    .map((dep) => `<link type='text/css' rel='stylesheet' href='${dep}'></link>`)
+    .join("\n");
+  const scripts = viewer.dependencies.scripts.map((dep) => `<${"script"} src='${dep}'></${"script"}>`).join("\n");
+  const viewerScript = `<${"script"} src='${viewerUrl}' type='text/javascript'></${"script"}>`;
+
+  const template = viewer.topLevelVariable === "clash" ? `
+    <head>
+      <meta charset="UTF-8">
+      ${stylesheets}
       </head>
-      <body>
-        <div id='app'>
-        </div>
-      </body>
+    <body>
+      <canvas id='glcanvas' style="margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 0;"></canvas>
+      ${scripts}
+      ${viewerScript}
+    </body>` : `
+    <head>
+      <meta charset="UTF-8">
+      ${scripts}
+      ${viewerScript}
+      ${stylesheets}
+    </head>
+    <body>
+      <div id='app'>
+      </div>
+    </body>`;
+
+  ctx.body = `
+      ${template}
       <${"script"} type='text/javascript'>
         const gameObj = window.${viewer.topLevelVariable}.launch('#app');
         window.addEventListener('message', event => {

diff --git a/apps/docs/docs/guide/tictactoe.md b/apps/docs/docs/guide/tictactoe.md
@@ -60,9 +60,9 @@ We don't have to check that it's the current player - it's already done by the g
 The function could be as simple as this:
 
 ```ts
-export function move(state: GameState, move: Coord, player: Player) {
+export function move(state: GameState, coord: Coord, player: Player) {
   state.board[coord.x][coord.y] = player;
-  state.moves.push({ player, coord: move });
+  state.moves.push({ player, coord });
 
   return state;
 }
@@ -100,9 +100,9 @@ function winner(board: Board): Player | undefined {
 Then we add that info in the `move` function:
 
 ```ts
-export function move(state: GameState, move: Coord, player: Player) {
+export function move(state: GameState, coord: Coord, player: Player) {
   state.board[coord.x][coord.y] = player;
-  state.moves.push({ player, coord: move });
+  state.moves.push({ player, coord });
   // Either it stays undefined or is set to the winner
   state.winner = winner(state.board);
 
@@ -165,7 +165,7 @@ export function currentPlayer(state: GameState): Player {
     return 0;
   }
 
-  return opponent(state.moves[state.moves.length - 1]);
+  return opponent(state.moves[state.moves.length - 1].player);
 }
 ```
 
@@ -185,7 +185,7 @@ As such the log length is the number of moves + 1 if there is no winner, and the
 
 ```ts
 export function logLength(state: GameState): number {
-  return 1 + moves.length + (state.winner !== undefined ? 1 : 0);
+  return 1 + state.moves.length + (state.winner !== undefined ? 1 : 0);
 }
 ```
 

diff --git a/apps/web/src/components/Game/StartedGame.svelte b/apps/web/src/components/Game/StartedGame.svelte
@@ -217,11 +217,11 @@ ${$game.players.map((pl) => `- ${pl.name} (${pl.score} pts)`).join("\n")}`;
 {#key gameId}
   <iframe
     bind:this={gameIframe}
-    allow="cross-origin-isolated"
+    allow="cross-origin-isolated fullscreen"
     credentialless
     id="game-iframe"
     title="Game UX"
-    sandbox="allow-scripts allow-same-origin"
+    sandbox="allow-scripts allow-same-origin allow-orientation-lock"
     class:d-none={!stateSent}
     class:fullScreen={$gameInfo.viewer?.fullScreen}
     {src}