Upload 8 files

src/services/classroom.js

@@ -37,6 +37,24 @@ export async function createRoom() {
     return roomCode;
 }
 
+/**
+ * Verifies instructor password against Firestore (Auto-seeds if missing)
+ * @param {string} inputPassword 
+ * @returns {Promise<boolean>}
+ */
+export async function verifyInstructorPassword(inputPassword) {
+    const settingsRef = doc(db, "settings", "instructor_auth");
+    const snap = await getDoc(settingsRef);
+
+    if (!snap.exists()) {
+        // Auto-seed default password for migration
+        await setDoc(settingsRef, { password: "88300" });
+        return inputPassword === "88300";
+    }
+
+    return snap.data().password === inputPassword;
+}
+
 /**
  * Joins a room with Dual-Role Auth / Session Persistence logic
  * @param {string} roomCode 

src/views/InstructorView.js

@@ -120,12 +120,27 @@ export function setupInstructorEvents() {
     const authModal = document.getElementById('auth-modal');
 
     // Default password check
-    const checkPassword = () => {
-        if (pwdInput.value === '88300') {
-            authModal.classList.add('hidden');
-        } else {
-            alert('密碼錯誤');
-            pwdInput.value = '';
+    const checkPassword = async () => {
+        const { verifyInstructorPassword } = await import("../services/classroom.js");
+
+        authBtn.textContent = "驗證中...";
+        authBtn.disabled = true;
+
+        try {
+            const isValid = await verifyInstructorPassword(pwdInput.value);
+            if (isValid) {
+                authModal.classList.add('hidden');
+                // Store session to avoid re-login on reload (Optional, for now just per session)
+            } else {
+                alert('密碼錯誤');
+                pwdInput.value = '';
+            }
+        } catch (e) {
+            console.error(e);
+            alert("驗證出錯");
+        } finally {
+            authBtn.textContent = "確認進入";
+            authBtn.disabled = false;
         }
     };
 

src/views/StudentView.js

@@ -3,52 +3,15 @@ import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPr
 // 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) {
-        try {
-            cachedChallenges = await getChallenges();
-        } catch (e) {
-            console.error("Failed to fetch challenges", e);
-            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);
-        }
-    }
+function renderTaskCard(c, userProgress) {
+    const p = userProgress[c.id] || {};
+    const isCompleted = p.status === 'completed';
+    const isStarted = p.status === 'started';
 
-    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)"
-    };
-
-    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">
+    // 1. Completed State: Collapsed with Trophy
+    if (isCompleted) {
+        return `
+            <div id="card-${c.id}" 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>
@@ -69,21 +32,24 @@ export async function renderStudentView() {
                 <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">
+    // 2. Started or Not Started
+    return `
+        <div id="card-${c.id}" 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 class="bg-blue-900/30 border border-blue-500/30 p-4 rounded-xl my-3 shadow-[inset_0_0_10px_rgba(59,130,246,0.1)]">
+                            <div class="flex items-start space-x-2 text-cyan-300 mb-1">
+                                <svg class="w-5 h-5 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                <span class="font-bold text-sm tracking-wider uppercase">任務說明</span>
+                            </div>
+                            <p class="text-gray-200 text-base font-medium whitespace-pre-line leading-relaxed pl-7">${c.description}</p>
+                        </div>
                     </div>
                 </div>
 
@@ -123,12 +89,9 @@ export async function renderStudentView() {
              </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-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
+export async function renderStudentView() {        <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>
@@ -165,22 +128,24 @@ export async function renderStudentView() {
                         </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 class="p-4 pt-0 grid grid-cols-1 gap-4 mt-4">
+                        ${tasks.length > 0 ? tasks.map(c => renderTaskCard(c, userProgress)).join('') : '<div class="text-gray-500 text-sm italic">本區段尚無題目</div>'}
+                    </div>
                     </div>
                 </details>
                 `;
     }).join('')}
         </div>
         
-        <!-- Peer Learning FAB -->
+        <!--Peer Learning FAB-- >
         <button onclick="window.openPeerModal()" class="fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-4 shadow-xl shadow-purple-600/40 transition-transform hover:scale-110 active:scale-90 z-40"
             title="查看同學作業">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
             </svg>
         </button>
-    </div>
-    `;
+    </div >
+        `;
 }
 
 export function setupStudentEvents() {
@@ -210,8 +175,8 @@ export function setupStudentEvents() {
     };
 
     window.submitLevel = async (challengeId) => {
-        const input = document.getElementById(`input-${challengeId}`);
-        const errorMsg = document.getElementById(`error-${challengeId}`);
+        const input = document.getElementById(`input - ${ challengeId } `);
+        const errorMsg = document.getElementById(`error - ${ challengeId } `);
         const prompt = input.value;
         const roomCode = localStorage.getItem('vibecoding_room_code');
         const userId = localStorage.getItem('vibecoding_user_id');
@@ -240,11 +205,31 @@ export function setupStudentEvents() {
             btn.textContent = "✓ 已通關";
             btn.classList.add("bg-green-600");
 
-            // Re-render to show Trophy state after short delay
-            setTimeout(async () => {
+            // NEW: Partial Update Strategy directly
+            // 1. Find the container
+            // The card is the great-great-grandparent of the button (button -> div -> div -> div -> card)
+            // Or simpler: give ID to card wrapper in renderTaskCard.
+            // Let's assume renderTaskCard now adds id="card-${c.id}"
+
+            // 2. Re-render just this card
+            const challenge = cachedChallenges.find(c => c.id === challengeId);
+            const newProgress = { [challengeId]: { status: 'completed', submission_prompt: prompt } };
+
+            // We need to merge with existing progress to pass to renderTaskCard? 
+            // Actually renderTaskCard takes the whole userProgress map.
+            // But for this specific card, we can just pass a map containing just this one, because renderTaskCard(c, map) only looks up map[c.id].
+
+            const newCardHTML = renderTaskCard(challenge, newProgress);
+
+            // 3. Replace in DOM
+            const oldCard = document.getElementById(`card - ${ challengeId } `);
+            if (oldCard) {
+                oldCard.outerHTML = newCardHTML;
+            } else {
+                // Fallback if ID not found (should not happen if we update renderTaskCard)
                 const app = document.querySelector('#app');
                 app.innerHTML = await renderStudentView();
-            }, 1000);
+            }
 
         } catch (error) {
             console.error(error);
@@ -304,30 +289,30 @@ function renderPeerModal() {
     let optionsHtml = '<option value="" disabled selected>選擇題目...</option>';
     if (cachedChallenges.length > 0) {
         optionsHtml += cachedChallenges.map(c =>
-            `<option value="${c.id}">[${c.level}] ${c.title}</option>`
+            `< option value = "${c.id}" > [${ c.level }] ${ c.title }</option > `
         ).join('');
     }
 
     return `
-    <div id="peer-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
-        <div class="bg-gray-800 rounded-2xl w-full max-w-md h-[80vh] flex flex-col border border-gray-700 shadow-2xl">
-            <div class="p-6 border-b border-gray-700 flex justify-between items-center">
-                <h3 class="text-xl font-bold text-white">同學的成功提示詞</h3>
-                <button onclick="closePeerModal()" class="text-gray-400 hover:text-white">✕</button>
-            </div>
-            
-            <div class="p-4 bg-gray-900 border-b border-gray-700">
-                 <select id="peer-challenge-select" onchange="loadPeerPrompts(this.value)" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white">
-                    ${optionsHtml}
-                 </select>
-            </div>
+        < div id = "peer-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4" >
+            <div class="bg-gray-800 rounded-2xl w-full max-w-md h-[80vh] flex flex-col border border-gray-700 shadow-2xl">
+                <div class="p-6 border-b border-gray-700 flex justify-between items-center">
+                    <h3 class="text-xl font-bold text-white">同學的成功提示詞</h3>
+                    <button onclick="closePeerModal()" class="text-gray-400 hover:text-white">✕</button>
+                </div>
+
+                <div class="p-4 bg-gray-900 border-b border-gray-700">
+                    <select id="peer-challenge-select" onchange="loadPeerPrompts(this.value)" class="w-full bg-gray-800 border border-gray-600 rounded p-2 text-white">
+                        ${optionsHtml}
+                    </select>
+                </div>
 
-            <div class="p-4 flex-1 overflow-y-auto space-y-4" id="peer-prompts-container">
-                <div class="text-center text-gray-500 mt-10">請選擇一個題目來查看</div>
+                <div class="p-4 flex-1 overflow-y-auto space-y-4" id="peer-prompts-container">
+                    <div class="text-center text-gray-500 mt-10">請選擇一個題目來查看</div>
+                </div>
             </div>
-        </div>
-    </div>
-    `;
+    </div >
+        `;
 }
 
 window.openPeerModal = () => {
@@ -362,7 +347,7 @@ window.loadPeerPrompts = async (challengeId) => {
         const isLiked = p.likedBy && p.likedBy.includes(currentUserId);
 
         return `
-        <div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600">
+        < div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600" >
             <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center space-x-2">
                     <div class="w-6 h-6 rounded-full bg-cyan-600 flex items-center justify-center text-xs font-bold text-white">
@@ -381,11 +366,11 @@ window.loadPeerPrompts = async (challengeId) => {
                 </button>
             </div>
             <p class="text-gray-300 font-mono text-sm bg-black/20 p-3 rounded-lg border border-gray-700/50 whitespace-pre-wrap">${p.prompt}</p>
-        </div>
-    `}).join('');
+        </div >
+        `}).join('');
 
     // Attach challenge title for notification context
-    window.currentPeerChallengeTitle = document.querySelector(`#peer-challenge-select option[value="${challengeId}"]`).text;
+    window.currentPeerChallengeTitle = document.querySelector(`#peer - challenge - select option[value = "${challengeId}"]`).text;
 };
 
 // Like Handler