Upload 8 files

src/services/classroom.js

@@ -131,6 +131,49 @@ export async function submitPrompt(userId, roomCode, challengeId, prompt) {
     await updateDoc(userRef, { last_active: serverTimestamp() });
 }
 
+/**
+ * Records that a user has started a challenge
+ * @param {string} userId 
+ * @param {string} roomCode 
+ * @param {string} challengeId 
+ */
+export async function startChallenge(userId, roomCode, challengeId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(
+        progressRef,
+        where("userId", "==", userId),
+        where("challengeId", "==", challengeId)
+    );
+    const snapshot = await getDocs(q);
+
+    if (!snapshot.empty) {
+        // Already exists (maybe started or completed)
+        const docData = snapshot.docs[0].data();
+        if (docData.status === 'completed') return; // Don't overwrite completed status
+
+        // If already started, maybe just update timestamp? Or do nothing.
+        // Let's update timestamp to reflect "last worked on"
+        await updateDoc(snapshot.docs[0].ref, {
+            status: 'started',
+            timestamp: serverTimestamp()
+        });
+    } else {
+        // Create new progress entry with 'started' status
+        await addDoc(progressRef, {
+            userId,
+            roomCode,
+            challengeId,
+            status: 'started',
+            startedAt: serverTimestamp(), // Keep original start time if we want to track duration
+            timestamp: serverTimestamp()  // Last update time
+        });
+    }
+
+    // Update user last active
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    await updateDoc(userRef, { last_active: serverTimestamp() });
+}
+
 /**
  * Subscribes to room users and their progress
  * @param {string} roomCode 
@@ -229,6 +272,24 @@ export async function getPeerPrompts(roomCode, challengeId) {
     return entries;
 }
 
+/**
+ * Validates and gets progress for a specific user
+ * @param {string} userId 
+ * @returns {Promise<Object>} Map of challengeId -> { status, prompt, timestamp }
+ */
+export async function getUserProgress(userId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(progressRef, where("userId", "==", userId));
+    const snapshot = await getDocs(q);
+
+    const progressMap = {};
+    snapshot.forEach(doc => {
+        const data = doc.data();
+        progressMap[data.challengeId] = data;
+    });
+    return progressMap;
+}
+
 // --- Admin / Challenge Services ---
 
 export async function getChallenges() {

src/views/StudentView.js

@@ -1,12 +1,13 @@
-import { submitPrompt, getChallenges } from "../services/classroom.js";
-import { getPeerPrompts } from "../services/classroom.js"; // Import needed for modal
+import { submitPrompt, getChallenges, startChallenge, getUserProgress } from "../services/classroom.js";
+import { getPeerPrompts } from "../services/classroom.js";
 
-// Cache challenges locally to avoid refetching heavily
+// Cache challenges locally
 let cachedChallenges = [];
 
 export async function renderStudentView() {
     const nickname = localStorage.getItem('vibecoding_nickname') || 'Guest';
     const roomCode = localStorage.getItem('vibecoding_room_code') || 'Unknown';
+    const userId = localStorage.getItem('vibecoding_user_id');
 
     // Fetch challenges if empty
     if (cachedChallenges.length === 0) {
@@ -14,13 +15,20 @@ export async function renderStudentView() {
             cachedChallenges = await getChallenges();
         } catch (e) {
             console.error("Failed to fetch challenges", e);
-            throw new Error("無法讀取題目列表，請檢查網路連線 (Error: " + e.message + ")");
+            throw new Error("無法讀取題目列表 (Error: " + e.message + ")");
+        }
+    }
+
+    // Fetch User Progress
+    let userProgress = {};
+    if (userId) {
+        try {
+            userProgress = await getUserProgress(userId);
+        } catch (e) {
+            console.error("Failed to fetch progress", e);
         }
     }
 
-    // Group by Level (optional, but good for UI organization if we wanted headers)
-    // For now, let's just map them.
-    // Or if we want to keep the headers:
     const levelGroups = {
         beginner: cachedChallenges.filter(c => c.level === 'beginner'),
         intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
@@ -33,70 +41,92 @@ export async function renderStudentView() {
         advanced: "高級 (Advanced)"
     };
 
-    const renderCard = (c) => `
-        <div class="group relative bg-gray-800 bg-opacity-50 border border-gray-700 rounded-2xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300 flex flex-col">
-            <div class="absolute top-0 left-0 w-1 h-full bg-gray-600 group-hover:bg-cyan-400 transition-colors"></div>
-            
-            <div class="p-6 pl-8 flex-1 flex flex-col">
+    function renderTaskCard(c) {
+        const p = userProgress[c.id] || {};
+        const isCompleted = p.status === 'completed';
+        const isStarted = p.status === 'started';
+
+        // 1. Completed State: Collapsed with Trophy
+        if (isCompleted) {
+            return `
+            <div class="bg-gray-800/50 border border-green-500/30 rounded-xl p-4 flex items-center justify-between group hover:bg-gray-800 transition-all">
+                <div class="flex items-center space-x-3">
+                    <div class="text-2xl">🏆</div>
+                    <h3 class="font-bold text-gray-300 group-hover:text-white transition-colors">${c.title}</h3>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <span class="text-xs text-green-400 font-mono bg-green-900/30 px-2 py-1 rounded">已通關</span>
+                    <button onclick="document.getElementById('detail-${c.id}').classList.toggle('hidden')" class="text-gray-500 hover:text-white">
+                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
+                    </button>
+                </div>
+            </div>
+            <!-- Hidden detail for reference -->
+            <div id="detail-${c.id}" class="hidden mt-2 p-4 bg-gray-900/50 rounded-xl border border-gray-700 text-sm text-gray-400">
+                <p class="mb-2">您的提示詞:</p>
+                <div class="font-mono bg-black p-2 rounded text-gray-300 border border-gray-800">${p.submission_prompt}</div>
+            </div>
+            `;
+        }
+
+        // 2. Started or Not Started
+        // If Started: Show "Prompt Input" area.
+        // If Not Started: Show "Start Task" button only.
+
+        return `
+        <div class="group relative bg-gray-800 bg-opacity-50 border ${isStarted ? 'border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.1)]' : 'border-gray-700'} rounded-2xl overflow-hidden hover:border-cyan-500/50 transition-all duration-300 flex flex-col">
+             <div class="absolute top-0 left-0 w-1 h-full ${isStarted ? 'bg-cyan-500' : 'bg-gray-600'} group-hover:bg-cyan-400 transition-colors"></div>
+             
+             <div class="p-6 pl-8 flex-1 flex flex-col">
                 <div class="flex flex-col sm:flex-row justify-between items-start mb-4 gap-4">
                     <div>
                         <h2 class="text-xl font-bold text-white mb-1">${c.title}</h2>
                         <p class="text-gray-400 text-sm whitespace-pre-line">${c.description}</p>
                     </div>
-                    <a href="${c.link}" target="_blank" 
-                       class="w-full sm:w-auto text-center bg-gray-700 hover:bg-cyan-600 text-white px-4 py-2 rounded-lg transition-colors flex items-center justify-center space-x-2"
-                       title="前往題目">
-                        <span>Go to Task</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-                        </svg>
-                    </a>
                 </div>
-                
-                <div class="mt-auto pt-4 border-t border-gray-700/50">
-                    <label class="block text-xs uppercase tracking-wider text-gray-500 mb-2">提交修復提示詞</label>
-                    <div class="flex flex-col space-y-2">
-                        <textarea id="input-${c.id}" rows="2"
-                            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="輸入你的 Prompt..."></textarea>
-                        
-                        <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">
-                            提交
+                ${!isStarted ? `
+                    <!-- Not Started State -->
+                    <div class="mt-4">
+                        <button onclick="window.startLevel('${c.id}', '${c.link}')" 
+                                class="w-full sm:w-auto bg-gray-700 hover:bg-cyan-600 hover:text-white text-gray-200 font-bold py-3 px-6 rounded-xl transition-all flex items-center justify-center space-x-2 shadow-lg">
+                            <span>🚀 開始任務 (Start Task)</span>
                         </button>
                     </div>
-                </div>
-            </div>
-        </div>
-    `;
+                ` : `
+                    <!-- Started State: Input Area -->
+                    <div class="mt-4 pt-4 border-t border-gray-700/50">
+                        <div class="flex justify-between items-center mb-2">
+                            <label class="block text-xs uppercase tracking-wider text-cyan-400 animate-pulse">任務進行中</label>
+                            <a href="${c.link}" target="_blank" class="text-xs text-gray-500 hover:text-white flex items-center space-x-1">
+                                <span>再次開啟 GeminCanvas</span>
+                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+                            </a>
+                        </div>
+                        
+                        <div class="flex flex-col space-y-2">
+                             <textarea id="input-${c.id}" rows="2"
+                                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>
+                            
+                            <div id="error-${c.id}" class="text-red-500 text-xs hidden">提示詞太短囉，請多寫一點細節！</div>
 
-    // Render logic
-    let contentHtml = '';
-    if (cachedChallenges.length === 0) {
-        contentHtml = '<div class="text-center text-gray-500 py-10">目前沒有題目，請請講師至後台新增。</div>';
-    } else {
-        ['beginner', 'intermediate', 'advanced'].forEach(levelId => {
-            const tasks = levelGroups[levelId] || [];
-            if (tasks.length > 0) {
-                contentHtml += `
-                    <section>
-                        <h3 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400 mb-4 px-2">
-                            ${levelNames[levelId]}
-                        </h3>
-                        <div class="grid grid-cols-1 gap-6">
-                            ${tasks.map(renderCard).join('')}
+                            <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">
+                                提交解答
+                            </button>
                         </div>
-                    </section>
-                `;
-            }
-        });
+                    </div>
+                `}
+             </div>
+        </div>
+        `;
     }
 
+    // Accordion Layout
     return `
     <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl">
-        <header class="flex justify-between items-center mb-8 sticky top-0 bg-slate-900/90 backdrop-blur z-20 py-4 px-2 -mx-2">
+        <header class="flex justify-between 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">
                 <div class="flex items-center space-x-2">
                     <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
@@ -109,8 +139,35 @@ export async function renderStudentView() {
             </div>
         </header>
 
-        <div class="space-y-12">
-            ${contentHtml}
+        <div class="space-y-4">
+            ${['beginner', 'intermediate', 'advanced'].map(level => {
+        const tasks = levelGroups[level] || [];
+        const isOpen = level === 'beginner' ? 'open' : '';
+        // Count completed
+        const completedCount = tasks.filter(t => userProgress[t.id]?.status === 'completed').length;
+
+        return `
+                <details class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden transition-all" ${isOpen}>
+                    <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800/80 hover:bg-gray-700 transition-colors select-none">
+                        <div class="flex items-center space-x-3">
+                            <h3 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
+                               ${levelNames[level]}
+                            </h3>
+                            ${completedCount === tasks.length && tasks.length > 0 ? '<span class="text-yellow-500 text-xs border border-yellow-500/50 px-2 py-0.5 rounded-full">ALL CLEAR</span>' : ''}
+                        </div>
+                        <div class="flex items-center space-x-2">
+                            <span class="text-xs text-gray-400 bg-gray-900 px-2 py-1 rounded-full">${completedCount} / ${tasks.length}</span>
+                            <svg class="w-5 h-5 text-gray-400 transform group-open:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            </svg>
+                        </div>
+                    </summary>
+                    <div class="p-4 pt-0 grid grid-cols-1 gap-4 mt-4">
+                        ${tasks.length > 0 ? tasks.map(c => renderTaskCard(c)).join('') : '<div class="text-gray-500 text-sm italic">本區段尚無題目</div>'}
+                    </div>
+                </details>
+                `;
+    }).join('')}
         </div>
         
         <!-- Peer Learning FAB -->
@@ -125,6 +182,31 @@ export async function renderStudentView() {
 }
 
 export function setupStudentEvents() {
+    // Start Level Logic
+    window.startLevel = async (challengeId, link) => {
+        // Open link
+        window.open(link, '_blank');
+
+        // Call service to update status
+        const roomCode = localStorage.getItem('vibecoding_room_code');
+        const userId = localStorage.getItem('vibecoding_user_id');
+
+        if (roomCode && userId) {
+            try {
+                await startChallenge(userId, roomCode, challengeId);
+                // Reload view to show Input State
+                // Ideally we should use state management, but checking URL hash or re-rendering works
+                const app = document.querySelector('#app');
+                app.innerHTML = await renderStudentView();
+                // Re-attach events (recursion safety check needed? No, navigateTo does this usually, but here we manually re-render)
+                // Or better: trigger a custom event or call navigateTo functionality? 
+                // Simple re-render is fine for now.
+            } catch (e) {
+                console.error("Start challenge failed", e);
+            }
+        }
+    };
+
     window.submitLevel = async (challengeId) => {
         const input = document.getElementById(`input-${challengeId}`);
         const errorMsg = document.getElementById(`error-${challengeId}`);
@@ -134,35 +216,38 @@ export function setupStudentEvents() {
 
         if (!participantDataCheck(roomCode, userId)) return;
 
-        // Validation Rule: Length >= 5
         if (prompt.trim().length < 5) {
             errorMsg.classList.remove('hidden');
             input.classList.add('border-red-500');
             return;
         }
 
-        // Reset error state
         errorMsg.classList.add('hidden');
         input.classList.remove('border-red-500');
 
+        // Show loading state on button
+        const container = input.parentElement;
+        const btn = container.querySelector('button');
+        const originalText = btn.textContent;
+        btn.textContent = "提交中...";
+        btn.disabled = true;
+
         try {
             await submitPrompt(userId, roomCode, challengeId, prompt);
 
-            // Visual feedback
-            const container = input.parentElement;
-            const btn = container.querySelector('button');
-            const originalText = btn.textContent;
-
-            btn.textContent = "✓ 已提交";
-            btn.classList.add("bg-green-600", "from-green-600", "to-green-600");
+            btn.textContent = "✓ 已通關";
+            btn.classList.add("bg-green-600");
 
-            setTimeout(() => {
-                btn.textContent = originalText;
-                btn.classList.remove("bg-green-600", "from-green-600", "to-green-600");
-            }, 2000);
+            // Re-render to show Trophy state after short delay
+            setTimeout(async () => {
+                const app = document.querySelector('#app');
+                app.innerHTML = await renderStudentView();
+            }, 1000);
 
         } catch (error) {
             console.error(error);
+            btn.textContent = originalText;
+            btn.disabled = false;
             alert("提交失敗: " + error.message);
         }
     };
@@ -179,7 +264,8 @@ function participantDataCheck(roomCode, userId) {
 
 // Peer Learning Modal Logic
 function renderPeerModal() {
-    // Dropdown options based on cachedChallenges
+    // We need to re-fetch challenges for the dropdown? 
+    // They are cached in 'cachedChallenges' module variable
     let optionsHtml = '<option value="" disabled selected>選擇題目...</option>';
     if (cachedChallenges.length > 0) {
         optionsHtml += cachedChallenges.map(c =>
@@ -210,7 +296,6 @@ function renderPeerModal() {
 }
 
 window.openPeerModal = () => {
-    // Remove existing modal if any to ensure fresh render (especially for dropdown)
     const existing = document.getElementById('peer-modal');
     if (existing) existing.remove();
 
@@ -233,7 +318,7 @@ window.loadPeerPrompts = async (challengeId) => {
     const prompts = await getPeerPrompts(roomCode, challengeId);
 
     if (prompts.length === 0) {
-        container.innerHTML = '<div class="text-center text-gray-500 py-10">尚無同學提交此關卡</div>';
+        container.innerHTML = '<div class="text-center text-gray-500 py-10">尚無同學提交此關卡或您無權限查看(需相同教室代碼)</div>';
         return;
     }