Animate draft picks

* Add a css animation when a draft pick is made * Skip updates in handle_info if draft pick is in the other league
axelclark · Mar 27, 2024 · a453f87 · a453f87
1 parent c61ebd5
commit a453f87
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 21 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -54,6 +54,13 @@ let liveSocket = new LiveSocket("/live", Socket, {
 window.addEventListener("phx:page-loading-start", (_info) => NProgress.start())
 window.addEventListener("phx:page-loading-stop", (_info) => NProgress.done())
 
+window.addEventListener(`phx:wiggle`, (e) => {
+  let el = document.getElementById(e.detail.id)
+  if (el) {
+    liveSocket.execJS(el, el.getAttribute("data-wiggle"))
+  }
+})
+
 // connect if there are any LiveViews on the page
 liveSocket.connect()
 

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -8,7 +8,22 @@ const path = require("path")
 module.exports = {
   content: ["./js/**/*.js", "../lib/ex338_web.ex", "../lib/ex338_web/**/*.*ex"],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        wiggle: {
+          "0%": { transform: "translateY(0px) scale(1,1)" },
+          "25%": {
+            transform: "translateY(-4px) scale(1.05,1.05)",
+            // indigo-100
+            background: "#e0e7ff",
+          },
+          "100%": { transform: "translateY(0px) scale(1,1)" },
+        },
+      },
+      animation: {
+        wiggle: "wiggle 0.5s linear 1 forwards",
+      },
+    },
   },
   plugins: [
     require("@tailwindcss/typography"),

diff --git a/lib/ex338_web/live/draft_pick_live/index.ex b/lib/ex338_web/live/draft_pick_live/index.ex
@@ -122,7 +122,10 @@ defmodule Ex338Web.DraftPickLive.Index do
       </thead>
       <tbody class="bg-white">
         <%= for draft_pick <- @draft_picks do %>
-          <tr>
+          <tr
+            id={"current-draft-pick-#{draft_pick.id}"}
+            data-wiggle={animate_wiggle("#current-draft-pick-#{draft_pick.id}")}
+          >
             <.legacy_td class="hidden sm:table-cell">
               <%= draft_pick.pick_number %>
             </.legacy_td>
@@ -225,7 +228,10 @@ defmodule Ex338Web.DraftPickLive.Index do
       </thead>
       <tbody class="bg-white">
         <%= for draft_pick <- @filtered_draft_picks do %>
-          <tr>
+          <tr
+            id={"draft-pick-#{draft_pick.id}"}
+            data-wiggle={animate_wiggle("#draft-pick-#{draft_pick.id}")}
+          >
             <.legacy_td class="hidden sm:table-cell">
               <%= draft_pick.pick_number %>
             </.legacy_td>
@@ -278,28 +284,28 @@ defmodule Ex338Web.DraftPickLive.Index do
 
   def handle_info({"draft_pick", [:draft_pick | _], draft_pick}, socket) do
     fantasy_league_id = socket.assigns.fantasy_league.id
-    new_data = DraftPicks.get_picks_for_league(fantasy_league_id)
-    filtered_draft_picks = filter_draft_picks(new_data.draft_picks, socket.assigns)
 
-    socket =
-      socket
-      |> assign(new_data)
-      |> assign(filtered_draft_picks: filtered_draft_picks)
-      |> maybe_put_flash(draft_pick, fantasy_league_id)
+    if draft_pick.fantasy_league_id == fantasy_league_id do
+      new_data = DraftPicks.get_picks_for_league(fantasy_league_id)
+      filtered_draft_picks = filter_draft_picks(new_data.draft_picks, socket.assigns)
 
-    {:noreply, socket}
-  end
-
-  defp maybe_put_flash(socket, %{fantasy_league_id: league_id} = draft_pick, league_id) do
-    put_flash(
-      socket,
-      :info,
-      "#{draft_pick.fantasy_team.team_name} selected #{draft_pick.fantasy_player.player_name}!"
-    )
+      socket =
+        socket
+        |> assign(new_data)
+        |> assign(filtered_draft_picks: filtered_draft_picks)
+        |> push_event("wiggle", %{id: "draft-pick-#{draft_pick.id}"})
+        |> push_event("wiggle", %{id: "current-draft-pick-#{draft_pick.id}"})
+        |> put_flash(
+          :info,
+          "#{draft_pick.fantasy_team.team_name} selected #{draft_pick.fantasy_player.player_name}!"
+        )
+
+      {:noreply, socket}
+    else
+      {:noreply, socket}
+    end
   end
 
-  defp maybe_put_flash(socket, _, _), do: socket
-
   @impl true
   def handle_event(
         "filter",
@@ -421,4 +427,8 @@ defmodule Ex338Web.DraftPickLive.Index do
 
     [{"All Sports", ""}] ++ options
   end
+
+  def animate_wiggle(element_id) do
+    JS.transition(%JS{}, "animate-wiggle", to: element_id, time: 500)
+  end
 end