    [\u2659 \u2659 \u2659 \u2659 \u2659 \u2659 \u2659 \u2659]
    [\u2656 \u2658 \u2657 \u2655 \u2654 \u2657 \u2658 \u2656]])
 
-(def init-colors
+(defonce init-colors
   (vec
    (take 8 (cycle [(vec (take 8 (cycle '("#a3854b" "#d3d2cf"))))
                    (vec (take 8 (cycle '("#d3d2cf" "#a3854b"))))]))))
 
-(defonce init-state
+(defn string-mapping
+  "given a list of rows and cols and a string list
+  creates the string mapping"
+  [rows cols strings]
+  (zipmap
+   (map char
+        strings)
+   (for [y rows
+         x cols]
+     [y x])))
+
+(def init-state
   {:width 500
    :height 500
    :board

                   (map-indexed
                    (fn [col-idx elem]
                      ^{:key col-idx} [:td {:style (td-style state (:color elem))}
                                       [:div {:style (piece-style state)} (:piece elem)]])
                    row)])
    (:board state))])

(defn app-view
  "main component of our app"
  []
  (let [value (r/atom "")]
       (fn []
         [:div
          [:div "Size:"]
          [slider-view @app-state]
          [board-view @app-state]
          [input-view @app-state value]])))

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


(println (str "Reloaded: " (.toLocaleTimeString (js/Date.))))

(defonce init-pieces
  [[\u265C \u265E \u265D \u265B \u265A \u265D \u265E \u265C]
   [\u265F \u265F \u265F \u265F \u265F \u265F \u265F \u265F]
   ["" "" "" "" "" "" "" ""]
