Merge pull request #14 from WarFox/animations

feat: add animations for scores, new tiles and merged tiles
WarFox · Dec 31, 2024 · b37ea92 · b37ea92
2 parents 6f9b048 + 613800d
commit b37ea92
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 81 deletions.
diff --git a/src/cljs_2048/events.cljs b/src/cljs_2048/events.cljs
@@ -7,20 +7,6 @@
    [day8.re-frame.tracing :refer-macros [fn-traced]]
    [re-frame.core :as re-frame]))
 
-(defn check-gameover
-  "Dispatch gameover if gameover. Returns the board"
-  [board]
-  (when (g/gameover? board)
-    (re-frame/dispatch [::game-events/gameover]))
-  board)
-
-(defn- move
-  "Make a move in the direction and check gameover"
-  [board direction]
-  (-> board
-      (g/move direction)
-      (check-gameover)))
-
 (re-frame/reg-event-db
  ::initialize-db
  (fn-traced
@@ -34,32 +20,13 @@
          :gameover false
          :score 0))
 
-(defn move-up
-  [{:keys [board] :as db} [_ _]]
-  (assoc db
-         :board (move board ::g/up)))
-
-(defn move-down
-  [{:keys [board] :as db} [_ _]]
-  (assoc db
-         :board (move board ::g/down)))
-
-(defn move-right
-  [{:keys [board] :as db} [_ _]]
-  (assoc db
-         :board (move board ::g/right)))
-
-(defn move-left
-  [{:keys [board] :as db} [_ _]]
-  (assoc db
-         :board (move board ::g/left)))
-
 (re-frame/reg-event-db ::start-game start-game)
 
-(re-frame/reg-event-db ::move-up move-up)
-
-(re-frame/reg-event-db ::move-down move-down)
-
-(re-frame/reg-event-db ::move-right move-right)
+(defn move
+  [{:keys [db]} [_ direction]]
+  (let [new-board (g/move (:board db) direction)]
+    {:db (assoc db
+                :board new-board)
+     :fx [(when (g/gameover? new-board) [:dispatch [::game-events/gameover]])]}))
 
-(re-frame/reg-event-db ::move-left move-left)
+(re-frame/reg-event-fx ::move move)
diff --git a/src/cljs_2048/game_events.cljs b/src/cljs_2048/game_events.cljs
@@ -10,16 +10,28 @@
     (ls/set-high-score! high-score) ;; set high-score in local-storage
     (assoc db
            :score score
-           :high-score high-score)))
+           :high-score high-score
+           :score-changed true
+           :high-score-changed (> high-score (:high-score db)))))
 
 (defn gameover
   [db [_]]
   (assoc db :gameover true))
 
-(re-frame/reg-event-db
- ::add-score
- add-score)
-
 (re-frame/reg-event-db
  ::gameover
  gameover)
+
+(re-frame/reg-event-db
+ ::clear-score-animations
+ (fn [db _]
+   (assoc db
+          :score-changed false
+          :high-score-changed false)))
+
+(re-frame/reg-event-fx
+  ::add-score
+  (fn [{:keys [db]} [_ new-score]]
+    {:db    (add-score db [_ new-score])
+     :dispatch-later [{:ms       600
+                       :dispatch [::clear-score-animations]}]}))
diff --git a/src/cljs_2048/subs.cljs b/src/cljs_2048/subs.cljs
@@ -26,3 +26,13 @@
  ::gameover
  (fn [db _]
    (:gameover db)))
