Skip to content

Commit

Permalink
feat: add :random, :merged states and animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@WarFox
WarFox committed May 25, 2024
1 parent 833c87f commit 04a31bd
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 40 deletions.
10 changes: 5 additions & 5 deletions src/cljs_2048/board.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@

(defn set-tile
"Set value at given row and column of the board"
[board r c value]
[board r c value state]
(let [row (nth board r)
updated (assoc row c [value])]
updated (assoc row c [value state])]
(assoc board r updated)))

(defn get-tile
Expand All @@ -36,11 +36,11 @@
[r c]))

(defn random-tile
"Set 2 or 4 to random empty position of tile"
"Set 2 or 4 to random empty positions of tile"
[board]
(if-let [tiles (seq (empty-tiles board))]
(let [[r c] (rand-nth tiles)]
(set-tile board r c (random-fill)))
(set-tile board r c (random-fill) :random))
board))

(defn with-two-random-tiles
Expand Down Expand Up @@ -85,7 +85,7 @@
(= head (first remaining))
(let [sum (* 2 (first head))]
(re-frame/dispatch [::game-events/add-score sum])
(recur (rest remaining) (conj acc [sum])))
(recur (rest remaining) (conj acc [sum :merged])))

:else
(recur remaining (conj acc head)))))
Expand Down
12 changes: 11 additions & 1 deletion src/cljs_2048/views.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,17 @@
(defn tile-panel
[index [value state]]
^{:key index}
[:div {:class (str "tile tile-" value " tile-position-1-" (inc index))}
;; TODO tile-position-1 index needs row-index
[:div {:class (str "tile tile-" value " tile-position-1-" (inc index)
(cond
(= state :merged)
" tile-merged
"
(= state :random)
" tile-new"

:else
""))}
(if (zero? value) "" value)])

;; Panel used to show Score and Best score
Expand Down
23 changes: 23 additions & 0 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,29 @@
@apply sm:w-14 sm:h-14 md:w-28 md:h-28 flex items-center justify-center sm:text-xl md:text-3xl;
}

@keyframes appear {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes pop {
0% {
transform: scale(0);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

.tile-new {
animation: appear 200ms ease 100ms;
animation-fill-mode: backwards;
Expand Down
39 changes: 21 additions & 18 deletions test/cljs_2048/board_test.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@
(deftest set-tile
(let [board sut/initial-board]
(testing "Set value at given x and y"
(is (= (sut/set-tile board 1 2 4)
[[[0] [0] [0] [0]]
[[0] [0] [4] [0]]
[[0] [0] [0] [0]]
[[0] [0] [0] [0]]])))))
(is (= (sut/set-tile board 1 2 4 :state)
[[[0] [0] [0] [0]]
[[0] [0] [4 :state] [0]]
[[0] [0] [0] [0]]
[[0] [0] [0] [0]]])))))

(deftest get-tile
(let [board (sut/set-tile sut/initial-board 1 3 8)]
(let [board (sut/set-tile sut/initial-board 1 3 8 :state)]
(testing "Get tile value of given x and y"
(is (= (sut/get-tile board 1 3) [8])))))
(is (= (sut/get-tile board 1 3) [8 :state])))))

(deftest empty-tiles
(is (= (sut/empty-tiles [[[1] [2] [3] [0]]
Expand Down Expand Up @@ -91,39 +91,42 @@

(deftest combine-test
(is (= (sut/combine [[2] [2] [0] [0]])
[[4] [0] [0] [0]]))
[[4 :merged] [0] [0] [0]]))

(is (= (sut/combine [[4] [4] [2] [2]])
[[8] [4] [0] [0]]))
[[8 :merged] [4 :merged] [0] [0]]))

(is (= (sut/combine [[1] [2] [3] [4]])
[[1] [2] [3] [4]]))

(is (= (sut/combine [[4] [4] [4] [4]])
[[8] [8] [0] [0]]))
[[8 :merged] [8 :merged] [0] [0]]))

(is (= (sut/combine [[2] [0] [4] [4]])
[[2] [8] [0] [0]]))
[[2] [8 :merged] [0] [0]]))

(is (= (sut/combine [[0] [0] [4] [4]])
[[8] [0] [0] [0]]))
[[8 :merged] [0] [0] [0]]))

