glcanvas for macroquad

boardgamers · Oct 12, 2024 · 1ade555 · 1ade555
1 parent a0f925a
commit 1ade555
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 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/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}