Update pages/GameMountain.tsx

pages/GameMountain.tsx

@@ -20,23 +20,22 @@ const styles = `
   0%, 100% { transform: translateY(0) scale(1); }
   50% { transform: translateY(-10px) scale(1.1); }
 }
-@keyframes pop-in {
-  0% { transform: scale(0); opacity: 0; }
-  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); }
 }
+@keyframes confetti-fall {
+  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
+  100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
+}
 .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; }
+.animate-confetti { animation: confetti-fall 2s ease-out forwards; }
 `;
 
 // --- Math Helper for Consistent Path ---
@@ -62,11 +61,6 @@ const generatePathString = () => {
     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
@@ -77,6 +71,16 @@ const generatePathString = () => {
     return d;
 };
 
+const CelebrationEffects = () => (
+    <div className="absolute -top-10 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none z-50">
+        <div className="absolute top-0 left-1/4 text-2xl animate-confetti" style={{animationDelay: '0.1s'}}>🎉</div>
+        <div className="absolute top-2 right-1/4 text-2xl animate-confetti" style={{animationDelay: '0.3s'}}>✨</div>
+        <div className="absolute top-0 left-1/2 text-2xl animate-confetti" style={{animationDelay: '0.5s'}}>🎊</div>
+        <div className="absolute -top-4 right-1/3 text-xl animate-confetti" style={{animationDelay: '0.2s'}}>🎈</div>
+        <div className="absolute -top-2 left-1/3 text-xl animate-confetti" style={{animationDelay: '0.4s'}}>🌟</div>
+    </div>
+);
+
 const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, isFullscreen }: { 
     team: GameTeam, 
     index: number, 
@@ -88,6 +92,7 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
   const percentage = Math.min(Math.max(team.score, 0), maxSteps) / maxSteps;
   const currentPos = calculatePathPoint(percentage);
   const pathString = generatePathString();
+  const isFinished = team.score >= maxSteps;
 
   // Width classes: slightly wider in fullscreen
   const widthClass = isFullscreen ? 'w-56 md:w-64' : 'w-40 md:w-48';
@@ -100,7 +105,7 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
         <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-7 h-7 rounded-full flex items-center justify-center font-black border-2 border-white shadow-sm text-xs">
+            <div className={`absolute -top-3 -right-3 w-7 h-7 rounded-full flex items-center justify-center font-black border-2 border-white shadow-sm text-xs ${isFinished ? 'bg-yellow-400 text-yellow-900 animate-bounce' : 'bg-gradient-to-br from-amber-400 to-orange-500 text-white'}`}>
                 {team.score}
             </div>
         </div>
@@ -127,14 +132,14 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
                 strokeLinejoin="round"
             />
             
-            {/* Snow Cap (Matches Peak) */}
+            {/* Snow Cap */}
             <path 
                 d="M100 20 L 115 60 Q 100 50, 85 60 Z" 
                 fill="white" 
                 opacity="0.9"
             />
 
-            {/* Mathematically generated path */}
+            {/* Path */}
             <path 
                 d={pathString}
                 fill="none"
@@ -168,17 +173,21 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
                <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-125 z-20' : 'scale-75 opacity-70 grayscale z-0'}
+                    ${isUnlocked ? 'scale-110 z-20' : 'scale-90 opacity-80 z-0'}
                  `}
                  style={{ bottom: `${pos.y}%`, left: `${pos.x}%` }}
                >
                   <div className={`
                       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'}
+                      ${isUnlocked ? 'bg-yellow-100 border-yellow-400' : 'bg-white border-gray-300'}
                   `}>
-                      <Icon size={12} className={isUnlocked ? 'text-amber-600' : 'text-gray-500'} />
+                      <Icon size={12} className={isUnlocked ? 'text-amber-600' : 'text-gray-400'} />
                       {isUnlocked && <div className="absolute inset-0 bg-yellow-400 rounded-full blur-sm opacity-50 animate-pulse"></div>}
                   </div>
+                  {/* Reward Name Label - Now visible */}
+                  <div className={`mt-1 px-1.5 py-0.5 rounded text-[10px] font-bold shadow-sm whitespace-nowrap border max-w-[80px] truncate transition-colors ${isUnlocked ? 'bg-yellow-50 text-yellow-700 border-yellow-200' : 'bg-white/90 text-gray-500 border-gray-200'}`}>
+                      {reward.rewardName}
+                  </div>
                </div>
             );
          })}
@@ -191,15 +200,17 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
       >
          <div className={`
             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 }}>
