Upload 45 files

pages/GameLucky.tsx

@@ -1,11 +1,12 @@
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { LuckyDrawConfig, Student, LuckyPrize } from '../types';
-import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle, RefreshCcw, HelpCircle, Maximize, Minimize } from 'lucide-react';
+import { Gift, Settings, Loader2, Save, Trash2, X, UserCircle, RefreshCcw, HelpCircle, Maximize, Minimize, Disc, LayoutGrid, ArrowDown } from 'lucide-react';
 import { Emoji } from '../components/Emoji';
 
+// --- Card Component ---
 const FlipCard = ({ index, prize, onFlip, isRevealed, activeIndex }: { index: number, prize: string, onFlip: (idx: number) => void, isRevealed: boolean, activeIndex: number | null }) => {
   const showBack = isRevealed && activeIndex === index;
   
@@ -29,6 +30,142 @@ const FlipCard = ({ index, prize, onFlip, isRevealed, activeIndex }: { index: nu
   );
 };
 
+// --- Wheel Component ---
+const WHEEL_COLORS = ['#ef4444', '#f97316', '#eab308', '#84cc16', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899'];
+
+const LuckyWheel = ({ config, isSpinning, result, onSpin }: { 
+    config: LuckyDrawConfig, 
+    isSpinning: boolean, 
+    result: {prize: string} | null,
+    onSpin: () => void 
+}) => {
+    const [rotation, setRotation] = useState(0);
+    
+    // Construct Segments (Config Prizes + Consolation)
+    const segments = useMemo(() => {
+        const list = config.prizes.map((p, i) => ({
+            name: p.name,
+            weight: p.probability,
+            color: WHEEL_COLORS[i % WHEEL_COLORS.length],
+            isConsolation: false
+        }));
+        
+        // Add Consolation Segment
+        if ((config.consolationWeight || 0) > 0 || list.length === 0) {
+            list.push({
+                name: config.defaultPrize || '再接再厉',
+                weight: config.consolationWeight || 10, // Default to 10 if 0 but needed
+                color: '#94a3b8', // Grey for consolation
+                isConsolation: true
+            });
+        }
+        return list;
+    }, [config]);
+
+    const totalWeight = segments.reduce((acc, s) => acc + s.weight, 0);
+    
+    // Calculate Slices
+    let currentAngle = 0;
+    const slices = segments.map(seg => {
+        const angle = (seg.weight / totalWeight) * 360;
+        const start = currentAngle;
+        currentAngle += angle;
+        return { ...seg, startAngle: start, endAngle: currentAngle, angle };
+    });
+
+    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];
+            
+            // Calculate center of target slice
+            const centerAngle = targetSlice.startAngle + (targetSlice.angle / 2);
+            
+            // 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).
+            
+            const spinRounds = 5 * 360; 
+            const finalRotation = rotation + spinRounds + (360 - centerAngle);
+            
+            setRotation(finalRotation);
+        }
+    }, [result, isSpinning]);
+
+    // SVG Path Generator for Slice
+    const getCoordinatesForPercent = (percent: number) => {
+        const x = Math.cos(2 * Math.PI * percent);
+        const y = Math.sin(2 * Math.PI * percent);
+        return [x, y];
+    };
+
+    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)` }}
+                >
+                    <svg viewBox="-1 -1 2 2" style={{ transform: 'rotate(-90deg)' }} className="w-full h-full">
+                        {slices.map((slice, i) => {
+                            // Calculate SVG path
+                            const start = slice.startAngle / 360;
+                            const end = slice.endAngle / 360;
+                            const [startX, startY] = getCoordinatesForPercent(end); // Clockwise
+                            const [endX, endY] = getCoordinatesForPercent(start);
+                            const largeArcFlag = slice.angle > 180 ? 1 : 0;
+                            const pathData = `M 0 0 L ${startX} ${startY} A 1 1 0 ${largeArcFlag} 0 ${endX} ${endY} Z`;
+
+                            return (
+                                <g key={i}>
+                                    <path d={pathData} fill={slice.color} stroke="white" strokeWidth="0.01" />
+                                    {/* Text Label - Midpoint */}
+                                    <g transform={`rotate(${(slice.startAngle + slice.endAngle)/2}) translate(0.6)`}>
+                                        <text 
+                                            x="0" y="0" 
+                                            fill="white" 
+                                            fontSize="0.1" 
+                                            fontWeight="bold" 
+                                            textAnchor="middle" 
+                                            dominantBaseline="middle"
+                                            transform="rotate(90)"
+                                        >
+                                            {slice.name.length > 5 ? slice.name.substring(0,4)+'..' : slice.name}
+                                        </text>
+                                    </g>
+                                </g>
+                            );
+                        })}
+                    </svg>
+                </div>
+                
+                {/* Center Button */}
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+                    <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"
+                    >
+                        {isSpinning ? '...' : '抽奖'}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
 export const GameLucky: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [luckyConfig, setLuckyConfig] = useState<LuckyDrawConfig | null>(null);
@@ -39,9 +176,14 @@ export const GameLucky: React.FC = () => {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
+  // Game State
+  const [viewMode, setViewMode] = useState<'CARD' | 'WHEEL'>('CARD'); // New: Switch modes
   const [drawResult, setDrawResult] = useState<{prize: string, rewardType?: string} | null>(null);
+  
+  // Card Mode State
   const [activeCardIndex, setActiveCardIndex] = useState<number | null>(null);
-  const [isFlipping, setIsFlipping] = useState(false);
+  // Wheel Mode State
+  const [isWheelSpinning, setIsWheelSpinning] = useState(false);
 
   const currentUser = api.auth.getCurrentUser();
   const isTeacher = currentUser?.role === 'TEACHER';
@@ -98,33 +240,42 @@ export const GameLucky: React.FC = () => {
     finally { setLoading(false); }
   };
 
-  const handleDraw = async (index: number) => {
-     if (isFlipping) return;
+  // Unified Draw Handler
+  const executeDraw = async (triggerIndex?: number) => {
+     const isBusy = viewMode === 'CARD' ? activeCardIndex !== null : isWheelSpinning;
+     if (isBusy) return;
+
      const targetId = isTeacher ? proxyStudentId : (studentInfo?._id || String(studentInfo?.id));
-     
      if (!targetId) return alert(isTeacher ? '请先在右侧选择要代抽的学生' : '学生信息未加载');
      if (!studentInfo || (studentInfo.drawAttempts || 0) <= 0) return alert('抽奖次数不足！');
 
-     setIsFlipping(true);
-     setActiveCardIndex(index); 
+     // Set Loading State
+     if (viewMode === 'CARD' && triggerIndex !== undefined) setActiveCardIndex(triggerIndex);
+     if (viewMode === 'WHEEL') setIsWheelSpinning(true);
 
      try {
         const res = await api.games.drawLucky(targetId);
-        setDrawResult(res);
+        setDrawResult(res); // Wheel will react to this change
         setStudentInfo(prev => prev ? ({ ...prev, drawAttempts: (prev.drawAttempts || 0) - 1 }) : null);
         
+        // Wait for animation to finish
+        const delay = viewMode === 'WHEEL' ? 4500 : 1500; // Wheel spins for 4s, Cards flip for 1s
+
         setTimeout(() => {
-           if (res.rewardType !== 'CONSOLATION') {
-               alert(`🎁 恭喜！抽中了：${res.prize}`);
-           }
-           setIsFlipping(false);
+           // Show Result
+           const msg = res.rewardType !== 'CONSOLATION' ? `🎁 恭喜！抽中了：${res.prize}` : `💪 ${res.prize}`;
+           alert(msg);
+           
+           // Reset State
            setDrawResult(null);
            setActiveCardIndex(null);
-        }, 2000);
+           setIsWheelSpinning(false);
+        }, delay);
+
      } catch (e: any) {
         alert(e.message || '抽奖失败，请稍后重试');
-        setIsFlipping(false);
         setActiveCardIndex(null);
+        setIsWheelSpinning(false);
      }
   };
 
@@ -147,27 +298,34 @@ export const GameLucky: React.FC = () => {
             {isFullscreen ? <Minimize size={20} className="text-gray-700"/> : <Maximize size={20} className="text-gray-700"/>}
         </button>
 
-        {/* Left: Red Packet Grid */}
-        <div className="flex-1 overflow-y-auto p-4 md:p-8 custom-scrollbar order-1 md:order-1">
-            <div className={`grid gap-2 md:gap-6 w-full max-w-5xl mx-auto transition-all place-content-center ${
-                // Mobile: Use 3 cols if count > 4 to save space
-                ((luckyConfig.cardCount || 9) <= 4 ? 'grid-cols-2 ' : 'grid-cols-3 ') +
-                // Desktop: Keep existing logic
-                ((luckyConfig.cardCount || 9) <= 4 ? 'md:grid-cols-3' :
-                (luckyConfig.cardCount || 9) <= 6 ? 'md:grid-cols-3 lg:grid-cols-4' :
-                'md:grid-cols-4 lg:grid-cols-5')
-            }`}>
-                {Array.from({ length: luckyConfig.cardCount || 9 }).map((_, i) => (
-                    <FlipCard 
-                        key={i}
-                        index={i}
-                        prize={drawResult ? drawResult.prize : '???'} 
-                        onFlip={handleDraw} 
-                        isRevealed={activeCardIndex === i && !!drawResult}
-                        activeIndex={activeCardIndex}
-                    />
-                ))}
-            </div>
+        {/* LEFT: GAME AREA (Card Grid OR Wheel) */}
+        <div className="flex-1 overflow-y-auto p-4 md:p-8 custom-scrollbar order-1 md:order-1 flex flex-col justify-center">
+            {viewMode === 'CARD' ? (
+                <div className={`grid gap-2 md:gap-6 w-full max-w-5xl mx-auto transition-all place-content-center ${
+                    ((luckyConfig.cardCount || 9) <= 4 ? 'grid-cols-2 ' : 'grid-cols-3 ') +
+                    ((luckyConfig.cardCount || 9) <= 4 ? 'md:grid-cols-3' :
+                    (luckyConfig.cardCount || 9) <= 6 ? 'md:grid-cols-3 lg:grid-cols-4' :
+                    'md:grid-cols-4 lg:grid-cols-5')
+                }`}>
+                    {Array.from({ length: luckyConfig.cardCount || 9 }).map((_, i) => (
+                        <FlipCard 
+                            key={i}
+                            index={i}
+                            prize={drawResult ? drawResult.prize : '???'} 
+                            onFlip={executeDraw} 
+                            isRevealed={activeCardIndex === i && !!drawResult}
+                            activeIndex={activeCardIndex}
+                        />
+                    ))}
+                </div>
+            ) : (
+                <LuckyWheel 
+                    config={luckyConfig} 
+                    isSpinning={isWheelSpinning}
+                    result={drawResult}
+                    onSpin={() => executeDraw()}
+                />
+            )}
         </div>
 
         {/* Right/Bottom: Controls */}
@@ -201,6 +359,22 @@ export const GameLucky: React.FC = () => {
 
                 {isTeacher && (
                     <div className="space-y-3 md:space-y-4">
+                        {/* Mode Switcher (Teacher Only) */}
+                        <div className="bg-gray-100 p-1 rounded-lg flex text-xs font-bold">
+                            <button 
+                                onClick={() => setViewMode('CARD')} 
+                                className={`flex-1 py-2 rounded flex items-center justify-center transition-all ${viewMode==='CARD' ? 'bg-white shadow text-red-600' : 'text-gray-500'}`}
+                            >
+                                <LayoutGrid size={14} className="mr-1"/> 翻红包
+                            </button>
+                            <button 
+                                onClick={() => setViewMode('WHEEL')} 
+                                className={`flex-1 py-2 rounded flex items-center justify-center transition-all ${viewMode==='WHEEL' ? 'bg-white shadow text-red-600' : 'text-gray-500'}`}
+                            >
+                                <Disc size={14} className="mr-1"/> 大转盘
+                            </button>
+                        </div>
+
                         <div>
                             <label className="text-xs font-bold text-gray-500 uppercase block mb-1">选择代抽学生</label>
                             <div className="relative">
@@ -231,7 +405,7 @@ export const GameLucky: React.FC = () => {
             <div className="fixed inset-0 bg-black/60 z-[1000] flex items-center justify-center p-4 backdrop-blur-sm">
                 <div className="bg-white rounded-2xl w-full max-w-4xl h-[90vh] flex flex-col shadow-2xl animate-in zoom-in-95">
                     <div className="p-6 border-b border-gray-100 flex justify-between items-center">
-                        <h3 className="text-xl font-bold text-gray-800">红包奖池配置 - {currentClassName}</h3>
+                        <h3 className="text-xl font-bold text-gray-800">奖池配置 - {currentClassName}</h3>
                         <button onClick={() => setIsSettingsOpen(false)}><X size={24} className="text-gray-400 hover:text-gray-600"/></button>
                     </div>
                     
@@ -262,7 +436,7 @@ export const GameLucky: React.FC = () => {
                                    value={luckyConfig.consolationWeight || 0}
                                    onChange={e => setLuckyConfig({...luckyConfig, consolationWeight: Number(e.target.value)})}
                                 />
-                                <span className="text-xs text-gray-500">设为0则表示百分百中奖(只要有库存)</span>
+                                <span className="text-xs text-gray-500">此权重将作为大转盘中的灰色区域占比</span>
                              </div>
                         </div>
 

pages/Games.tsx

@@ -43,7 +43,7 @@ export const Games: React.FC = () => {
                      🏔️ 群岳争锋
                   </button>
                   <button onClick={() => setActiveGame('lucky')} className={`px-4 py-1.5 rounded-xl text-sm font-bold transition-all whitespace-nowrap ${activeGame === 'lucky' ? 'bg-red-100 text-red-700 border-2 border-red-200 shadow-sm' : 'text-gray-500 hover:bg-white hover:shadow-sm border-2 border-transparent'}`}>
-                     🧧 幸运红包
+                     🧧 幸运抽奖
                   </button>
                   <button onClick={() => setActiveGame('random')} className={`px-4 py-1.5 rounded-xl text-sm font-bold transition-all whitespace-nowrap ${activeGame === 'random' ? 'bg-yellow-100 text-yellow-700 border-2 border-yellow-200 shadow-sm' : 'text-gray-500 hover:bg-white hover:shadow-sm border-2 border-transparent'}`}>
                      <Zap size={14} className="inline mr-1"/> 随机点名
@@ -75,4 +75,4 @@ export const Games: React.FC = () => {
       </div>
     </div>
   );
-};
+};