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