Upload 9 files

src/views/StudentView.js

@@ -131,8 +131,10 @@ export async function renderStudentView() {
     };
 
     // --- Monster Section Render Function ---
-    const renderMonsterSection = (currentUserProgress, classSize, userProfile) => {
-        // Calculate Stats
+    // --- Monster Section Helper Functions ---
+
+    // 1. Calculate Monster State (Separated logic)
+    const calculateMonsterState = (currentUserProgress, classSize, userProfile) => {
         const totalLikes = Object.values(currentUserProgress).reduce((acc, p) => acc + (p.likes || 0), 0);
 
         // Count completions per level
@@ -143,30 +145,26 @@ export async function renderStudentView() {
         };
         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 & ID
         const actualStage = userProfile.monster_stage || 0;
         const actualMonsterId = userProfile.monster_id || 'Egg';
 
-        // --- REGRESSION LOGIC (Auto-Devolve) ---
-        // If actual stage > potential stage, it means tasks were reset/rejected.
-        // We must devolve.
+        // Regression Logic Check
         if (actualStage > potentialStage) {
-            // Regression Logic
-            // Call DB update and then force reload to reflect changes
             updateUserMonster(userId, potentialStage, null).then(() => {
                 setTimeout(() => window.location.reload(), 500);
             });
-            // Show potential stage temporarily to avoid glitch
-            return renderMonsterSection(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage });
+            // Return corrected state temporary
+            return {
+                ...calculateMonsterState(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage }),
+                isRegressing: true
+            };
         }
 
-        // 3. Display Logic
         const canEvolve = potentialStage > actualStage;
 
         // Scale Logic
