Update pages/GameLucky.tsx

pages/GameLucky.tsx

@@ -70,7 +70,7 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
         const angle = (seg.weight / totalWeight) * 360;
         const start = currentAngle;
         currentAngle += angle;
-        // Center angle is where the pointer should land for this segment
+        // Center angle relative to start of wheel (0 deg)
         const center = start + (angle / 2);
         return { ...seg, startAngle: start, endAngle: currentAngle, angle, centerAngle: center };
     });
@@ -80,23 +80,30 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
             // Find target slice index
             const targetSlice = slices.find(s => s.name === result.prize) || slices[slices.length - 1];
             
-            // Logic: Rotate the POINTER to align with the slice center
-            // Base rounds + Target Angle
-            // We need to ensure we always spin forward (clockwise)
+            // LOGIC: The POINTER is fixed at TOP (0 deg or 360 deg).
+            // We need to rotate the WHEEL so that the Target Slice center hits 0 deg.
+            // Target Rotation = (360 - TargetSliceCenter) + FullSpins.
+            
             const minSpins = 5; 
-            const baseRotation = Math.floor(rotation / 360) * 360 + (minSpins * 360);
+            const spinAngle = minSpins * 360;
+            
+            // Calculate where we need to land relative to 0
+            // Since SVG 0 starts at Top (after -90deg rotation), 
+            // if we rotate by (360 - centerAngle), that slice will be at Top.
+            const targetLandingAngle = 360 - targetSlice.centerAngle;
             
-            // Current effective angle
+            // Current Rotation Modulo
             const currentMod = rotation % 360;
-            const targetMod = targetSlice.centerAngle;
             
-            let diff = targetMod - currentMod;
-            if (diff <= 0) diff += 360; // Ensure positive delta for clockwise spin
+            // Calculate forward distance to target
+            let distance = targetLandingAngle - currentMod;
+            if (distance < 0) distance += 360; // Ensure positive to spin clockwise
             
-            // Add a little randomness within the slice (-40% to +40% width) to simulate real physics
+            // Add slight randomness within the slice (-40% to +40% width)
+            // Note: If we add angle, we shift the slice CW, meaning pointer hits earlier (CCW shift relative to slice)
             const jitter = (Math.random() - 0.5) * (targetSlice.angle * 0.8);
             
-            const finalRotation = rotation + (minSpins * 360) + diff + jitter;
+            const finalRotation = rotation + spinAngle + distance + jitter;
             
             setRotation(finalRotation);
         }
@@ -110,10 +117,16 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
     };
 
     return (
-        <div className="flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto p-4">
+        <div className="flex flex-col items-center justify-center h-full w-full max-w-3xl 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">
+                {/* 1. Wheel Container (Rotates) */}
+                <div 
+                    className="w-full h-full rounded-full border-8 border-yellow-400 shadow-2xl overflow-hidden relative bg-white"
+                    style={{ 
+                        transform: `rotate(${rotation}deg)`,
+                        transition: isSpinning ? 'transform 4s cubic-bezier(0.15, 0.85, 0.35, 1)' : 'none'
+                    }}
+                >
                     <svg viewBox="-1 -1 2 2" style={{ transform: 'rotate(-90deg)' }} className="w-full h-full">
                         {slices.map((slice, i) => {
                             // Calculate SVG path
@@ -148,29 +161,43 @@ const LuckyWheel = ({ config, isSpinning, result, onSpin }: {
                     </svg>
                 </div>
                 
-                {/* 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>
+                {/* 2. Static Pointer (Fixed Overlay) */}
+                <div className="absolute inset-0 pointer-events-none z-20 flex justify-center">
+                    {/* Container spanning from top to center (height 50%) */}
+                    <div className="relative w-10 md:w-14 h-[50%]">
+                        {/* 
+                           The Pointer Shape: 
+                           A long triangle stretching from the bottom (center of wheel) to the top (edge).
+                           Using SVG to ensure perfect sharpness and responsiveness.
+                        */}
+                        <svg 
+                            viewBox="0 0 40 300" 
+                            preserveAspectRatio="none" 
+                            className="w-full h-full drop-shadow-xl"
+                            style={{ filter: 'drop-shadow(0px 4px 4px rgba(0,0,0,0.4))' }}
+                        >
+                            {/* Gradient Def */}
+                            <defs>
+                                <linearGradient id="pointerGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+                                    <stop offset="0%" stopColor="#dc2626" />
+                                    <stop offset="50%" stopColor="#ef4444" />
+                                    <stop offset="100%" stopColor="#b91c1c" />
+                                </linearGradient>
+                            </defs>
+                            {/* Triangle Path: Top-Center (20,0) -> Bottom-Right (40,300) -> Bottom-Left (0,300) */}
+                            <path d="M 20 0 L 40 300 L 0 300 Z" fill="url(#pointerGrad)" stroke="white" strokeWidth="2" />
+                            {/* Inner Highlight line for 3D effect */}
+                            <path d="M 20 0 L 20 300" stroke="rgba(255,255,255,0.3)" strokeWidth="1" />
+                        </svg>
                     </div>
                 </div>
 
-                {/* Center Button (Static Pivot) */}
+                {/* 3. 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-[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"
+                        className="w-20 h-20 md:w-24 md:h-24 bg-gradient-to-b from-yellow-300 to-yellow-500 rounded-full border-4 border-white shadow-[0_4px_15px_rgba(0,0,0,0.4)] flex items-center justify-center font-black text-red-600 text-xl md:text-2xl hover:scale-105 active:scale-95 disabled:grayscale transition-all active:shadow-inner"
                     >
                         {isSpinning ? '...' : '抽奖'}
                     </button>