                (min (:height data) (:width data))
                0.07)})
 
+(defn slider-view
+  "adjusts the size of the board"
+  [state]
+  [:input {:type "range" :value (:width state) :min 250 :max 700
+           :style {:width "200px"}
+           :on-change (fn [e]
+                        (let [val (.-target.value e)]
+                          (swap! app-state assoc :width val :height val)))}])
+
+(defn input-view
+  "input of commands through strings"
+  [state value]
+  [:input {:type "text"
+           :value @value
+           :on-change (fn [e]
+                        (let [c (-> e .-target .-value)]
+                          (reset! value c)))}])
+
 (defn board-view
   "the board"
   [state]

(defn app-view
  "main component of our app"
  []
  [:div
   [board-view @app-state]])

;; -------------------------
;; Initialize app

    init-pieces init-colors)})

(defonce app-state (r/atom init-state))
#_(swap! app-state assoc :height 500)
#_(swap! app-state assoc-in [:board 7 4 :color] "#4286f4")
#_(reset! app-state init-state)

(defn board-style
