Upload 9 files

src/views/InstructorView.js

@@ -1,6 +1,5 @@
 import { createRoom, subscribeToRoom, getChallenges, resetProgress, removeUser } from "../services/classroom.js";
-
-import { generateMonsterSVG, getNextMonster } from "../utils/monsterUtils.js";
+import { generateMonsterSVG, getNextMonster, MONSTER_DEFS } from "../utils/monsterUtils.js";
 
 // Load html-to-image dynamically (Better support than html2canvas)
 const script = document.createElement('script');
@@ -19,15 +18,15 @@ export async function renderInstructorView() {
     }
 
     return `
-    <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-90 backdrop-blur z-50 flex items-center justify-center">
+    < div id = "auth-modal" class="fixed inset-0 bg-black bg-opacity-90 backdrop-blur z-50 flex items-center justify-center" >
         <div class="bg-gray-800 p-8 rounded-xl border border-gray-600 shadow-2xl max-w-sm w-full">
             <h2 class="text-xl font-bold text-center mb-6 text-white">🔒 講師身分驗證</h2>
             <input type="password" id="instructor-password" class="w-full bg-gray-900 border border-gray-700 rounded p-3 text-white text-center text-lg tracking-widest mb-4 focus:border-cyan-500 focus:outline-none" placeholder="輸入密碼">
-            <button id="auth-btn" class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 rounded-lg transition-colors">確認進入</button>
+                <button id="auth-btn" class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 rounded-lg transition-colors">確認進入</button>
         </div>
-    </div>
+    </div >
 
-    <!-- Broadcast Modal (Hidden by default) -->
+    < !--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>
         
@@ -73,7 +72,7 @@ export async function renderInstructorView() {
         </div>
     </div>
 
-    <!-- Group Photo Modal -->
+    <!--Group Photo Modal-- >
     <div id="group-photo-modal" class="fixed inset-0 bg-gray-900/95 backdrop-blur-md z-50 hidden flex flex-col items-center justify-center p-4 transition-opacity duration-300">
         <button onclick="document.getElementById('group-photo-modal').classList.add('hidden')" class="absolute top-6 right-6 text-gray-400 hover:text-white text-4xl z-50">✕</button>
         
@@ -152,7 +151,7 @@ export async function renderInstructorView() {
             </table>
         </div>
     </div>
-    `;
+`;
 }
 
 export function setupInstructorEvents() {
@@ -311,7 +310,7 @@ export function setupInstructorEvents() {
 
         // Update Date
         const now = new Date();
-        dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
+        dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} `;
 
         // Get saved name
         const savedName = localStorage.getItem('vibecoding_instructor_name') || '講師 (Instructor)';
@@ -329,37 +328,37 @@ export function setupInstructorEvents() {
         watermark.className = 'absolute bottom-2 right-2 md:bottom-4 md:right-4 z-[60] bg-black/70 backdrop-blur-sm rounded-lg px-4 py-2 pointer-events-none select-none border border-white/10 shadow-lg';
 
         const d = new Date();
-        const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
+        const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} `;
 
         watermark.innerHTML = `
