From 7786e5b9d7643c6cdd20f3afc42b6fad34495103 Mon Sep 17 00:00:00 2001
From: claude <claude@adyrem.duckdns.org>
Date: Mon, 18 May 2026 12:18:21 +0200
Subject: [PATCH] Hold wheel position after spin instead of snapping back

---
 lib/mtg_wheel_web/live/wheel_live.ex | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/lib/mtg_wheel_web/live/wheel_live.ex b/lib/mtg_wheel_web/live/wheel_live.ex
index 5aa0cd3..69c60f9 100644
--- a/lib/mtg_wheel_web/live/wheel_live.ex
+++ b/lib/mtg_wheel_web/live/wheel_live.ex
@@ -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={["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 item <- @items do %>
@@ -106,11 +106,16 @@ defmodule MtgWheelWeb.WheelLive do
     """
   end
 
-  defp wheel_style(items, result, duration_ms) do
+  defp wheel_style(items, result, duration_ms, spinning) 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"
+
+    if spinning do
+      "--wheel-end: #{end_px}px; --wheel-duration: #{duration_ms}ms"
+    else
+      if result, do: "transform: translateY(#{end_px}px)", else: ""
+    end
   end
 
   defp color_icons(assigns) do