Upload 8 files

src/views/InstructorView.js

@@ -181,12 +181,9 @@ export function setupInstructorEvents() {
         displayRoomCode.textContent = roomCode;
         localStorage.setItem('vibecoding_instructor_room', roomCode);
 
-        // Update headers first
-        renderHeatmapHeaders();
-
-        // Subscribe
+        // Subscribe to updates
         subscribeToRoom(roomCode, (students) => {
-            renderHeatmapBody(students);
+            renderTransposedHeatmap(students);
         });
     }
 
@@ -219,94 +216,111 @@ export function setupInstructorEvents() {
     });
 }
 
-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>';
+/**
+ * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
+ */
+function renderTransposedHeatmap(students) {
+    const thead = document.getElementById('heatmap-header');
+    const tbody = document.getElementById('heatmap-body');
 
-    cachedChallenges.forEach((c, index) => {
-        const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
-        const color = colors[c.level] || 'gray';
+    if (students.length === 0) {
+        thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
+        tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
+        return;
+    }
 
-        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}
+    // 1. Render Header (Students)
+    // Sticky Top for Header Row
+    // Sticky Left for the first cell ("Challenge/Student")
+    let headerHtml = `
+        <th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md">
+            <div class="flex justify-between items-end">
+                <span class="text-sm text-gray-400">題目</span>
+                <span class="text-sm text-cyan-400">學員 (${students.length})</span>
             </div>
+        </th>
+    `;
+
+    students.forEach(student => {
+        headerHtml += `
+            <th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group">
+                <div class="flex flex-col items-center space-y-2 py-2">
+                    <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 shadow-sm relative">
+                        ${student.nickname[0]}
+                        <!-- Online Indicator (Simulated) -->
+                        <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-gray-800 rounded-full"></div>
+                    </div>
+                    <span class="text-xs text-gray-300 font-medium truncate max-w-[80px] writing-vertical-lr" style="writing-mode: vertical-rl; text-orientation: mixed;">
+                        ${student.nickname}
+                    </span>
+                </div>
+            </th>
         `;
-        headerRow.appendChild(th);
     });
-}
+    thead.innerHTML = headerHtml;
 
-function renderHeatmapBody(students) {
-    const tbody = document.getElementById('heatmap-body');
-    if (students.length === 0) {
-        tbody.innerHTML = '<tr><td colspan="100" class="text-center py-10 text-gray-500">尚無學員加入</td></tr>';
+    // 2. Render Body (Challenges as Rows)
+    if (cachedChallenges.length === 0) {
+        tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
         return;
     }
 
-    // Sort: Online first (based on last_active maybe?), then name
-    // students.sort((a,b) => ...);
+    tbody.innerHTML = cachedChallenges.map((c, index) => {
+        const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+        const color = colors[c.level] || 'gray';
 
-    tbody.innerHTML = students.map(student => {
-        const cells = cachedChallenges.map(c => {
+        // Build Row Cells (One per student)
+        const rowCells = students.map(student => {
             const p = student.progress?.[c.id];
-            let statusClass = 'bg-gray-800/50 border-gray-700'; // Default gray
+            let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
             let content = '';
             let action = '';
 
             if (p) {
                 if (p.status === 'completed') {
-                    statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer';
+                    statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer shadow-[0_0_10px_rgba(34,197,94,0.1)]';
                     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 startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
                     const now = new Date();
                     const diffMins = (now - startedAt) / 1000 / 60;
 
                     if (diffMins > 5) {
-                        statusClass = 'bg-red-900/50 border-red-500 animate-pulse'; // Red Flashing
+                        statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
                         content = '🆘';
                     } else {
-                        statusClass = 'bg-blue-600/30 border-blue-500'; // Blue
+                        statusClass = 'bg-blue-600/20 border-blue-500';
                         content = '🔵';
                     }
                 }
-            } else {
-                // Not started
-                statusClass = 'bg-gray-800/30 border-gray-800';
             }
 
             return `
-                <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}>
+                <td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors">
+                    <div class="mx-auto w-10 h-10 rounded-lg border flex items-center justify-center ${statusClass} transition-all duration-300" ${action}>
                         ${content}
                     </div>
                 </td>
             `;
         }).join('');
 
+        // Row Header (Challenge Title)
         return `
-            <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>
+            <tr class="hover:bg-gray-800/50 transition-colors">
+                <td class="p-3 sticky left-0 bg-gray-900 z-10 border-r border-b border-gray-700 shadow-md">
+                    <div class="flex items-center justify-between">
+                       <div class="flex flex-col">
+                           <span class="text-xs text-${color}-400 font-bold uppercase tracking-wider mb-0.5">${c.level}</span>
+                           <span class="font-bold text-white text-sm truncate max-w-[180px]" title="${c.title}">${index + 1}. ${c.title}</span>
+                       </div>
+                       <!-- Stats (Optional) -->
+                       <!-- <span class="text-xs text-gray-500">0%</span> -->
                     </div>
                 </td>
-                ${cells}
+                ${rowCells}
             </tr>
         `;
     }).join('');

src/views/LandingView.js

@@ -67,6 +67,8 @@ export function setupLandingEvents(navigateTo) {
     });
 
     instructorBtn.addEventListener('click', () => {
+        // Clear any previous admin referer to ensure clean state
+        localStorage.removeItem('vibecoding_admin_referer');
         navigateTo('instructor');
     });
 }