 ;; rely on CSS transitions to animate the translation of the element as its
 ;; position changes over time. Without getting into much detail, when React
 ;; updates the DOM it tries to do it in the most efficiently manner by recycling
-;; what is already in the DOM. It does not provide (by default) any guarantee
-;; that the same DOM element will be used for our example div across render
-;; passes. Fortunately, the only reason React can't keep a mapping between the
-;; elements of our specification and the elements of the DOM is because it
-;; doesn't have a way to identify the elements of the specification. We can
-;; provide React the information it needs by assigning a key to our divs. The
+;; what is already there. It does not provide (by default) any guarantee that
+;; the same DOM node will be used for our example div across render passes.
+;; Fortunately, the only reason React can't keep a mapping between our
+;; specification and the DOM is that it doesn't have a way to identify the
+;; elements we specify. We can solve the problem if we provide React the
+;; information it needs by assigning a key to our divs. The
 ;; [official documentation](http://facebook.github.io/react/docs/reconciliation.html)
 ;; is a great place to learn more about React's reconciliation process.
 
 (defn pos-view
   "Returns a div wrapping content with positioning classes derived from pos,
-   which is a two-element vector containing a row and a column. Optionally, a
-   React key can be provided."
+   which is a two-element vector containing a row and a column number.
+   Optionally, a React key can be provided."
   ([pos content] (pos-view pos nil content))
   ([[i j] key content]
      (d/div {:className (str "pos pos-" i "-" j)
              :key key}
        content)))
 
-;; A square is just a div with the square class.
+;; A square is just a div with the 'square' class.
 
 ;;    <div class="square"></div>
 

       (fn [e] (put! c e)))
     c))

;; The second function will return a channel only with the events that we care
;; about, that is, keyup events of the document that happens when an arrow key
;; is pressed. Also, we would like something more descriptive than a raw DOM
;; event. We'll take every keyup event of the document, map it to its key code,
;; stop if they don't belong to an arrow key or map it to either :left, :up,
;; :right or :down when they do.

(defn keys-chan
  "Returns a channel of :left, :up, :right and :down events sourced from arrow

;; A line is a sequence that represents the flow of the tiles during a move. In
;; other words, is a row or a column of the board where the closest a square is
;; to edge of the board the tiles are sliding to, the sooner it appears in the
;; sequence. With that in mind, the 'slide and synth' of a whole board can be
;;  summarized as:

;; - Obtaining the lines. Rows are partitions of 4 elements of our board
;;   representation and columns are transposition of them. For the 'right' and
;;   'up' move, rows and columns need to be reversed to obtain the correct line.
;; - Slide and synth the lines.
;; - Reassemble the resulting sequences, that is rows or columns possibly
;;   reversed, back to our board representation.

(defn slide-synth
  "Returns the result of sliding and synthesizing the tiles of board in the
