Upload 9 files

src/services/auth.js

@@ -3,7 +3,8 @@ import {
     signInWithEmailAndPassword,
     createUserWithEmailAndPassword,
     signOut,
-    sendPasswordResetEmail
+    sendPasswordResetEmail,
+    getRedirectResult
 } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
 import {
     doc,
@@ -20,6 +21,19 @@ import {
 const INSTRUCTORS_COLLECTION = "instructors";
 const SUPER_ADMIN_EMAIL = "t92206@gmail.com";
 
+/**
+ * Handle Redirect Result (for OAuth flows like Google Sign In)
+ */
+export async function handleRedirectResult() {
+    try {
+        const result = await getRedirectResult(auth);
+        return result ? result.user : null;
+    } catch (error) {
+        console.error("Redirect Result Error:", error);
+        throw error;
+    }
+}
+
 /**
  * Sign in with Email/Password
  */

src/services/classroom.js

@@ -85,7 +85,7 @@ export async function verifyInstructorPassword(inputPassword) {
  * Joins a room with Dual-Role Auth / Session Persistence logic
  * @param {string} roomCode 
  * @param {string} nickname 
- * @returns {Promise<string>} The student ID (userId)
+ * @returns {Promise<{userId: string, nickname: string}>} Object containing userId and final nickname
  */
 export async function joinRoom(roomCode, nickname) {
     // 1. Verify Room Exists
@@ -96,7 +96,7 @@ export async function joinRoom(roomCode, nickname) {
         throw new Error("教室代碼不存在");
     }
 
-    // 2. Check if user already exists in this room (Cross-device sync)
+    // 2. Check for nickname collision
     const usersRef = collection(db, USERS_COLLECTION);
     const q = query(
         usersRef,
@@ -105,25 +105,25 @@ export async function joinRoom(roomCode, nickname) {
     );
 
     const querySnapshot = await getDocs(q);
+    let finalNickname = nickname;
 
     if (!querySnapshot.empty) {
-        // User exists, return existing ID
-        const userDoc = querySnapshot.docs[0];
-        // Update last active
-        await updateDoc(userDoc.ref, { last_active: serverTimestamp() });
-        return userDoc.id;
+        // Nickname exists! Add a random suffix to differentiate
+        // Use a short random string to avoid "Little Ming (2)" collision if many
+        const suffix = Math.floor(1000 + Math.random() * 9000).toString(); // 4-digit suffix
+        finalNickname = `${nickname}#${suffix}`;
     }
 
-    // 3. Create new user if not exists
+    // 3. Create new user
     const newUserRef = await addDoc(usersRef, {
-        nickname,
+        nickname: finalNickname,
         current_room: roomCode,
         role: 'student',
         joinedAt: serverTimestamp(),
         last_active: serverTimestamp()
     });
 
-    return newUserRef.id;
+    return { userId: newUserRef.id, nickname: finalNickname };
 }
 
 /**
@@ -342,7 +342,6 @@ export async function getPeerPrompts(roomCode, challengeId) {
  * @param {string} challengeId 
  */
 export async function resetProgress(userId, roomCode, challengeId) {
-    console.log(`[resetProgress] Attempting reset for User: ${userId}, Challenge: ${challengeId}, Room: ${roomCode}`);
     const progressRef = collection(db, PROGRESS_COLLECTION);
     const q = query(
         progressRef,
@@ -351,19 +350,12 @@ export async function resetProgress(userId, roomCode, challengeId) {
     );
     const snapshot = await getDocs(q);
 
-    console.log(`[resetProgress] Found ${snapshot.size} documents.`);
-
     if (!snapshot.empty) {
         // Reset status to 'started' so they can submit again
         await updateDoc(snapshot.docs[0].ref, {
             status: 'started',
             timestamp: serverTimestamp()
         });
-        console.log(`[resetProgress] Document updated successfully.`);
-        return true;
-    } else {
-        console.warn(`[resetProgress] No progress document found to reset!`);
-        return false;
     }
 }
 

src/views/AdminView.js

@@ -87,8 +87,13 @@ export function setupAdminEvents() {
     loadChallenges();
 
     document.getElementById('back-instructor-btn').addEventListener('click', () => {
-        // Always go back to instructor view since admin is only accessible from there
-        window.location.hash = 'instructor';
+        const referer = localStorage.getItem('vibecoding_admin_referer');
+        if (referer === 'instructor') {
+            window.location.hash = 'instructor';
+        } else {
+            window.location.hash = ''; // Main landing
+        }
+        localStorage.removeItem('vibecoding_admin_referer');
     });
 
     document.getElementById('add-challenge-btn').addEventListener('click', () => {

src/views/LandingView.js

@@ -82,12 +82,12 @@ export function setupLandingEvents(navigateTo) {
             joinBtn.textContent = '加入中...';
             joinBtn.disabled = true;
 
-            const studentId = await joinRoom(roomCode, nickname);
+            const { userId, nickname: finalNickname } = await joinRoom(roomCode, nickname);
 
             // Save Session
-            localStorage.setItem('vibecoding_user_id', studentId);
+            localStorage.setItem('vibecoding_user_id', userId);
             localStorage.setItem('vibecoding_room_code', roomCode);
-            localStorage.setItem('vibecoding_nickname', nickname);
+            localStorage.setItem('vibecoding_nickname', finalNickname);
 
             navigateTo('student');
         } catch (error) {

src/views/StudentView.js

@@ -1,12 +1,9 @@
 import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserMonster, getUser, subscribeToUserProgress } from "../services/classroom.js";
-import { db } from "../services/firebase.js";
 import { generateMonsterSVG, getNextMonster, MONSTER_STAGES, MONSTER_DEFS } from "../utils/monsterUtils.js";
-import { doc, getDoc } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 
 
 // Cache challenges locally
 let cachedChallenges = [];
-let roomAiSettings = { active: false, key: null };
 
 function renderTaskCard(c, userProgress) {
     const p = userProgress[c.id] || {};
@@ -82,30 +79,10 @@ function renderTaskCard(c, userProgress) {
                                 class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-cyan-500 focus:outline-none transition-colors text-sm"
                                 placeholder="貼上您的修復提示詞..."></textarea>
                             
-                            <!-- AI Tutor / Error Area -->
-                            <div class="flex justify-between items-start">
-                                <div id="error-${c.id}" class="text-red-500 text-xs hidden mt-1">提示詞太短囉...</div>
-                                
-                                ${roomAiSettings.active ? `
-                                <button onclick="window.callAiTutor('${c.id}')" id="btn-tutor-${c.id}"
-                                    class="text-xs bg-gray-800 hover:bg-gray-700 text-cyan-400 border border-gray-600 px-3 py-1 rounded-full flex items-center space-x-1 transition-colors self-start mt-1">
-                                    <span>🐥 呼叫 AI 橡皮鴨</span>
-                                </button>
-                                ` : ''}
-                            </div>
-                            
-                            <!-- AI Response Bubble -->
-                            <div id="ai-response-${c.id}" class="hidden mt-2 mb-2 relative group">
-                                <div class="absolute -top-1 left-4 w-2 h-2 bg-gray-700 transform rotate-45"></div>
-                                <div class="bg-gray-800 border border-cyan-500/30 rounded-lg p-3 text-cyan-300 text-sm font-mono shadow-lg flex items-start space-x-2">
-                                    <span class="text-lg">🤖</span>
-                                    <div class="flex-1 typing-effect" id="ai-text-${c.id}">...</div>
-                                    <button onclick="document.getElementById('ai-response-${c.id}').classList.add('hidden')" class="text-gray-500 hover:text-white">×</button>
-                                </div>
-                            </div>
+                            <div id="error-${c.id}" class="text-red-500 text-xs hidden">提示詞太短囉，請多寫一點細節！</div>
 
                             <button onclick="window.submitLevel('${c.id}')"
-                                class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white px-6 py-2 rounded-lg font-bold transition-transform active:scale-95 shadow-lg shadow-cyan-900/50 mt-2">
+                                class="w-full bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-500 hover:to-blue-500 text-white px-6 py-2 rounded-lg font-bold transition-transform active:scale-95 shadow-lg shadow-cyan-900/50">
                                 提交解答
                             </button>
                         </div>
@@ -326,14 +303,19 @@ export async function renderStudentView() {
     // Setup Real-time Subscription
     if (window.currentProgressUnsub) window.currentProgressUnsub();
     window.currentProgressUnsub = subscribeToUserProgress(userId, (newProgressMap) => {
-        // Merge updates (Actually newProgressMap is complete source of truth from firestore listener)
-        const updatedProgress = newProgressMap;
+        // Merge updates
+        const updatedProgress = { ...userProgress, ...newProgressMap };
 
-        // 1. Update Monster (Visuals)
+        // 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
@@ -342,36 +324,29 @@ export async function renderStudentView() {
                 statsContainer.innerHTML = renderMonsterStats(newState);
             }
 
-            // Check level up (totalCompleted) to update scale/animation if needed
-            const oldTotal = parseInt(fixedContainer.querySelector('.bg-gray-900\\/90')?.textContent?.replace('Lv.', '') || '1') - 1;
-            if (oldTotal !== newState.totalCompleted) {
-                monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
+            // 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 {
-            // Full Monster Render
+            // Monster changed or clean slate -> Full Render
             monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
         }
-
-        // 2. Update Task List (Accordions) - Realtime "Reject" support
-        const levelGroups = {
-            beginner: cachedChallenges.filter(c => c.level === 'beginner'),
-            intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
-            advanced: cachedChallenges.filter(c => c.level === 'advanced')
-        };
-        const levelNames = {
-            beginner: "初級 (Beginner)",
-            intermediate: "中級 (Intermediate)",
-            advanced: "高級 (Advanced)"
-        };
-
-        ['beginner', 'intermediate', 'advanced'].forEach(level => {
-            const detailEl = document.getElementById(`details-group-${level}`);
-            if (detailEl) {
-                // renderLevelGroup checks existing DOM for 'open' state, so it persists
-                const newHTML = renderLevelGroup(level, levelGroups[level], updatedProgress, levelNames);
-                detailEl.outerHTML = newHTML;
-            }
-        });
     });
 
     // Accordion Layout