Update pages/GameLucky.tsx

pages/GameLucky.tsx

@@ -70,29 +70,33 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
         const angle = (seg.weight / totalWeight) * 360;
         const start = currentAngle;
         currentAngle += angle;
-        return { ...seg, startAngle: start, endAngle: currentAngle, angle };
+        // Center angle is where the pointer should land for this segment
+        const center = start + (angle / 2);
+        return { ...seg, startAngle: start, endAngle: currentAngle, angle, centerAngle: center };
     });
 
     useEffect(() => {
         if (result && isSpinning) {
             // Find target slice index
-            const targetIndex = slices.findIndex(s => s.name === result.prize);
-            // Default to first if not found (shouldn't happen if config syncs)
-            const safeIndex = targetIndex >= 0 ? targetIndex : slices.length - 1;
-            const targetSlice = slices[safeIndex];
+            const targetSlice = slices.find(s => s.name === result.prize) || slices[slices.length - 1];
             
-            // Calculate center of target slice
-            const centerAngle = targetSlice.startAngle + (targetSlice.angle / 2);
+            // Logic: Rotate the POINTER to align with the slice center
+            // Base rounds + Target Angle
+            // We need to ensure we always spin forward (clockwise)
+            const minSpins = 5; 
+            const baseRotation = Math.floor(rotation / 360) * 360 + (minSpins * 360);
             
-            // We want this centerAngle to align with 0 (top) after rotation
-            // Logic: Current rotation -> Add 5 full spins (1800) -> Add offset to align
-            // To align X at top (0 deg), we need to rotate -(X). 
-            // SVG coordinate system usually 0 is right (3 o'clock). 
-            // We rotate wheel -90deg initially so 0 is top.
-            // Target rotation = (360 - centerAngle).
+            // Current effective angle
+            const currentMod = rotation % 360;
+            const targetMod = targetSlice.centerAngle;
             
-            const spinRounds = 5 * 360; 
-            const finalRotation = rotation + spinRounds + (360 - centerAngle);
+            let diff = targetMod - currentMod;
+            if (diff <= 0) diff += 360; // Ensure positive delta for clockwise spin
+            
+            // Add a little randomness within the slice (-40% to +40% width) to simulate real physics
+            const jitter = (Math.random() - 0.5) * (targetSlice.angle * 0.8);
+            
+            const finalRotation = rotation + (minSpins * 360) + diff + jitter;
             
             setRotation(finalRotation);
         }
@@ -106,18 +110,10 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center h-full w-full max-w-lg mx-auto p-4">
-            <div className="relative w-full aspect-square max-w-[400px]">
-                {/* Pointer */}
-                <div className="absolute -top-6 left-1/2 -translate-x-1/2 z-20 text-red-600 drop-shadow-lg animate-bounce">
-                    <ArrowDown size={40} fill="currentColor" strokeWidth={2} stroke="white"/>
-                </div>
-
-                {/* Wheel */}
-                <div 
-                    className="w-full h-full rounded-full border-8 border-yellow-400 shadow-2xl overflow-hidden relative transition-transform duration-[4000ms] cubic-bezier(0.2, 0.8, 0.2, 1)"
-                    style={{ transform: `rotate(${rotation}deg)` }}
-                >
+        <div className="flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto p-4">
+            <div className="relative w-full aspect-square max-w-[500px] md:max-w-[600px]">
+                {/* Wheel (Static Background) */}
+                <div className="w-full h-full rounded-full border-8 border-yellow-400 shadow-2xl overflow-hidden relative bg-white">
                     <svg viewBox="-1 -1 2 2" style={{ transform: 'rotate(-90deg)' }} className="w-full h-full">
                         {slices.map((slice, i) => {
                             // Calculate SVG path
@@ -136,13 +132,14 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
                                         <text 
                                             x="0" y="0" 
                                             fill="white" 
-                                            fontSize="0.1" 
+                                            fontSize="0.08" 
                                             fontWeight="bold" 
                                             textAnchor="middle" 
                                             dominantBaseline="middle"
                                             transform="rotate(90)"
+                                            style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.3)' }}
                                         >
-                                            {slice.name.length > 5 ? slice.name.substring(0,4)+'..' : slice.name}
+                                            {slice.name.length > 6 ? slice.name.substring(0,5)+'..' : slice.name}
                                         </text>
                                     </g>
                                 </g>
@@ -151,12 +148,29 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
                     </svg>
                 </div>
                 
-                {/* Center Button */}
-                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+                {/* Spinning Pointer Container (Centered) */}
+                <div 
+                    className="absolute inset-0 pointer-events-none flex items-center justify-center z-20"
+                    style={{ 
+                        transform: `rotate(${rotation}deg)`,
+                        transition: isSpinning ? 'transform 4s cubic-bezier(0.2, 0.8, 0.2, 1)' : 'none'
+                    }}
+                >
+                    {/* The Needle Graphic (Extends UP from center) */}
+                    <div className="relative w-0 h-0 -mt-[35%]">
+                        {/* Needle Body */}
+                        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-4 md:w-6 h-32 md:h-48 bg-red-600 rounded-t-full shadow-lg border-2 border-white origin-bottom"></div>
+                        {/* Needle Base Decoration */}
+                        <div className="absolute bottom-[-10px] left-1/2 -translate-x-1/2 w-8 h-8 md:w-10 md:h-10 bg-red-700 rounded-full border-2 border-white shadow-md"></div>
+                    </div>
+                </div>
+
+                {/* Center Button (Static Pivot) */}
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 pointer-events-auto">
                     <button 
                         onClick={onSpin}
                         disabled={isSpinning}
-                        className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-b from-yellow-300 to-yellow-500 rounded-full border-4 border-white shadow-xl flex items-center justify-center font-black text-red-600 text-lg md:text-xl hover:scale-105 active:scale-95 disabled:grayscale transition-all"
+                        className="w-16 h-16 md:w-20 md:h-20 bg-gradient-to-b from-yellow-300 to-yellow-500 rounded-full border-4 border-white shadow-[0_4px_10px_rgba(0,0,0,0.3)] flex items-center justify-center font-black text-red-600 text-lg md:text-xl hover:scale-105 active:scale-95 disabled:grayscale transition-all active:shadow-inner"
                     >
                         {isSpinning ? '...' : '抽奖'}
                     </button>