Upload 8 files

src/views/StudentView.js

@@ -1,4 +1,4 @@
-import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserStage, getUser } from "../services/classroom.js";
+import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserStage, getUser, subscribeToUserProgress } from "../services/classroom.js";
 import { generateMonsterSVG, getNextMonster, MONSTER_STAGES } from "../utils/monsterUtils.js";
 
 
@@ -130,90 +130,139 @@ export async function renderStudentView() {
         advanced: "高級 (Advanced)"
     };
 
-    // --- Monster Evolution Logic ---
-    let classSize = 1;
-    let userProfile = {};
-    try {
-        classSize = await getClassSize(roomCode);
-        userProfile = await getUser(userId) || {};
-    } catch (e) { console.error("Fetch stats error", e); }
-
-    // Calculate Stats
-    const totalLikes = Object.values(userProgress).reduce((acc, p) => acc + (p.likes || 0), 0);
-    const completedCounts = {
-        0: 0,
-        1: cachedChallenges.filter(c => c.level === 'beginner' && userProgress[c.id]?.status === 'completed').length,
-        2: cachedChallenges.filter(c => c.level === 'intermediate' && userProgress[c.id]?.status === 'completed').length,
-        3: cachedChallenges.filter(c => c.level === 'advanced' && userProgress[c.id]?.status === 'completed').length
-    };
+    // --- Monster Section Render Function ---
+    const renderMonsterSection = (currentUserProgress, classSize, userProfile) => {
+        // Calculate Stats
+        const totalLikes = Object.values(currentUserProgress).reduce((acc, p) => acc + (p.likes || 0), 0);
+
+        // Count completions per level
+        const counts = {
+            1: cachedChallenges.filter(c => c.level === 'beginner' && currentUserProgress[c.id]?.status === 'completed').length,
+            2: cachedChallenges.filter(c => c.level === 'intermediate' && currentUserProgress[c.id]?.status === 'completed').length,
+            3: cachedChallenges.filter(c => c.level === 'advanced' && currentUserProgress[c.id]?.status === 'completed').length
+        };
+        const totalCompleted = counts[1] + counts[2] + counts[3];
+
+        // 1. Calculate Potential Stage
+        let potentialStage = 0;
+        if (counts[1] >= 5) potentialStage = 1;
+        if (counts[2] >= 5 && potentialStage >= 1) potentialStage = 2;
+        if (counts[3] >= 5 && potentialStage >= 2) potentialStage = 3;
+
+        // 2. Get Actual Stage
+        const actualStage = userProfile.monster_stage || 0;
+
+        // 3. Display Logic
+        const canEvolve = potentialStage > actualStage;
+
+        // Growth: Base Scale 1.0. 
+        // Grows with TOTAL completed tasks. e.g. 0.05 per task.
+        // Also resets effective growth if we evolve? 
+        // User said: "Monster size should grow every time a question is answered correctly"
+        // And "Level also rise".
+
+        // Let's make base scale depend on tasks completed SINCE last evolution?
+        // Or just total tasks. 
+        // If I evolve, I probably want to start small-ish again?
+        // But "Stage 2" monster should probably be bigger than "Stage 1 Egg".
+        // Let's use a simple global scalar:
+        const growthFactor = 0.08;
+        const baseScale = 1.0;
+        // Adjust for stage so high stage monsters aren't tiny initially?
+        // Actually, let's just make it grow linearly based on total questions.
+        // But if I evolve, does it shrink? 
+        // User request: "If don't evolve... keep getting bigger"
+        // Implicitly, evolving might reset the 'extra' growth or change the base form.
+        // Let's just use Total Completed for scale.
+        const currentScale = baseScale + (totalCompleted * growthFactor);
+
+        const monster = getNextMonster(actualStage, totalLikes, classSize);
 
-    // 1. Calculate Potential Stage (What they qualify for)
-    let potentialStage = 0;
-    if (completedCounts[1] >= 5) potentialStage = 1;
-    if (completedCounts[2] >= 5 && potentialStage >= 1) potentialStage = 2;
-    if (completedCounts[3] >= 5 && potentialStage >= 2) potentialStage = 3;
-
-    // 2. Get Actual Stage (What they have chosen/evolved to)
-    const actualStage = userProfile.monster_stage || 0;
-
-    // 3. Determine Display Logic
-    // If Potential > Actual => Evolution Available.
-    // If they don't evolve, they get BIGGER.
-    // Scale Factor: 1.0 + (Potential - Actual) * 0.3
-    const scale = 1 + (potentialStage - actualStage) * 0.3;
-    const canEvolve = potentialStage > actualStage;
-
-    // Get Monster Data for Current Actual Stage
-    const monster = getNextMonster(actualStage, totalLikes, classSize);
-
-    // Monster UI HTML
-    const monsterHtml = `
-        <div class="fixed top-6 left-6 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto">
-            <!-- Monster with Dynamic Scale -->
-            <div class="pixel-art-container relative transform transition-transform duration-500 ease-out hover:scale-110 origin-center" style="transform: scale(${scale});">
-                <div class="pixel-monster w-20 h-20 sm:w-24 sm:h-24 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
+        return `
+        <div class="fixed top-8 left-10 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;">
                     ${generateMonsterSVG(monster)}
                 </div>
                 
-                <!-- Stage Indicator Badge -->
-                <div class="absolute -bottom-2 -right-2 bg-gray-900/80 text-xs text-yellow-500 px-1.5 py-0.5 rounded border border-yellow-500/30 font-mono transform scale-75 origin-top-left">
-                    Lv.${monster.stage}
+                <!-- Level Indicator (Total Quests) -->
+                <div class="absolute -bottom-2 -right-2 bg-gray-900/90 text-xs text-yellow-400 px-2 py-0.5 rounded-full border border-yellow-500/50 font-mono font-bold transform scale-75 origin-top-left whitespace-nowrap">
+                    Lv.${1 + totalCompleted}
                 </div>
             </div>
 
-            <!-- Evolution Trigger (Only if canEvolve) -->
-            ${canEvolve ? `
-                <div class="animate-bounce mt-4 pointer-events-auto">
-                    <button onclick="window.triggerEvolution(${actualStage + 1})" class="bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-400 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-full shadow-[0_0_15px_rgba(236,72,153,0.5)] border-2 border-white/20 text-xs sm:text-sm flex items-center space-x-2 transition-all hover:scale-105 active:scale-95">
-                        <span class="text-lg">✨</span>
-                        <span>進化 (Evolve)!</span>
-                    </button>
-                    <div class="text-[10px] text-center text-pink-300 mt-1 text-shadow bg-black/50 rounded px-1">
-                        或是忽略並保持巨大化!
+            <!-- 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>
             ` : ''}
 
-            <!-- Stats Tooltip (Show on Hover) -->
-            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-gray-300 p-2 rounded-lg border border-gray-700 mt-2 text-center pointer-events-auto shadow-xl ${canEvolve ? 'mt-1' : 'mt-4'}">
-                <div class="font-bold text-white mb-1">${monster.name}</div>
-                <div>💖 Likes: ${totalLikes}</div>
-                <div class="text-[10px] text-gray-500">Class: ${classSize}</div>
-                ${scale > 1 ? `<div class="text-green-400 font-bold mt-1">巨大化 x${scale.toFixed(1)}</div>` : ''}
+            <!-- Stats Tooltip -->
+            <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-slate-300 p-3 rounded-xl border border-slate-700 mt-6 text-left pointer-events-auto shadow-2xl min-w-[120px]">
+                <div class="font-bold text-white text-sm mb-1 text-center border-b border-gray-700 pb-1">${monster.name}</div>
+                <div class="space-y-1 mt-1">
+                    <div class="flex justify-between"><span>💖 愛心:</span> <span class="text-pink-400 font-bold">${totalLikes}</span></div>
+                    <div class="flex justify-between"><span>🏫 人數:</span> <span class="text-cyan-400 font-bold">${classSize}</span></div>
+                    <div class="flex justify-between"><span>⚔️ 任務:</span> <span class="text-yellow-400 font-bold">${totalCompleted}</span></div>
+                </div>
             </div>
         </div>
 
         <style>
             @keyframes breathe {
-                0%, 100% { transform: translateY(0); }
-                50% { transform: translateY(-3px); }
+                0%, 100% { transform: translateY(0); filter: brightness(1); }
+                50% { transform: translateY(-3px); filter: brightness(1.1); }
             }
         </style>
-    `;
+        `;
+    };
+
+    // Inject Initial Monster UI
+    const monsterContainerId = 'monster-ui-layer';
+    let monsterContainer = document.getElementById(monsterContainerId);
+    if (!monsterContainer) {
+        monsterContainer = document.createElement('div');
+        monsterContainer.id = monsterContainerId;
+        document.body.appendChild(monsterContainer);
+    }
+
+    // Initial Render
+    let classSize = 1;
+    let userProfile = {};
+    try {
+        classSize = await getClassSize(roomCode);
+        userProfile = await getUser(userId) || {};
+    } catch (e) { console.error("Fetch stats error", e); }
+
+    monsterContainer.innerHTML = renderMonsterSection(userProgress, classSize, userProfile);
+
+    // Setup Real-time Subscription
+    if (window.currentProgressUnsub) window.currentProgressUnsub();
+    window.currentProgressUnsub = subscribeToUserProgress(userId, (newProgressMap) => {
+        // Merge updates
+        const updatedProgress = { ...userProgress, ...newProgressMap };
+        // Re-render only Monster Section
+        monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
+
+        // Update userProgress ref for other logic? 
+        // Note: 'userProgress' variable in this scope won't update for 'renderTaskCard' unless we reload.
+        // But for Monster UI it's fine.
+    });
 
     // Accordion Layout
     return `
-    ${monsterHtml}
     <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4">
         <header class="flex justify-end items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
             <div class="flex flex-col items-end">