 (defn on-mouse-move [e]
     (let [  x   (.-clientX e)
             y   (.-clientY e)]
-        ; (println x y)
         (swap! app-state assoc :mouse { :x x :y y})))
 
-
-(defn module-critter [critter width height] 
-    (let [{:keys [x y]} critter]
-        [:g.module-critter 
-            {:style {:transition "transform 500ms"
-                     :transform (translate x y)}}
-            [:circle {:r 5 :style {:fill "brown"}}]]))
+(defn critter-bearing [c]
+  (bearing (:position c) (:destination c) ))
+
+(defn module-critter [critter] 
+  (let [[x y] (:position critter)
+        [head torso butt] (-> critter :props :color)
+        b  (critter-bearing critter)]
+    [:g.module-critter {:style {:transition "transform 100ms"
+                                :transform (translate x y)}}
+      [:g.critter-inner {:style {:transition "transform 100ms"
+                                 :transform (str "rotate(" b "rad)")}}
+        [:circle {:r 5 :cx 5  :style {:fill butt}}] 
+        [:circle {:r 5 :cx -5 :style {:fill head}}]
+        [:rect {:x -5 :y -5 :width 10 :height 10 :style {:fill torso}}]]]))
 
 (defn module-critter-pen []
     (let [{:keys [width height critters]} @app-state]

(reagent/render-component [module-app-root]
                          (. js/document (getElementById "app")))

(app-loop!)



             :on-mouse-move on-mouse-move}
            [:rect {:width width :height height 
                :style {:fill "gray"}}]
            [:g.critters (wrap-map module-critter critters)]]))

(defn module-app-root []
    [:section.module-app-root
