Upload 8 files

src/views/StudentView.js

@@ -91,7 +91,47 @@ function renderTaskCard(c, userProgress) {
         `;
 }
 
-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">
+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);
+        }
+    }
+
+    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)"
+    };
+
+    // 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">
             <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>
@@ -127,25 +167,23 @@ export async function renderStudentView() {        <header class="flex justify-b
                             </svg>
                         </div>
                     </summary>
-                    <div class="p-4 pt-0 grid grid-cols-1 gap-4 mt-4">
                     <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() {
@@ -175,8 +213,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');
@@ -222,7 +260,7 @@ export function setupStudentEvents() {
             const newCardHTML = renderTaskCard(challenge, newProgress);
 
             // 3. Replace in DOM
-            const oldCard = document.getElementById(`card - ${ challengeId } `);
+            const oldCard = document.getElementById(`card-${challengeId}`);
             if (oldCard) {
                 oldCard.outerHTML = newCardHTML;
             } else {
@@ -289,12 +327,12 @@ 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 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>
@@ -311,7 +349,7 @@ function renderPeerModal() {
                     <div class="text-center text-gray-500 mt-10">請選擇一個題目來查看</div>
                 </div>
             </div>
-    </div >
+        </div>
         `;
 }
 
@@ -347,7 +385,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">
@@ -366,11 +404,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 >
+        </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