switch to susy

a rewire basically, but much clearer

Gemfile

@@ -9,6 +9,7 @@ gem "salama" , path: "../salama"
 gem "salama-reader" , path: "../salama-reader"
 gem "salama-arm" , path: "../salama-arm"
 gem "salama-object-file" , path: "../salama-object-file"
+gem "susy"
 
 group :development do
   gem "minitest"

Gemfile.lock

@@ -50,9 +50,12 @@ GEM
     rack (1.6.4)
     react-source (0.13.3)
     rubygems-tasks (0.2.4)
+    sass (3.4.16)
     sourcemap (0.1.1)
     sprockets (3.2.0)
       rack (~> 1.0)
+    susy (2.2.5)
+      sass (>= 3.3.0, < 3.5)
     tilt (2.0.1)
 
 PLATFORMS
@@ -69,6 +72,7 @@ DEPENDENCIES
   salama-arm!
   salama-object-file!
   salama-reader!
+  susy
 
 BUNDLED WITH
    1.10.5

app/block_view.rb

@@ -30,19 +30,14 @@ class BlockView
 
   def render
     return unless block
-    div.row  do
-      div.col_md_5 do
-        SourceView  :source => interpreter.instruction.source
-      end
-      div.col_md_5 do
-        h6 { "Block: #{block_name}"}
-        block.each do |code|
-          InstructionView  :interpreter => interpreter , :instruction => code
-        end
-      end
-      div.col_md_2 do
+    div.block_view do
+      div do
+        h4 {"Block: #{block_name}"}
         button.btn.btn_default { "next" }.on(:click) { interpreter.tick }
       end
+      block.each do |code|
+        InstructionView  :interpreter => interpreter , :instruction => code
+      end
     end
   end
 end

app/class_view.rb

@@ -4,9 +4,10 @@ class ClassView
   required_param :classes, type: {}
 
   def render
-    div.row do
+    div.classes do
+      h4 { "Classes" }
       classes.each do |name , clas|
-        div.row do
+        div.one_class do
            clas.name
         end
       end

app/debugger.rb

@@ -17,27 +17,16 @@ class Debugger
     interpreter.start machine.init
   end
   def render
-    div.container do
-      div.row do
-        div.col_md_1 do
-          ClassView classes: machine.space.classes
-        end
-        div.col_md_11 do
-          div.row do
-            div.col_md_4 do
-              "Future one"
-            end
-            div.col_md_8 do
-              BlockView interpreter: interpreter
-            end
-          end
-          div.row do
-            interpreter.registers.each do |r , oid|
-              div.col_md_1 do
-                RegisterView interpreter: interpreter , register: r
-              end
-            end
-          end
+    div.debugger_view do
+      ClassView classes: machine.space.classes
+      div.file_view do
+        "Future Source code view"
+      end
+      SourceView  :interpreter => interpreter
+      BlockView :interpreter => interpreter
+      div.registers_view do
+        interpreter.registers.each do |r , oid|
+          RegisterView interpreter: interpreter , register: r
         end
       end
     end

app/instruction_view.rb

@@ -13,7 +13,7 @@ class InstructionView
   end
 
   def check_active i
-    active! instruction == i ? "active" : ""
+    active! instruction == i ? "bright" : ""
 
   end
   def instruction_changed old , ins
@@ -21,9 +21,8 @@ class InstructionView
   end
 
   def render
-    return unless instruction
     div :class => active do
-      instruction.to_s
+      instruction.to_s if instruction
     end
   end
 end

app/register_view.rb

@@ -20,12 +20,12 @@ class RegisterView
   end
 
   def calc_fields
-    puts "My id #{objects_id} , #{objects_id.class}"
+    #puts "My id #{objects_id} , #{objects_id.class}"
     object = Virtual.machine.objects[objects_id]
     if object and ! object.is_a?(String)
       has_fields = []
       clazz = object.class.name.split("::").last
-      puts "found #{clazz}"
+      #puts "found #{clazz}"
       has_fields << clazz
       object.get_instance_variables.each do |variable|
         f = object.get_instance_variable(variable)
@@ -36,8 +36,8 @@ class RegisterView
   end
 
   def render
-    div.row do
-      div.col_md_12 do
+    div.register_view do
+      div do
         objects_id.to_s
       end
       fields.each do |attribute|

app/source_view.rb

@@ -2,26 +2,33 @@ class SourceView
 
   include React::Component
 
-  required_param :source
+  required_param :interpreter
 
   define_state :sources => []
 
-  before_update do
-    text = source_text(source)
+  before_mount do
+    interpreter.register_event(:instruction_changed,  self)
+    instruction_changed nil , interpreter.instruction
+  end
+
+  def instruction_changed old , ins
+    text = source_text(ins.source)
     return if sources.last == text
     sources << text
     sources.shift if sources.length > 5
+    sources! sources
   end
+
   def render
-    div.row  do
-      "Virtual Machine Instruction".br
+    div.source_view do
+      h4 {"Virtual Machine Instruction"}
       sources.each do |s|
         s.br
       end
     end
   end
 
-  def source_text
+  def source_text source
     if source.is_a? Virtual::Instruction
       return source.class.name
     else

app/styles.scss

@@ -0,0 +1,30 @@
+@import "susy";
+
+.debugger-view { @include container(80em); }
+
+.classes { @include span(2 of 12); }
+
+.file-view { @include span(3 of 12); }
+
+.source-view { @include span(3 of 12); }
+
+.block-view {
+  @include span(4 of 12 at 9);
+  height: 200px;
+}
+
+.registers-view {
+  @include span(10 of 12 at 3);
+}
+
+.register-view {
+  @include span(1 of 13);
+}
+
+.half {
+  @include span(5 of 12);
+}
+
+.bright {
+  background-color: orange ;
+}

config.ru

@@ -6,6 +6,7 @@ Opal.use_gem "salama"
 Opal.use_gem "salama-arm"
 
 require "tilt/erb"
+require "susy"
 require "json"
 require "react/source"
 

index.html.erb

@@ -1,8 +1,7 @@
 <html>
   <head>
     <title>Salama Debugger</title>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/static/main.css">
+    <link rel="stylesheet" href="/assets/styles.css">
     <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
     <script src="/assets/react-with-addons.js"></script>
     <%= javascript_include_tag 'main' %>

static/main.css

@@ -1,3 +0,0 @@
-.active {
-  background-color: orange ;
-}