                :style { :font-family "monospace" :width 400 :height 300 }
                :value (-> @app-state :program :code (#(apply str %)))} ]
 
-   [:div  "Step: " (-> @app-state :program :step)]
-   ])
-
-
-(defn world []
-  [:div {:style { :display "flex" :flex-direction "column" }}
+   [:div  [CurrentCommand]]
+   ])
+
+
+(defn App []
+  [:div {:style { :display "flex" :flex-direction "column" :align-items "center" }}
    [Board]
-   [controls]
-   ])
-
-
-(js/setInterval next-step! 100)
-
-(reagent/render-component [world]
+   [Controls]
+   ])
+
+
+
+(reagent/render-component [App]
                           (. js/document (getElementById "app")))
 
 (defn on-js-reload []

    0))


(defn play! []
  (swap! app-state assoc-in [:program :mode] :play))

(defn reset-turtle! []
  (swap! app-state assoc :turtle initial-turtle-state))

(defn apply-stop [prev-state]
  (-> prev-state
      (assoc-in [:program :mode] :stop)
      (assoc-in [:program :step] 0)))

(defn stop! []
  (swap! app-state apply-stop))


(defn apply-command [turtle-state step-code]
  (let [[cmd arg] step-code]
    (case cmd
      :left
      (-> turtle-state
                  (update :dir rotate-left))
      :right
      (-> turtle-state
                  (update :dir rotate-right))

      :forward
      (let [[dx dy] (dir-to-offset (:dir turtle-state))]
        (-> turtle-state
            (update :x + (* arg dx))
            (update :y + (* arg dy))))
      turtle-state)))


(defn next-step! []
  (swap! app-state
         (fn [prev-state]
           (let [program (:program prev-state)
                 num-steps (-> program :code count dec)]
             (if (and
                   (= (:mode program) :play)
                   (< (:step program) num-steps))
               (-> prev-state
                   (update-in [:program :step] inc)
                   (update-in [:turtle] apply-command
                              (-> program :code (nth (-> program :step inc)))))
               (apply-stop prev-state))))))





     ]))


(defn CurrentCommand []
  (let [program (@app-state :program)
        mode  (program :mode)
        step (program :step)
        code (program :code)
        command (get code step)]
    (if (= mode :play)
      [:span (str command)])))

(defn CurrentState []
  (let [turtle (@app-state :turtle)]
    [:div
     [:span (str turtle)]
     [:span (-> @app-state :program :mode)]]
    ))


(defn Controls []
  [:div {:style {
                 :display "flex" :flex-direction "column" :align-items "center"
                 }}
