claude/mtg_wheel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix slot values to match result, desync wheel animations

Browse Source
This commit is contained in:
claude
2026-05-18 12:16:56 +02:00
parent 598f0737a2
commit 5fd2ff27d2
2 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+3 -3
View File
@@ -102,14 +102,14 @@
/* Make LiveView wrapper divs transparent for layout */
[data-phx-session], [data-phx-teleported-src] { display: contents }
/* Spinning wheel animation — items repeated 5× in DOM, scroll through 4 full cycles */
/* Spinning wheel animation — end position and duration set per-wheel via CSS vars */
@keyframes spin-wheel {
0% { transform: translateY(0); }
100% { transform: translateY(-80%); }
100% { transform: translateY(var(--wheel-end, -80%)); }
}
.wheel-inner.spinning {
animation: spin-wheel 3s cubic-bezier(0.05, 0.8, 0.3, 1.0) forwards;
animation: spin-wheel var(--wheel-duration, 3s) cubic-bezier(0.17, 0.67, 0.35, 1.0) forwards;
}
.wheel-item {
lib/mtg_wheel_web/live/wheel_live.ex
+21 -7
View File
@@ -2,7 +2,8 @@ defmodule MtgWheelWeb.WheelLive do
use MtgWheelWeb, :live_view
alias MtgWheel.DeckGenerator
@spin_duration_ms 3000
@spin_duration_ms 3700
@item_height_px 112
@impl true
def mount(_params, _session, socket) do
@@ -37,10 +38,10 @@ defmodule MtgWheelWeb.WheelLive do
<h1 class="text-4xl font-bold tracking-tight text-purple-400">MTG Deck Wheel</h1>
<div class="grid grid-cols-2 gap-8 md:grid-cols-4">
<.wheel label="Budget" items={Enum.map(@budgets, &"$#{&1}")} result={@result && @result.budget} spinning={@spinning} />
<.wheel label="Archetype" items={@archetypes} result={@result && @result.archetype} spinning={@spinning} />
<.wheel label="Subtheme" items={@subthemes} result={@result && @result.subtheme} spinning={@spinning} />
<.wheel label="Colors" items={@color_combos} result={@result && @result.colors} spinning={@spinning} color?={true} />
<.wheel label="Budget" items={Enum.map(@budgets, &"$#{&1}")} result={@result && @result.budget} spinning={@spinning} duration={2500} />
<.wheel label="Archetype" items={@archetypes} result={@result && @result.archetype} spinning={@spinning} duration={2900} />
<.wheel label="Subtheme" items={@subthemes} result={@result && @result.subtheme} spinning={@spinning} duration={3300} />
<.wheel label="Colors" items={@color_combos} result={@result && @result.colors} spinning={@spinning} color?={true} duration={3600} />
</div>
<button
@@ -67,13 +68,19 @@ defmodule MtgWheelWeb.WheelLive do
end
defp wheel(assigns) do
assigns = assign_new(assigns, :color?, fn -> false end)
assigns =
assigns
|> assign_new(:color?, fn -> false end)
|> assign_new(:duration, fn -> 3000 end)
~H"""
<div class="flex flex-col items-center gap-2">
<span class="text-xs font-semibold uppercase tracking-widest text-gray-400"><%= @label %></span>
<div class="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950">
<div class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}>
<div
class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}
style={wheel_style(@items, @result, @duration)}
>
<%= for _ <- 1..5 do %>
<%= for item <- @items do %>
<div class="wheel-item flex-shrink-0 w-full h-28 flex items-center justify-center text-xs font-bold text-center px-1">
@@ -99,6 +106,13 @@ defmodule MtgWheelWeb.WheelLive do
"""
end
defp wheel_style(items, result, duration_ms) do
n = length(items)
idx = if result, do: Enum.find_index(items, &(&1 == result)) || 0, else: 0
end_px = -(3 * n + idx) * @item_height_px
"--wheel-end: #{end_px}px; --wheel-duration: #{duration_ms}ms"
end
defp color_icons(assigns) do
assigns = assign_new(assigns, :size, fn -> "md" end)