diff --git a/assets/js/app.js b/assets/js/app.js index fd2678df..82eb43b7 100644 --- 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 index 08401ff8..4fd1785c 100644 --- 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 index a665d42b..3c9d0387 100644 --- 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 <%= for draft_pick <- @draft_picks do %> - + <.legacy_td class="hidden sm:table-cell"> <%= draft_pick.pick_number %> @@ -225,7 +228,10 @@ defmodule Ex338Web.DraftPickLive.Index do <%= for draft_pick <- @filtered_draft_picks do %> - + <.legacy_td class="hidden sm:table-cell"> <%= draft_pick.pick_number %> @@ -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