Make the Timex build playable in the browser

.github/workflows/pages.yml

@@ -15,6 +15,10 @@ concurrency:
   group: ${{ github.workflow }}
   cancel-in-progress: true
 
+env:
+  # bump to move to a newer emulator build
+  JSSPECCY_RELEASE: v3.2.0-timex.1
+
 jobs:
   deploy:
     name: deploy browser player
@@ -25,15 +29,45 @@ jobs:
     steps:
       - uses: actions/checkout@v5
 
-      - name: Build the standard TAP
-        run: make standard
+      - name: Build both TAPs
+        run: make standard timex
+
+      # The emulator is no longer vendored in this repository. JSSpeccy 3 has
+      # no Timex machines, so the hi-colour build had nowhere to run in a
+      # browser; this pulls a tagged build of the fork that adds them.
+      - name: Fetch the emulator build
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          set -eu
+          mkdir -p _emulator
+          gh release download "$JSSPECCY_RELEASE" \
+            --repo dtz-labs/jsspeccy3 \
+            --pattern jsspeccy-dist.zip \
+            --output _emulator/jsspeccy-dist.zip
+          unzip -q _emulator/jsspeccy-dist.zip -d _emulator/dist
 
       - name: Assemble the site
         run: |
           set -eu
           mkdir -p _site
           cp -R site/. _site/
+          cp -R _emulator/dist/jsspeccy _site/jsspeccy
           cp build/attribute-raid.tap _site/attribute-raid.tap
+          cp build/attribute-raid-timex.tap _site/attribute-raid-timex.tap
+
+      - name: Check the pieces the page needs are all there
+        run: |
+          set -eu
+          test -f _site/index.html
+          test -f _site/attribute-raid.tap
+          test -f _site/attribute-raid-timex.tap
+          test -f _site/jsspeccy/jsspeccy.js
+          test -f _site/jsspeccy/jsspeccy-core.wasm
+          test -f _site/jsspeccy/roms/tc2048.rom
+          test -f _site/jsspeccy/roms/2068-home.rom
+          test -f _site/jsspeccy/tapeloaders/tape_2048.szx
+          test -f _site/jsspeccy/tapeloaders/tape_2068.szx
 
       - name: Upload Pages artifact
         uses: actions/upload-pages-artifact@v4

site/index.html

@@ -22,6 +22,27 @@
     justify-content: center;
   }
   .keys { color: #55ff55; }
+  .switch {
+    display: flex;
+    gap: 0.6rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 1.1rem auto 0;
+  }
+  .switch a {
+    display: inline-block;
+    padding: 0.45rem 1rem;
+    border: 2px solid #55ffff;
+    color: #55ffff;
+    text-decoration: none;
+    letter-spacing: 0.05em;
+  }
+  .switch a[aria-current="true"] {
+    background: #55ffff;
+    color: #101010;
+    font-weight: bold;
+  }
+  .switch a:hover { background: #55ffff; color: #101010; }
   .sound-hint { color: #ffff55; }
   .sponsor {
     display: inline-block;
@@ -43,31 +64,51 @@
 <h1>ATTRIBUTE RAID</h1>
 <p>A River Raid-style game for the ZX Spectrum. This page always runs the
 latest TAP built from <a href="https://github.com/dtz-labs/attribute-raid">main</a>
-on an emulated Spectrum 128K, so the AY sound effects ported from the
+on an emulated Spectrum 128K or Timex, so the AY sound effects ported from the
 Atari&nbsp;2600 original are audible.
 <span class="sound-hint">Press the ▶ button on the display to start — the
 game boots with AY sound (browsers only allow audio after that click).</span></p>
 <p class="keys">O/P — steer &nbsp; Q — fast &nbsp; A — slow &nbsp;
 SPACE — fire &nbsp; R — new game</p>
 <p><a class="sponsor" href="https://buymeacoffee.com/mpasternak">☕ Sponsor
 dtz-labs — support new ZX Spectrum software</a></p>
+<div class="switch">
+  <a id="pick-128" href="?m=128">Spectrum 128K</a>
+  <a id="pick-2048" href="?m=2048">Timex TC2048</a>
+  <a id="pick-2068" href="?m=2068">Timex TC2068</a>
+</div>
 <div id="jsspeccy"></div>
-<p>The dedicated Timex TC2048/TC2068/TS2068 hi-colour build is not playable
-here (JSSpeccy has no Timex video modes) — grab it from the
+<p>The Timex builds are the dedicated hi-colour version, playable here now —
+the emulator below is our <a href="https://github.com/dtz-labs/jsspeccy3">fork of
+JSSpeccy&nbsp;3</a>, which adds the TC2048 and TC2068. Both TAPs are also in the
 <a href="https://github.com/dtz-labs/attribute-raid/releases">releases</a>.</p>
 <p class="footer">Emulation by
-<a href="https://github.com/gasman/jsspeccy3">JSSpeccy&nbsp;3</a> (GPL-3).</p>
+<a href="https://github.com/gasman/jsspeccy3">JSSpeccy&nbsp;3</a> (GPL-3), in the
+<a href="https://github.com/dtz-labs/jsspeccy3">dtz-labs fork</a> with Timex support.</p>
 <script src="jsspeccy/jsspeccy.js"></script>
 <script>
-JSSpeccy(document.getElementById('jsspeccy'), {
-    machine: '128',
-    openUrl: 'attribute-raid.tap',
-    autoLoadTapes: true,
-    // No autoStart: JSSpeccy creates its AudioContext inside start(), and
-    // never calls resume() - starting via the visible play button keeps that
-    // inside a user gesture, which is the only way browsers allow audio.
-    zoom: 2
-});
+(function () {
+    var BUILDS = {
+        '128':  { machine: 128,  tap: 'attribute-raid.tap' },
+        '2048': { machine: 2048, tap: 'attribute-raid-timex.tap' },
+        '2068': { machine: 2068, tap: 'attribute-raid-timex.tap' }
+    };
+    var wanted = new URLSearchParams(location.search).get('m');
+    var key = BUILDS[wanted] ? wanted : '128';
+    var chosen = BUILDS[key];
+
+    document.getElementById('pick-' + key).setAttribute('aria-current', 'true');
+
+    JSSpeccy(document.getElementById('jsspeccy'), {
+        machine: chosen.machine,
+        openUrl: chosen.tap,
+        autoLoadTapes: true,
+        // No autoStart: JSSpeccy creates its AudioContext inside start(), and
+        // never calls resume() - starting via the visible play button keeps that
+        // inside a user gesture, which is the only way browsers allow audio.
+        zoom: 2
+    });
+})();
 </script>
 </body>
 </html>