sort of noop of version is working

app/block_view.rb

@@ -0,0 +1,16 @@
+
+
+class BlockView
+
+  include React::Component
+  required_param :block, type: []
+
+
+  def render
+    div :class => :row  do
+      block.each do |code| #should be block.codes.each
+        code.to_s.br
+      end
+    end
+  end
+end

app/class_view.rb

@@ -1,15 +1,16 @@
 class ClassView
-
   include React::Component
 
-  required_param :sources, type: [Hash]
+  required_param :classes, type: Hash
 
   def render
-    div class: "sourceList" do
-      sources.each do |source|
-        SourceView author: source[:author], text: source[:text]
+    div class: "row" do
+      classes.each do |k , clas|
+        div :class => "col-md-1" do
+           k.span
+           clas.span
+        end
       end
     end
   end
-
 end

app/debugger.rb

@@ -6,6 +6,7 @@ require 'opal-react'
 require "class_view"
 require "register_view"
 require "source_view"
+require "block_view"
 
 Document.ready? do  # Document.ready? is a opal-jquery method.
   React.render( React.create_element( Debugger),  Element['#content']    )
@@ -15,7 +16,7 @@ class Debugger
 
   include React::Component
 #  required_param :url
-  define_state sources: JSON.from_object(`window.initial_sources`)
+#  define_state sources: JSON.from_object(`window.initial_sources`)
 
   # before_mount do
   #   HTTP.get(url) do |response|
@@ -28,10 +29,20 @@ class Debugger
   # end
 
   def render
-    div class: "sourceBox" do
-      h1 { "Sources" }
-      ClassView sources: sources
-      RegisterView submit_source: lambda { |source| sources! << sourceAuthor}
+    div do
+      ClassView classes: { :class1 => "Object"}
+      div :class => "row" do
+        div :class => "col-md-4" do
+          "Future one"
+        end
+        div :class => "col-md-4" do
+          "Future two"
+        end
+        div :class => "col-md-4" do
+          BlockView block: [ "block 1" , "block 2"]
+        end
+      end
+      RegisterView registers: ["r1" , "r2"]
     end
   end
 end

app/register_view.rb

@@ -1,27 +1,15 @@
 class RegisterView
 
   include React::Component
-  required_param :submit_source, type: Proc
-
-  define_state :author, :text
+  required_param :registers, type: []
 
   def render
-    div do
-      div do
-        "Author: ".span
-        input(type: :text, value: author, placeholder: "Your name", style: {width: "30%"}).
-          on(:change) { |e| author! e.target.value }
-      end
-      div do
-        div(style: {float: :left, width: "50%"}) do
-          textarea(value: text, placeholder: "Say something...", style: {width: "90%"}, rows: 10).
-            on(:change) { |e| text! e.target.value }
-        end
-        div(style: {float: :left, width: "50%"}) do
-          text
+    div :class => :row  do
+      registers.each do |r|
+        div :class => "col-md-1" do
+          r
         end
       end
-      button { "Post" }.on(:click) { submit_source :author => (author! ""), :text => (text! "") }
     end
   end
 end

app/source_view.rb

@@ -2,15 +2,12 @@ class SourceView
 
   include React::Component
 
-  required_param :author
-  required_param :text
+  define_state :source
 
   def render
-    div class: "source" do
-      h2(class: "sourceAuthor") { author }
-      div do
-        text
-      end
+    div :class => :row  do
+      "Virtual Machine Instruction".span
+      source.name
     end
   end