Introduce Guard, hook up buttons to ace editor, style buttons.

.gitignore

@@ -5,3 +5,4 @@ tmp
 nbproject
 .DS_Store
 *.swp
+kidsruby.pid

Gemfile

@@ -5,6 +5,13 @@ gem 'qtbindings'
 gem 'htmlentities'
 gem 'rest-client'
 
+group :development do
+  gem 'guard'
+  gem 'rb-inotify', :require => false
+  gem 'rb-fsevent', :require => false
+  gem 'rb-fchange', :require => false
+end
+
 group :test do
   # only needed for testing
   gem 'mocha'

Gemfile.lock

@@ -1,20 +1,33 @@
 GEM
   remote: http://rubygems.org/
   specs:
+    ffi (1.0.10)
+    guard (0.8.7)
+      thor (~> 0.14.6)
     htmlentities (4.2.3)
     mime-types (1.16)
     mocha (0.9.10)
       rake
     qtbindings (4.6.3.4)
     rake (0.8.7)
+    rb-fchange (0.0.5)
+      ffi
+    rb-fsevent (0.4.3.1)
+    rb-inotify (0.8.8)
+      ffi (>= 0.5.0)
     rest-client (1.6.1)
       mime-types (>= 1.16)
+    thor (0.14.6)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  guard
   htmlentities
   mocha
   qtbindings
+  rb-fchange
+  rb-fsevent
+  rb-inotify
   rest-client

Guardfile

@@ -0,0 +1,52 @@
+# A sample Guardfile
+# More info at https://github.com/guard/guard#readme
+
+# Add files and commands to this file, like the example:
+#   watch('file/path') { `command(s)` }
+#
+guard 'shell' do
+  watch(%r{app/}) { restart_kidsruby }
+  watch(%r{lib/}) { restart_kidsruby }
+  watch(%r{public/}) { restart_kidsruby }
+  watch('main.rb') { restart_kidsruby }
+
+  def restart_kidsruby
+    stop_kidsruby 
+    start_kidsruby
+  end
+
+  def stop_kidsruby
+    kill_kidsruby
+    cleanup_pid_file
+  end
+
+  def kill_kidsruby
+    Process.kill("HUP", pid.to_i)
+  end
+
+  def cleanup_pid_file
+    File.delete(pid_file) if File.exists?(pid_file)
+  end
+
+  def start_kidsruby
+    store_pid(kidsruby_process)
+  end
+
+  def store_pid(process)
+    File.open(pid_file, 'w+') { |f| f.puts process.pid }
+  end
+
+  def kidsruby_process
+    IO.popen('ruby main.rb', 'r')
+  end
+
+  def pid
+    File.read(pid_file) if File.exists?(pid_file)
+  end
+
+  def pid_file
+    './tmp/kidsruby.pid'
+  end
+
+  at_exit { cleanup_pid_file }
+end

app/models/runner.rb

@@ -1,7 +1,6 @@
 class Runner < Qt::Process
   def initialize(main)
     super
-
     @main_widget = main
   end
 

lib/kidsruby/interface.rb

@@ -46,4 +46,4 @@ def initialize(r)
   def valid?
     @error == false
   end
-end
+end

public/css/master.css

@@ -61,10 +61,12 @@ body.lesson-set section h1 {
   margin-bottom: 5px;
   text-transform: uppercase;
 }
+
 #buttons {
-  bottom: 15px;
-  position: absolute;
-  right: 5px;
+  position:relative;
+  float:right;
+  top: 93%;
+  width: 350px;
 }
 #buttons button {
   font-size: 30px;
@@ -108,11 +110,11 @@ iframe h1 {
 }
 
 #tabs {
-  height: 94%;
+  height: 100%;
   position: absolute;
   right: 0px;
   top: 1%;
-  width: 49%;
+  width: 50%;
 }
 .ui-tabs-panel {
   height: 85%;
@@ -130,12 +132,20 @@ width: 100%;
 }
 */
 
+#container {
+  width: 49%;
+  float:left;
+}
+
 #rubycode {
-  width: 50%;
+  width: 49%;
+  height:94%;
   margin: 0;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  clear: both;
