fix: setup the board to start capturing extra metadata at tile level

Each tile in the board should hold metadata about it's state.
This is so that we can use it for doing animations or showing
something extra in the ui based on the state of the tile

src/cljs_2048/board.cljs

@@ -8,16 +8,16 @@
 (def random-fill #(rand-nth [2 2 2 4])) ;; Favor 2 for random filling
 
 (def initial-board
-  [[0 0 0 0]
-   [0 0 0 0]
-   [0 0 0 0]
-   [0 0 0 0]])
+  [[[0] [0] [0] [0]]
+   [[0] [0] [0] [0]]
+   [[0] [0] [0] [0]]
+   [[0] [0] [0] [0]]])
 
 (defn set-tile
   "Set value at given row and column of the board"
   [board r c value]
   (let [row (nth board r)
-        updated (assoc row c value)]
+        updated (assoc row c [value])]
     (assoc board r updated)))
 
 (defn get-tile
@@ -32,7 +32,7 @@
   [board]
   (for [r     (range rows-count)
         c     (range columns-count)
-        :when (zero? (get-tile board r c))]
+        :when (zero? (first (get-tile board r c)))]
     [r c]))
 
 (defn random-tile
@@ -66,27 +66,25 @@
 
 (defn fill-zeroes
   "If vector v's length is less than n, fill the remaining slots with 0.
-   Otherwise returns the v. Default fill-count is columns-count."
-  ([v]
-   (fill-zeroes v columns-count))
-  ([v n]
+   Otherwise returns the v."
+  [v n]
    (let [fill-count (- n (count v))]
-     (into v (repeat fill-count 0)))))
+     (into v (repeat fill-count [0]))))
 
 (defn combine
-  "Combines two equal tiles into one in the v and fills remaining with zeroes"
+  "Combines two equal tiles into one in the vector v and fills remaining with zeroes"
   [v]
   (loop [[head & remaining] v
          acc                []]
     (cond
       (empty? remaining)
-      (fill-zeroes (conj acc (if head head 0))) ;; head can be nil
+      (fill-zeroes (conj acc (if head head [0])) columns-count) ;; head can be nil
 
       (= head (first remaining))
-      (let [sum (* 2 head)]
+      (let [sum (+ (first head) (first head))]
         (when (pos? sum)
-          (re-frame/dispatch [::game-events/add-score sum]))
-        (recur (rest remaining) (conj acc sum)))
+           (re-frame/dispatch [::game-events/add-score sum]))
+        (recur (rest remaining) (conj acc [sum])))
 
       :else
       (recur remaining (conj acc head)))))
@@ -99,8 +97,8 @@
 (defn move-tiles-left
   "Move the tiles to left in v, by shifting value to empty tile"
   [v]
-  (-> (filterv pos? v)
-      (fill-zeroes)))
+  (-> (filterv #(pos? (first %)) v)
+      (fill-zeroes columns-count)))
 
 (defn stack-left
   [board]

src/cljs_2048/game_events.cljs

@@ -1,22 +1,25 @@
 (ns cljs-2048.game-events
   (:require
-   [day8.re-frame.tracing :refer-macros [fn-traced]]
    [re-frame.core :as re-frame]
    [cljs-2048.local-storage :as ls]))
 
-(re-frame/reg-event-db
- ::add-score
- (fn-traced
+(defn add-score
   [db [_ new-score]]
   (let [score      (+ new-score (:score db))
         high-score (max score (:high-score db))]
     (ls/set-high-score! high-score) ;; set high-score in local-storage
     (assoc db
            :score score
-           :high-score high-score))))
+           :high-score high-score)))
+
+(defn gameover
+  [db [_]]
+  (assoc db :gameover true))
+
+(re-frame/reg-event-db
+ ::add-score
+ add-score)
 
 (re-frame/reg-event-db
  ::gameover
- (fn-traced
-  [db [_]]
-  (assoc db :gameover true)))
+ gameover)

src/cljs_2048/views.cljs

@@ -28,9 +28,9 @@
 
 ;; Displaying the game tile
 (defn tile-panel
-  [index value]
+  [index [value state]]
   ^{:key index}
-  [:div {:class (str "tile tile-" value)}
+  [:div {:class (str "tile tile-" value " tile-position-1-" (inc index))}
    (if (zero? value) "" value)])
 
 ;; Panel used to show Score and Best score
@@ -51,13 +51,10 @@
   (let [board (re-frame/subscribe [::subs/board])] ;; Get the current state of the board
     [:div.board
      ;; [:pre (with-out-str (cljs.pprint/pprint @board))] ;; print the board in page for debugging
-     (map ;; Each row of the board
-      (fn [value]
-        [:div.row
-         (map-indexed ;; Each tile of the row
-          tile-panel
-          value)])
-      @board)
+     (map (fn [row] ;; Each row of the board
+            [:div.row
+             (map-indexed tile-panel row)]);; Each tile of the row
+          @board)
      [:br.clear]]))
 
 (defn gameover-panel []
@@ -76,7 +73,7 @@
   (let [gameover (re-frame/subscribe [::subs/gameover])]
     [:div.flex.flex-col.items-center
      (when @gameover (gameover-panel))
-     [:button.btn-primary.bg-blue-200 {:on-click #(re-frame/dispatch [::events/start-game])} "New Game"]
+     [:button.btn-primary {:on-click #(re-frame/dispatch [::events/start-game])} "New Game"]
      [board-panel]]))
 
 (defn header
@@ -86,7 +83,8 @@
 (defn main-panel
   []
   (let [name (re-frame/subscribe [::subs/name])]
-    [:div.container.mx-auto.center
+    [:div.relative.flex.min-h-screen.flex-col.justify-center.overflow-hidden.bg-gray-50.py-6.sm:py-12
+     [:div.container.mx-auto
      (header @name)
-     [score]
+     [score]]
      [game-panel]]))