-            <span class="text-lg md:text-2xl font-black font-mono bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 tracking-wider">
-                ${dateStr} VibeCoding 怪獸成長營
-            </span>
-        `;
+    < span class="text-lg md:text-2xl font-black font-mono bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 tracking-wider" >
+        ${dateStr} VibeCoding 怪獸成長營
+            </span >
+    `;
         relativeContainer.appendChild(watermark);
 
         // 2. Instructor Section (Absolute Center)
         const instructorSection = document.createElement('div');
         instructorSection.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-20 group cursor-pointer';
         instructorSection.innerHTML = `
-            <div class="relative">
+    < div class="relative" >
                 <div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full animate-pulse"></div>
-                <!-- Pixel Art Avatar -->
-                <img src="assets/instructor_avatar.png" class="relative w-48 h-48 md:w-64 md:h-64 object-contain pixel-art drop-shadow-[0_10px_30px_rgba(0,0,0,0.6)] z-10 hover:scale-105 transition-transform duration-300" alt="Instructor">
-                
-                <!-- Editable Name Tag -->
-                <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-black/80 backdrop-blur text-yellow-400 px-6 py-2 rounded-full border border-yellow-500/30 shadow-2xl flex items-center justify-center space-x-2 z-30 whitespace-nowrap group-hover:bg-black transition-colors min-w-[150px] max-w-[300px]">
-                    <span class="text-xl">👑</span>
-                    <input type="text" id="instructor-name-input" 
-                        value="${savedName}" 
-                        class="bg-transparent border-b border-transparent hover:border-yellow-500/50 focus:border-yellow-500 text-lg font-bold text-yellow-400 text-center focus:outline-none transition-all placeholder-yellow-700"
-                        style="width: ${Math.max(savedName.length * 20, 100)}px;"
-                        onclick="this.select()"
-                        oninput="this.style.width = Math.max(this.value.length * 20, 100) + 'px'"
-                    >
-                </div>
-            </div>
-        `;
+                <!--Pixel Art Avatar-- >
+    <img src="assets/instructor_avatar.png" class="relative w-48 h-48 md:w-64 md:h-64 object-contain pixel-art drop-shadow-[0_10px_30px_rgba(0,0,0,0.6)] z-10 hover:scale-105 transition-transform duration-300" alt="Instructor">
+
+        <!-- Editable Name Tag -->
+        <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-black/80 backdrop-blur text-yellow-400 px-6 py-2 rounded-full border border-yellow-500/30 shadow-2xl flex items-center justify-center space-x-2 z-30 whitespace-nowrap group-hover:bg-black transition-colors min-w-[150px] max-w-[300px]">
+            <span class="text-xl">👑</span>
+            <input type="text" id="instructor-name-input"
+                value="${savedName}"
+                class="bg-transparent border-b border-transparent hover:border-yellow-500/50 focus:border-yellow-500 text-lg font-bold text-yellow-400 text-center focus:outline-none transition-all placeholder-yellow-700"
+                style="width: ${Math.max(savedName.length * 20, 100)}px;"
+                onclick="this.select()"
+                oninput="this.style.width = Math.max(this.value.length * 20, 100) + 'px'"
+            >
+        </div>
+    </div>
+`;
         relativeContainer.appendChild(instructorSection);
 
         // Save name on change
@@ -393,7 +392,20 @@ export function setupInstructorEvents() {
             students.forEach((s, index) => {
                 const progressMap = s.progress || {};
                 const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
-                const monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
+
+                // FIXED: Prioritize stored ID if valid (same as StudentView logic)
+                let monster;
+                if (s.monster_id && s.monster_id !== 'Egg' && s.monster_id !== 'Unknown') {
+                    const stored = MONSTER_DEFS?.find(m => m.id === s.monster_id);
+                    if (stored) {
+                        monster = stored;
+                    } else {
+                        // Fallback if ID invalid
+                        monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
+                    }
+                } else {
+                    monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
+                }
 
                 // Scatter Logic: Radial Distribution with Jitter
                 // Min radius increased to verify clearance around label
@@ -448,14 +460,14 @@ export function setupInstructorEvents() {
                 const card = document.createElement('div');
                 card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500';
 
-                card.style.left = `calc(50% + ${xOff}px)`;
-                card.style.top = `calc(50% + ${yOff}px)`;
+                card.style.left = `calc(50 % + ${xOff}px)`;
+                card.style.top = `calc(50 % + ${yOff}px)`;
                 card.style.transform = 'translate(-50%, -50%)';
 
                 const floatDelay = Math.random() * 2;
 
                 card.innerHTML = `
-                    <!-- Top Info: Monster Stats -->
+    < !--Top Info: Monster Stats-- >
                     <div class="mb-1 text-center bg-gray-900/60 backdrop-blur-sm rounded-lg px-2 py-1 border border-gray-600/30 group-hover/card:bg-gray-800 group-hover/card:border-cyan-500/50 transition-all opacity-80 group-hover/card:opacity-100 transform translate-y-2 group-hover/card:translate-y-0 duration-300">
                          <div class="text-[10px] text-gray-300 mb-0.5 whitespace-nowrap">${monster.name.split(' ')[1] || monster.name}</div>
                          <div class="flex items-center justify-center space-x-2">
