Upload 8 files

src/views/StudentView.js

@@ -1,80 +1,111 @@
-import { submitPrompt } from "../services/classroom.js";
-
-const LEVELS = [
-    {
-        id: 'beginner',
-        name: '初級 (Beginner)',
-        desc: '基礎幾何圖形繪製',
-        link: 'https://geminicanvas.web.app/' // TODO: Replace with real link
-    },
-    {
-        id: 'intermediate',
-        name: '中級 (Intermediate)',
-        desc: '迴圈與重複結構',
-        link: 'https://geminicanvas.web.app/'
-    },
-    {
-        id: 'advanced',
-        name: '高級 (Advanced)',
-        desc: '函數與參數應用',
-        link: 'https://geminicanvas.web.app/'
-    }
-];
+import { submitPrompt, getChallenges } from "../services/classroom.js";
+import { getPeerPrompts } from "../services/classroom.js"; // Import needed for modal
+
+// Cache challenges locally to avoid refetching heavily
+let cachedChallenges = [];
 
-export function renderStudentView() {
+export async function renderStudentView() {
     const nickname = localStorage.getItem('vibecoding_nickname') || 'Guest';
 
+    // Fetch challenges if empty
+    if (cachedChallenges.length === 0) {
+        cachedChallenges = await getChallenges();
+    }
+
+    // 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'),
+        advanced: cachedChallenges.filter(c => c.level === 'advanced')
+    };
+
+    const levelNames = {
+        beginner: "初級 (Beginner)",
+        intermediate: "中級 (Intermediate)",
+        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">
+                <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">
+                            提交
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </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('')}
+                        </div>
+                    </section>
+                `;
+            }
+        });
+    }
+
     return `
-    <div class="min-h-screen p-6 pb-24">
-        <header class="flex justify-between items-center mb-8">
+    <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">
             <div class="flex items-center space-x-2">
                 <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                <span class="text-gray-400 text-sm">已連線: ${nickname}</span>
+                <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
             </div>
-            <div class="text-right">
+            <div>
                 <h1 class="text-xl font-bold italic text-white tracking-widest">VIBECODING</h1>
             </div>
         </header>
 
-        <div class="grid grid-cols-1 gap-6 max-w-2xl mx-auto">
-            ${LEVELS.map(level => `
-                <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">
-                    <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">
-                        <div class="flex justify-between items-start mb-4">
-                            <div>
-                                <h2 class="text-2xl font-bold text-white mb-1">${level.name}</h2>
-                                <p class="text-gray-400 text-sm">${level.desc}</p>
-                            </div>
-                            <a href="${level.link}" target="_blank" 
-                               class="bg-gray-700 hover:bg-cyan-600 text-white p-2 rounded-lg transition-colors"
-                               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="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-6">
-                            <label class="block text-xs uppercase tracking-wider text-gray-500 mb-2">提交修復提示詞</label>
-                            <div class="flex space-x-2">
-                                <input type="text" id="input-${level.id}" 
-                                    class="flex-1 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 text-white focus:border-cyan-500 focus:outline-none transition-colors"
-                                    placeholder="輸入你的 Prompt...">
-                                <button onclick="window.submitLevel('${level.id}')"
-                                    class="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>
-                        </div>
-                    </div>
-                </div>
-            `).join('')}
+        <div class="space-y-12">
+            ${contentHtml}
         </div>
         
-        <!-- Peer Learning (Floating Action Button) -->
-        <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"
+        <!-- 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" />
@@ -85,22 +116,37 @@ export function renderStudentView() {
 }
 
 export function setupStudentEvents() {
-    window.submitLevel = async (levelId) => {
-        const input = document.getElementById(`input-${levelId}`);
+    window.submitLevel = async (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 studentId = localStorage.getItem('vibecoding_student_id');
+        const userId = localStorage.getItem('vibecoding_user_id');
+
+        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;
+        }
 
-        if (!participantDataCheck(roomCode, studentId)) return;
+        // Reset error state
+        errorMsg.classList.add('hidden');
+        input.classList.remove('border-red-500');
 
         try {
-            await submitPrompt(roomCode, studentId, levelId, prompt);
+            await submitPrompt(userId, roomCode, challengeId, prompt);
 
             // Visual feedback
-            const btn = input.nextElementSibling;
+            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");
+
             setTimeout(() => {
                 btn.textContent = originalText;
                 btn.classList.remove("bg-green-600", "from-green-600", "to-green-600");
@@ -108,13 +154,13 @@ export function setupStudentEvents() {
 
         } catch (error) {
             console.error(error);
-            alert("提交失敗");
+            alert("提交失敗: " + error.message);
         }
     };
 }
 
-function participantDataCheck(roomCode, studentId) {
-    if (!roomCode || !studentId) {
+function participantDataCheck(roomCode, userId) {
+    if (!roomCode || !userId) {
         alert("連線資訊遺失，請重新登入");
         window.location.reload();
         return false;
@@ -123,65 +169,59 @@ function participantDataCheck(roomCode, studentId) {
 }
 
 // Peer Learning Modal Logic
-import { getPeerPrompts } from "../services/classroom.js";
-
 function renderPeerModal() {
+    // Dropdown options based on cachedChallenges
+    let optionsHtml = '<option value="" disabled selected>選擇題目...</option>';
+    if (cachedChallenges.length > 0) {
+        optionsHtml += cachedChallenges.map(c =>
+            `<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 max-w-2xl w-full max-h-[80vh] flex flex-col border border-gray-700 shadow-2xl">
+        <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">
-                    <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="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </button>
+                <button onclick="closePeerModal()" class="text-gray-400 hover:text-white">✕</button>
             </div>
             
-            <div class="p-6 flex-1 overflow-y-auto space-y-4" id="peer-prompts-container">
-                <!-- Prompts loaded here -->
+            <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 border-t border-gray-700 bg-gray-900/50 rounded-b-2xl">
-                <div class="flex space-x-2 overflow-x-auto pb-2" id="level-tabs">
-                    <!-- Tabs for switching levels -->
-                </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>
     `;
 }
 
-window.openPeerModal = async () => {
-    const modal = document.getElementById('peer-modal');
-    modal.classList.remove('hidden');
+window.openPeerModal = () => {
+    // Remove existing modal if any to ensure fresh render (especially for dropdown)
+    const existing = document.getElementById('peer-modal');
+    if (existing) existing.remove();
 
-    // Default to first level or currently working level? Let's just create tabs.
-    renderLevelTabs();
-    // Load first level by default
-    loadPeerPrompts('beginner');
+    const div = document.createElement('div');
+    div.innerHTML = renderPeerModal();
+    document.body.appendChild(div.firstElementChild);
+
+    document.getElementById('peer-modal').classList.remove('hidden');
 };
 
 window.closePeerModal = () => {
     document.getElementById('peer-modal').classList.add('hidden');
 };
 
-function renderLevelTabs() {
-    const container = document.getElementById('level-tabs');
-    container.innerHTML = LEVELS.map(level => `
-        <button onclick="loadPeerPrompts('${level.id}')" 
-            class="px-4 py-2 rounded-full bg-gray-700 text-sm hover:bg-cyan-600 hover:text-white transition-colors whitespace-nowrap">
-            ${level.name.split(' ')[0]}
-        </button>
-    `).join('');
-}
-
-window.loadPeerPrompts = async (levelId) => {
+window.loadPeerPrompts = async (challengeId) => {
     const container = document.getElementById('peer-prompts-container');
     container.innerHTML = '<div class="text-center text-gray-400 py-10">載入中...</div>';
 
     const roomCode = localStorage.getItem('vibecoding_room_code');
-    const prompts = await getPeerPrompts(roomCode, levelId);
+    const prompts = await getPeerPrompts(roomCode, challengeId);
 
     if (prompts.length === 0) {
         container.innerHTML = '<div class="text-center text-gray-500 py-10">尚無同學提交此關卡</div>';
@@ -195,17 +235,9 @@ window.loadPeerPrompts = async (levelId) => {
                     ${p.nickname[0]}
                 </div>
                 <span class="font-bold text-cyan-300 text-sm">${p.nickname}</span>
+                <span class="text-gray-500 text-xs ml-auto">${new Date(p.timestamp.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
             </div>
-            <p class="text-gray-300 font-mono text-sm bg-black/20 p-3 rounded-lg border border-gray-700/50">
-                ${p.prompt}
-            </p>
+            <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('');
 };
-
-// Append modal to body only if not exists
-if (!document.getElementById('peer-modal')) {
-    const div = document.createElement('div');
-    div.innerHTML = renderPeerModal();
-    document.body.appendChild(div.firstElementChild);
-}