+  float: left;
 }

public/index.html

@@ -10,6 +10,7 @@
   <!-- ACE Editor -->
   <script src="js/ace/ace.js" type="text/javascript"></script>
   <script src="js/ace/mode-ruby.js" type="text/javascript"></script>
+  <script type="text/javascript" src="js/sugar-0.9.5.min.js"></script>
 
   <script src="js/ace/theme-clouds.js" type="text/javascript"></script>
   <script src="js/ace/theme-clouds_midnight.js" type="text/javascript"></script>
@@ -31,7 +32,6 @@
   <!-- jQuery-ish -->
   <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
   <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
-  <script type="text/javascript" src="js/sugar-0.9.5.min.js"></script>
 
   <!-- KidsRuby -->
   <script type="text/javascript" src="js/app.js"></script>
@@ -46,6 +46,13 @@
 # Type in your code just below here:
 
 </pre>
+
+  <div id="buttons">
+    <button id="run">Run</button>
+    <button id="clear">Clear</button>
+    <button id="open">Open</button>
+    <button id="save">Save</button>
+  </div>
 </div>
 
 <aside id="tabs">
@@ -68,17 +75,11 @@
     <canvas id="turtle-canvas"></canvas>
   </div>
 
-  <div id="buttons">
-    <button id="run">Run</button>
-    <button id="clear">Clear</button>
-    <button id="open">Open</button>
-    <button id="save">Save</button>
-  </div>
 </aside>
 
 <script type="text/javascript" charset="utf-8">
 window.onload = function() {
-  var editor = ace.edit("rubycode");
+  window.editor = ace.edit("rubycode");
 
   var themes = [
     "clouds", "clouds_midnight", "cobalt", "crimson_editor", "dawn", "eclipse",
@@ -87,10 +88,11 @@
     "twilight", "vibrant_ink"
   ]
 
-  editor.setTheme("ace/theme/" + themes.first());
+  editor.setTheme("ace/theme/clouds");
 
   var RubyMode = require("ace/mode/ruby").Mode;
   editor.getSession().setMode(new RubyMode());
+  editor.gotoLine(2);
 };
 </script>
 

public/js/app.js

@@ -36,11 +36,11 @@ function updateStdErr(newHtml) {
   $("#stderr").append(unescape(newHtml));
 }
 
-function startRun(editor) {
+function startRun() {
   selectTab(1);
   clearOutputs();
   resetTurtle();
-  submitRubyCode(editor);
+  submitRubyCode();
 }
 
 function clearOutputs() {
@@ -49,26 +49,26 @@ function clearOutputs() {
   });
 }
 
-function submitRubyCode(editor) {
-  var ruby = editor.getSession();
+function submitRubyCode() {
+  var ruby = getEditor().getSession().getValue();
   QTApi["evaluateRuby(QString)"](ruby);
 }
 
 function openRubyCode() {
   QTApi["openRubyFile(QString)"]("");
 }
 
-function saveRubyCode(editor) {
-  var ruby = editor.getSession();
+function saveRubyCode() {
+  var ruby = getEditor().getSession();
   QTApi["saveRubyFile(QString)"](ruby);
 }
 
 function getEditor() {
-  return $("#rubycode").data("editor");
+  return window.editor;
 }
 
 function clearCode() {
-  getEditor().setCode("");
+  getEditor().getSession().setValue("");
 }
 
 function addCode(code) {
@@ -121,24 +121,29 @@ $(document).ready(function() {
 
   $("#run").click(function(e) {
     resizeCanvas();
-    startRun(editor);
+    startRun(getEditor());
     return false;
   });
 
   $("#open").click(function(e) {
-    openRubyCode(editor);
+    openRubyCode(getEditor());
     return false;
   });
 
   $("#save").click(function(e) {
-    saveRubyCode(editor);
+    saveRubyCode(getEditor());
     return false;
   });
 
   $("#turtle").resize(function() {
     resizeCanvas();
   });
 
+  $('#clear').click(function(e) { 
+    clearCode();
+    return false;
+  });
+
   initTurtle();
 
   selectTab(0); // default to help tab