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

berlin-clock.cljs

(ns dojo.core
  (:import [goog.date.DateTime])
    (:require [reagent.core :as reagent :refer [atom]]
              [reagent.session :as session]
              [secretary.core :as secretary :include-macros true]
              [accountant.core :as accountant]))

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

(defn sm [a b]
  (if (>= a b)
    "inline"
    "none"))

(defonce state
  (atom
    {:even-sec false
     :hour-m-5 0
     :hour-r-5 0
     :min-m-5 0
     :mid-r-5 0}))

(defn clock []
  (let [{:keys [min-m-5 min-r-5 even-sec hour-m-5 hour-r-5]} @state]
    [:div {:style {:width "95px" :height "133px" :position "relative" :float "left" :margin "15px 30px 20px 20px" :background "transparent url(http://www.3quarks.com/images/berlin-clock/preview/background.png) no-repeat top left"}}
     [:img {:style {:position "absolute" :left "34px" :top "5px" :width "27px" :height "26px" :display (if even-sec "none" "inline")}, :src "http://www.3quarks.com/images/berlin-clock/preview/second.png", :id "preview-second"}]
     [:img {:style {:position "absolute" :left "5px" :top "39px" :width "19px" :height "14px"  :display (sm hour-r-5 1)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-left.png", :id "preview-hour05"}]
     [:img {:style {:position "absolute" :left "27px" :top "39px" :width "19px" :height "14px" :display (sm hour-r-5 2)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-middle.png", :id "preview-hour10"}]
     [:img {:style {:position "absolute" :left "49px" :top "39px" :width "19px" :height "14px" :display (sm hour-r-5 3)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-middle.png", :id "preview-hour15"}]
     [:img {:style {:position "absolute" :left "71px" :top "39px" :width "19px" :height "14px" :display (sm hour-r-5 4)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-right.png", :id "preview-hour20"}]
     [:img {:style {:position "absolute" :left "5px" :top "63px" :width "19px" :height "14px" :display (sm hour-m-5 1)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-left.png", :id "preview-hour01"}]
     [:img {:style {:position "absolute" :left "27px" :top "63px" :width "19px" :height "14px" :display (sm hour-m-5 2)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-middle.png", :id "preview-hour02"}]
     [:img {:style {:position "absolute" :left "49px" :top "63px" :width "19px" :height "14px" :display (sm hour-m-5 3)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-middle.png", :id "preview-hour03"}]
     [:img {:style {:position "absolute" :left "71px" :top "63px" :width "19px" :height "14px" :display (sm hour-m-5 4)} :src "http://www.3quarks.com/images/berlin-clock/preview/hour-right.png", :id "preview-hour04"}]
     [:img {:style {:position "absolute" :left "5px" :top "88px" :width "6px" :height "14px"  :display (sm min-r-5 1)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-left.png", :id "preview-minute05"}]
     [:img {:style {:position "absolute" :left "12px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 2)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-yellow.png", :id "preview-minute10"}]
     [:img {:style {:position "absolute" :left "20px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 3)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-red.png", :id "preview-minute15"}]
     [:img {:style {:position "absolute" :left "28px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 4)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-yellow.png", :id "preview-minute20"}]
     [:img {:style {:position "absolute" :left "36px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 5)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-yellow.png", :id "preview-minute25"}]
     [:img {:style {:position "absolute" :left "44px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 6)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-red.png", :id "preview-minute30"}]
     [:img {:style {:position "absolute" :left "52px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 7)}, :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-yellow.png", :id "preview-minute35"}]
     [:img {:style {:position "absolute" :left "60px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 8)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-yellow.png", :id "preview-minute40"}]
     [:img {:style {:position "absolute" :left "68px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 9)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-red.png", :id "preview-minute45"}]
     [:img {:style {:position "absolute" :left "76px" :top "88px" :width "7px" :height "14px" :display (sm min-r-5 10)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-yellow.png", :id "preview-minute50"}]
     [:img {:style {:position "absolute" :left "84px" :top "88px" :width "6px" :height "14px" :display (sm min-r-5 11)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-small-right.png", :id "preview-minute55"}]
     [:img {:style {:position "absolute" :left "5px" :top "112px" :width "19px" :height "15px" :display (sm min-m-5 1)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-left.png", :id "preview-minute01"}]
     [:img {:style {:position "absolute" :left "27px" :top "112px" :width "19px" :height "15px" :display (sm min-m-5 2)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-middle.png", :id "preview-minute02"}]
     [:img {:style {:position "absolute" :left "49px" :top "112px" :width "19px" :height "15px" :display (sm min-m-5 3)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-middle.png", :id "preview-minute03"}]
     [:img {:style {:position "absolute" :left "71px" :top "112px" :width "19px" :height "15px" :display (sm min-m-5 4)} :src "http://www.3quarks.com/images/berlin-clock/preview/minute-right.png", :id "preview-minute04"}]]))

(defn get-state [d]
  {:even-sec (even? (.getSeconds d))
   :hour-m-5 (mod (.getHours d) 5)
   :hour-r-5 (quot (.getHours d) 5)
   :min-m-5 (mod (.getMinutes d) 5)
   :min-r-5 (quot (.getMinutes d) 5)})

(js/setInterval
  (fn [] (reset! state (get-state (js/Date.)))) ; update atom
  1000)

(defn home-page []
  [clock])

(defn about-page []
  [:div [:h2 "About dojo"]
   [:div [:a {:href "/"} "go to the home page"]]])

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

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

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

(secretary/defroute "/about" []
  (session/put! :current-page #'about-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))