Merge pull request #8 from luke-b/copilot/explore-codebase-emulation-page

luke-b · web-flow · commit 3c48f98c7a16 · 2026-05-07T12:52:06.000+02:00
Align GitHub Pages root with the hosted emulator entrypoint
diff --git a/.github/workflows/borland-dos-pipeline.yml b/.github/workflows/borland-dos-pipeline.yml
@@ -144,13 +144,16 @@ jobs:
               <meta charset="UTF-8">
               <meta name="viewport" content="width=device-width, initial-scale=1.0">
               <title>Wolfenstein 3D — build ${SHORT_SHA}</title>
+              <link rel="icon" type="image/svg+xml" href="../../../favicon.svg">
               <link rel="stylesheet" href="https://js-dos.com/v8/js-dos.css">
               <script src="https://js-dos.com/v8/js-dos.js"></script>
               <style>
                   * { box-sizing: border-box; margin: 0; padding: 0; }
                   body { background: #111; color: #eee; font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 20px; }
                   h1 { margin-bottom: 12px; font-size: 1.4rem; }
                   #dos { width: 800px; height: 600px; max-width: 100%; }
+                  #status { margin-top: 10px; min-height: 1.2em; font-size: 0.95rem; color: #b7c4d6; }
+                  #status.error { color: #ff9b9b; }
                   .meta { margin-top: 10px; font-size: 0.8rem; color: #888; }
                   button { margin-top: 10px; padding: 6px 16px; background: #333; color: #eee; border: 1px solid #555; cursor: pointer; border-radius: 4px; }
                   button:hover { background: #444; }
@@ -159,16 +162,51 @@ jobs:
           <body>
               <h1>Wolfenstein 3D</h1>
               <div id="dos"></div>
+              <p id="status" role="status" aria-live="polite">Loading emulator…</p>
               <button onclick="document.getElementById('dos').requestFullscreen && document.getElementById('dos').requestFullscreen()">Full screen</button>
               <p class="meta">build ${SHORT_SHA} &mdash; <a href="https://github.com/luke-b/DosTest/commit/${GITHUB_SHA}" style="color:#888">view commit</a></p>
               <script>
-                  Dos(document.getElementById("dos"), {
-                      url: "./hra.jsdos",
-                      onprogress: (stage, total, loaded) => {
-                          if (stage === "Resolving DosBox") return;
-                          console.log(stage, loaded, "/", total);
+                  const dosRoot = document.getElementById("dos");
+                  const status = document.getElementById("status");
+
+                  function updateStatus(message, isError = false) {
+                      status.textContent = message;
+                      status.classList.toggle("error", isError);
+                  }
+
+                  async function startDemo() {
+                      if (typeof Dos !== "function") {
+                          console.error("js-dos failed to load before initialization.");
+                          updateStatus("The js-dos runtime could not be loaded. Check your connection and try again.", true);
+                          return;
                       }
-                  });
+
+                      try {
+                          const dos = Dos(dosRoot, {
+                              url: "./hra.jsdos",
+                              onprogress: (stage, total, loaded) => {
+                                  if (stage === "Resolving DosBox") {
+                                      return;
+                                  }
+
+                                  const suffix = total ? ` (${loaded}/${total})` : "";
+                                  console.log(stage, loaded, "/", total);
+                                  updateStatus(`${stage}${suffix}`);
+                              }
+                          });
+
+                          if (dos && typeof dos.then === "function") {
+                              await dos;
+                          }
+
+                          updateStatus("Ready. Click inside the emulator window to start playing.");
+                      } catch (error) {
+                          console.error("Error initializing DOSBox:", error);
+                          updateStatus("The emulator failed to start. Check the browser console for details.", true);
+                      }
+                  }
+
+                  startDemo();
               </script>
           </body>
           </html>
@@ -199,19 +237,24 @@ jobs:
           cp index.html "staging/demo/build/${SHORT_SHA}/index.html"
           cp hra.jsdos "staging/demo/build/${SHORT_SHA}/hra.jsdos"
           cp latest-redirect/index.html "staging/demo/build/latest/index.html"
+          cp ./index.html staging/index.html
+          cp ./js-dos-test.html staging/js-dos-test.html
+          cp ./jsdos-demo1.html staging/jsdos-demo1.html
+          cp ./favicon.svg staging/favicon.svg
+          touch staging/.nojekyll
 
       - name: Deploy demo to gh-pages
         uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./staging/demo/build
-          destination_dir: demo/build
+          publish_dir: ./staging
           keep_files: true
 
       - name: Smoke test deployed demo
         run: |
           SHORT_SHA="${{ steps.sha.outputs.short }}"
           for url in \
+            "https://luke-b.github.io/DosTest/" \
             "https://luke-b.github.io/DosTest/demo/build/${SHORT_SHA}/" \
             "https://luke-b.github.io/DosTest/demo/build/latest/"
           do
@@ -296,7 +339,7 @@ jobs:
 
       - name: Update demo link in README.md
         run: |
-          DEMO_URL="https://luke-b.github.io/DosTest/demo/build/latest/"
+          DEMO_URL="https://luke-b.github.io/DosTest/"
           BADGE_LINE="[![Play latest build](https://img.shields.io/badge/Play-Latest%20Build-brightgreen)](${DEMO_URL})"
           BLOCK="<!-- DEMO_LINK -->\n${BADGE_LINE}\n<!-- /DEMO_LINK -->"
 
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 # Wolfenstein 3D Build with DOSBox-X and Borland C++ on GitHub Actions
 
 <!-- DEMO_LINK -->
-[![Play latest build](https://img.shields.io/badge/Play-Latest%20Build-brightgreen)](https://luke-b.github.io/DosTest/demo/build/latest/)
+[![Play latest build](https://img.shields.io/badge/Play-Latest%20Build-brightgreen)](https://luke-b.github.io/DosTest/)
 <!-- /DEMO_LINK -->
 
-This repository contains a setup to build the classic Wolfenstein 3D shareware source code using DOSBox-X and Borland C++ within a GitHub Actions pipeline. The built executable can then be run using js-dos, making it accessible through a web browser.
+This repository contains a setup to build the classic Wolfenstein 3D shareware source code using DOSBox-X and Borland C++ within a GitHub Actions pipeline. The built executable can then be run using js-dos, with the repository Pages root redirecting to the latest hosted browser build.
 
 ## Prerequisites
 
diff --git a/favicon.svg b/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#111827"/>
+  <path d="M18 16h12l8 13 8-13h12L44 48H32z" fill="#facc15"/>
+</svg>
diff --git a/index.html b/index.html
@@ -3,32 +3,79 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Play Wolfenstein 3D</title>
-    <script src="https://js-dos.com/6.22/js-dos.js"></script>
+    <title>Wolfenstein 3D</title>
+    <meta http-equiv="refresh" content="0; url=./demo/build/latest/">
+    <link rel="canonical" href="https://luke-b.github.io/DosTest/">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
     <style>
-        body {
+        :root {
+            color-scheme: dark;
             font-family: Arial, sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
             margin: 0;
-            background-color: #000;
+            min-height: 100vh;
+            display: grid;
+            place-items: center;
+            padding: 24px;
+            background: radial-gradient(circle at top, #25314f 0%, #111 48%, #050505 100%);
+            color: #f5f5f5;
+        }
+
+        main {
+            width: min(100%, 42rem);
+            padding: 28px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 14px;
+            background: rgba(0, 0, 0, 0.72);
+            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+            text-align: center;
+        }
+
+        h1 {
+            margin: 0 0 12px;
+            font-size: clamp(1.8rem, 4vw, 2.6rem);
+        }
+
+        p {
+            margin: 0 0 16px;
+            line-height: 1.5;
+            color: #d0d0d0;
+        }
+
+        a {
+            color: #8fd3ff;
+        }
+
+        .button {
+            display: inline-block;
+            margin-top: 8px;
+            padding: 12px 18px;
+            border-radius: 999px;
+            background: #2b84ff;
+            color: #fff;
+            text-decoration: none;
+            font-weight: 700;
         }
-        #dosbox {
-            width: 80%;
-            height: 80%;
+
+        .button:hover {
+            background: #4d98ff;
         }
     </style>
 </head>
 <body>
-    <div id="dosbox"></div>
+    <main>
+        <h1>Wolfenstein 3D</h1>
+        <p>Redirecting to the latest browser build.</p>
+        <p>If you are not redirected automatically, open <a class="button" href="./demo/build/latest/">Play latest build</a>.</p>
+    </main>
     <script>
-        Dos(document.getElementById("dosbox")).ready(function (fs, main) {
-            fs.extract("https://github.com/luke-b/DosTest/wolf3d.zip").then(function () {
-                main(["-c", "wolf3d.exe"]);
-            });
-        });
+        window.location.replace(new URL('./demo/build/latest/', window.location.href).href);
     </script>
 </body>
 </html>
diff --git a/js-dos-test.html b/js-dos-test.html
@@ -3,65 +3,34 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Play Wolfenstein 3D</title>
-    <link rel="stylesheet" href="https://js-dos.com/v8/js-dos.css">
-    <script src="https://js-dos.com/v8/js-dos.js"></script>
-</head>
-<body>
-    <h1>Wolfenstein 3D</h1>
-    <div id="Dos" style="width: 800px; height: 600px;"></div>
-    <script>
-        async function fetchLatestArtifactUrl() {
-            const owner = "luke-b";
-            const repo = "DosTest";
-            const workflow_id = "borland-dos-pipeline.yml";
-            const artifactName = "build-dos";
-
-            // Fetch the latest successful workflow run
-            let response = await fetch(`https://api.github.com/repos/${owner}/${repo}/actions/workflows/${workflow_id}/runs?status=success&per_page=1`);
-            let data = await response.json();
-            if (data.total_count === 0) {
-                throw new Error("No successful workflow runs found.");
-            }
-
-            const latestRun = data.workflow_runs[0];
-
-            // Fetch the artifacts for the latest successful run
-            response = await fetch(latestRun.artifacts_url);
-            data = await response.json();
-
-            const artifact = data.artifacts.find(a => a.name === artifactName);
-            if (!artifact) {
-                throw new Error(`Artifact ${artifactName} not found.`);
-            }
-
-            // Return the download URL for the artifact
-            return artifact.archive_download_url;
+    <title>Wolfenstein 3D Legacy Demo Redirect</title>
+    <meta http-equiv="refresh" content="0; url=./demo/build/latest/">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <style>
+        body {
+            margin: 0;
+            min-height: 100vh;
+            display: grid;
+            place-items: center;
+            padding: 24px;
+            background: #111;
+            color: #f5f5f5;
+            font-family: Arial, sans-serif;
+            text-align: center;
         }
 
-        async function initDosBox() {
-            try {
-                //const artifactUrl = await fetchLatestArtifactUrl();
-                const artifactUrl = "https://github.com/luke-b/DosTest/actions/runs/9683912806/artifacts/1641429331";
-                Dos(document.getElementById("Dos"), {
-                    wdosboxUrl: 'https://js-dos.com/v8/build/wdosbox.js',
-                    cycles: 10000,
-                    autolock: true,
-                    zip: artifactUrl,
-                    onprogress: (stage, total, loaded) => {
-                        if (stage === 'unzipping') {
-                            console.log(`Unzipping: ${(loaded / total * 100).toFixed(2)}%`);
-                        }
-                    }
-                }).then(dosbox => {
-                    dosbox.run('wolf3d.exe');
-                });
-            } catch (error) {
-                console.error('Error initializing DOSBox:', error);
-            }
+        a {
+            color: #8fd3ff;
         }
-
-        initDosBox();
+    </style>
+</head>
+<body>
+    <main>
+        <h1>This legacy demo page has moved.</h1>
+        <p>Redirecting to the canonical hosted build at <a href="./demo/build/latest/">demo/build/latest</a>.</p>
+    </main>
+    <script>
+        window.location.replace(new URL('./demo/build/latest/', window.location.href).href);
     </script>
 </body>
 </html>
diff --git a/jsdos-demo1.html b/jsdos-demo1.html
@@ -1,27 +1,36 @@
-<div id="dosbox" style="width: 640px; height: 400px;">
-   <div class="dosbox-container">
-      <canvas class="dosbox-canvas" oncontextmenu="event.preventDefault()"></canvas>
-      <div class="dosbox-loader">
-         <div class="st-loader"><span class="equal"></span></div>
-         <div class="dosbox-loader-message"></div>
-      </div>
-      <div class="dosbox-overlay">
-         <div class="dosbox-powered">Powered by &nbsp;<a href="http://js-dos.com">js-dos.com</a></div>
-         <div class="dosbox-start">Click to start</div>
-      </div>
-   </div>
-</div>
-<br>
-<button onclick="dosbox.requestFullScreen();">Make fullscreen</button>
-<script type="text/javascript" src="https://js-dos.com/v8/build/wdosbox.js"></script>
-<script type="text/javascript">
-   var dosbox = new Dosbox({
-        id: "dosbox",
-        onload: function (dosbox) {
-        dosbox.run("https://github.com/luke-b/DosTest/actions/runs/9683912806/artifacts/1641429331", "./WOLF3D.EXE");
-        },
-        onrun: function (dosbox, app) {
-        console.log("App '" + app + "' is runned");
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wolfenstein 3D Legacy Demo Redirect</title>
+    <meta http-equiv="refresh" content="0; url=./demo/build/latest/">
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg">
+    <style>
+        body {
+            margin: 0;
+            min-height: 100vh;
+            display: grid;
+            place-items: center;
+            padding: 24px;
+            background: #111;
+            color: #f5f5f5;
+            font-family: Arial, sans-serif;
+            text-align: center;
         }
-        });
-</script>
+
+        a {
+            color: #8fd3ff;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <h1>This legacy demo page has moved.</h1>
+        <p>Redirecting to the canonical hosted build at <a href="./demo/build/latest/">demo/build/latest</a>.</p>
+    </main>
+    <script>
+        window.location.replace(new URL('./demo/build/latest/', window.location.href).href);
+    </script>
+</body>
+</html>
