                       x (inc (.indexOf "abcdefgh" (get key 0)))
                       y (js/parseInt (get key 1))
                       style-x (str (* (dec x) 12.5) "%")
-                      style-y (str (* (dec y) 12.5) "%")
-                      style (if white?
-                              #js {"left" style-x "bottom" style-y}
-                              #js {"right" style-x "top" style-y})
-                      coord-x (when (= y (if white? 1 8)) (get key 0))
-                      coord-y (when (= x (if white? 8 1)) y)
-                      classes #js {"cg-square" true
-                                   "selected" (read "selected?")
-                                   "check" (read "check?")
-                                   "last-move" (read "last-move?")
-                                   "move-dest" (read "move-dest?")
-                                   "premove-dest" (read "premove-dest?")
-                                   "current-premove" (read "current-premove?")}]
-                  (react/div #js {:style style
-                                  :className (react/class-set classes)
-                                  :data-key key
-                                  :data-coord-x coord-x
-                                  :data-coord-y coord-y}
-                             (when-let [piece (read "piece")]
-                               (piece-component piece))))))}))
+                      style-y (str (* (dec y) 12.5) "%")]
+                  (div #js
+                       {:style (if white?
+                                 #js {"left" style-x "bottom" style-y}
+                                 #js {"right" style-x "top" style-y})
+                        :className (class-set #js {"cg-square" true
+                                                   "selected" (read "selected?")
+                                                   "check" (read "check?")
+                                                   "last-move" (read "last-move?")
+                                                   "move-dest" (read "move-dest?")
+                                                   "premove-dest" (read "premove-dest?")
+                                                   "current-premove" (read "current-premove?")})
+                        :data-key key
+                        :data-coord-x (when (== y (if white? 1 8)) (get key 0))
+                        :data-coord-y (when (== x (if white? 8 1)) y)}
+                       (when-let [piece (read "piece")]
+                         (piece-component piece))))))}))
 
 (def ^private board-component
   (js/React.createClass

     :render
     (fn []
       (this-as this
                (react/div #js {:className (str "cg-piece" " "
                                                (aget (.-props this) "color") " "
                                                (aget (.-props this) "role"))})))}))

(def ^private square-component
  (js/React.createClass

(ns chessground.ui
  (:require [cljs.core.async :as a]
            [chessground.common :as common :refer [pp]]
            [chessground.data :as data]
            [chessground.chess :as chess]
            [chessground.premove :as premove]
            [chessground.drag :as drag])
  (:require-macros [cljs.core.async.macros :as am]))

(def ^private dom (.-DOM js/React))

(def ^private div (.-div dom))

(defn- class-set [obj] (-> obj js/Object.keys (.filter #(aget obj %)) (.join " ")))

(defn- piece-hash [props]
  (when-let [piece (aget props "piece")]
    (.join #js [(aget piece "color") (aget piece "role") (aget piece "draggable?")])))

(defn- make-diff [prev next]
  (fn [k] (not (== (aget prev k) (aget next k)))))

(def ^private piece-component
  (js/React.createClass
