calculator example

examples/calculator.rb

@@ -0,0 +1,53 @@
+module Calculator
+  @shown = @left = @right = 0
+  Operation = Struct.new :callback, :name
+  private_constant :Operation
+  @appending = false
+  @operation = Operation.new ->{ @left = @right; @appending = false }
+  class << self
+    attr_reader :shown, :operation
+
+    def digit n
+      if @appending
+        @right = @right * 10 + n
+      else
+        @right = n
+        @appending = true
+      end
+      @shown = @right
+    end
+    def equal
+      @operation.callback.call
+    end
+    def +
+      equal if @appending; @right = 0; @appending = false
+      @operation = Module.nesting[1].const_get(:Operation).new ->{ @shown = @left = @left + @right; @appending = false }, "oper: +"
+    end
+    def -
+      equal if @appending; @right = 0; @appending = false
+      @operation = Module.nesting[1].const_get(:Operation).new ->{ @shown = @left = @left - @right; @appending = false }, "oper: -"
+    end
+    def ×
+      equal if @appending; @right = 0; @appending = false
+      @operation = Module.nesting[1].const_get(:Operation).new ->{ @shown = @left = @left * @right; @appending = false }, "oper: ×"
+    end
+    def ÷
+      equal if @appending; @right = 0; @appending = false
+      @operation = Module.nesting[1].const_get(:Operation).new ->{ @shown = @left = @left.fdiv @right; @appending = false }, "oper: ÷"
+    end
+
+  end
+end
+c = Calculator
+
+require "../lib/wsui"
+WSUI.start fps: 5 do |*|
+  [
+    [c.shown, c.operation.name],
+    [WSUI::S.new(7, ->*{ c.digit 7 }), WSUI::S.new(8, ->*{ c.digit 8 }), WSUI::S.new(9, ->*{ c.digit 9 }), WSUI::S.new(?÷, ->*{ c.÷ })],
+    [WSUI::S.new(4, ->*{ c.digit 4 }), WSUI::S.new(5, ->*{ c.digit 5 }), WSUI::S.new(6, ->*{ c.digit 6 }), WSUI::S.new(?×, ->*{ c.× })],
+    [WSUI::S.new(1, ->*{ c.digit 1 }), WSUI::S.new(2, ->*{ c.digit 2 }), WSUI::S.new(3, ->*{ c.digit 3 }), WSUI::S.new(?-, ->*{ c.- })],
+    [WSUI::S.new(0, ->*{ c.digit 0 }), WSUI::S.new(?=, ->*{ c.equal  }),                                   WSUI::S.new(?+, ->*{ c.+ })],
+  ]
+end
+gets

lib/wsui.rb

@@ -4,7 +4,7 @@ module WSUI
   require "async/http/endpoint"
   require "falcon"
   S = Struct.new :value, :click
-  def self.start port = 7001, fps = 5, html = "", &block
+  def self.start port = 7001, html = "", fps: 5, &block
     app = Module.new do
       @connections = Set.new
       @port = port
@@ -24,8 +24,13 @@ def self.call env
           @connections << connection
           while message = connection.read
             if message.key? :id
-              t = ObjectSpace._id2ref message[:id]
-              t.click.call t if t.click
+              t = begin
+                ObjectSpace._id2ref message[:id]
+              rescue RangeError
+                # maybe when we click too fast and the page has 'old' refs
+              end
+              p t
+              t.click&.call t if t.respond_to? :click
             end
             t = f.call(@block.call(message)).to_json
             @connections.each do |connection|
@@ -46,14 +51,20 @@ def self.call env
               <script>
                 var all = null;
                 var regions = [];
+                var need = false;   // force draw() on click
                 function setup() {
                   frameRate(#{@fps});
                   createCanvas(windowWidth, windowHeight);
                   textAlign(CENTER, CENTER);
                   connectWebsocket("ws://" + window.location.host);
                 };
                 function messageReceived(data) {
+                  // console.log(data);
                   all = JSON.parse(data);
+                  if (need) {
+                    need = false;
+                    draw();
+                  }
                 };
                 function draw() {
                   // console.log(all);
@@ -92,6 +103,7 @@ def self.call env
                   regions.some( function(e) {
                     if (mouseX >= e.left && mouseX <= e.left + e.width && mouseY >= e.top && mouseY <= e.top + e.height) {
                       sendMessage({id: e.id});
+                      need = true;
                       return true;
                     };
                   } );