+
+(re-frame/reg-sub
+ ::score-changed
+ (fn [db _]
+   (:score-changed db)))
+
+(re-frame/reg-sub
+ ::high-score-changed
+ (fn [db _]
+   (:high-score-changed db)))
diff --git a/src/cljs_2048/views.cljs b/src/cljs_2048/views.cljs
@@ -1,25 +1,26 @@
 (ns cljs-2048.views
   (:require
+   [cljs-2048.components :as components]
    [cljs-2048.events :as events]
+   [cljs-2048.game :as g]
    [cljs-2048.subs :as subs]
-   [cljs-2048.components :as components]
    [re-frame.core :as re-frame]
    [re-pressed.core :as rp]))
 
 (defn dispatch-keydown-rules
   []
   (re-frame/dispatch
    [::rp/set-keydown-rules
-    {:event-keys [[[::events/move-left]
+    {:event-keys [[[::events/move ::g/left]
                    [{:keyCode 37}]] ;; lef-arrow
 
-                  [[::events/move-up]
+                  [[::events/move ::g/up]
                    [{:keyCode 38}]] ;; up-arrow
 
-                  [[::events/move-right]
-                   [{:keyCode 39}]] ;; lef-arrow
+                  [[::events/move ::g/right]
+                   [{:keyCode 39}]] ;; right-arrow
 
-                  [[::events/move-down]
+                  [[::events/move ::g/down]
                    [{:keyCode 40}]] ;; down-arrow
                   ]
      :clear-keys
@@ -28,10 +29,11 @@
 
 ;; Panel used to show Score and Best score
 (defn score
-  [header value]
+  [header value score-changed? score-css]
   [:div {:class "text-xl sm:text-2xl px-2 sm:px-4 text-center rounded-sm bg-brown-500"}
-   [:div {:class "uppercase text-sm font-bold text-brown-200"} header]
-   [:div {:class "text-white font-bold"} value]])
+     [:div {:class "uppercase text-sm font-bold text-brown-200"} header]
+   [:div {:class ["text-white font-bold" (when score-changed? score-css)]}
+      value]])
 
 (defn btn-new-game
   []
@@ -55,7 +57,10 @@
   "Displaying the game tile"
   [row-index col-index [value state]]
   ^{:key col-index}
-   [:div {:class (str "transition-transform duration-300 ease-in-out tile-position-" row-index "-" col-index)} ;; TODO apply tile-position based on new position
+   [:div {:class (str "transition-transform duration-300 ease-in-out tile-position-" row-index "-" col-index) ;; TODO apply tile-position based on new position
+          :role "gridcell"
+          :aria-label (str "Tile " value)
+          :tabindex "0"}
    [:div {:class (str "text-5xl font-bold size-32 flex justify-center items-center rounded-md tile-" value
                       (cond
                         (= state :merged)
@@ -110,8 +115,14 @@
      [:div {:class "flex flex-row justify-center mt-5 rounded-md"}
        [:div {:class "text-5xl sm:text-7xl font-bold text-stone-600"} "2048"]
        [:div {:class "flex space-x-1 mx-4" :id "score-panel"}
-        (score ::score @(re-frame/subscribe [::subs/score]))
-        (score ::high-score @(re-frame/subscribe [::subs/high-score]))]
+        (score ::score
+                @(re-frame/subscribe [::subs/score])
+                @(re-frame/subscribe [::subs/score-changed])
+                "score-changed")
+        (score ::high-score
+                @(re-frame/subscribe [::subs/high-score])
+                @(re-frame/subscribe [::subs/high-score-changed])
+                "high-score-changed")]
 
       [:div
        [btn-new-game]]]

diff --git a/src/style.css b/src/style.css
@@ -5,7 +5,12 @@
 @keyframes appear {
   0% {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.3);
+  }
+
+  50% {
+    opacity: 0.5;
+    transform: scale(1.1);
   }
 
   100% {
@@ -16,7 +21,39 @@
 
 @keyframes pop {
   0% {
-    transform: scale(0);
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.4);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes pop-dance {
+  0% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: rotate(25deg);
+  }
+
+  50% {
+    transform: scale(1.8);
+  }
+
+  100% {
+    transform: scale(1) rotate(0);
+  }
+}
+
+@keyframes tile-merged {
+  0% {
+    transform: scale(1);
   }
 
   50% {
@@ -29,13 +66,19 @@
 }
 
 .tile-new {
-  animation: appear 200ms ease 100ms;
-  animation-fill-mode: backwards;
+  animation: appear 200ms ease-in-out;
 }
 
 .tile-merged {
-  animation: pop 200ms ease 100ms;
-  animation-fill-mode: backwards;
+  animation: tile-merged 200ms ease 100ms;
+}
+
+.score-changed {
+  animation: pop 200ms ease-in-out;
+}
+
+.high-score-changed {
+  animation: pop-dance 200ms ease-in-out;
 }
 
 /** Tile Colour Start **/
@@ -90,25 +133,33 @@
 
 /** Tile Colour End **/
 
-.github-corner:hover .octo-arm  {
-    animation:octocat-wave 560ms ease-in-out
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
 }
 
 @keyframes octocat-wave {
-    0%,100% {
-        transform:rotate(0)
-    }
-    20%,60% {
-        transform:rotate(-25deg)
-    } 40%,80% {
-        transform:rotate(10deg)}
-}
-
-@media (max-width:500px) {
-    .github-corner:hover .octo-arm {
-        animation:none
-    }
-    .github-corner .octo-arm {
-        animation:octocat-wave 560ms ease-in-out
-    }
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
 }