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

Hold wheel position after spin instead of snapping back

Browse Source
This commit is contained in:
claude
2026-05-18 12:18:21 +02:00
parent 5fd2ff27d2
commit 7786e5b9d7
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/mtg_wheel_web/live/wheel_live.ex
+7 -2
View File
@@ -79,7 +79,7 @@ defmodule MtgWheelWeb.WheelLive do
<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="relative w-28 h-28 rounded-full border-4 border-purple-600 overflow-hidden bg-gray-900 shadow-lg shadow-purple-950">
<div <div
class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]} class={["wheel-inner absolute top-0 left-0 right-0 flex flex-col items-center", @spinning && "spinning"]}
style={wheel_style(@items, @result, @duration)} style={wheel_style(@items, @result, @duration, @spinning)}
> >
<%= for _ <- 1..5 do %> <%= for _ <- 1..5 do %>
<%= for item <- @items do %> <%= for item <- @items do %>
@@ -106,11 +106,16 @@ defmodule MtgWheelWeb.WheelLive do
""" """
end end
defp wheel_style(items, result, duration_ms) do defp wheel_style(items, result, duration_ms, spinning) do
n = length(items) n = length(items)
idx = if result, do: Enum.find_index(items, &(&1 == result)) || 0, else: 0 idx = if result, do: Enum.find_index(items, &(&1 == result)) || 0, else: 0
end_px = -(3 * n + idx) * @item_height_px end_px = -(3 * n + idx) * @item_height_px
if spinning do
"--wheel-end: #{end_px}px; --wheel-duration: #{duration_ms}ms" "--wheel-end: #{end_px}px; --wheel-duration: #{duration_ms}ms"
else
if result, do: "transform: translateY(#{end_px}px)", else: ""
end
end end
defp color_icons(assigns) do defp color_icons(assigns) do