Upload 24 files

pages/GameMonster.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { api } from '../services/api';
 import { StudentReward } from '../types';
-import { Play, Pause, Settings, Volume2, Mic, RotateCcw, Award, Keyboard, AlertTriangle } from 'lucide-react';
+import { Play, Pause, Settings, Volume2, Mic, RotateCcw, Award, Keyboard, AlertTriangle, Maximize, Minimize } from 'lucide-react';
 
 export const GameMonster: React.FC = () => {
   // Game State
@@ -12,6 +12,7 @@ export const GameMonster: React.FC = () => {
   const [monsterPos, setMonsterPos] = useState(100); // 0 (Left/Loss) to 100 (Right/Start)
   const [currentVolume, setCurrentVolume] = useState(0);
   const [attackCount, setAttackCount] = useState(0);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   
   // Config State
   const [duration, setDuration] = useState(300);
@@ -181,7 +182,7 @@ export const GameMonster: React.FC = () => {
   };
 
   return (
-    <div className="h-full flex flex-col bg-slate-900 relative overflow-hidden select-none" onClick={handleManualInput}>
+    <div className={`${isFullscreen ? 'fixed inset-0 z-[100] h-screen w-screen' : 'h-full'} flex flex-col bg-slate-900 relative overflow-hidden select-none transition-all duration-300`} onClick={handleManualInput}>
         {/* Background */}
         <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519074069444-1ba4fff66d16?q=80&w=2544&auto=format&fit=crop')] bg-cover bg-center opacity-30"></div>
         
@@ -205,6 +206,9 @@ export const GameMonster: React.FC = () => {
             </div>
             
             <div className="flex gap-2">
+                <button onClick={() => setIsFullscreen(!isFullscreen)} className="p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors" title={isFullscreen?"退出全屏":"全屏显示"}>
+                    {isFullscreen ? <Minimize size={20}/> : <Maximize size={20}/>}
+                </button>
                 <button onClick={() => setIsConfigOpen(true)} className="p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors"><Settings size={20}/></button>
                 <button onClick={() => setIsPlaying(!isPlaying)} className="p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors">
                     {isPlaying ? <Pause size={20}/> : <Play size={20}/>}
@@ -303,7 +307,7 @@ export const GameMonster: React.FC = () => {
 
         {/* Result Modal */}
         {gameState !== 'IDLE' && gameState !== 'PLAYING' && (
-            <div className="absolute inset-0 bg-black/80 z-50 flex items-center justify-center p-4 backdrop-blur-md animate-in zoom-in">
+            <div className="absolute inset-0 bg-black/80 z-[110] flex items-center justify-center p-4 backdrop-blur-md animate-in zoom-in">
                 <div className="text-center">
                     <div className="text-9xl mb-4 animate-bounce">
                         {gameState === 'VICTORY' ? '🏆' : '💀'}

pages/GameRandom.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { api } from '../services/api';
 import { Student, GameSession, GameTeam, AchievementConfig } from '../types';
-import { Loader2, User, Users, Play, Pause, Gift, CheckCircle, XCircle, Award, Volume2, Settings } from 'lucide-react';
+import { Loader2, User, Users, Play, Pause, Gift, CheckCircle, XCircle, Award, Volume2, Settings, Maximize, Minimize } from 'lucide-react';
 
 export const GameRandom: React.FC = () => {
   const [loading, setLoading] = useState(true);
@@ -17,6 +17,7 @@ export const GameRandom: React.FC = () => {
   const [highlightIndex, setHighlightIndex] = useState<number | null>(null);
   const [selectedResult, setSelectedResult] = useState<Student | GameTeam | null>(null);
   const [showResultModal, setShowResultModal] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
 
   // Reward State
   const [rewardType, setRewardType] = useState<'DRAW_COUNT' | 'ITEM' | 'ACHIEVEMENT'>('DRAW_COUNT');
@@ -162,49 +163,59 @@ export const GameRandom: React.FC = () => {
   const targetList = getTargetList();
 
   return (
-    <div className="h-full flex flex-col bg-slate-50 relative overflow-hidden">
+    <div className={`${isFullscreen ? 'fixed inset-0 z-[100] h-screen w-screen' : 'h-full'} flex flex-col bg-slate-50 relative overflow-hidden transition-all duration-300`}>
         {/* Header Config */}
         <div className="bg-white p-4 shadow-sm border-b border-gray-200 z-10 flex flex-wrap gap-4 items-center justify-between shrink-0">
-            <div className="flex gap-2 bg-gray-100 p-1 rounded-lg">
-                <button onClick={()=>{setMode('STUDENT'); setHighlightIndex(null);}} className={`px-4 py-2 rounded-md text-sm font-bold transition-all ${mode==='STUDENT'?'bg-white shadow text-blue-600':'text-gray-500'}`}>
-                    <User size={16} className="inline mr-1"/> 点名学生
-                </button>
-                <button onClick={()=>{setMode('TEAM'); setHighlightIndex(null);}} className={`px-4 py-2 rounded-md text-sm font-bold transition-all ${mode==='TEAM'?'bg-white shadow text-purple-600':'text-gray-500'}`}>
-                    <Users size={16} className="inline mr-1"/> 随机小组
-                </button>
-            </div>
+            <div className="flex flex-wrap gap-4 items-center">
+                <div className="flex gap-2 bg-gray-100 p-1 rounded-lg">
+                    <button onClick={()=>{setMode('STUDENT'); setHighlightIndex(null);}} className={`px-4 py-2 rounded-md text-sm font-bold transition-all ${mode==='STUDENT'?'bg-white shadow text-blue-600':'text-gray-500'}`}>
+                        <User size={16} className="inline mr-1"/> 点名学生
+                    </button>
+                    <button onClick={()=>{setMode('TEAM'); setHighlightIndex(null);}} className={`px-4 py-2 rounded-md text-sm font-bold transition-all ${mode==='TEAM'?'bg-white shadow text-purple-600':'text-gray-500'}`}>
+                        <Users size={16} className="inline mr-1"/> 随机小组
+                    </button>
+                </div>
 
-            {mode === 'STUDENT' && (
-                <select className="border border-gray-300 rounded-lg px-3 py-2 text-sm bg-white" value={scopeTeamId} onChange={e=>setScopeTeamId(e.target.value)}>
-                    <option value="ALL">全班范围</option>
-                    {teams.map(t => <option key={t.id} value={t.id}>{t.name} (组)</option>)}
-                </select>
-            )}
+                {mode === 'STUDENT' && (
+                    <select className="border border-gray-300 rounded-lg px-3 py-2 text-sm bg-white" value={scopeTeamId} onChange={e=>setScopeTeamId(e.target.value)}>
+                        <option value="ALL">全班范围</option>
+                        {teams.map(t => <option key={t.id} value={t.id}>{t.name} (组)</option>)}
+                    </select>
+                )}
 
-            <div className="flex items-center gap-2 bg-amber-50 px-3 py-2 rounded-lg border border-amber-100">
-                <Gift size={16} className="text-amber-500"/>
-                <label className="text-sm font-bold text-gray-700">奖励设置:</label>
-                <select className="text-sm border-gray-300 rounded bg-white" value={rewardType} onChange={e=>setRewardType(e.target.value as any)}>
-                    <option value="DRAW_COUNT">抽奖券</option>
-                    <option value="ITEM">实物</option>
-                    <option value="ACHIEVEMENT">成就</option>
-                </select>
-                {rewardType === 'ACHIEVEMENT' ? (
-                    <select className="text-sm border-gray-300 rounded w-32 bg-white" value={rewardId} onChange={e=>setRewardId(e.target.value)}>
-                        <option value="">选择成就</option>
-                        {achConfig?.achievements.map(a => <option key={a.id} value={a.id}>{a.icon} {a.name}</option>)}
+                <div className="flex items-center gap-2 bg-amber-50 px-3 py-2 rounded-lg border border-amber-100">
+                    <Gift size={16} className="text-amber-500"/>
+                    <label className="text-sm font-bold text-gray-700">奖励:</label>
+                    <select className="text-sm border-gray-300 rounded bg-white" value={rewardType} onChange={e=>setRewardType(e.target.value as any)}>
+                        <option value="DRAW_COUNT">抽奖券</option>
+                        <option value="ITEM">实物</option>
+                        <option value="ACHIEVEMENT">成就</option>
                     </select>
-                ) : rewardType === 'ITEM' ? (
-                    <input className="text-sm border-gray-300 rounded w-24 p-1" placeholder="奖品名" value={rewardId} onChange={e=>setRewardId(e.target.value)}/>
-                ) : null}
-                <span className="text-xs text-gray-400">x</span>
-                <input type="number" min={1} className="w-12 text-sm border-gray-300 rounded p-1 text-center" value={rewardCount} onChange={e=>setRewardCount(Number(e.target.value))}/>
+                    {rewardType === 'ACHIEVEMENT' ? (
+                        <select className="text-sm border-gray-300 rounded w-32 bg-white" value={rewardId} onChange={e=>setRewardId(e.target.value)}>
+                            <option value="">选择成就</option>
+                            {achConfig?.achievements.map(a => <option key={a.id} value={a.id}>{a.icon} {a.name}</option>)}
+                        </select>
+                    ) : rewardType === 'ITEM' ? (
+                        <input className="text-sm border-gray-300 rounded w-24 p-1" placeholder="奖品名" value={rewardId} onChange={e=>setRewardId(e.target.value)}/>
+                    ) : null}
+                    <span className="text-xs text-gray-400">x</span>
+                    <input type="number" min={1} className="w-12 text-sm border-gray-300 rounded p-1 text-center" value={rewardCount} onChange={e=>setRewardCount(Number(e.target.value))}/>
+                </div>
             </div>
+
+            <button 
+                onClick={() => setIsFullscreen(!isFullscreen)} 
+                className="p-2 bg-gray-100 hover:bg-gray-200 text-gray-600 rounded-lg transition-colors"
+                title={isFullscreen ? "退出全屏" : "全屏显示"}
+            >
+                {isFullscreen ? <Minimize size={20}/> : <Maximize size={20}/>}
+            </button>
         </div>
 
         {/* Grid Area */}
         <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
-            <div className={`grid gap-4 transition-all ${mode==='STUDENT' ? 'grid-cols-4 sm:grid-cols-6 md:grid-cols-8' : 'grid-cols-2 md:grid-cols-3'}`}>
+            <div className={`grid gap-4 transition-all ${mode==='STUDENT' ? 'grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10' : 'grid-cols-2 md:grid-cols-3 lg:grid-cols-4'}`}>
                 {targetList.map((item, idx) => {
                     const isHighlighted = idx === highlightIndex;
                     const isTeam = mode === 'TEAM';
@@ -224,14 +235,14 @@ export const GameRandom: React.FC = () => {
                             : 'bg-white border-gray-100 shadow-sm opacity-80'
                         }`}>
                             {isHighlighted && <div className="absolute inset-0 bg-yellow-400 opacity-20 animate-pulse rounded-xl"></div>}
-                            <div className="text-3xl mb-2 font-bold" style={{color: isTeam ? color : '#64748b'}}>
+                            <div className={`mb-2 font-bold ${isFullscreen ? 'text-5xl' : 'text-3xl'}`} style={{color: isTeam ? color : '#64748b'}}>
                                 {mode === 'STUDENT' ? (
-                                    <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-lg">
+                                    <div className={`rounded-full bg-blue-100 flex items-center justify-center text-blue-600 ${isFullscreen ? 'w-20 h-20 text-3xl' : 'w-12 h-12 text-lg'}`}>
                                         {name[0]}
                                     </div>
                                 ) : avatar}
                             </div>
-                            <div className="font-bold text-gray-800 text-center truncate w-full px-2">{name}</div>
+                            <div className={`font-bold text-gray-800 text-center truncate w-full px-2 ${isFullscreen ? 'text-xl' : 'text-base'}`}>{name}</div>
                             <div className="text-xs text-gray-400">{subText}</div>
                         </div>
                     );
@@ -251,14 +262,14 @@ export const GameRandom: React.FC = () => {
 
         {/* Result Modal */}
         {showResultModal && selectedResult && (
-            <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
+            <div className="fixed inset-0 bg-black/60 z-[110] flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in">
                 <div className="bg-white rounded-3xl p-8 w-full max-w-md text-center shadow-2xl relative animate-in zoom-in-95">
                     <div className="absolute -top-12 left-1/2 -translate-x-1/2 w-24 h-24 bg-yellow-400 rounded-full flex items-center justify-center border-4 border-white shadow-lg">
                         <span className="text-5xl">✨</span>
                     </div>
                     
-                    <h2 className="mt-10 text-gray-500 text-sm font-bold uppercase tracking-widest">Selected {mode === 'STUDENT' ? 'Student' : 'Team'}</h2>
-                    <div className="text-4xl font-black text-gray-800 my-4">
+                    <h2 className="mt-10 text-gray-500 text-sm font-bold uppercase tracking-widest">选中对象</h2>
+                    <div className="text-5xl font-black text-gray-800 my-6">
                         {/* @ts-ignore */}
                         {selectedResult.name}
                     </div>