+            ${isFinished ? 'animate-bounce border-yellow-400' : 'hover:scale-110'}
+         `} style={{ borderColor: isFinished ? '#facc15' : team.color }}>
             <span className="text-2xl md:text-3xl">{team.avatar || '🧗'}</span>
             
-            {team.score >= maxSteps && (
-                <div className="absolute -right-4 -top-6 text-3xl drop-shadow-md origin-bottom-left animate-wave">🚩</div>
+            {isFinished && (
+                <>
+                    <div className="absolute -right-4 -top-6 text-3xl drop-shadow-md origin-bottom-left animate-wave">🚩</div>
+                    <CelebrationEffects />
+                </>
             )}
          </div>
-         {/* Particle +1 Effect (Simulated via key based on score) */}
       </div>
 
       {/* Control Panel */}
@@ -213,6 +224,28 @@ const MountainStage = ({ team, index, rewardsConfig, maxSteps, onScoreChange, is
   );
 };
 
+// Toast Component
+const GameToast = ({ title, message, type, onClose }: { title: string, message: string, type: 'success' | 'info', onClose: () => void }) => {
+    useEffect(() => {
+        const timer = setTimeout(onClose, 3000);
+        return () => clearTimeout(timer);
+    }, [onClose]);
+
+    return (
+        <div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] animate-in slide-in-from-top-5 fade-in duration-300">
+            <div className={`flex items-center gap-3 px-6 py-4 rounded-xl shadow-2xl border-2 backdrop-blur-md ${type === 'success' ? 'bg-yellow-50/90 border-yellow-400 text-yellow-800' : 'bg-white/90 border-blue-200 text-slate-800'}`}>
+                <div className={`p-2 rounded-full ${type === 'success' ? 'bg-yellow-400 text-white' : 'bg-blue-500 text-white'}`}>
+                    {type === 'success' ? <Trophy size={24} /> : <Gift size={24} />}
+                </div>
+                <div>
+                    <h4 className="font-black text-lg">{title}</h4>
+                    <p className="text-sm opacity-90 font-medium">{message}</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
 export const GameMountain: React.FC = () => {
   const [session, setSession] = useState<GameSession | null>(null);
   const [loading, setLoading] = useState(true);
@@ -222,6 +255,9 @@ export const GameMountain: React.FC = () => {
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
   const [achConfig, setAchConfig] = useState<AchievementConfig | null>(null);
+  
+  // Toast State
+  const [toast, setToast] = useState<{title: string, message: string, type: 'success' | 'info'} | null>(null);
 
   const currentUser = api.auth.getCurrentUser();
   const isTeacher = currentUser?.role === 'TEACHER';
@@ -294,8 +330,19 @@ export const GameMountain: React.FC = () => {
        if (t.id !== teamId) return t;
        const newScore = Math.max(0, Math.min(session.maxSteps, t.score + delta));
        
+       // Detect Reward Trigger
        if (delta > 0 && newScore > t.score) {
           const reward = session.rewardsConfig.find(r => r.scoreThreshold === newScore);
+          
+          // Toast for Summit
+          if (newScore === session.maxSteps) {
+              setToast({ title: `🏆 巅峰时刻!`, message: `恭喜 [${t.name}] 成功登顶！`, type: 'success' });
+          }
+          // Toast for Reward
+          else if (reward) {
+              setToast({ title: `🎉 触发奖励!`, message: `[${t.name}] 获得：${reward.rewardName}`, type: 'info' });
+          }
+
           if (reward) {
              t.members.forEach(stuId => {
                 const stu = students.find(s => (s._id || s.id) == stuId);
@@ -365,6 +412,9 @@ export const GameMountain: React.FC = () => {
             <div className="absolute top-24 left-1/4 text-slate-600/30 text-2xl animate-bounce-slow">🕊️</div>
         </div>
 
+        {/* Toast Overlay */}
+        {toast && <GameToast title={toast.title} message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
+
         {/* Toolbar */}
         <div className="absolute top-4 right-4 z-50 flex gap-2">
             <button 
@@ -582,3 +632,4 @@ export const GameMountain: React.FC = () => {
   }
   return GameContent;
 };
+