 (ns chessground.ui
   (:require [cljs.core.async :as a]
             [chessground.common :as common :refer [pp]]
-            [chessground.react :as react]
             [chessground.data :as data]
             [chessground.chess :as chess]
             [chessground.premove :as premove]
-            [chessground.drag :as drag]
-            [chessground.api :as api])
+            [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")]
-    (str (aget piece "color") (aget piece "role") (aget piece "draggable?"))))
+    (.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))))
+  (fn [k] (not (== (aget prev k) (aget next k)))))
 
 (def ^private piece-component
   (js/React.createClass

        chess (get app :chess)
        draggable-color (data/draggable-color app)
        last-move (array-of (get app :last-move))
        selected (array-of (get app :selected))
        check (array-of (get app :check))
        current-premove (array-of (get (get app :premovable) :current))
        move-dests (array-of (when-let [orig (get app :selected)]
                               (when (data/movable? app orig)

                      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) "%")]
                  (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
