Upload 9 files

src/views/StudentView.js

@@ -179,7 +179,7 @@ export async function renderStudentView() {
         const monster = getNextMonster(actualStage, totalLikes, classSize);
 
         return `
-        <div class="fixed top-8 left-10 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto">
+        <div id="monster-container-fixed" class="fixed top-24 left-12 sm:left-32 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto">
             <!-- Monster -->
             <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center hover:scale-110" style="transform: scale(${currentScale});">
                 <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
@@ -192,20 +192,15 @@ export async function renderStudentView() {
                 </div>
             </div>
 
+            <!-- Evolution Prompt -->
             <!-- Evolution Prompt -->
              ${canEvolve ? `
-                <div class="absolute top-full mt-4 left-1/2 -translate-x-1/2 w-48 pointer-events-auto animate-bounce">
-                    <div class="bg-gradient-to-br from-indigo-900 to-purple-900 border-2 border-pink-500 rounded-xl p-3 shadow-[0_0_20px_rgba(236,72,153,0.6)] text-center relative">
-                        <!-- Triangle tip -->
-                        <div class="absolute -top-2 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[8px] border-l-transparent border-r-[8px] border-r-transparent border-b-[8px] border-b-pink-500"></div>
-                        
-                        <p class="text-xs text-pink-200 mb-2 font-bold leading-tight">
-                            咦，小怪獸的樣子正在發生變化...<br>是否要進化？
-                        </p>
-                        <button onclick="window.triggerEvolution(${actualStage + 1})" class="w-full bg-pink-600 hover:bg-pink-500 text-white text-xs font-bold py-1.5 rounded-lg transition-colors shadow-sm">
-                            ✨ 立即進化
-                        </button>
-                    </div>
+                <div id="evolution-prompt" class="absolute top-full mt-4 w-40 pointer-events-auto animate-bounce">
+                    <button onclick="window.triggerEvolution(${actualStage}, ${actualStage + 1}, ${totalLikes}, ${classSize})" 
+                        class="w-full bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white p-3 rounded-2xl shadow-[0_0_15px_rgba(236,72,153,0.6)] border border-white/20 transition-all hover:scale-105 active:scale-95 flex flex-col items-center gap-1 group-btn">
+                        <span class="text-xs text-pink-100 font-bold">小怪獸要進化了!</span>
+                        <span class="text-sm font-black text-white group-btn-hover:text-yellow-300">⚡ 點擊進化</span>
+                    </button>
                 </div>
             ` : ''}
 
@@ -567,19 +562,104 @@ window.handleLike = async (progressId, targetUserId) => {
     }
 };
 
-window.triggerEvolution = async (nextStage) => {
-    const userId = localStorage.getItem('vibecoding_user_id');
-    if (!confirm(`是否要進化到階段 ${nextStage}？\n(進化後怪獸大小將重置)`)) return;
+window.triggerEvolution = async (currentStage, nextStage, likes, classSize) => {
+    // 1. Hide Prompt
+    const prompt = document.getElementById('evolution-prompt');
+    if (prompt) prompt.style.display = 'none';
+
+    // 2. Prepare Animation Data
+    // We need Next Monster Data
+    // We can't easily import logic here if not exposed, but we exported getNextMonster.
+    // We need to re-import or use the one in scope if available.
+    // Fortunately setupStudentEvents is a module, but this function is on window.
+    // We need to pass data or use a helper. 
+    // Ideally we should move getNextMonster to a global helper or fetch it.
+    // Let's use dynamic import to be safe and robust.
 
     try {
+        const { getNextMonster, generateMonsterSVG, MONSTER_STAGES } = await import("../utils/monsterUtils.js");
         const { updateUserStage } = await import("../services/classroom.js");
-        await updateUserStage(userId, nextStage);
-        alert("✨ 進化成功！");
-        // Reload view
-        const app = document.querySelector('#app');
-        app.innerHTML = await renderStudentView();
+
+        const currentMonster = getNextMonster(currentStage, likes, classSize);
+        const nextMonster = getNextMonster(nextStage, likes, classSize);
+
+        const container = document.querySelector('#monster-container-fixed .pixel-monster');
+        const containerWrapper = document.querySelector('#monster-container-fixed .pixel-art-container');
+
+        // Stop breathing animation
+        container.style.animation = 'none';
+
+        // --- ANIMATION SEQUENCE ---
+        // flicker count
+        let count = 0;
+        const maxFlickers = 10;
+        let speed = 300; // start slow
+
+        const svgCurrent = generateMonsterSVG(currentMonster);
+        const svgNext = generateMonsterSVG(nextMonster);
+
+        // Helper to set Content and Style
+        const setFrame = (svg, isSilhouette) => {
+            container.innerHTML = svg;
+            container.style.filter = isSilhouette ? 'brightness(0) invert(1)' : 'none'; // White silhouette? User said 'silhouette' usually black or white. Let's try Black (brightness 0)
+            if (isSilhouette) container.style.filter = 'brightness(0)';
+        };
+
+        const playFlicker = () => {
+            // Alternate
+            const isNext = count % 2 === 1;
+            setFrame(isNext ? svgNext : svgCurrent, true);
+
+            count++;
+
+            if (count < maxFlickers) {
+                // Speed up
+                speed *= 0.8;
+                setTimeout(playFlicker, speed);
+            } else {
+                // Final Reveal
+                setTimeout(() => {
+                    // Pause on Next Silhouette
+                    setFrame(svgNext, true);
+
+                    setTimeout(() => {
+                        // Reveal Color with flash
+                        containerWrapper.style.transition = 'filter 0.5s ease-out';
+                        containerWrapper.style.filter = 'drop-shadow(0 0 20px #ffffff)'; // Flash
+
+                        setFrame(svgNext, false); // Color
+
+                        setTimeout(async () => {
+                            containerWrapper.style.filter = 'none';
+                            // DB Update
+                            const userId = localStorage.getItem('vibecoding_user_id');
+                            await updateUserStage(userId, nextStage);
+                            // Reload
+                            const app = document.querySelector('#app');
+                            // We need to re-import renderStudentView? It's exported.
+                            // But we are inside window function. 
+                            // Just generic reload for now or try to re-render if accessible.
+                            // renderStudentView is not global.
+                            // Let's reload page to be cleanest or rely on the subscribeToUserProgress which might flicker?
+                            // subscribeToUserProgress listens to PROGRESS collection, not USERS collection (where monster scale is).
+                            // So we MUST reload or manually fetch profile.
+                            // Simple reload:
+                            // window.location.reload(); 
+                            // Or better: triggering the view re-render.
+                            // Note: We don't have access to 'renderStudentView' function here easily unless we attached it to window.
+                            // Let's reload to ensure clean state.
+                            window.location.reload();
+                        }, 1000);
+                    }, 800);
+                }, 200);
+            }
+        };
+
+        playFlicker();
+
     } catch (e) {
         console.error(e);
-        alert("進化失敗");
+        alert("進化失敗...");
+        window.location.reload();
     }
 };