Upload 8 files

src/views/AdminView.js

@@ -69,7 +69,13 @@ export function setupAdminEvents() {
     loadChallenges();
 
     document.getElementById('back-instructor-btn').addEventListener('click', () => {
-        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/InstructorView.js

@@ -4,7 +4,11 @@ let cachedChallenges = [];
 
 export async function renderInstructorView() {
     // Pre-fetch challenges for table headers
-    cachedChallenges = await getChallenges();
+    try {
+        cachedChallenges = await getChallenges();
+    } catch (e) {
+        console.error("Failed header load", e);
+    }
 
     return `
     <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-90 backdrop-blur z-50 flex items-center justify-center">
@@ -15,43 +19,95 @@ export async function renderInstructorView() {
         </div>
     </div>
 
-    <div class="min-h-screen p-6 pb-20">
+    <!-- Broadcast Modal (Hidden by default) -->
+    <div id="broadcast-modal" class="fixed inset-0 bg-black/90 backdrop-blur z-50 hidden flex flex-col items-center justify-center p-8 transition-opacity duration-300">
+        <button onclick="closeBroadcast()" class="absolute top-6 right-6 text-gray-400 hover:text-white text-2xl">✕</button>
+        
+        <div id="broadcast-content" class="bg-gray-800 border border-gray-600 rounded-2xl p-8 max-w-4xl w-full text-center shadow-2xl transform transition-transform scale-95 opacity-0">
+            <div class="mb-4 flex flex-col items-center">
+                <div class="w-16 h-16 rounded-full bg-cyan-600 flex items-center justify-center text-3xl font-bold text-white mb-2" id="broadcast-avatar">
+                    D
+                </div>
+                <h3 class="text-xl text-cyan-300 font-bold" id="broadcast-author">Dave</h3>
+                <span class="text-gray-500 text-sm" id="broadcast-challenge">Challenge Name</span>
+            </div>
+            
+            <div class="bg-black/30 rounded-xl p-6 mb-8 text-left overflow-auto max-h-[50vh]">
+                <pre class="text-green-400 font-mono text-lg whitespace-pre-wrap" id="broadcast-prompt">Loading...</pre>
+            </div>
+
+            <div class="flex justify-center space-x-4">
+               <button id="btn-show-stage" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg">
+                    <span>🖥️ 投放到大螢幕 (本機)</span>
+               </button>
+               <!-- Future Feature: Send to Students -->
+               <!-- 
+               <button id="btn-broadcast-all" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg opacity-50 cursor-not-allowed" title="此功能開發中">
+                    <span>📡 推送給所有人</span>
+               </button>
+               -->
+            </div>
+        </div>
+        
+        <!-- Big Screen Mode (Initially hidden inside modal) -->
+        <div id="stage-view" class="hidden absolute inset-0 bg-gray-900 flex flex-col items-center justify-center p-10">
+             <button onclick="closeStage()" class="absolute top-6 right-6 text-gray-500 hover:text-white text-4xl">✕</button>
+             <h1 class="text-4xl font-bold text-cyan-400 mb-8" id="stage-title">優秀作品展示</h1>
+             <div class="bg-black border-2 border-cyan-500/50 rounded-2xl p-10 max-w-6xl w-full shadow-[0_0_50px_rgba(6,182,212,0.2)]">
+                <pre class="text-3xl text-green-400 font-mono whitespace-pre-wrap leading-relaxed" id="stage-prompt">...</pre>
+             </div>
+             <div class="mt-8 text-2xl text-gray-400">
+                Author: <span class="text-white font-bold" id="stage-author">Dave</span>
+             </div>
+        </div>
+    </div>
+
+    <div class="min-h-screen p-6 pb-20 bg-gray-900 text-white">
         <!-- Header -->
-        <header class="flex flex-col md:flex-row justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm space-y-4 md:space-y-0">
-            <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
-                講師儀表板 Instructor Dashboard
-            </h1>
-            <div id="room-info" class="hidden flex items-center space-x-4">
-                <span class="text-gray-400">教室代碼</span>
-                <span id="display-room-code" class="text-3xl font-mono font-bold text-cyan-400 tracking-widest bg-gray-900 px-4 py-2 rounded-lg border border-cyan-500/30 shadow-[0_0_15px_rgba(34,211,238,0.3)]"></span>
+        <header class="flex flex-col md:flex-row justify-between items-center mb-6 bg-gray-800 p-4 rounded-xl border border-gray-700 space-y-4 md:space-y-0 sticky top-0 z-30 shadow-lg">
+            <div class="flex items-center space-x-4">
+                <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
+                    儀表板
+                </h1>
+                <div id="room-info" class="hidden flex items-center space-x-2 bg-black/30 px-3 py-1 rounded-lg border border-gray-700">
+                    <span class="text-xs text-gray-500 uppercase">Room</span>
+                    <span id="display-room-code" class="text-xl font-mono font-bold text-cyan-400 tracking-widest"></span>
+                </div>
             </div>
+            
             <div class="flex space-x-3">
+                <div class="flex items-center space-x-2 text-xs text-gray-400 mr-4 border-r border-gray-700 pr-4">
+                    <div class="flex items-center"><div class="w-3 h-3 bg-gray-700 rounded-sm mr-1"></div> 未開始</div>
+                    <div class="flex items-center"><div class="w-3 h-3 bg-blue-600 rounded-sm mr-1"></div> 進行中</div>
+                    <div class="flex items-center"><div class="w-3 h-3 bg-green-500 rounded-sm mr-1"></div> 已完成</div>
+                    <div class="flex items-center"><div class="w-3 h-3 bg-red-500 animate-pulse rounded-sm mr-1"></div> 卡關 (>5m)</div>
+                </div>
+
                 <button id="nav-admin-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-all border border-gray-600">
-                    管理題目 (Admin)
+                    管理題目
                 </button>
                 <div id="create-room-container" class="flex items-center space-x-2">
-                    <div class="flex items-center bg-gray-900 rounded-lg border border-gray-700 p-1">
-                        <input type="text" id="rejoin-room-code" placeholder="輸入舊代碼" class="bg-transparent text-white px-2 py-1 w-24 text-center focus:outline-none text-sm">
-                        <button id="rejoin-room-btn" class="bg-gray-700 hover:bg-gray-600 text-xs text-white px-2 py-1 rounded transition-colors">
-                            重回
-                        </button>
-                    </div>
-                    <span class="text-gray-500">or</span>
-                    <button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg shadow-purple-500/30">
-                        建立新教室
-                    </button>
+                    <input type="text" id="rejoin-room-code" placeholder="代碼" class="bg-gray-900 border border-gray-700 text-white px-3 py-2 rounded-lg w-20 text-center focus:outline-none focus:border-cyan-500">
+                    <button id="rejoin-room-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded-lg">重回</button>
+                    <button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold px-4 py-2 rounded-lg shadow-lg">開房</button>
                 </div>
             </div>
         </header>
 
-        <!-- Student List -->
-        <div id="dashboard-content" class="hidden">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="students-grid">
-                <!-- Student Cards will go here -->
-                <div class="text-center text-gray-500 col-span-full py-20">
-                    等待學員加入...
-                </div>
-            </div>
+        <!-- Heatmap Content -->
+        <div id="dashboard-content" class="hidden overflow-x-auto pb-10">
+            <table class="w-full border-collapse">
+                <thead>
+                    <tr id="heatmap-header">
+                        <th class="p-3 text-left sticky left-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[150px]">學員 / 關卡</th>
+                        <!-- Challenges headers generated dynamically -->
+                    </tr>
+                </thead>
+                <tbody id="heatmap-body">
+                    <!-- Rows generated dynamically -->
+                    <tr><td colspan="100" class="text-center py-10 text-gray-500">等待資料載入...</td></tr>
+                </tbody>
+            </table>
         </div>
     </div>
     `;
@@ -63,33 +119,36 @@ export function setupInstructorEvents() {
     const pwdInput = document.getElementById('instructor-password');
     const authModal = document.getElementById('auth-modal');
 
-    authBtn.addEventListener('click', () => checkPassword());
-    pwdInput.addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') checkPassword();
-    });
-
-    function checkPassword() {
+    // Default password check
+    const checkPassword = () => {
         if (pwdInput.value === '88300') {
             authModal.classList.add('hidden');
         } else {
             alert('密碼錯誤');
             pwdInput.value = '';
         }
-    }
+    };
+
+    authBtn.addEventListener('click', checkPassword);
+    pwdInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') checkPassword();
+    });
 
     const createBtn = document.getElementById('create-room-btn');
     const roomInfo = document.getElementById('room-info');
     const createContainer = document.getElementById('create-room-container');
     const dashboardContent = document.getElementById('dashboard-content');
     const displayRoomCode = document.getElementById('display-room-code');
-    const studentsGrid = document.getElementById('students-grid');
     const navAdminBtn = document.getElementById('nav-admin-btn');
 
     navAdminBtn.addEventListener('click', () => {
+        // Save current room to return later
+        const currentRoom = localStorage.getItem('vibecoding_instructor_room');
+        localStorage.setItem('vibecoding_admin_referer', 'instructor'); // track entry source
         window.location.hash = 'admin';
     });
 
-    // Auto-fill room code from local storage
+    // Auto-fill code
     const savedRoomCode = localStorage.getItem('vibecoding_instructor_room');
     if (savedRoomCode) {
         document.getElementById('rejoin-room-code').value = savedRoomCode;
@@ -99,92 +158,174 @@ export function setupInstructorEvents() {
     rejoinBtn.addEventListener('click', () => {
         const code = document.getElementById('rejoin-room-code').value.trim();
         if (!code) return alert('請輸入教室代碼');
-
         enterRoom(code);
     });
 
     createBtn.addEventListener('click', async () => {
         try {
             createBtn.disabled = true;
-            createBtn.textContent = "建立中...";
-
+            createBtn.textContent = "...";
             const roomCode = await createRoom();
             enterRoom(roomCode);
-
         } catch (error) {
             console.error(error);
-            alert("建立教室失敗");
+            alert("建立失敗");
             createBtn.disabled = false;
         }
     });
 
     function enterRoom(roomCode) {
-        // UI Switch
         createContainer.classList.add('hidden');
         roomInfo.classList.remove('hidden');
         dashboardContent.classList.remove('hidden');
         displayRoomCode.textContent = roomCode;
-
-        // Save to local storage
         localStorage.setItem('vibecoding_instructor_room', roomCode);
 
-        // Subscribe to updates
+        // Update headers first
+        renderHeatmapHeaders();
+
+        // Subscribe
         subscribeToRoom(roomCode, (students) => {
-            renderStudentCards(students, studentsGrid);
+            renderHeatmapBody(students);
         });
     }
+
+    // Modal Events
+    window.closeBroadcast = () => {
+        const modal = document.getElementById('broadcast-modal');
+        const content = document.getElementById('broadcast-content');
+        content.classList.remove('opacity-100', 'scale-100');
+        content.classList.add('scale-95', 'opacity-0');
+        setTimeout(() => modal.classList.add('hidden'), 300);
+    };
+
+    window.openStage = (prompt, author) => {
+        document.getElementById('broadcast-content').classList.add('hidden');
+        const stage = document.getElementById('stage-view');
+        stage.classList.remove('hidden');
+        document.getElementById('stage-prompt').textContent = prompt;
+        document.getElementById('stage-author').textContent = author;
+    };
+
+    window.closeStage = () => {
+        document.getElementById('stage-view').classList.add('hidden');
+        document.getElementById('broadcast-content').classList.remove('hidden');
+    };
+
+    document.getElementById('btn-show-stage').addEventListener('click', () => {
+        const prompt = document.getElementById('broadcast-prompt').textContent;
+        const author = document.getElementById('broadcast-author').textContent;
+        window.openStage(prompt, author);
+    });
+}
+
+function renderHeatmapHeaders() {
+    const headerRow = document.getElementById('heatmap-header');
+    // Keep first col
+    headerRow.innerHTML = '<th class="p-4 text-left sticky left-0 bg-gray-800 z-20 border-b border-gray-600 min-w-[200px] text-gray-300 font-bold">學員名單</th>';
+
+    cachedChallenges.forEach((c, index) => {
+        const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+        const color = colors[c.level] || 'gray';
+
+        const th = document.createElement('th');
+        th.className = `p-2 text-center min-w-[60px] border-b border-gray-700 relative group cursor-help`;
+        th.innerHTML = `
+            <div class="flex flex-col items-center">
+                <span class="text-xs text-${color}-400 font-bold uppercase tracking-wider mb-1">${c.level[0].toUpperCase()}${index + 1}</span>
+                <div class="w-1 h-4 bg-${color}-500/50 rounded-full"></div>
+            </div>
+            <!-- Tooltip -->
+            <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 bg-black text-white text-xs p-2 rounded hidden group-hover:block z-50 pointer-events-none">
+                ${c.title}
+            </div>
+        `;
+        headerRow.appendChild(th);
+    });
 }
 
-function renderStudentCards(students, container) {
+function renderHeatmapBody(students) {
+    const tbody = document.getElementById('heatmap-body');
     if (students.length === 0) {
-        container.innerHTML = '<div class="text-center text-gray-500 col-span-full py-20">���無學員加入</div>';
+        tbody.innerHTML = '<tr><td colspan="100" class="text-center py-10 text-gray-500">尚無學員加入</td></tr>';
         return;
     }
 
-    // Sort students by join time (if available) or random
-    // students.sort((a,b) => a.joinedAt - b.joinedAt);
-
-    container.innerHTML = students.map(student => {
-        const progress = student.progress || {}; // Map of challengeId -> {status, prompt ...}
+    // Sort: Online first (based on last_active maybe?), then name
+    // students.sort((a,b) => ...);
 
-        // Progress Summary
-        let totalCompleted = 0;
-        let badgesHtml = cachedChallenges.map(c => {
-            const isCompleted = progress[c.id]?.status === 'completed';
-            if (isCompleted) totalCompleted++;
+    tbody.innerHTML = students.map(student => {
+        const cells = cachedChallenges.map(c => {
+            const p = student.progress?.[c.id];
+            let statusClass = 'bg-gray-800/50 border-gray-700'; // Default gray
+            let content = '';
+            let action = '';
 
-            // Only show completed dots/badges or progress bar to save space?
-            // User requested "Card showing status". 15 items is a lot for small badges.
-            // Let's us simple dots color-coded by level.
+            if (p) {
+                if (p.status === 'completed') {
+                    statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer';
+                    content = '✅';
+                    // Escaped prompt for safety
+                    const safePrompt = p.prompt.replace(/"/g, '&quot;').replace(/'/g, "\\'");
+                    action = `onclick="window.showBroadcastModal('${student.nickname}', '${c.title}', '${safePrompt}')"`;
+                } else if (p.status === 'started') {
+                    // Check stuck
+                    const startedAt = p.timestamp ? p.timestamp.toDate() : new Date(); // Firestore timestamp to Date
+                    const now = new Date();
+                    const diffMins = (now - startedAt) / 1000 / 60;
 
-            const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
-            const color = colors[c.level] || 'gray';
+                    if (diffMins > 5) {
+                        statusClass = 'bg-red-900/50 border-red-500 animate-pulse'; // Red Flashing
+                        content = '🆘';
+                    } else {
+                        statusClass = 'bg-blue-600/30 border-blue-500'; // Blue
+                        content = '🔵';
+                    }
+                }
+            } else {
+                // Not started
+                statusClass = 'bg-gray-800/30 border-gray-800';
+            }
 
             return `
-                <div class="w-3 h-3 rounded-full ${isCompleted ? `bg-${color}-500 shadow-[0_0_5px_${color}]` : 'bg-gray-700'} 
-                     title="${c.title} (${c.level})" 
-                ></div>
+                <td class="p-2 border border-gray-700/50 text-center align-middle relative h-16">
+                    <div class="w-full h-full rounded-lg border flex items-center justify-center ${statusClass} transition-colors" ${action}>
+                        ${content}
+                    </div>
+                </td>
             `;
         }).join('');
 
         return `
-        <div class="bg-gray-800 bg-opacity-40 backdrop-blur rounded-xl border border-gray-700 p-4 hover:border-gray-500 transition-all flex flex-col">
-            <div class="flex items-center justify-between mb-4">
-                <div class="flex items-center space-x-3">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-lg font-bold text-white uppercase">
-                        ${student.nickname[0]}
-                    </div>
-                    <div>
-                        <h3 class="font-bold text-white">${student.nickname}</h3>
-                        <p class="text-xs text-gray-400">完成度: ${totalCompleted} / ${cachedChallenges.length}</p>
+            <tr class="hover:bg-gray-800/30 transition-colors group">
+                <td class="p-4 sticky left-0 bg-gray-900 z-10 border-r border-gray-700 group-hover:bg-gray-800 transition-colors">
+                    <div class="flex items-center space-x-3">
+                        <div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-xs font-bold text-white uppercase border border-gray-500">
+                            ${student.nickname[0]}
+                        </div>
+                        <span class="font-bold text-gray-300 text-sm truncate max-w-[120px]">${student.nickname}</span>
                     </div>
-                </div>
-            </div>
-            
-            <div class="flex flex-wrap gap-2 mt-auto">
-                ${badgesHtml}
-            </div>
-        </div>
+                </td>
+                ${cells}
+            </tr>
         `;
     }).join('');
 }
+
+// Global scope for HTML access
+window.showBroadcastModal = (nickname, title, prompt) => {
+    const modal = document.getElementById('broadcast-modal');
+    const content = document.getElementById('broadcast-content');
+
+    document.getElementById('broadcast-avatar').textContent = nickname[0];
+    document.getElementById('broadcast-author').textContent = nickname;
+    document.getElementById('broadcast-challenge').textContent = title;
+    document.getElementById('broadcast-prompt').textContent = prompt;
+
+    modal.classList.remove('hidden');
+    // Animation trigger
+    setTimeout(() => {
+        content.classList.remove('scale-95', 'opacity-0');
+        content.classList.add('opacity-100', 'scale-100');
+    }, 10);
+};