From e808d817f0d3313f9d9f00732303af541a7e682d Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Thu, 23 Aug 2018 16:02:13 -0400
Subject: [PATCH] fixed replay; use nextFrame/preFrame/postFrame/advance;
 repeatable random noise()

---
 css/ui.css                    |   4 +++
 index.html                    |   9 +++++-
 src/baseplatform.ts           |  17 +++++++++---
 src/emu.ts                    |  16 ++++++++++-
 src/platform/apple2.ts        |  51 +++++++++++++++++++---------------
 src/platform/galaxian.ts      |   7 +++--
 src/platform/mw8080bw.ts      |   3 +-
 src/platform/nes.ts           |   7 ++---
 src/platform/vcs.ts           |   2 +-
 src/platform/vicdual.ts       |   3 +-
 src/platform/williams.ts      |   3 +-
 src/recorder.ts               |  51 +++++++++++++++++++++-------------
 src/ui.ts                     |  50 +++++++++++++++++++++++++--------
 test/cli/testplatforms.js     |  49 +++++++++++++++++++++++++-------
 test/roms/apple2/cosmic.c.rom | Bin 0 -> 21577 bytes
 15 files changed, 187 insertions(+), 85 deletions(-)
 create mode 100644 test/roms/apple2/cosmic.c.rom

diff --git a/css/ui.css b/css/ui.css
index 505ed5e0..d22eb759 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -296,3 +296,7 @@ div.replaydiv {
   width:50%;
   background-color: #666;
 }
+.slider {
+ margin-left: 1em;
+ margin-right: 1em;
+}
diff --git a/index.html b/index.html
index a91c419d..77e082fb 100644
--- a/index.html
+++ b/index.html
@@ -139,7 +139,7 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
     <button id="dbg_bitmap" type="submit" title="Edit Bitmap"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></button>
   </span>
   <span class="btn_group view_group" id="replay_bar" style="display:none">
-    <button id="dbg_record" type="submit" title="Toggle Replay Buffer"><span class="glyphicon glyphicon-record" aria-hidden="true"></span></button>
+    <button id="dbg_record" type="submit" title="Start/Stop Replay Recording"><span class="glyphicon glyphicon-record" aria-hidden="true"></span></button>
   </span>
   <span class="dropdown" style="float:right">
     <a class="btn btn-secondary dropdown-toggle" id="booksMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -178,7 +178,14 @@ if (window.location.host.endsWith('8bitworkshop.com')) {
   <div id="mem_info" class="mem_info" style="display:none">
   </div>
   <div id="replaydiv" class="replaydiv" style="display:none">
+   <div style="display:flex">
+    <button id="replay_min" type="submit" title="Start of replay"><span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span></button>
+    <button id="replay_back" type="submit" title="Back one frame"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></button>
+    <span id="replay_frame" style="text-align:center;width:3em;margin-left:1em;color:#ccc">-</span>
     <input type="range" min="0" max="0" value="0" class="slider" id="replayslider">
+    <button id="replay_fwd" type="submit" title="Ahead one frame"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></button>
+    <button id="replay_max" type="submit" title="End of replay"><span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span></button>
+   </div>
   </div>
 </div>
 <!--
diff --git a/src/baseplatform.ts b/src/baseplatform.ts
index f07818f5..ebf361b7 100644
--- a/src/baseplatform.ts
+++ b/src/baseplatform.ts
@@ -110,6 +110,7 @@ abstract class BaseDebugPlatform {
   abstract pause() : void;
   abstract resume() : void;
   abstract readAddress?(addr:number) : number;
+  abstract advance?(novideo? : boolean) : void;
 
   getDebugCallback() : DebugCondition {
     return this.debugCondition;
@@ -145,6 +146,16 @@ abstract class BaseDebugPlatform {
       this.recorder.recordFrame(this.saveState());
     }
   }
+  preFrame() {
+    this.updateRecorder();
+  }
+  postFrame() {
+  }
+  nextFrame(novideo : boolean) {
+    this.preFrame();
+    this.advance(novideo);
+    this.postFrame();
+  }
 }
 
 abstract class BaseFrameBasedPlatform extends BaseDebugPlatform {
@@ -155,7 +166,7 @@ abstract class BaseFrameBasedPlatform extends BaseDebugPlatform {
       this.debugCondition();
     }
   }
