showing active instruction with bg

2015-07-25 15:28:59 +03:00 · 2015-07-25 15:28:59 +03:00 · b693f55a29
commit b693f55a29
parent 2f66bd9f08
4 changed files with 31 additions and 1 deletions
--- a/app/block_view.rb
+++ b/app/block_view.rb
@ -1,5 +1,6 @@

 require "source_view"
+require "instruction_view"

 class BlockView

@ -26,7 +27,7 @@ class BlockView
      div.col_md_5 do
        h6 { "Block: #{block.name}"}
        block.codes.each do |code|
-          code.to_s.br
+          InstructionView  :interpreter => interpreter , :instruction => code
        end
      end
      div.col_md_2 do
--- a/app/instruction_view.rb
+++ b/app/instruction_view.rb
@ -0,0 +1,25 @@
+
+
+class InstructionView
+
+  include React::Component
+  required_param :interpreter
+  required_param :instruction
+
+  define_state :active => ""
+
+  before_mount do
+    interpreter.register_event(:instruction_changed,  self)
+  end
+
+  def instruction_changed old , ins
+    active! instruction == ins ? "active" : ""
+  end
+
+  def render
+    return unless instruction
+    div :class => active do
+      instruction.to_s
+    end
+  end
+end
--- a/index.html.erb
+++ b/index.html.erb
@ -2,6 +2,7 @@
  <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">
    <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' %>
--- a/static/main.css
+++ b/static/main.css
@ -0,0 +1,3 @@
+.active {
+  background-color: orange ;
+}