(is (= (sut/combine [[4] [4] [0] [4]])
[[8] [4] [0] [0]]))
[[8 :merged] [4] [0] [0]]))

(is (= (sut/combine [[4] [4] [8] [4]])
[[8 :merged] [8] [4] [0]]))

(is (= (sut/combine [[4] [2] [2] [0]])
[[4] [4] [0] [0]]))
[[4] [4 :merged] [0] [0]]))

(testing "map combine for a matrix"
(is (= (map sut/combine
[[[4] [4] [2] [2]]
[[6] [4] [2] [2]]
[[8] [8] [2] [0]]
[[6] [8] [2] [2]]])
[[[8] [4] [0] [0]]
[[6] [4] [4] [0]]
[[16] [2] [0] [0]]
[[6] [8] [4] [0]]]))))
[[[8 :merged] [4 :merged] [0] [0]]
[[6] [4] [4 :merged] [0]]
[[16 :merged] [2] [0] [0]]
[[6] [8] [4 :merged] [0]]]))))

(deftest reverse-test
(is (= (sut/reverse-board test-board)
Expand Down
65 changes: 49 additions & 16 deletions test/cljs_2048/game_test.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,31 +75,64 @@

(deftest move-left-and-combine
(is (= (sut/move-left test-board-3)
[[[8] [0] [0] [0]]
[[4] [8] [0] [0]]
[[8] [16] [0] [0]]
[[16] [8] [16] [0]]])))
[[[8] [0] [0] [0]]
[[4 :merged] [8] [0] [0]]
[[8 :merged] [16 :merged] [0] [0]]
[[16] [8] [16] [0]]])))

(deftest move-right-and-combine
(is (= (sut/move-right test-board-3)
[[[0] [0] [0] [8]]
[[0] [0] [4] [8]]
[[0] [0] [8] [16]]
[[0] [16] [8] [16]]])))
[[[0] [0] [0] [8]]
[[0] [0] [4 :merged] [8]]
[[0] [0] [8 :merged] [16 :merged]]
[[0] [16] [8] [16]]])))

(deftest move-up-and-combine
(is (= (sut/move-up test-board-3)
[[[4] [2] [2] [16]]
[[0] [4] [16] [8]]
[[0] [16] [0] [16]]
[[0] [0] [0] [0]]])))
[[[4] [2] [2] [16 :merged]]
[[0] [4] [16 :merged] [8]]
[[0] [16] [0] [16]]
[[0] [0] [0] [0]]])))

(deftest move-down-and-combine
(is (= (sut/move-down test-board-3)
[[[0] [0] [0] [0]]
[[0] [2] [0] [8]]
[[0] [4] [2] [16]]
[[4] [16] [16] [16]]])))
[[[0] [0] [0] [0]]
[[0] [2] [0] [8]]
[[0] [4] [2] [16 :merged]]
[[4] [16] [16 :merged] [16]]])))

(deftest move-down-and-combine-2
(is (= (sut/move-down [[[2] [4] [2] [2]]
[[4] [32] [8] [4]]
[[4] [4] [2] [8]]
[[4] [4] [16] [2]]])

[[[0] [0] [2] [2]]
[[2] [4] [8] [4]]
[[4] [32] [2] [8]]
[[8 :merged] [8 :merged] [16] [2]]])))

(deftest move-up-and-combine-2
(is (= (sut/move-up [[[2] [4] [2] [2]]
[[4] [32] [8] [4]]
[[4] [4] [2] [8]]
[[4] [4] [16] [2]]])

[[[2] [4] [2] [2]]
[[8 :merged] [32] [8] [4]]
[[4] [8 :merged] [2] [8]]
[[0] [0] [16] [2]]])))

(deftest move-left-and-combine-2
(is (= (sut/move-left [[[2] [4] [2] [2]]
[[4] [32] [8] [4]]
[[4] [4] [2] [8]]
[[4] [4] [16] [2]]])

[[[2] [4] [4 :merged] [0]]
[[4] [32] [8] [4]]
[[8 :merged] [2] [8] [0]]
[[8 :merged] [16] [2] [0]]])))

(deftest move-test
(testing "direction works!"
Expand Down

0 comments on commit 04a31bd

Please sign in to comment.