start on block view

assets/css/app.css.scss

@@ -18,7 +18,7 @@ $susy: (
 }
 .file_view {
   @include span(4);
-  margin: span(1);
+  margin-left: span(1);
 }
 
 .source_view { @include span(6); }

lib/blocks_view.rb

@@ -0,0 +1,48 @@
+class BlocksView < ElementView
+
+  def initialize interpreter
+    @interpreter = interpreter
+    @interpreter.register_event(:instruction_changed,  self)
+  end
+
+  def draw
+    DOM do |dom|
+      dom.div.block_view do
+        dom.div do
+          dom.h4  { method_name }
+          dom.h4 {"Block:#{block_name}" }
+        end
+        blocks.each do |b|
+          dom.div do
+            dom.span do # class="{{b._class_name}}">
+              b.name
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def blocks
+    return [] unless @interpreter.instruction
+    codes = @interpreter.block.codes.dup
+    slice = codes.index(@interpreter.instruction) #- 1
+    codes.shift( slice ) if slice >= 0
+    codes.pop while(codes.length > 4)
+    codes
+  end
+
+  def instruction_changed
+    puts "Should have done something here to redraw (blocks)"
+  end
+
+  def block_name
+    @interpreter.block ? @interpreter.block.name : ""
+  end
+  def method_name
+    bl = @interpreter.block
+    return "" unless bl
+    return bl.method if bl.method.is_a? String
+    "#{bl.method.for_class.name}.#{bl.method.name}"
+  end
+end

lib/file_view.rb

@@ -0,0 +1,12 @@
+class FileView < ElementView
+
+
+  def draw
+    DOM do |dom|
+      dom.div.file_view do
+        dom.h4 {"Future"}
+      end
+    end
+  end
+
+end

lib/instruction_view.rb

@@ -0,0 +1,38 @@
+class InstructionView
+
+  include React::Component
+  required_param :interpreter
+  required_param :instruction
+
+  define_state :active => ""
+
+  before_mount do
+    check_active interpreter.instruction
+  end
+
+  def check_active i
+    active! instruction == i ? "bright" : ""
+
+  end
+  def instruction_changed old , ins
+    check_active ins
+  end
+
+  def render
+    div :class => active do
+      instruction.to_s if instruction
+    end
+  end
+end
+
+
+<div class="source-view">
+  <h4> Virtual Machine Instruction </h4>
+  {{page._sources.each do |source| }}
+    <div>
+      <span class="{{source._class_name}}">
+        {{source._name}}
+      </span>
+    </div>
+  {{end}}
+</div>

lib/main_view.rb

@@ -6,6 +6,8 @@ require "interpreter/interpreter"
 require "list_view"
 require_relative "class_view"
 require_relative "status_view"
+require_relative "file_view"
+require_relative "blocks_view"
 #require_relative "registers_view"
 #require_relative "object_view"
 #require_relative "space_view"
@@ -27,41 +29,10 @@ class MainView < ListView
 
     machine.run_before "Register::CallImplementation"
     @interpreter = Interpreter::Interpreter.new
-    super( [ClassView.new(@interpreter) , StatusView.new(@interpreter)] )
-  end
-
-  def draww
-    node = DOM { |m|
-       Kernel.puts "DOM #{self.class}"
-        m.div.info {
-          Kernel.puts "div #{self.class}" ; ""
-          m.span.red @interpreter.state
-        }
-      }
-      node.append_to(@parent)
-  end
-
-  def no
-
-    body = Native(`window.document.body`)
-    # bit of a hack as it assumes index's structure
-    html_con = body.firstElementChild
-    html_con.insertBefore renderer.view , html_con.lastElementChild
-
-    registers = RegisterView.new(height - 150)
-    @canvas.add_child registers
-
-    space = SpaceView.new
-    @container.add_child space
-
-    animate = Proc.new do
-      `requestAnimationFrame(animate)`
-      registers.draw_me
-      space.draw_me
-      renderer.render @container
-    end
-    animate.call
-
+    super( [ClassView.new(@interpreter) ,
+            FileView.new ,
+            BlocksView.new(@interpreter) ,
+            StatusView.new(@interpreter)] )
   end
 
 end