Upload 9 files

src/services/classroom.js

@@ -459,15 +459,17 @@ export async function getClassSize(roomCode) {
 }
 
 /**
- * Updates a student's monster stage
+ * Updates a student's monster stage and specific form
  * @param {string} userId
  * @param {number} newStage
+ * @param {string} monsterId (Optional, for persisting specific form)
  */
-export async function updateUserStage(userId, newStage) {
+export async function updateUserMonster(userId, newStage, monsterId = null) {
     const userRef = doc(db, USERS_COLLECTION, userId);
-    await updateDoc(userRef, {
-        monster_stage: newStage
-    });
+    const data = { monster_stage: newStage };
+    if (monsterId) data.monster_id = monsterId;
+
+    await updateDoc(userRef, data);
 }
 
 /**

src/utils/monsterUtils.js

@@ -397,36 +397,35 @@ export function generateMonsterSVG(monster) {
 }
 
 /**
- * Determines the next monster form based on parameters
+ * Determines the next monster form based on parameters and lineage
  * @param {number} currentStage - Current evolutionary stage (0-3)
  * @param {number} likes - Student's total likes
  * @param {number} classSize - Active class size
- * @param {string} [currentFam] - Current family hint (optional, for persistent lineage)
+ * @param {string} [currentMonsterId] - ID of the current monster to determine lineage
  * @returns {Object} Selected Monster Definition
  */
-export function getNextMonster(currentStage, likes, classSize, currentFam = null) {
+export function getNextMonster(currentStage, likes, classSize, currentMonsterId = null) {
     if (currentStage === 0) return MONSTER_DEFS.find(m => m.id === 'Egg');
 
-    // Stage 1: Basic Families
+    // Find current monster family if we have an ID
+    let currentFam = null;
+    if (currentMonsterId) {
+        const current = MONSTER_DEFS.find(m => m.id === currentMonsterId);
+        if (current) currentFam = current.fam; // e.g., 'Beast', 'Dust', 'Spirit'
+    }
+
+    // Stage 1: Basic Families (Origin -> Family)
+    // If coming from Egg (Stage 0), we pick a base family.
     if (currentStage === 1) {
-        // Simple logic for Stage 1? Or Random?
-        // Let's use simple hash of likes or random to distribute if there's no clear indicator?
-        // Requirements say "After beginner 5 tasks, Stage 1 unlocks".
-        // Let's default to Dust or something based on likes?
-        // Actually the prompt says:
-        // "Stage 1 (Basic): Unlocks after Beginner... Three basic families: Dust, Pup, Spirit"
-        // Let's pick based on (Likes % 3) for variety or just return one?
-        // Let's return Spirit if Likes are high, Dust if low?
-
-        // Simple distribution for now:
-        if (likes > 5) return MONSTER_DEFS.find(m => m.id === 'L1_A'); // Spirit
-        if (likes > 2) return MONSTER_DEFS.find(m => m.id === 'L1_B'); // Pup
-        return MONSTER_DEFS.find(m => m.id === 'L1_C'); // Dust
+        // Simple distribution:
+        if (likes >= 5) return MONSTER_DEFS.find(m => m.id === 'L1_A'); // Spirit (Blue)
+        if (likes >= 2) return MONSTER_DEFS.find(m => m.id === 'L1_B'); // Beast (Yellow)
+        return MONSTER_DEFS.find(m => m.id === 'L1_C'); // Dust (Red)
     }
 
     // Branching Logic for Stage 2 & 3
     // A: High Likes ( > classSize / 2 )
-    // B: Mid Likes ( 1 < likes <= classSize / 2 )
+    // B: Normal Likes ( > 1 )
     // C: Low Likes ( <= 1 )
 
     const ratio = classSize > 0 ? likes / classSize : 0;
@@ -440,25 +439,32 @@ export function getNextMonster(currentStage, likes, classSize, currentFam = null
     if (classSize <= 2 && likes >= 1) tier = 'A'; // Boost for testing pairs
 
     // Filter potential monsters for this Stage
-    const candidates = MONSTER_DEFS.filter(m => m.stage === currentStage);
+    let candidates = MONSTER_DEFS.filter(m => m.stage === currentStage);
+
+    // Enforce Lineage (Family)
+    if (currentFam && currentFam !== 'Origin') {
+        // Filter candidates that belong to this Family tree
+        // We need to know which families map to which.
+        // Stage 1 -> Stage 2 Mapping:
+        // Dust -> Dust (Trash/Slime/Tech)
+        // Beast -> Beast (Wolf/Cat/Mech)
+        // Spirit -> Spirit (Fire/Angel/Dragon)
+
+        // In MONSTER_DEFS, 'fam' for Stage 2 is 'Dust', 'Beast', 'Spirit'.
+        // So we just match strict equality.
+        candidates = candidates.filter(m => m.fam === currentFam || m.fam.includes(currentFam));
+    }
 
     // Filter by Tier (Suffix A/B/C)
-    // IDs are like L2_AA, L2_AB... allow flexible matching.
-    // Last char of ID corresponds to Tier? (A=High, B=Mid, C=Low)
-    // Yes: L3_AAA (High), L3_CAA (High? No wait, logic in readme says:
-    // Tier 1 (Low) -> C route.
-    // Tier 3 (High) -> A route.
-
+    // IDs are like L2_AA, L2_AB... 
+    // Last char is C(Low), B(Mid), A(High).
     const targetSuffix = tier;
 
-    // If we have a current family, try to stick to it?
-    // Implementation Plan didn't specify strict lineage tracking yet, but usually we want to.
-
-    // Let's filter candidates ending in targetSuffix
-    let match = candidates.find(m => m.id.endsWith(targetSuffix) && (!currentFam || m.fam === currentFam));
+    let match = candidates.find(m => m.id.endsWith(targetSuffix));
 
-    // If no match (e.g. family change allowed or not found), just pick any of that Tier
-    if (!match) match = candidates.find(m => m.id.endsWith(targetSuffix));
+    // Fallback: If specific tier not found in this family (shouldn't happen if definitions are complete),
+    // pick ANY from this family.
+    if (!match && candidates.length > 0) match = candidates[0];
 
-    return match || MONSTER_DEFS[0]; // Fallback
+    return match || MONSTER_DEFS[0]; // Absolute Fallback
 }

src/views/StudentView.js

@@ -1,4 +1,4 @@
-import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserStage, getUser, subscribeToUserProgress } from "../services/classroom.js";
+import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserMonster, getUser, subscribeToUserProgress } from "../services/classroom.js";
 import { generateMonsterSVG, getNextMonster, MONSTER_STAGES } from "../utils/monsterUtils.js";
 
 
@@ -149,58 +149,82 @@ export async function renderStudentView() {
         if (counts[2] >= 5 && potentialStage >= 1) potentialStage = 2;
         if (counts[3] >= 5 && potentialStage >= 2) potentialStage = 3;
 
-        // 2. Get Actual Stage
+        // 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.
+        if (actualStage > potentialStage) {
+            // Devolve immediately (or show animation? Immediate for compliance)
+            // We need to call DB update. But we are in render function.
+            // Side-effect in render is bad, but necessary for self-correction.
+            // Let's debounce or check if we haven't already corrected.
+            // console.warn("Devolving from", actualStage, "to", potentialStage);
+            // Trigger update async
+            updateUserMonster(userId, potentialStage, null).then(() => {
+                // Reload to reflect
+                // window.location.reload(); // Might cause loop if not careful?
+                // If update succeeds, the subscription will fire? 
+                // No, subscription listens to PROGRESS, not USER profile updates unless we subscribe to USER too.
+                // We currently verify profile on load. 
+                // Let's just force a reload once to correct it.
+                /* setTimeout(() => window.location.reload(), 500); */
+            });
+            // For THIS render, show potential stage
+            // return renderMonsterSection(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage });
+        }
 
         // 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:
+        // Scale Logic
         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);
+        // 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?
+        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);
+        }
 
         return `
-        <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 id="monster-container-fixed" class="fixed top-24 left-1/2 -translate-x-1/2 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-40 h-40">
+            <!-- Walking Container -->
+            <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center hover:scale-110" 
+                 style="transform: scale(${currentScale}); animation: walk-float 6s ease-in-out infinite;">
+                
                 <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
                     ${generateMonsterSVG(monster)}
                 </div>
                 
-                <!-- Level Indicator (Total Quests) -->
+                <!-- Level Indicator -->
                 <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 Prompt -->
             <!-- Evolution Prompt -->
              ${canEvolve ? `
