ruby-hyperloop
diff --git a/‎clock.rb
Lines changed: 0 additions & 22 deletions b/‎clock.rb
Lines changed: 0 additions & 22 deletions
diff --git a/‎index.html
Lines changed: 55 additions & 5 deletions b/‎index.html
Lines changed: 55 additions & 5 deletions
@@ -16,18 +16,68 @@
     <script src="https://rawgit.com/ruby-hyperloop/hyperloop-js/master/hyperloop.min.js"></script>
 
     <script type="text/ruby">
-      class SimpleComponent < Hyperloop::Component
+      class TopLevelComponent < Hyperloop::Component
         render(DIV) do
-          BUTTON { 'Push the button' }.on(:click) do
-           alert 'You did it!'
+          H1 { "Components, Stores and Operations" }
+          TypeAlong()
+          ButtonComponent()
+          Clock()
+        end
+      end
+
+      class MyStore < Hyperloop::Store
+        state :value, reader: true, scope: :class
+
+        def self.set_value value
+          mutate.value value
+        end
+
+        def self.clear
+          mutate.value ""
+        end
+      end
+
+      class ClearOp < Hyperloop::Operation
+        step { puts "about to clear everything" }
+        step { MyStore.clear }
+      end
+
+      class ButtonComponent < Hyperloop::Component
+        render(DIV) do
+          H2 { "Here is a button" }
+          BUTTON { 'See the value' }.on(:click) do
+           alert "MyStore value is '#{ MyStore.value }' "
           end
+          BUTTON { 'Clear' }.on(:click) { ClearOp.run }
+        end
+      end
+
+      class TypeAlong < Hyperloop::Component
+        render(DIV) do
+          H2 { "MyStore value is '#{ MyStore.value }'" }
+          INPUT(type: :text, value: MyStore.value ).on(:change) do |e|
+            MyStore.set_value e.target.value
+          end
+        end
+      end
+
+      class Clock < Hyperloop::Component
+        param format: '%a, %e %b %Y %H:%M:%S'
+        before_mount do
+          mutate.time Time.now.strftime(params.format)
+          every(1) { mutate.time Time.now.strftime(params.format) }
+        end
+
+        render(DIV) do
+          H2 { "And a clock" }
+          "The time is #{state.time}"
         end
       end
     </script>
+
   </head>
 
   <body>
-  <div data-hyperloop-mount="SimpleComponent">
-  </div>
+    <div data-hyperloop-mount="TopLevelComponent"></div>
   </body>
 </html>