crepl_svg_smiley.cljs

(ns crepl.svg.smiley
  (:require [reagent.core :as r]
            crepl.atom-sync))

(def happiness (crepl.atom-sync/atom-sync 30))

(defn smiley []
  [:svg {:x 0 :y 0 :width 100 :height 100}
   	[:rect {:x 50 :y 50 :width 10 :height 10}]
    [:circle {:cx 50 :cy 50 :r 40 :fill 
              (cond 
                (< @happiness -10)
                "red"
                (< @happiness 10)
                "orange"
                :else
                "yellow")}]
   [:circle {:cx 35 :cy 35 :r 5 :fill "black"}]
   [:circle {:cx 65 :cy 35 :r 5 :fill "black"}]
   [:path {:d (str "M 30 63 q 20 " @happiness " 40 0")
           :stroke "black"
           :stroke-width 5
           :fill "none"}]
   ])

(defn slider []
  [:input {:type "range" :default-value @happiness :min -30 :max 30
           :style {:width "100%"}
           :on-change (fn [e]
                        (reset! happiness 
(int (.-target.value e))))}])

(defn svg-component []
  [:div
   [smiley]
   [slider]])

(r/render-component [svg-component]
                    (.getElementById js/document "app"))