memory map: updated to use css grid

css/ui.css

@@ -432,6 +432,9 @@ div.markdown th {
   border-radius:8px;
   color: #333;
   background-color:#999;
+  display:grid;
+  justify-content: center;
+  align-content: center;
 }
 .segment:hover {
   border-color: #ffffff;

doc/notes.txt

@@ -486,3 +486,19 @@ class M6502_T {
     @bus(16) address : Bus<16>;
 }
 
+
+STATE REWIND
+
+in Platform:
+
+  advance?(novideo? : boolean) : number;
+  advanceFrameClock?(trap:DebugCondition, step:number) : number;
+
+in devices:
+
+    advanceFrame(trap:TrapCondition) : number;
+    advanceClock() : void;
+    advanceInsn() : number;
+
+Should call trap() every cycle or insn of frame, or exit when returns true?
+

src/ide/views.ts

@@ -856,14 +856,21 @@ export class MemoryMapView implements ProjectView {
 
   createDiv(parent : HTMLElement) {
     this.maindiv = newDiv(parent, 'vertical-scroll');
+    this.maindiv.css('display', 'grid');
+    this.maindiv.css('grid-template-columns', '5em 40% 40%');
     return this.maindiv[0];
   }
 
   // TODO: overlapping segments (e.g. ROM + LC)
-  addSegment(seg : Segment) {
+  addSegment(seg : Segment, newrow : boolean) {
-    var offset = $('<div class="col-md-1 segment-offset"/>');
+    if (newrow) {
+      var offset = $('<div class="segment-offset" style="grid-column-start:1"/>');
       offset.text('$'+hex(seg.start,4));
-    var segdiv = $('<div class="col-md-4 segment"/>');
+      this.maindiv.append(offset);
+    }
+    var segdiv = $('<div class="segment"/>');
+    if (!newrow)
+      segdiv.css('grid-column-start', 3); // make sure it's on right side
     if (seg.last)
       segdiv.text(seg.name+" ("+(seg.last-seg.start)+" / "+seg.size+" bytes used)");
     else
@@ -876,9 +883,10 @@ export class MemoryMapView implements ProjectView {
     if (seg.type) {
       segdiv.addClass('segment-'+seg.type);
     }
-    var row = $('<div class="row"/>').append(offset, segdiv);
+    this.maindiv.append(segdiv);
-    var container = $('<div class="container"/>').append(row);
+    //var row = $('<div class="row"/>').append(offset, segdiv);
-    this.maindiv.append(container);
+    //var container = $('<div class="container"/>').append(row);
+    //this.maindiv.append(container);
     segdiv.click(() => {
       var memview = projectWindows.createOrShow('#memory') as MemoryView;
       memview.scrollToAddress(seg.start);
@@ -890,11 +898,13 @@ export class MemoryMapView implements ProjectView {
     var segments = current_project.segments;
     if (segments) {
       var curofs = 0;
+      var laststart = -1;
       for (var seg of segments) {
         //var used = seg.last ? (seg.last-seg.start) : seg.size;
         if (seg.start > curofs)
-          this.addSegment({name:'',start:curofs, size:seg.start-curofs});
+          this.addSegment({name:'',start:curofs, size:seg.start-curofs}, true);
-        this.addSegment(seg);
+        this.addSegment(seg, laststart != seg.start);
+        laststart = seg.start;
         curofs = seg.start + seg.size;
       }
     }

src/platform/apple2.ts

@@ -64,6 +64,15 @@ class NewApple2Platform extends Base6502MachinePlatform<AppleII> implements Plat
   readAddress(a)        { return this.machine.readConst(a); }
   // TODO loadBIOS(bios)	{ this.machine.loadBIOS(a); }
   getMemoryMap = function() { return { main:[
+      {name:'Zero Page RAM',start:0x0,size:0x100,type:'ram'},
+      {name:'Line Input RAM',start:0x200,size:0x100,type:'ram'},
+      {name:'RAM',start:0x300,size:0xc0,type:'ram'},
+      {name:'DOS Vectors',start:0x3c0,size:0x40,type:'ram'},
+      {name:'Text/Lores Page 1',start:0x400,size:0x400,type:'ram'},
+      {name:'RAM',start:0x800,size:0x1800,type:'ram'},
+      {name:'Hires Page 1',start:0x2000,size:0x2000,type:'ram'},
+      {name:'Hires Page 2',start:0x4000,size:0x2000,type:'ram'},
+      {name:'RAM',start:0x6000,size:0x6000,type:'ram'},
       {name:'I/O',start:0xc000,size:0x1000,type:'io'},
       {name:'ROM',start:0xd000,size:0x3000-6,type:'rom'},
   ] } };