Update pages/GameMountain.tsx

pages/GameMountain.tsx

@@ -1,8 +1,9 @@
 
 import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { api } from '../services/api';
 import { GameSession, GameTeam, Student, GameRewardConfig, AchievementConfig } from '../types';
-import { Settings, Plus, Minus, Users, CheckSquare, Loader2, Trash2, X, Flag, Gift, Star, Trophy } from 'lucide-react';
+import { Settings, Plus, Minus, Users, CheckSquare, Loader2, Trash2, X, Flag, Gift, Star, Trophy, Maximize, Minimize } from 'lucide-react';
 
 // --- CSS Animations for Clouds and Bounce ---
 const styles = `
@@ -24,64 +25,97 @@ const styles = `
   80% { transform: scale(1.2); opacity: 1; }
   100% { transform: scale(1); opacity: 1; }
 }
+@keyframes wave {
+  0% { transform: rotate(0deg); }
+  25% { transform: rotate(-10deg); }
+  75% { transform: rotate(10deg); }
+  100% { transform: rotate(0deg); }
+}
 .animate-drift-slow { animation: drift 60s linear infinite; }
 .animate-drift-medium { animation: drift 40s linear infinite; }
 .animate-drift-fast { animation: drift 25s linear infinite; }
 .bounce-effect { animation: bounce-avatar 0.5s ease-in-out; }
 .pop-in { animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
+.animate-wave { animation: wave 2s infinite ease-in-out; }
 `;
 
-const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange }: { 
+// --- Math Helper for Consistent Path ---
+// Returns x (0-100%) and y (0-100%) based on progress (0-1)
+// We map progress 0 -> bottom of path, 1 -> top of path
+const calculatePathPoint = (progress: number) => {
+    // Y: Map 0-1 to roughly 10% - 90% of container height to stay on mountain
+    const y = 8 + (progress * 80); 
+    
+    // X: Center is 50%. Sine wave creates winding path.
+    // Amplitude tapers off slightly at the top to converge at peak
+    const amplitude = 15 * (1 - (progress * 0.3)); 
+    const frequency = 3; // Number of winds
+    const x = 50 + amplitude * Math.sin(progress * Math.PI * frequency);
+    
+    return { x, y };
+};
+
+// Generate SVG Path String dynamically based on the math function
+const generatePathString = () => {
+    let d = "";
+    // Sample points every 2%
+    for (let i = 0; i <= 100; i+=2) {
+        const p = i / 100;
+        const point = calculatePathPoint(p);
+        // SVG Coordinate mapping: ViewBox 0 0 200 300
+        // X: percent -> 0-200 range
+        // Y: percent -> map 0% (bottom) to 300 and 100% (top) to 0. 
+        // Note: calculatePathPoint returns Y as "percent from bottom", CSS style.
+        // For SVG Y, 0 is top. So SVG_Y = 300 - (Y_percent/100 * 300)
+        
+        const svgX = point.x * 2; // 0-100 -> 0-200
+        const svgY = 300 - (point.y * 3); // 0-100 -> 300-0
+        
+        if (i === 0) d += `M ${svgX} ${svgY}`;
+        else d += ` L ${svgX} ${svgY}`;
+    }
+    return d;
+};
+
+const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, isFullscreen }: { 
     team: GameTeam, 
     index: number, 
     rewardsConfig: GameRewardConfig[], 
     maxSteps: number,
-    onScoreChange?: (id: string, delta: number) => void
+    onScoreChange?: (id: string, delta: number) => void,
+    isFullscreen: boolean
 }) => {
   const percentage = Math.min(Math.max(team.score, 0), maxSteps) / maxSteps;
-  
-  // Calculate position along a sine wave path for more visual interest
-  // x = center + amplitude * sin(height)
-  // We want the path to wind slightly
-  const getPathX = (pct: number) => {
-      // 50% is center. Winding range +/- 15%
-      return 50 + 10 * Math.sin(pct * Math.PI * 3); 
-  };
+  const currentPos = calculatePathPoint(percentage);
+  const pathString = generatePathString();
 
-  const climberBottom = 8 + (percentage * 78); // Keep within mountain bounds (8% to 86%)
-  const climberLeft = getPathX(percentage);
+  // Width classes: slightly wider in fullscreen
+  const widthClass = isFullscreen ? 'w-56 md:w-64' : 'w-40 md:w-48';
 
   return (
-    <div className="relative flex flex-col items-center justify-end h-full w-48 md:w-64 mx-4 flex-shrink-0 select-none group perspective-1000">
+    <div className={`relative flex flex-col items-center justify-end h-[95%] ${widthClass} mx-2 flex-shrink-0 select-none group perspective-1000 transition-all duration-300`}>
       
       {/* Team Name Cloud Tag */}
-      <div className="absolute top-[5%] z-20 transition-transform duration-300 hover:-translate-y-2 hover:scale-105 cursor-pointer">
-        <div className="relative bg-white/90 backdrop-blur-md px-4 py-2 rounded-2xl shadow-lg border-2 border-white text-center min-w-[120px]">
-            <h3 className="text-base font-black text-slate-800 truncate max-w-[140px]">{team.name}</h3>
+      <div className="absolute top-[2%] z-20 transition-transform duration-300 hover:-translate-y-2 hover:scale-105 cursor-pointer w-full flex justify-center">
+        <div className="relative bg-white/90 backdrop-blur-md px-3 py-1.5 rounded-xl shadow-md border-2 border-white text-center max-w-[90%]">
+            <h3 className="text-sm md:text-base font-black text-slate-800 truncate">{team.name}</h3>
             {/* Score Badge */}
-            <div className="absolute -top-3 -right-3 bg-gradient-to-br from-amber-400 to-orange-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-black border-2 border-white shadow-md text-sm">
+            <div className="absolute -top-3 -right-3 bg-gradient-to-br from-amber-400 to-orange-500 text-white w-7 h-7 rounded-full flex items-center justify-center font-black border-2 border-white shadow-sm text-xs">
                 {team.score}
             </div>
         </div>
-        {/* Triangle pointer */}
-        <div className="w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-t-[8px] border-t-white/90 absolute left-1/2 -translate-x-1/2 -bottom-2"></div>
       </div>
       
       {/* Mountain SVG */}
-      <div className="absolute bottom-0 left-0 w-full h-[85%] z-0 filter drop-shadow-xl transition-all duration-500 group-hover:drop-shadow-2xl">
+      <div className="absolute bottom-0 left-0 w-full h-[90%] z-0 filter drop-shadow-lg transition-all duration-500 group-hover:drop-shadow-xl">
          <svg viewBox="0 0 200 300" preserveAspectRatio="none" className="w-full h-full overflow-visible">
             <defs>
                <linearGradient id={`grad-${index}`} x1="0%" y1="0%" x2="100%" y2="0%">
-                  {/* Left side light, right side dark for 3D effect */}
                   <stop offset="0%" stopColor={team.color} stopOpacity="0.8" />
                   <stop offset="50%" stopColor={team.color} />
-                  <stop offset="50%" stopColor={team.color} stopOpacity="0.7"/> {/* Hard shadow line */}
+                  <stop offset="50%" stopColor={team.color} stopOpacity="0.7"/>
                   <stop offset="100%" stopColor={team.color} stopOpacity="0.5" />
                </linearGradient>
-               <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
-                  <feGaussianBlur stdDeviation="2" result="blur" />
-                  <feComposite in="SourceGraphic" in2="blur" operator="over" />
-               </filter>
             </defs>
             
             {/* Main Mountain Shape */}
@@ -93,47 +127,39 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange }:
                 strokeLinejoin="round"
             />
             
-            {/* Snow Cap */}
+            {/* Snow Cap (Matches Peak) */}
             <path 
-                d="M100 20 L 120 90 Q 110 80, 100 95 Q 90 80, 80 90 Z" 
+                d="M100 20 L 115 60 Q 100 50, 85 60 Z" 
                 fill="white" 
                 opacity="0.9"
             />
 
-            {/* Winding Path (Dashed Line) */}
+            {/* Mathematically generated path */}
             <path 
-                d={`M ${getPathX(0)} 280 
-                   Q ${getPathX(0.1)} 260, ${getPathX(0.2)} 240
-                   T ${getPathX(0.4)} 190
-                   T ${getPathX(0.6)} 140
-                   T ${getPathX(0.8)} 90
-                   T 100 20`}
+                d={pathString}
                 fill="none"
-                stroke="rgba(255,255,255,0.4)"
-                strokeWidth="3"
-                strokeDasharray="5,5"
+                stroke="rgba(255,255,255,0.5)"
+                strokeWidth="2"
+                strokeDasharray="4,4"
                 strokeLinecap="round"
             />
 
-            {/* Vegetation / Rocks at bottom */}
+            {/* Vegetation */}
             <g transform="translate(0, 280)">
                 <circle cx="30" cy="10" r="8" fill="#166534" opacity="0.8"/>
                 <circle cx="45" cy="15" r="10" fill="#15803d" opacity="0.9"/>
                 <circle cx="160" cy="12" r="9" fill="#166534" opacity="0.8"/>
-                <path d="M140 20 L 150 0 L 160 20 Z" fill="#78716c"/>
             </g>
          </svg>
       </div>
 
-      {/* Rewards Placed on Slope */}
-      <div className="absolute bottom-0 w-full h-[85%] z-10 pointer-events-none">
+      {/* Rewards Placed on Path */}
+      <div className="absolute bottom-0 left-0 w-full h-[90%] z-10 pointer-events-none">
          {rewardsConfig.map((reward, i) => {
             const rPct = reward.scoreThreshold / maxSteps;
             const isUnlocked = team.score >= reward.scoreThreshold;
-            const rBottom = 8 + (rPct * 78);
-            const rLeft = getPathX(rPct);
+            const pos = calculatePathPoint(rPct);
             
-            // Icon selection
             let Icon = Gift;
             if (reward.rewardType === 'DRAW_COUNT') Icon = Star;
             if (reward.rewardType === 'ACHIEVEMENT') Icon = Trophy;
@@ -142,25 +168,16 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange }:
                <div 
                  key={i} 
                  className={`absolute transition-all duration-500 flex flex-col items-center justify-center transform -translate-x-1/2 -translate-y-1/2
-                    ${isUnlocked ? 'scale-110 z-20' : 'scale-90 opacity-60 grayscale z-0'}
+                    ${isUnlocked ? 'scale-125 z-20' : 'scale-75 opacity-70 grayscale z-0'}
                  `}
-                 style={{ bottom: `${rBottom}%`, left: `${rLeft}%` }}
+                 style={{ bottom: `${pos.y}%`, left: `${pos.x}%` }}
                >
                   <div className={`
-                      p-2 rounded-full shadow-lg border-2 relative
+                      p-1.5 rounded-full shadow-md border relative
                       ${isUnlocked ? 'bg-yellow-100 border-yellow-400 animate-bounce-slow' : 'bg-gray-200 border-gray-300'}
                   `}>
-                      <Icon size={16} className={isUnlocked ? 'text-amber-600' : 'text-gray-500'} />
-                      {/* Glow effect */}
-                      {isUnlocked && <div className="absolute inset-0 bg-yellow-400 rounded-full blur-md opacity-50 animate-pulse"></div>}
-                  </div>
-                  
-                  {/* Tooltip Label */}
-                  <div className={`
-                      mt-1 px-2 py-0.5 rounded text-[10px] font-bold whitespace-nowrap shadow-sm transition-opacity duration-300
-                      ${isUnlocked ? 'bg-white text-slate-700 opacity-100' : 'bg-gray-100 text-gray-400 opacity-0 group-hover:opacity-100'}
-                  `}>
-                      {reward.rewardName}
+                      <Icon size={12} className={isUnlocked ? 'text-amber-600' : 'text-gray-500'} />
+                      {isUnlocked && <div className="absolute inset-0 bg-yellow-400 rounded-full blur-sm opacity-50 animate-pulse"></div>}
                   </div>
                </div>
             );
@@ -169,40 +186,27 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange }:
 
       {/* Climber Avatar */}
       <div 
-        className="absolute z-30 transition-all duration-700 ease-in-out flex flex-col items-center w-16 h-16 -translate-x-1/2" 
-        style={{ bottom: `${climberBottom}%`, left: `${climberLeft}%` }}
+        className="absolute z-30 transition-all duration-700 ease-in-out flex flex-col items-center -translate-x-1/2 transform translate-y-1/2" 
+        style={{ bottom: `${currentPos.y}%`, left: `${currentPos.x}%` }}
       >
          <div className={`
-            w-14 h-14 bg-white rounded-full border-4 shadow-xl flex items-center justify-center transform transition-transform relative
+            w-12 h-12 md:w-14 md:h-14 bg-white rounded-full border-4 shadow-xl flex items-center justify-center transition-transform relative
             ${team.score >= maxSteps ? 'animate-bounce' : 'hover:scale-110'}
          `} style={{ borderColor: team.color }}>
-            <span className="text-3xl">{team.avatar || '🧗'}</span>
+            <span className="text-2xl md:text-3xl">{team.avatar || '🧗'}</span>
             
-            {/* Flag when finished */}
             {team.score >= maxSteps && (
-                <div className="absolute -right-6 -top-6 text-4xl drop-shadow-md origin-bottom-left animate-wave">🚩</div>
+                <div className="absolute -right-4 -top-6 text-3xl drop-shadow-md origin-bottom-left animate-wave">🚩</div>
             )}
          </div>
+         {/* Particle +1 Effect (Simulated via key based on score) */}
       </div>
 
-      {/* Control Panel (Only Visible on Hover or Always if Teacher) */}
+      {/* Control Panel */}
       {onScoreChange && (
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-3 opacity-90 transition-all z-40 bg-white/80 backdrop-blur px-3 py-1.5 rounded-full shadow-lg border border-white/50 hover:scale-105">
-            <button 
-                onClick={() => onScoreChange(team.id, -1)} 
-                className="w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-red-100 hover:text-red-600 flex items-center justify-center transition-colors"
-                title="-1分"
-            >
-                <Minus size={16}/>
-            </button>
-            <span className="w-px h-4 bg-slate-300"></span>
-            <button 
-                onClick={() => onScoreChange(team.id, 1)} 
-                className="w-10 h-10 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white flex items-center justify-center transition-colors shadow-sm"
-                title="+1分"
-            >
-                <Plus size={20} strokeWidth={3}/>
-            </button>
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-all z-40 bg-white/90 backdrop-blur px-2 py-1 rounded-full shadow-lg border border-gray-200 hover:scale-105">
+            <button onClick={() => onScoreChange(team.id, -1)} className="p-1 rounded-full bg-slate-100 text-slate-500 hover:bg-red-100 hover:text-red-600"><Minus size={14}/></button>
+            <button onClick={() => onScoreChange(team.id, 1)} className="p-1.5 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white shadow-sm"><Plus size={18} strokeWidth={3}/></button>
         </div>
       )}
     </div>
@@ -214,8 +218,8 @@ export const GameMountain: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [students, setStudents] = useState<Student[]>([]);
   
-  // Settings State
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
   const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
   const [achConfig, setAchConfig] = useState<AchievementConfig | null>(null);
 
@@ -223,15 +227,12 @@ export const GameMountain: React.FC = () => {
   const isTeacher = currentUser?.role === 'TEACHER';
   const isAdmin = currentUser?.role === 'ADMIN';
 
-  useEffect(() => {
-    loadData();
-  }, []);
+  useEffect(() => { loadData(); }, []);
 
   const loadData = async () => {
     setLoading(true);
     try {
       if (!currentUser) return;
-      
       const allStudents = await api.students.getAll();
       let targetClass = '';
       let filteredStudents: Student[] = [];
@@ -248,7 +249,6 @@ export const GameMountain: React.FC = () => {
          filteredStudents = allStudents; 
       }
 
-      // Sort students
       filteredStudents.sort((a, b) => {
           const seatA = parseInt(a.seatNo || '99999');
           const seatB = parseInt(b.seatNo || '99999');
@@ -262,7 +262,6 @@ export const GameMountain: React.FC = () => {
          if (sess) {
             setSession(sess);
          } else if (isTeacher && currentUser?.schoolId) {
-            // Init Default Session
             const newSess: GameSession = {
                schoolId: currentUser.schoolId,
                className: targetClass,
@@ -288,7 +287,6 @@ export const GameMountain: React.FC = () => {
 
   const handleScoreChange = async (teamId: string, delta: number) => {
     if (!session || !isTeacher) return;
-    
     const sysConfig = await api.config.getPublic();
     const currentSemester = sysConfig?.semester || '当前学期';
 
@@ -296,7 +294,6 @@ export const GameMountain: React.FC = () => {
        if (t.id !== teamId) return t;
        const newScore = Math.max(0, Math.min(session.maxSteps, t.score + delta));
        
-       // Trigger reward logic
        if (delta > 0 && newScore > t.score) {
           const reward = session.rewardsConfig.find(r => r.scoreThreshold === newScore);
           if (reward) {
@@ -355,35 +352,39 @@ export const GameMountain: React.FC = () => {
   if (loading) return <div className="h-full flex items-center justify-center"><Loader2 className="animate-spin text-blue-600"/></div>;
   if (!session) return <div className="h-full flex items-center justify-center text-gray-400">暂无游戏会话，请联系班主任开启。</div>;
 
-  return (
-    <>
-    <style>{styles}</style>
-    <div className="h-full w-full flex flex-col relative overflow-hidden bg-gradient-to-b from-sky-300 via-sky-100 to-emerald-50">
+  const GameContent = (
+    <div className={`${isFullscreen ? 'fixed inset-0 z-[9999] w-screen h-screen' : 'h-full w-full relative'} flex flex-col bg-gradient-to-b from-sky-300 via-sky-100 to-emerald-50 overflow-hidden`}>
+        <style>{styles}</style>
         
-        {/* Animated Background Elements */}
+        {/* Background Elements */}
         <div className="absolute inset-0 pointer-events-none overflow-hidden">
-            {/* Sun */}
             <div className="absolute top-10 right-20 w-24 h-24 bg-yellow-300 rounded-full blur-xl opacity-60 animate-pulse"></div>
-            
-            {/* Clouds */}
             <div className="absolute top-16 -left-20 text-white/60 text-9xl select-none animate-drift-slow opacity-80" style={{filter: 'blur(2px)'}}>☁️</div>
             <div className="absolute top-32 -left-40 text-white/40 text-8xl select-none animate-drift-medium opacity-60" style={{animationDelay: '5s'}}>☁️</div>
             <div className="absolute top-10 -left-10 text-white/50 text-[10rem] select-none animate-drift-fast opacity-40" style={{animationDelay: '15s'}}>☁️</div>
-            
-            {/* Birds */}
             <div className="absolute top-24 left-1/4 text-slate-600/30 text-2xl animate-bounce-slow">🕊️</div>
         </div>
 
-        {isTeacher && (
-            <div className="absolute top-4 right-4 z-50">
-                <button onClick={() => setIsSettingsOpen(true)} className="flex items-center text-xs font-bold text-slate-700 bg-white/90 backdrop-blur px-4 py-2 rounded-2xl border border-white/50 hover:bg-white shadow-md transition-all hover:scale-105 hover:shadow-lg active:scale-95">
-                    <Settings size={16} className="mr-2"/> 游戏设置
+        {/* Toolbar */}
+        <div className="absolute top-4 right-4 z-50 flex gap-2">
+            <button 
+                onClick={() => setIsFullscreen(!isFullscreen)} 
+                className="p-2 bg-white/80 backdrop-blur rounded-full hover:bg-white shadow-sm border border-white/50 transition-colors"
+                title={isFullscreen ? "退出全屏" : "全屏"}
+            >
+                {isFullscreen ? <Minimize size={20} className="text-gray-700"/> : <Maximize size={20} className="text-gray-700"/>}
+            </button>
+            
+            {isTeacher && (
+                <button onClick={() => setIsSettingsOpen(true)} className="flex items-center text-xs font-bold text-slate-700 bg-white/90 backdrop-blur px-4 py-2 rounded-2xl border border-white/50 hover:bg-white shadow-md transition-all hover:scale-105 active:scale-95">
+                    <Settings size={16} className="mr-2"/> 设置
                 </button>
-            </div>
-        )}
+            )}
+        </div>
 
-        <div className="flex-1 overflow-x-auto overflow-y-hidden relative custom-scrollbar z-10">
-            <div className="h-full flex items-end min-w-max px-20 pb-4 gap-4 mx-auto">
+        {/* Scrollable Game Area */}
+        <div className="flex-1 overflow-x-auto overflow-y-hidden relative custom-scrollbar z-10 w-full min-w-0">
+            <div className="h-full flex items-end px-10 pb-4 gap-2 mx-auto w-max min-w-full justify-center">
                 {session.teams.map((team, idx) => (
                     <MountainStage 
                         key={team.id} 
@@ -392,6 +393,7 @@ export const GameMountain: React.FC = () => {
                         rewardsConfig={session.rewardsConfig} 
                         maxSteps={session.maxSteps} 
                         onScoreChange={isTeacher ? handleScoreChange : undefined}
+                        isFullscreen={isFullscreen}
                     />
                 ))}
             </div>
@@ -399,7 +401,7 @@ export const GameMountain: React.FC = () => {
 
         {/* SETTINGS MODAL */}
         {isSettingsOpen && (
-            <div className="fixed inset-0 bg-black/60 z-[100] flex items-center justify-center p-4 backdrop-blur-sm">
+            <div className="fixed inset-0 bg-black/60 z-[100000] flex items-center justify-center p-4 backdrop-blur-sm">
                 <div className="bg-white rounded-2xl w-full max-w-5xl 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 shrink-0">
                         <h3 className="text-xl font-bold text-gray-800 flex items-center"><Settings className="mr-2 text-blue-600"/> 游戏控制台</h3>
@@ -573,6 +575,10 @@ export const GameMountain: React.FC = () => {
             </div>
         )}
     </div>
-    </>
   );
+
+  if (isFullscreen) {
+      return createPortal(GameContent, document.body);
+  }
+  return GameContent;
 };