                                       (:src x) "highlight"))))
        (sort-by :key)))
 
-;; A Game component will wrap SquareBoard and supply it with the tile sequence
-;; it expects from a board and a phase. Remember we want to render new and
+;; A Game component will wrap SquareBoard and will supply the tile sequence it
+;; expects from a board and a phase. Remember we want to render new and
 ;; synthesized tiles on the :reveal phase, but not on :slide. The component will
 ;; also be responsible for showing a message when the game ends.
 


;; ### Rendering the board

;; The list below describes an iteration when the value for action binding is
;; :render. Given the initial state consist of a random initial board and the
;; :render action, this will take place at the very beginning.

;; - The board is rendered in the slide phase, and we wait a bit while the

;; updates the DOM it tries to do it in the most efficiently manner by recycling
;; 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.
;; Lucky for us, 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.

