Started fiddling with clock demo

demo/reagentdemo/news.cljs

@@ -5,10 +5,12 @@
             [reagentdemo.common :as common :refer [demo-component]]
             [reagentdemo.news.anyargs :as anyargs]
             [reagentdemo.news.async :as async]
-            [reagentdemo.news.undodemo :as undodemo]))
+            [reagentdemo.news.undodemo :as undodemo]
+            [reagentdemo.news.clockpost :as clock]))
 
 (defn main []
   [:div
+   [clock/main {:summary true}]
    [anyargs/main {:summary true}]
    [async/main {:summary true}]
    [undodemo/main {:summary true}]])

demo/reagentdemo/news/binaryclock.cljs

@@ -0,0 +1,70 @@
+(ns reagentdemo.news.binaryclock
+  (:require [reagent.core :as r :refer [atom]]
+            [reagent.debug :refer-macros [dbg println]]))
+
+(defn cell [n bit]
+  [:div.clock.cell {:class (if (bit-test n bit)
+                             'light
+                             'dark)}])
+
+(defn column [n]
+  [:div.clock.col
+   [cell n 3]
+   [cell n 2]
+   [cell n 1]
+   [cell n 0]
+   [:div.clock.cell n]])
+
+(defn column-pair [n]
+  [:div.clock.colpair
+   [column (quot n 10)]
+   [column (mod n 10)]])
+
+(defn legend [& numbers]
+  (into [:div.clock.col.legend]
+        (map (partial vector :div.clock.cell) numbers)))
+
+(defn clock [time show-ms toggle-ms]
+  [:div.clock.main {:on-click toggle-ms
+                    :class (when show-ms 'wide)}
+   [legend 8 4 2 1]
+   [column-pair (.getHours time)]
+   [column-pair (.getMinutes time)]
+   [column-pair (.getSeconds time)]
+   (if show-ms
+     [column-pair (-> (.getMilliseconds time)
+                      (quot 10))])])
+
+(def clock-state (atom {:show-ms false
+                        :time (js/Date.)}))
+
+(defn update-time []
+  (swap! clock-state assoc :time (js/Date.)))
+
+(defn now []
+  (.now js/Date))
+
+(defn timing-wrapper [f]
+  (let [start-time (atom nil)
+        render-time (atom nil)
+        start #(reset! start-time (now))
+        stop #(reset! render-time (- (now) @start-time))
+        timed-f (with-meta f
+                  {:component-will-mount start
+                   :component-will-update start
+                   :component-did-mount stop
+                   :component-did-update stop})]
+    (fn [& args]
+      [:div
+       [:p [:em "render time: " @render-time "ms"]]
+       (into [timed-f] args)])))
+
+(def clock-with-timing (timing-wrapper clock))
+
+(defn main []
+  (let [{:keys [show-ms time]} @clock-state]
+    (if show-ms
+      (r/next-tick update-time)
+      (js/setTimeout update-time 333))
+    [clock-with-timing time show-ms
+     #(swap! clock-state update-in [:show-ms] not)]))

demo/reagentdemo/news/clockpost.cljs

@@ -0,0 +1,34 @@
+(ns reagentdemo.news.clockpost
+  (:require [reagent.core :as r :refer [atom]]
+            [reagent.debug :refer-macros [dbg println]]
+            [reagentdemo.syntax :refer-macros [get-source]]
+            [reagentdemo.page :refer [title link page-map]]
+            [reagentdemo.common :as common :refer [demo-component]]
+            [reagentdemo.news.binaryclock :as binaryclock]))
+
+(def funmap (-> ::this get-source common/fun-map))
+(def src-for (partial common/src-for funmap))
+
+
+(defn main [{:keys [summary]}]
+  (let [head "Binary clock"]
+    
+    [:div.reagent-demo
+     [:h1 [link {:href main} head]]
+     [title (str "Reagent 0.4.0: " head)]
+     [:div.demo-text
+
+      [:h2 "Binary clock"]
+
+      [:p "x"]
+      
+      (if summary
+        [link {:href main
+               :class 'news-read-more} "Read more"]
+        [:div.demo-text
+         [:p "x"]
+
+         [demo-component {:comp binaryclock/main}]])]]))
+
+(swap! page-map assoc
+       "news/binary-clock.html" main)

site/demo.css

@@ -184,4 +184,47 @@ ul.nav > li.brand > a {
 .color-samples {
     clear: both;
     padding-top: 0.5em;
-}
+}
+
+/* Binary clock */
+
+.clock.main {
+    background: #333;
+    color: #cdcdcd;
+    padding-top: 20px;
+    padding-left: 20px;
+    float: left;
+    font-size: 28px;
+    line-height: 34px;
+    width: 620px;
+}
+.clock.main.wide {
+    width: 800px;
+}
+.clock.cell {
+    width: 55px;
+    height: 55px;
+    text-align: center;
+    margin: 0 20px 20px 0;
+}
+.clock.cell.dark {
+    background-color: #454545;
+}
+.clock.cell.light {
+    background-color: #eee;
+}
+.clock.col {
+    margin: 0;
+    float: left;
+}
+.clock.legend>.cell {
+    margin-top: "10px"
+}
+.clock.colpair {
+    margin: 0;
+    float: left;
+}
+.clock.colpair:not(:last-child) {
+    margin-right: 20px;
+    border-right 1px solid #454545;
+}