-  restartDebugState() {
+  postFrame() {
     // save state every frame and rewind debug clocks
     var debugging = this.debugCondition && !this.debugBreakState;
     if (debugging) {
@@ -163,7 +174,6 @@ abstract class BaseFrameBasedPlatform extends BaseDebugPlatform {
       this.debugTargetClock -= this.debugClock;
       this.debugClock = 0;
     }
-    this.updateRecorder();
   }
   breakpointHit(targetClock : number) {
     this.debugTargetClock = targetClock;
@@ -412,7 +422,7 @@ export abstract class BaseZ80Platform extends BaseDebugPlatform {
     }
     return cpu.getTstates() - targetTstates;
   }
-  restartDebugState() {
+  postFrame() {
     if (this.debugCondition && !this.debugBreakState) {
       this.debugSavedState = this.saveState();
       if (this.debugTargetClock > 0)
@@ -420,7 +430,6 @@ export abstract class BaseZ80Platform extends BaseDebugPlatform {
       this.debugSavedState.c.T = 0;
       this.loadState(this.debugSavedState);
     }
-    this.updateRecorder();
   }
   breakpointHit(targetClock : number) {
     this.debugTargetClock = targetClock;
diff --git a/src/emu.ts b/src/emu.ts
index 283f054f..f3cc9c55 100644
--- a/src/emu.ts
+++ b/src/emu.ts
@@ -11,8 +11,22 @@ export var PLATFORMS = {};
 
 export var frameUpdateFunction : (Canvas) => void = null;
 
+var _random_state = 1;
+
 export function noise() {
-  return (Math.random() * 256) & 0xff;
+	let x = _random_state;
+	x ^= x << 13;
+	x ^= x >> 17;
+	x ^= x << 5;
+	return (_random_state = x) & 0xff;
+}
+
+export function getNoiseSeed() {
+  return _random_state;
+}
+
+export function setNoiseSeed(x : number) {
+  _random_state = x;
 }
 
 type KeyboardCallback = (which:number, charCode:number, flags:number) => void;
diff --git a/src/platform/apple2.ts b/src/platform/apple2.ts
index 2b2135af..45fa707e 100644
--- a/src/platform/apple2.ts
+++ b/src/platform/apple2.ts
@@ -24,9 +24,17 @@ const GR_MIXMODE  = 2;
 const GR_PAGE1    = 4;
 const GR_HIRES    = 8;
 
+type AppleGRParams = {dirty:boolean[], grswitch:number, mem:number[]};
+
 const _Apple2Platform = function(mainElement) {
-  var cpuFrequency = 1023000;
-  var cpuCyclesPerLine = 65;
+  const cpuFrequency = 1023000;
+  const cpuCyclesPerLine = 65;
+
+  const VM_BASE = 0x803; // where to JMP after pr#6
+  const LOAD_BASE = VM_BASE; //0x7c9; // where to load ROM
+  const PGM_BASE = VM_BASE; //0x800; // where to load ROM
+  const HDR_SIZE = PGM_BASE - LOAD_BASE;
+  
   var cpu, ram, bus;
   var video, ap2disp, audio, timer;
   var grdirty = new Array(0xc000 >> 7);
@@ -34,10 +42,6 @@ const _Apple2Platform = function(mainElement) {
   var kbdlatch = 0;
   var soundstate = 0;
   var pgmbin;
-  var VM_BASE = 0x803; // where to JMP after pr#6
-  var LOAD_BASE = VM_BASE; //0x7c9; // where to load ROM
-  var PGM_BASE = VM_BASE; //0x800; // where to load ROM
-  var HDR_SIZE = PGM_BASE - LOAD_BASE;
   // language card switches
   var auxRAMselected = false;
   var auxRAMbank = 1;
@@ -45,7 +49,7 @@ const _Apple2Platform = function(mainElement) {
   // value to add when reading & writing each of these banks
   // bank 1 is E000-FFFF, bank 2 is D000-DFFF
   var bank2rdoffset=0, bank2wroffset=0;
-  var grparams;
+  var grparams : AppleGRParams;
   
  class Apple2Platform extends Base6502Platform {
 
@@ -157,7 +161,7 @@ const _Apple2Platform = function(mainElement) {
     video = new RasterVideo(mainElement,280,192);
     audio = new SampleAudio(cpuFrequency);
     video.create();
-    video.setKeyboardEvents(function(key,code,flags) {
+    video.setKeyboardEvents((key,code,flags) => {
       if (flags & 1) {
         if (code) {
           // convert to uppercase for Apple ][
@@ -178,9 +182,9 @@ const _Apple2Platform = function(mainElement) {
     var idata = video.getFrameData();
     grparams = {dirty:grdirty, grswitch:grswitch, mem:ram.mem};
     ap2disp = new Apple2Display(idata, grparams);
-    timer = new AnimationTimer(60, this.advance.bind(this));
+    timer = new AnimationTimer(60, this.nextFrame.bind(this));
   }
-
+  
   advance(novideo : boolean) {
     // 262.5 scanlines per frame
     var clock = 0;
@@ -208,8 +212,6 @@ const _Apple2Platform = function(mainElement) {
       }
       video.updateFrame();
     }
-    //soundstate = 0; // to prevent clicking
-    this.restartDebugState(); // reset debug start state
   }
 
   loadROM(title, data) {
@@ -253,6 +255,7 @@ const _Apple2Platform = function(mainElement) {
     auxRAMbank = state.lc.b;
     writeinhibit = state.lc.w;
     setupLanguageCardConstants();
+    ap2disp.invalidate(); // repaint entire screen
   }
   saveState() {
     return {
@@ -268,7 +271,7 @@ const _Apple2Platform = function(mainElement) {
   }
   saveControlsState() {
     return {
-      kbd:kbdlatch,
+      kbd:kbdlatch
     };
   }
   getCPUState() {
@@ -349,7 +352,7 @@ const _Apple2Platform = function(mainElement) {
   return new Apple2Platform(); // return inner class from constructor
 };
 
-var Apple2Display = function(pixels, apple) {
+var Apple2Display = function(pixels : number[], apple : AppleGRParams) {
   var XSIZE = 280;
   var YSIZE = 192;
   var PIXELON = 0xffffffff;
@@ -358,22 +361,22 @@ var Apple2Display = function(pixels, apple) {
   var oldgrmode = -1;
   var textbuf = new Array(40*24);
 
-  var flashInterval = 500;
+  const flashInterval = 500;
 
-  var loresColor = [
+  const loresColor = [
      (0xff000000), (0xffff00ff), (0xff00007f), (0xff7f007f),
      (0xff007f00), (0xff7f7f7f), (0xff0000bf), (0xff0000ff),
      (0xffbf7f00), (0xffffbf00), (0xffbfbfbf), (0xffff7f7f),
      (0xff00ff00), (0xffffff00), (0xff00bf7f), (0xffffffff),
   ];
 
-  var text_lut = [
+  const text_lut = [
      0x000, 0x080, 0x100, 0x180, 0x200, 0x280, 0x300, 0x380,
      0x028, 0x0a8, 0x128, 0x1a8, 0x228, 0x2a8, 0x328, 0x3a8,
      0x050, 0x0d0, 0x150, 0x1d0, 0x250, 0x2d0, 0x350, 0x3d0
   ];
 
-  var hires_lut = [
+  const hires_lut = [
      0x0000, 0x0400, 0x0800, 0x0c00, 0x1000, 0x1400, 0x1800, 0x1c00,
      0x0080, 0x0480, 0x0880, 0x0c80, 0x1080, 0x1480, 0x1880, 0x1c80,
      0x0100, 0x0500, 0x0900, 0x0d00, 0x1100, 0x1500, 0x1900, 0x1d00,
@@ -627,7 +630,7 @@ var Apple2Display = function(pixels, apple) {
               for (var x=0; x<40; x++)
                  textbuf[y*40+x] = -1;
         }
-        for (var i=0; i<384; i++)
+        for (var i=0; i<apple.dirty.length; i++)
            apple.dirty[i] = true;
      }
 
@@ -658,14 +661,18 @@ var Apple2Display = function(pixels, apple) {
            for (y=20; y<24; y++)
               drawLoresLine(y);
      }
-     for (var i=0; i<384; i++)
+     for (var i=0; i<apple.dirty.length; i++)
         apple.dirty[i] = false;
   }
+  
+  this.invalidate = function() {
+    oldgrmode = -1;
+  }
 }
 
 /*exported apple2_charset */
 
-var apple2_charset = [
+const apple2_charset = [
     0x00,0x1c,0x22,0x2a,0x2e,0x2c,0x20,0x1e,
     0x00,0x08,0x14,0x22,0x22,0x3e,0x22,0x22,
     0x00,0x3c,0x22,0x22,0x3c,0x22,0x22,0x3c,
@@ -925,7 +932,7 @@ var apple2_charset = [
 ];
 
 // public domain ROM
-var APPLEIIGO_LZG = [
+const APPLEIIGO_LZG = [
   76,90,71,0,0,48,0,0,0,10,174,5,108,198,141,1,25,52,55,59,65,80,80,76,69,73,73,71,79,32,82,79,
   77,49,46,49,255,59,31,59,31,59,31,59,31,59,31,59,31,59,31,59,3,133,109,132,110,56,165,150,229,155,133,94,
   168,165,151,229,156,170,232,152,240,35,165,150,56,229,94,133,150,176,3,198,151,56,165,148,55,3,148,176,8,198,149,144,
diff --git a/src/platform/galaxian.ts b/src/platform/galaxian.ts
index c7865bd0..29019574 100644
--- a/src/platform/galaxian.ts
+++ b/src/platform/galaxian.ts
@@ -296,7 +296,7 @@ const _GalaxianPlatform = function(mainElement, options) {
     var idata = video.getFrameData();
 		setKeyboardFromMap(video, inputs, keyMap);
     pixels = video.getFrameData();
-    timer = new AnimationTimer(60, this.advance.bind(this));
+    timer = new AnimationTimer(60, this.nextFrame.bind(this));
   }
 
   readAddress(a) {
@@ -321,7 +321,9 @@ const _GalaxianPlatform = function(mainElement, options) {
       }
     }
     // visible area is 256x224 (before rotation)
-    video.updateFrame(0, 0, 0, 0, showOffscreenObjects ? 264 : 256, 264);
+    if (!novideo) {
+      video.updateFrame(0, 0, 0, 0, showOffscreenObjects ? 264 : 256, 264);
+    }
     frameCounter = (frameCounter + 1) & 0xff;
     if (watchdog_counter-- <= 0) {
       console.log("WATCHDOG FIRED, PC ", hex(cpu.getPC())); // TODO: alert on video
@@ -329,7 +331,6 @@ const _GalaxianPlatform = function(mainElement, options) {
     }
     // NMI interrupt @ 0x66
     if (interruptEnabled) { cpu.nonMaskableInterrupt(); }
-    this.restartDebugState(); // TODO: after interrupt?
   }
 
   loadROM(title, data) {
diff --git a/src/platform/mw8080bw.ts b/src/platform/mw8080bw.ts
index 5466ad45..11f49a8a 100644
--- a/src/platform/mw8080bw.ts
+++ b/src/platform/mw8080bw.ts
@@ -112,7 +112,7 @@ const _Midway8080BWPlatform = function(mainElement) {
     var idata = video.getFrameData();
 		setKeyboardFromMap(video, inputs, SPACEINV_KEYCODE_MAP);
     pixels = video.getFrameData();
-    timer = new AnimationTimer(60, this.advance.bind(this));
+    timer = new AnimationTimer(60, this.nextFrame.bind(this));
   }
 
   readAddress(addr) {
@@ -149,7 +149,6 @@ const _Midway8080BWPlatform = function(mainElement) {
       console.log("WATCHDOG FIRED"); // TODO: alert on video
       this.reset();
     }
-    this.restartDebugState();
   }
 
   loadROM(title, data) {
diff --git a/src/platform/nes.ts b/src/platform/nes.ts
index 1ff36ae5..ab216bf1 100644
--- a/src/platform/nes.ts
+++ b/src/platform/nes.ts
@@ -87,7 +87,6 @@ const _JSNESPlatform = function(mainElement) {
         for (var i=0; i<frameBuffer.length; i++)
           idata[i] = frameBuffer[i] | 0xff000000;
         video.updateFrame();
-        self.restartDebugState();
         frameindex++;
         //if (frameindex == 2000) console.log(nsamples*60/frameindex,'Hz');
       },
@@ -117,9 +116,7 @@ const _JSNESPlatform = function(mainElement) {
       self.evalDebugCondition();
       return cycles;
     }
-    timer = new AnimationTimer(60, function() {
-      nes.frame();
-    });
+    timer = new AnimationTimer(60, this.nextFrame.bind(this));
     // set keyboard map
     setKeyboardFromMap(video, [], JSNES_KEYCODE_MAP, function(o,key,code,flags) {
       if (flags & 1)
@@ -131,7 +128,7 @@ const _JSNESPlatform = function(mainElement) {
   
   advance(novideo : boolean) {
     nes.frame();
-  }
+      }
 
   loadROM(title, data) {
     var romstr = String.fromCharCode.apply(null, data);
diff --git a/src/platform/vcs.ts b/src/platform/vcs.ts
index 64c78b4d..77b06256 100644
--- a/src/platform/vcs.ts
+++ b/src/platform/vcs.ts
@@ -62,8 +62,8 @@ class VCSPlatform {
     // intercept clockPulse function
     Javatari.room.console.oldClockPulse = Javatari.room.console.clockPulse;
     Javatari.room.console.clockPulse = function() {
-      this.oldClockPulse();
       self.updateRecorder();
+      this.oldClockPulse();
     }
     this.paused = false;
   }
diff --git a/src/platform/vicdual.ts b/src/platform/vicdual.ts
index 80e321ba..6eba640a 100644
--- a/src/platform/vicdual.ts
+++ b/src/platform/vicdual.ts
@@ -143,7 +143,7 @@ const _VicDualPlatform = function(mainElement) {
       reset_disable_timer = setTimeout(function() { reset_disable = false; }, 1100);
 		});
     pixels = video.getFrameData();
-    timer = new AnimationTimer(60, this.advance.bind(this));
+    timer = new AnimationTimer(60, this.nextFrame.bind(this));
   }
 
   readAddress(addr) {
@@ -164,7 +164,6 @@ const _VicDualPlatform = function(mainElement) {
       this.runCPU(cpu, targetTstates - cpu.getTstates());
     }
     video.updateFrame();
-    this.restartDebugState();
   }
 
   loadROM(title, data) {
diff --git a/src/platform/williams.ts b/src/platform/williams.ts
index f9cbc7c1..607996d5 100644
--- a/src/platform/williams.ts
+++ b/src/platform/williams.ts
@@ -306,7 +306,7 @@ var WilliamsPlatform = function(mainElement, proto) {
     var idata = video.getFrameData();
     setKeyboardFromMap(video, pia6821, ROBOTRON_KEYCODE_MAP);
     pixels = video.getFrameData();
-    timer = new AnimationTimer(60, this.advance.bind(this));
+    timer = new AnimationTimer(60, this.nextFrame.bind(this));
   }
 
   this.advance = function(novideo:boolean) {
@@ -337,7 +337,6 @@ var WilliamsPlatform = function(mainElement, proto) {
       // TODO: this.breakpointHit(cpu.T());
       this.reset();
     }
-    this.restartDebugState();
   }
 
   this.loadSoundROM = function(data) {
diff --git a/src/recorder.ts b/src/recorder.ts
index 3b723418..84a63c7d 100644
--- a/src/recorder.ts
+++ b/src/recorder.ts
@@ -1,5 +1,8 @@
 
 import { Platform, EmuState, EmuControlsState, EmuRecorder } from "./baseplatform";
+import { getNoiseSeed, setNoiseSeed } from "./emu";
+
+type FrameRec = {controls:EmuControlsState, seed:number};
 
 export class StateRecorderImpl implements EmuRecorder {
     checkpointInterval : number = 60;
@@ -7,8 +10,8 @@ export class StateRecorderImpl implements EmuRecorder {
     maxCheckpoints : number = 120;
     
     platform : Platform;
-    buffer : EmuState[];
-    controls : EmuControlsState[];
+    checkpoints : EmuState[];
+    framerecs : FrameRec[];
     frameCount : number;
     lastSeekFrame : number = -1;
     
@@ -18,35 +21,37 @@ export class StateRecorderImpl implements EmuRecorder {
     }
 
     reset() {
-        this.buffer = [];
-        this.controls = [];
+        this.checkpoints = [];
+        this.framerecs = [];
         this.frameCount = 0;
         this.lastSeekFrame = -1;
     }
 
     frameRequested() : boolean {
-        // buffer full?
-        if (this.buffer.length >= this.maxCheckpoints) {
+        // checkpoints full?
+        if (this.checkpoints.length >= this.maxCheckpoints) {
             return false;
         }
         // record the control state, if available
         if (this.platform.saveControlsState) {
-            this.controls.push(this.platform.saveControlsState());
+            this.framerecs.push({
+                controls:this.platform.saveControlsState(),
+                seed:getNoiseSeed()
+            });
         }
         // pick up where we left off, if we used the seek function
         if (this.lastSeekFrame >= 0) {
             this.frameCount = this.lastSeekFrame;
             this.lastSeekFrame = -1;
             // truncate buffers
-            this.buffer = this.buffer.slice(0, Math.floor((this.frameCount + this.checkpointInterval - 1) / this.checkpointInterval));
-            this.controls = this.controls.slice(0, this.frameCount);
+            this.checkpoints = this.checkpoints.slice(0, Math.floor((this.frameCount + this.checkpointInterval - 1) / this.checkpointInterval));
+            this.framerecs = this.framerecs.slice(0, this.frameCount);
         }
         // time to save next frame?
-        this.frameCount++;
         if (this.callbackStateChanged) {
             this.callbackStateChanged();
         }
-        return (this.frameCount % this.checkpointInterval) == 0;
+        return (this.frameCount++ % this.checkpointInterval) == 0;
     }
     
     numFrames() : number {
@@ -54,30 +59,36 @@ export class StateRecorderImpl implements EmuRecorder {
     }
     
     recordFrame(state : EmuState) {
-        this.buffer.push(state);
+        this.checkpoints.push(state);
     }
 
     getStateAtOrBefore(frame : number) : {frame : number, state : EmuState} {
         var bufidx = Math.floor(frame / this.checkpointInterval);
-        var foundidx = bufidx < this.buffer.length ? bufidx : this.buffer.length-1;
+        var foundidx = bufidx < this.checkpoints.length ? bufidx : this.checkpoints.length-1;
         var foundframe = foundidx * this.checkpointInterval;
-        return {frame:foundframe, state:this.buffer[foundidx]};
+        return {frame:foundframe, state:this.checkpoints[foundidx]};
     }
 
-    loadFrame(seekframe : number) {
-        let {frame,state} = this.getStateAtOrBefore(seekframe);
+    loadFrame(seekframe : number) : number {
+        if (seekframe == this.lastSeekFrame)
+            return seekframe; // already set to this frame
+        // TODO: what if < 1?
+        let {frame,state} = this.getStateAtOrBefore(seekframe-1);
         if (state) {
             this.platform.pause();
             this.platform.loadState(state);
             while (frame < seekframe) {
-                if (frame < this.controls.length) {
-                    this.platform.loadControlsState(this.controls[frame]);
+                if (frame < this.framerecs.length) {
+                    this.platform.loadControlsState(this.framerecs[frame].controls);
+                    setNoiseSeed(this.framerecs[frame].seed);
                 }
-                this.platform.advance(true); // TODO: infinite loop?
                 frame++;
+                this.platform.advance(frame < seekframe); // TODO: infinite loop?
             }
-            this.platform.advance();
             this.lastSeekFrame = seekframe;
+            return seekframe;
+        } else {
+            return 0;
         }
     }
 }
diff --git a/src/ui.ts b/src/ui.ts
index b713f4e5..39446928 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -762,21 +762,47 @@ function setupDebugControls(){
   updateDebugWindows();
   // setup replay slider
   if (platform.advance) {
-    $("#dbg_record").click(_toggleRecording);
-    var replayslider = $("#replayslider");
-    stateRecorder.callbackStateChanged = () => {
-      replayslider.attr('min', 0);
-      replayslider.attr('max', stateRecorder.numFrames()-1);
-      replayslider.attr('value', stateRecorder.numFrames()-1); // TODO: doesn't always move
-    };
-    replayslider.on('input', function(e) {
-      _pause();
-      stateRecorder.loadFrame((<any>e.target).value);
-    });
-    $("#replay_bar").show();
+    setupReplaySlider();
   }
 }
 
+function setupReplaySlider() {
+    var replayslider = $("#replayslider");
+    var replayframeno = $("#replay_frame");
+    var updateFrameNo = (n) => {
+      replayframeno.text(n+"");
+    };
+    var sliderChanged = (e) => {
+      _pause();
+      var frame = (<any>e.target).value;
+      if (stateRecorder.loadFrame(frame)) {
+        updateFrameNo(frame);
+      }
+    };
+    var setFrameTo = (frame:number) => {
+      _pause();
+      if (stateRecorder.loadFrame(frame)) {
+        replayslider.val(frame);
+        updateFrameNo(frame);
+        console.log('seek to frame',frame);
+      }
+    };
+    stateRecorder.callbackStateChanged = () => {
+      replayslider.attr('min', 1);
+      replayslider.attr('max', stateRecorder.numFrames());
+      replayslider.val(stateRecorder.numFrames());
+      updateFrameNo(stateRecorder.numFrames());
+    };
+    replayslider.on('input', sliderChanged);
+    replayslider.on('change', sliderChanged);
+    $("#replay_min").click(() => { setFrameTo(1) });
+    $("#replay_max").click(() => { setFrameTo(stateRecorder.numFrames()); });
+    $("#replay_back").click(() => { setFrameTo(parseInt(replayslider.val()) - 1); });
+    $("#replay_fwd").click(() => { setFrameTo(parseInt(replayslider.val()) + 1); });
+    $("#replay_bar").show();
+    $("#dbg_record").click(_toggleRecording);
+}
+
 function showWelcomeMessage() {
   if (!localStorage.getItem("8bitworkshop.hello")) {
     // Instance the tour
diff --git a/test/cli/testplatforms.js b/test/cli/testplatforms.js
index e189bf7d..1f140b44 100644
--- a/test/cli/testplatforms.js
+++ b/test/cli/testplatforms.js
@@ -8,17 +8,17 @@ const jsdom = require('jsdom');
 const { JSDOM } = jsdom;
 const { window } = new JSDOM();
 
-global['Javatari'] = {AUTO_START:false};
-
 const dom = new JSDOM(`<!DOCTYPE html><div id="emulator"></div>`);
-global['window'] = dom.window;
-global['document'] = dom.window.document;
+global.window = dom.window;
+global.document = dom.window.document;
 dom.window.Audio = null;
+global.Image = function() { }
 
-//var javatari = require("javatari.js/release/javatari/javatari.js");
+includeInThisContext("javatari.js/release/javatari/javatari.js");
+Javatari.AUTO_START = false;
 includeInThisContext('src/cpu/z80fast.js');
 //includeInThisContext('tss/js/Log.js');
-global['Log'] = require('tss/js/Log.js').Log;
+global.Log = require('tss/js/Log.js').Log;
 includeInThisContext('tss/js/tss/PsgDeviceChannel.js');
 includeInThisContext('tss/js/tss/MasterChannel.js');
 includeInThisContext('tss/js/tss/AudioLooper.js');
@@ -27,7 +27,9 @@ var jsnes = require("jsnes/jsnes.min.js");
 
 var emu = require('gen/emu.js');
 var audio = require('gen/audio.js');
+var recorder = require('gen/recorder.js');
 var vicdual = require('gen/platform/vicdual.js');
+var apple2 = require('gen/platform/apple2.js');
 
 //
 
@@ -39,17 +41,44 @@ emu.RasterVideo = function(mainElement, width, height, options) {
   this.setKeyboardEvents = function(callback) {
   }
   this.getFrameData = function() { return datau32; }
+  this.updateFrame = function() { }
 }
 
 //
 
-function testPlatform(platid) {
+function testPlatform(platid, romname, maxframes, callback) {
     var emudiv = document.getElementById('emulator');
     var platform = new emu.PLATFORMS[platid](emudiv);
+    var rec = new recorder.StateRecorderImpl(platform);
     platform.start();
-    // TODO
+    var rom = fs.readFileSync('./test/roms/' + platid + '/' + romname);
+    rom = new Uint8Array(rom);
+    platform.loadROM(rom);
+    platform.resume(); // so that recorder works
+    platform.setRecorder(rec);
+    for (var i=0; i<maxframes; i++) {
+      if (callback) callback(platform, i);
+      platform.nextFrame();
+    }
+    platform.pause();
+    assert.equal(maxframes, rec.numFrames());
+    var state1 = platform.saveState();
+    assert.equal(1, rec.loadFrame(1));
+    assert.equal(maxframes, rec.loadFrame(maxframes));
+    var state2 = platform.saveState();
+    assert.deepEqual(state1, state2);
+    return platform;
 }
 
-describe('VIC Dual Platform', function() {
-    testPlatform('vicdual');
+describe('Platform Replay', () => {
+  it('Should run apple2', () => {
+    var platform = testPlatform('apple2', 'cosmic.c.rom', 70, (platform, frameno) => {
+      if (frameno == 60) {
+        var cstate = platform.saveControlsState();
+        cstate.kbd = 0x80 | 0x20;
+        platform.loadControlsState(cstate);
+      }
+    });
+    assert.equal(platform.saveState().kbd, 0x20); // strobe cleared
+  });
 });
diff --git a/test/roms/apple2/cosmic.c.rom b/test/roms/apple2/cosmic.c.rom
new file mode 100644
index 0000000000000000000000000000000000000000..02e20d9de5cd501f1c056293aa4ebd0d3336de10
GIT binary patch
literal 21577
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

literal 0
HcmV?d00001