Berlin Clock kata as implemented at the Amsterdam Clojurians cljs dojo, meetup #80

berlin-clock.cljs

# Amsterdam Clojurians meetup #80
# A ClojureScript dojo: the Berlin Clock!
#
# Fork this gist and put your solution in

(ns berlin-clock.clock
  (:require [reagent.core :as reagent :refer [atom]]))

(def now (atom (js/Date.)))

(.setTimeout js/window (fn tick []
                         (do (swap! now (constantly (js/Date.)))
                             (.setTimeout js/window tick 1000))) 1000)

(defn current-time
  "Displays the current time"
  []
  [:span (.toLocaleTimeString @now)])

(defn seconds
  "Retrieves the seconds of the current time"
  []
  (.getSeconds @now))

(defn blinker
  "Render a senconds blinker"
  []
  [:div {:style {:width "50px"
                 :height "50px"
                 :border-radius "50%"
                 :display "table"
                 :margin "0 auto"
                 :background-color (if (odd? (seconds))
                                     "rosybrown"
                                     "red")}}])

(defn five-hours
  "Render a 5 hours bit
   slot: the slot in the row (0 to 3)"
  [slot]
  (let [hours (.getHours @now)
        on? (< slot (quot hours 5))]
    [:div {:style {:display "inline-block"
                   :width "130px"
                   :height "25px"
                   :background-color (if on?
                                       "red"
                                       "rosybrown")}}]))

(defn five-hours-row
  "Render the row with the 5 hours bits"
  []
  [:div
   (for [slot (range 4)]
     [:div {:key (str slot "-5hours")
            :style {:width "25%"
                    :float "left"}}
           [five-hours slot]])])

(defn hours
  "Render the hour bit
   slot: the slot in the row (0 to 3)"
  [slot]
  (let [hours (.getHours @now)
        on? (< slot (mod hours 5))]
    [:div {:style {:display "inline-block"
                   :width "130px"
                   :height "25px"
                   :background-color (if on?
                                       "red"
                                       "rosybrown")}}]))

(defn hours-row
  "Render the row with the single hours bits"
  []
  [:div (for [slot (range 4)]
          [:div {:key (str slot "-hours")
                 :style {:width "25%"
                         :float "left"}}
           [hours slot]])])

(defn five-minutes
  "Render the bits for the 5 minutes marks
   slot: the slot in the row (0 to 10)"
  [slot]
  (let [color (if (= 0 (mod (inc slot) 3))
                "red"
                "yellow")
        off-color (if (= 0 (mod (inc slot) 3))
                    "rosybrown"
                    "darkkhaki")
        minutes (.getMinutes @now)
        on? (< slot (quot minutes 5))]
    [:div {:style {:display "inline-block"
                   :width "43px"
                   :height "25px"
                   :background-color (if on?
                                       color
                                       off-color)}}]))

(defn five-minutes-row
  "Render the row with the five minutes bits"
  []
  [:div (for [slot (range 11)]
          [:span {:key (str slot "-5minutes")
                  :style {:width "9%"
                          :float "left"}}
           [five-minutes slot]])])

(defn minutes
  "Render the single minutes bits
   slot: the slot in the row (0 to 3)"
  [slot]
  (let [on? (< slot (mod (.getMinutes @now) 5))]
    [:div {:style {:display "inline-block"
                   :width "130px"
                   :height "25px"
                   :background-color (if on?
                                       "yellow"
                                       "darkkhaki")}}]))

(defn minutes-row
  "Render the row with the single minutes bits"
  []
  [:div (for [slot (range 4)]
          [:div {:key (str slot "-minutes")
                 :style {:width "25%"
                         :float "left"}}
           [minutes slot]])])

(defn clock
  "Render a Berlin Clock"
  []
  [:span
   [:span [current-time]]
   [:div {:style {:width "570px"
                  :display "block"
                  :padding-bottom "5px"
                  :text-align "center"}}
    [blinker]]
   [five-hours-row]
   [:br]
   [hours-row]
   [:br]
   [five-minutes-row]
   [:br]
   [minutes-row]])

core.cljs

(ns berlin-clock.core
    (:require [reagent.core :as reagent :refer [atom]]
              [reagent.session :as session]
              [secretary.core :as secretary :include-macros true]
              [accountant.core :as accountant]

              [berlin-clock.clock :as clock]))

;; -------------------------
;; Views

(defn home-page []
  [:div [:h2 "Welcome to berlin-clock"]
   [:div.body {:style {:background-color "lightgrey"
                       :padding-left "15px"
                       :height "300px"}}
    [clock/clock]]])

(defn current-page []
  [:div [(session/get :current-page)]])

;; -------------------------
;; Routes

(secretary/defroute "/" []
  (session/put! :current-page #'home-page))

;; -------------------------
;; Initialize app

(defn mount-root []
  (reagent/render [current-page] (.getElementById js/document "app")))

(defn init! []
  (accountant/configure-navigation!
    {:nav-handler
     (fn [path]
       (secretary/dispatch! path))
     :path-exists?
     (fn [path]
       (secretary/locate-route path))})
  (accountant/dispatch-current!)
  (mount-root))