@@ -467,18 +479,18 @@ export function setupInstructorEvents() {
                         </div>
                     </div>
 
-                    <!-- Monster Image -->
+                    <!--Monster Image-- >
                     <div class="monster-img-container relative ${sizeClass} flex items-center justify-center transform group-hover/card:scale-125 transition-transform duration-300" style="animation: float 3s ease-in-out infinite; animation-delay: -${floatDelay}s;">
                         <div class="w-full h-full pixel-art drop-shadow-md filter group-hover/card:brightness-110 transition-all">
                             ${generateMonsterSVG(monster)}
                         </div>
                     </div>
                     
-                    <!-- Bottom Info: User Nickname -->
-                    <div class="mt-1 text-center bg-black/60 backdrop-blur-sm rounded-full px-3 py-0.5 border border-gray-600/50 group-hover/card:bg-cyan-900/80 group-hover/card:border-cyan-400 transition-all">
-                        <div class="text-xs font-bold text-white shadow-black drop-shadow-md whitespace-nowrap tracking-wide">${s.nickname}</div>
-                    </div>
-                `;
+                    <!--Bottom Info: User Nickname-- >
+    <div class="mt-1 text-center bg-black/60 backdrop-blur-sm rounded-full px-3 py-0.5 border border-gray-600/50 group-hover/card:bg-cyan-900/80 group-hover/card:border-cyan-400 transition-all">
+        <div class="text-xs font-bold text-white shadow-black drop-shadow-md whitespace-nowrap tracking-wide">${s.nickname}</div>
+    </div>
+`;
                 relativeContainer.appendChild(card);
             });
         }
@@ -491,11 +503,11 @@ export function setupInstructorEvents() {
         const style = document.createElement('style');
         style.id = 'anim-float';
         style.innerHTML = `
-            @keyframes float {
-                0%, 100% { transform: translateY(0) scale(1); }
-                50% { transform: translateY(-5px) scale(1.02); }
-            }
-        `;
+@keyframes float {
+    0 %, 100 % { transform: translateY(0) scale(1); }
+    50 % { transform: translateY(-5px) scale(1.02); }
+}
+`;
         document.head.appendChild(style);
     }
 
@@ -616,34 +628,34 @@ function renderTransposedHeatmap(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>
+    < 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>
-                    <div class="flex items-center justify-center space-x-1">
-                        <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>
-                        <button onclick="window.confirmKick('${student.id}', '${student.nickname}')" class="text-gray-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity" title="踢出學員">
-                            🗑️
-                        </button>
-                    </div>
-                </div>
-            </th>
-        `;
+    < 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>
+            <div class="flex items-center justify-center space-x-1">
+                <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>
+                <button onclick="window.confirmKick('${student.id}', '${student.nickname}')" class="text-gray-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity" title="踢出學員">
+                    🗑️
+                </button>
+            </div>
+        </div>
+            </th >
+    `;
     });
     thead.innerHTML = headerHtml;
 
@@ -669,7 +681,7 @@ function renderTransposedHeatmap(students) {
                     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 = '✅';
                     const safePrompt = p.prompt.replace(/"/g, '&quot;').replace(/'/g, "\\'");
-                    action = `onclick="window.showBroadcastModal('${student.id}', '${c.id}', '${student.nickname}', '${c.title}', '${safePrompt}')"`;
+                    action = `onclick = "window.showBroadcastModal('${student.id}', '${c.id}', '${student.nickname}', '${c.title}', '${safePrompt}')"`;
                 } else if (p.status === 'started') {
                     // Check stuck
                     const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
@@ -687,30 +699,30 @@ function renderTransposedHeatmap(students) {
             }
 
             return `
-                <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>
-            `;
+    < 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/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>
+    < 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>
                 ${rowCells}
-            </tr>
-        `;
+            </tr >
+    `;
     }).join('');
 }