-                <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 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}')" 
+                            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>
             ` : ''}
 
@@ -220,6 +244,11 @@ export async function renderStudentView() {
                 0%, 100% { transform: translateY(0); filter: brightness(1); }
                 50% { transform: translateY(-3px); filter: brightness(1.1); }
             }
+            @keyframes walk-float {
+                0%, 100% { transform: translateX(0) scale(${currentScale}); }
+                25% { transform: translateX(-10px) rotate(-2deg) scale(${currentScale}); }
+                75% { transform: translateX(10px) rotate(2deg) scale(${currentScale}); }
+            }
         </style>
         `;
     };
@@ -562,26 +591,18 @@ window.handleLike = async (progressId, targetUserId) => {
     }
 };
 
-window.triggerEvolution = async (currentStage, nextStage, likes, classSize) => {
+window.triggerEvolution = async (currentStage, nextStage, likes, classSize, currentMonsterId) => {
     // 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");
+        const { updateUserMonster } = await import("../services/classroom.js");
 
-        const currentMonster = getNextMonster(currentStage, likes, classSize);
-        const nextMonster = getNextMonster(nextStage, likes, classSize);
+        // Calculate Next Monster with Lineage
+        const currentMonster = getNextMonster(currentStage, likes, classSize, currentMonsterId);
+        const nextMonster = getNextMonster(nextStage, likes, classSize, currentMonsterId);
 
         const container = document.querySelector('#monster-container-fixed .pixel-monster');
         const containerWrapper = document.querySelector('#monster-container-fixed .pixel-art-container');
@@ -590,68 +611,47 @@ window.triggerEvolution = async (currentStage, nextStage, likes, classSize) => {
         container.style.animation = 'none';
 
         // --- ANIMATION SEQUENCE ---
-        // flicker count
         let count = 0;
-        const maxFlickers = 10;
-        let speed = 300; // start slow
+        const maxFlickers = 12; // Increased duration
+        let speed = 300;
 
         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)';
+            container.style.filter = isSilhouette ? 'brightness(0)' : 'none';
         };
 
         const playFlicker = () => {
-            // Alternate
             const isNext = count % 2 === 1;
             setFrame(isNext ? svgNext : svgCurrent, true);
-
             count++;
 
             if (count < maxFlickers) {
-                // Speed up
-                speed *= 0.8;
+                speed *= 0.85;
                 setTimeout(playFlicker, speed);
             } else {
                 // Final Reveal
                 setTimeout(() => {
-                    // Pause on Next Silhouette
-                    setFrame(svgNext, true);
+                    setFrame(svgNext, true); // Hold silhouette
 
                     setTimeout(() => {
-                        // Reveal Color with flash
-                        containerWrapper.style.transition = 'filter 0.5s ease-out';
-                        containerWrapper.style.filter = 'drop-shadow(0 0 20px #ffffff)'; // Flash
+                        // Reveal Color with Flash
+                        containerWrapper.style.transition = 'filter 0.8s ease-out';
+                        containerWrapper.style.filter = 'drop-shadow(0 0 30px #ffffff) brightness(1.5)';
 
-                        setFrame(svgNext, false); // Color
+                        setFrame(svgNext, false);
 
                         setTimeout(async () => {
                             containerWrapper.style.filter = 'none';
-                            // DB Update
+                            // DB Update with Monster ID
                             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.
+                            await updateUserMonster(userId, nextStage, nextMonster.id);
                             window.location.reload();
-                        }, 1000);
-                    }, 800);
-                }, 200);
+                        }, 1200);
+                    }, 1000);
+                }, 300);
             }
         };