@@ -174,61 +172,80 @@ export async function renderStudentView() {
         const baseScale = 1.0;
         const currentScale = baseScale + (totalCompleted * growthFactor);
 
-        // Get Monster Data (Preserve Lineage)
-        // If we have an actual ID, use it for display until evolution.
-        // If we are about to evolve, we preview next? No, current.
-        let monster = getNextMonster(actualStage, 0, 0, actualMonsterId); // Just lookup current by ID/Stage?
+        // Get Monster Data
+        let monster = getNextMonster(actualStage, 0, 0, actualMonsterId);
         if (actualMonsterId && actualMonsterId !== 'Egg') {
-            // If we have a specific ID stored, try to use it directly
             const stored = MONSTER_DEFS.find(m => m.id === actualMonsterId);
             if (stored) monster = stored;
         } else {
-            // Fallback for Egg or legacy data without ID
             monster = getNextMonster(actualStage, totalLikes, classSize);
         }
 
-        // Left sidebar position: Fixed Left-8 or similar. 
-        // User wants it in the empty left area.
+        return {
+            monster,
+            currentScale,
+            totalCompleted,
+            totalLikes,
+            canEvolve,
+            actualStage,
+            classSize,
+            counts
+        };
+    };
+
+    // 2. Render Stats HTML (Partial Update Target)
+    const renderMonsterStats = (state) => {
+        return `
+            <div class="font-bold text-white text-sm mb-1 text-center border-b border-gray-700 pb-1">${state.monster.name}</div>
+            <div class="space-y-1 mt-1 text-center">
+                <div class=""><span>💖</span> <span class="text-pink-400 font-bold ml-1">${state.totalLikes}</span></div>
+            </div>
+        `;
+    };
+
+    // 3. Render Full Monster Container (Initial or Full Update)
+    // Now positioned stats to TOP
+    const renderMonsterSection = (currentUserProgress, classSize, userProfile) => {
+        const state = calculateMonsterState(currentUserProgress, classSize, userProfile);
+
         return `
-        <div id="monster-container-fixed" class="fixed top-32 left-8 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-32 h-32">
-            <!-- Walking Container -->
+        <div id="monster-container-fixed" data-monster-id="${state.monster.id}" data-scale="${state.currentScale}" 
+             class="fixed top-32 left-8 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-32 h-32">
+            
+            <!-- Stats Tooltip (Moved to Top) -->
+            <div id="monster-stats-content" class="absolute bottom-full mb-2 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 text-left pointer-events-auto shadow-2xl min-w-[100px]">
+                ${renderMonsterStats(state)}
+            </div>
+
             <!-- Walking Container (Handles Movement Only) -->
             <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center" 
-                 style="transform: scale(${currentScale}); animation: patrol-move 15s linear infinite;">
+                 style="transform: scale(${state.currentScale}); animation: patrol-move 15s linear infinite;">
                 
                 <!-- Monster Sprite (Handles Flip & Breathe) -->
                 <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out, patrol-flip 15s linear infinite;">
-                    ${generateMonsterSVG(monster)}
+                    ${generateMonsterSVG(state.monster)}
                 </div>
                 
                 <!-- Level Indicator (No Flip) -->
                 <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}
+                    Lv.${1 + state.totalCompleted}
                 </div>
             </div>
 
             <!-- Evolution Prompt -->
-            ${canEvolve ? `
+            ${state.canEvolve ? `
                 <div id="evolution-prompt" class="absolute top-full mt-2 pointer-events-auto animate-bounce z-50">
                     <div class="flex flex-col items-center">
                         <div class="bg-gray-900/90 text-pink-200 text-xs py-2 px-3 rounded-xl border border-pink-500/30 shadow-lg text-center font-bold mb-1 backdrop-blur-sm whitespace-nowrap">
                             咦，小怪獸的樣子<br>正在發生變化...
                         </div>
-                        <button onclick="window.triggerEvolution(${actualStage}, ${actualStage + 1}, ${totalLikes}, ${classSize}, '${monster.id}')" 
+                        <button onclick="window.triggerEvolution(${state.actualStage}, ${state.actualStage + 1}, ${state.totalLikes}, ${classSize}, '${state.monster.id}')" 
                             class="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white text-sm font-black py-2 px-6 rounded-full shadow-[0_0_15px_rgba(236,72,153,0.8)] border border-white/30 transition-all hover:scale-110 active:scale-95">
                             進化！
                         </button>
                     </div>
                 </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-[100px]">
-                <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 text-center">
-                    <div class=""><span>💖</span> <span class="text-pink-400 font-bold ml-1">${totalLikes}</span></div>
-                </div>
-            </div>
         </div>
 
         <style>
@@ -278,12 +295,48 @@ export async function renderStudentView() {
     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.
+        // Smart Update: Check if visual refresh is needed
+        const newState = calculateMonsterState(updatedProgress, classSize, userProfile);
+        const fixedContainer = document.getElementById('monster-container-fixed');
+        const currentMonsterId = fixedContainer?.getAttribute('data-monster-id');
+
+        // Tolerance for scale check usually not needed if we want scale to update visuals immediately?
+        // Actually, scale change usually means totalCompleted changed.
+        // If we want smooth growth, replacing DOM resets animation which looks slight jumpy but acceptable.
+        // But the user complained about "position reset" (walk cycle reset).
+
+        if (fixedContainer && String(currentMonsterId) === String(newState.monster.id)) {
+            // Monster ID is same (no evolution/devolution).
+            // Just update stats tooltip
+            const statsContainer = document.getElementById('monster-stats-content');
+            if (statsContainer) {
+                statsContainer.innerHTML = renderMonsterStats(newState);
+            }
+
+            // What if level up (scale change)?
+            // If we don't replace DOM, scale won't update in style attribute.
+            // We should update the style manually.
+            const artContainer = fixedContainer.querySelector('.pixel-art-container');
+            if (artContainer && newState.currentScale) {
+                // Update animation with new scale
+                // Note: Modifying 'transform' directly might conflict with keyframes unless keyframes use relative or we update style variable.
+                // Keyframes use: scale(${currentScale}). This is hardcoded in specific keyframes string in <style>.
+                // We can't easily update keyframes dynamic values without replacing style block.
+
+                // If totalCompleted changed (level up), user *might* accept a reset because they levelled up.
+                // But simply giving a heart shouldn't reset.
+
+                const oldTotal = parseInt(fixedContainer.querySelector('.bg-gray-900\\/90')?.textContent?.replace('Lv.', '') || '1') - 1;
+                if (oldTotal !== newState.totalCompleted) {
+                    // Level changed -> Scale changed -> Re-render full (reset animation is fine for Level Up)
+                    monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
+                }
+            }
+        } else {
+            // Monster changed or clean slate -> Full Render
+            monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
+        }
     });
 
     // Accordion Layout