Last active
July 22, 2016 12:11
-
-
Save skuro/db9a8e265930ee3a08e7b2c5a967fe2e to your computer and use it in GitHub Desktop.
Berlin Clock kata as implemented at the Amsterdam Clojurians cljs dojo, meetup #80
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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]]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment