Upload 8 files

src/views/InstructorView.js

@@ -100,6 +100,68 @@ export async function renderInstructorView() {
         </div>
     </div>
 
+    <!-- Multi-Prompt Viewer Modal -->
+    <div id="prompt-list-modal" class="fixed inset-0 bg-black/95 backdrop-blur z-[60] hidden flex flex-col p-6 transition-opacity duration-300">
+        <div class="flex justify-between items-center mb-6 border-b border-gray-700 pb-4">
+            <div>
+                 <h2 class="text-2xl font-bold text-cyan-400" id="prompt-list-title">提示詞列表</h2>
+                 <p class="text-gray-400 text-sm" id="prompt-list-subtitle">點選下方複選框進行比較 (最多3項)</p>
+            </div>
+            <button onclick="document.getElementById('prompt-list-modal').classList.add('hidden')" class="text-gray-400 hover:text-white text-3xl">✕</button>
+        </div>
+        
+        <div id="prompt-list-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 overflow-y-auto flex-1 custom-scrollbar pb-20">
+            <!-- Dynamic Cards -->
+        </div>
+
+        <!-- Floating Action Footer -->
+        <div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-4">
+             <button id="btn-compare-prompts" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-bold py-3 px-8 rounded-full shadow-2xl flex items-center space-x-2 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                <span>🔍 比較已選項目 (0/3)</span>
+             </button>
+        </div>
+    </div>
+
+    <!-- Comparison Modal with Annotation Canvas -->
+    <div id="comparison-modal" class="fixed inset-0 bg-gray-900 z-[70] hidden flex flex-col">
+        <!-- Toolbar -->
+        <div class="bg-gray-800 p-4 border-b border-gray-700 flex justify-between items-center shadow-lg z-50">
+            <h2 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">
+                提示詞比較與註記
+            </h2>
+            
+            <div class="flex items-center space-x-4 bg-gray-900 rounded-full px-4 py-1.5 border border-gray-600">
+                 <!-- Pen Tools -->
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#ef4444" onclick="setPenColor('#ef4444', this)">
+                    <div class="w-4 h-4 rounded-full bg-red-500"></div>
+                 </button>
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#3b82f6" onclick="setPenColor('#3b82f6', this)">
+                    <div class="w-4 h-4 rounded-full bg-blue-500"></div>
+                 </button>
+                 <button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-color="#22c55e" onclick="setPenColor('#22c55e', this)">
+                    <div class="w-4 h-4 rounded-full bg-green-500"></div>
+                 </button>
+                 <div class="w-px h-6 bg-gray-600 mx-2"></div>
+                 <button onclick="clearCanvas()" class="text-gray-400 hover:text-white text-sm font-bold px-2">
+                    清除 (Clear)
+                 </button>
+            </div>
+
+            <button onclick="closeComparison()" class="text-gray-400 hover:text-white text-3xl">✕</button>
+        </div>
+
+        <!-- Canvas Container -->
+        <div class="flex-1 relative overflow-hidden bg-gray-900" id="comparison-container">
+            <!-- Grid Content (Will be behind canvas) -->
+            <div id="comparison-grid" class="absolute inset-0 grid gap-0 p-0 z-0">
+                <!-- Dynamic Columns -->
+            </div>
+            
+            <!-- Canvas Layer -->
+            <canvas id="annotation-canvas" class="absolute inset-0 z-10 touch-none cursor-crosshair"></canvas>
+        </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-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">
@@ -748,6 +810,259 @@ export function setupInstructorEvents() {
             }
         }
     });
+    // Prompt Viewer Logic
+    window.openPromptList = (type, id, title) => {
+        const modal = document.getElementById('prompt-list-modal');
+        const container = document.getElementById('prompt-list-container');
+        const titleEl = document.getElementById('prompt-list-title');
+
+        titleEl.textContent = type === 'student' ? `${title} 的所有提示詞` : `題目：${title} 的所有作品`;
+        container.innerHTML = '';
+        modal.classList.remove('hidden');
+
+        // Collect Prompts
+        let prompts = [];
+
+        if (type === 'student') {
+            const student = currentStudents.find(s => s.id === id);
+            if (student && student.progress) {
+                prompts = Object.entries(student.progress)
+                    .filter(([_, p]) => p.status === 'completed' && p.prompt)
+                    .map(([challengeId, p]) => {
+                        const challenge = cachedChallenges.find(c => c.id === challengeId);
+                        return {
+                            id: `${student.id}_${challengeId}`,
+                            title: challenge ? challenge.title : '未知題目',
+                            prompt: p.prompt,
+                            author: student.nickname,
+                            time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
+                        };
+                    });
+            }
+        } else if (type === 'challenge') {
+            currentStudents.forEach(student => {
+                if (student.progress && student.progress[id]) {
+                    const p = student.progress[id];
+                    if (p.status === 'completed' && p.prompt) {
+                        prompts.push({
+                            id: `${student.id}_${id}`,
+                            title: student.nickname, // When viewing challenge, title is student name
+                            prompt: p.prompt,
+                            author: student.nickname,
+                            time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
+                        });
+                    }
+                }
+            });
+        }
+
+        if (prompts.length === 0) {
+            container.innerHTML = '<div class="col-span-full text-center text-gray-500 py-10">無資料</div>';
+            return;
+        }
+
+        prompts.forEach(p => {
+            const card = document.createElement('div');
+            card.className = 'bg-gray-800 rounded-xl p-4 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-64';
+            card.innerHTML = `
+                <div class="flex justify-between items-start mb-2">
+                    <h3 class="font-bold text-white truncate w-3/4" title="${p.title}">${p.title}</h3>
+                    <!-- Checkbox Placeholder for Phase 2 -->
+                    <input type="checkbox" class="w-5 h-5 rounded border-gray-600 text-purple-600 focus:ring-purple-500 bg-gray-700 prompt-select-checkbox cursor-pointer" 
+                        data-id="${p.id}" 
+                        onchange="handlePromptSelection(this)">
+                </div>
+                <div class="bg-black/30 rounded p-3 flex-1 overflow-y-auto text-xs font-mono text-green-300 mb-2 whitespace-pre-wrap">${p.prompt}</div>
+                <div class="text-[10px] text-gray-500 text-right">${p.time}</div>
+             `;
+            container.appendChild(card);
+        });
+    };
+
+    // Selection Logic
+    let selectedPrompts = []; // Stores IDs
+
+    window.handlePromptSelection = (checkbox) => {
+        const id = checkbox.dataset.id;
+
+        if (checkbox.checked) {
+            if (selectedPrompts.length >= 3) {
+                checkbox.checked = false;
+                alert('最多只能選擇 3 個提示詞進行比較');
+                return;
+            }
+            selectedPrompts.push(id);
+        } else {
+            selectedPrompts = selectedPrompts.filter(pid => pid !== id);
+        }
+        updateCompareButton();
+    };
+
+    function updateCompareButton() {
+        const btn = document.getElementById('btn-compare-prompts');
+        if (!btn) return;
+
+        const count = selectedPrompts.length;
+        const span = btn.querySelector('span');
+        if (span) span.textContent = `🔍 比較已選項目 (${count}/3)`;
+
+        if (count > 0) {
+            btn.disabled = false;
+            btn.classList.remove('opacity-50', 'cursor-not-allowed');
+        } else {
+            btn.disabled = true;
+            btn.classList.add('opacity-50', 'cursor-not-allowed');
+        }
+    }
+
+    // Comparison Logic
+    const compareBtn = document.getElementById('btn-compare-prompts');
+    if (compareBtn) {
+        compareBtn.addEventListener('click', () => {
+            const dataToCompare = [];
+            selectedPrompts.forEach(fullId => {
+                const lastUnderscore = fullId.lastIndexOf('_');
+                const studentId = fullId.substring(0, lastUnderscore);
+                const challengeId = fullId.substring(lastUnderscore + 1);
+
+                const student = currentStudents.find(s => s.id === studentId);
+                if (student && student.progress && student.progress[challengeId]) {
+                    const p = student.progress[challengeId];
+                    const challenge = cachedChallenges.find(c => c.id === challengeId);
+
+                    dataToCompare.push({
+                        title: challenge ? challenge.title : '未知',
+                        author: student.nickname,
+                        prompt: p.prompt,
+                        time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleTimeString() : ''
+                    });
+                }
+            });
+
+            openComparisonView(dataToCompare);
+        });
+    }
+
+    window.openComparisonView = (items) => {
+        const modal = document.getElementById('comparison-modal');
+        const grid = document.getElementById('comparison-grid');
+
+        // Setup Grid Columns
+        let colClass = 'grid-cols-1';
+        if (items.length === 2) colClass = 'grid-cols-2';
+        if (items.length === 3) colClass = 'grid-cols-3';
+
+        grid.className = `absolute inset-0 grid ${colClass} gap-0 divide-x divide-gray-700`;
+        grid.innerHTML = '';
+
+        items.forEach(item => {
+            const col = document.createElement('div');
+            col.className = 'flex flex-col h-full bg-gray-900 p-6';
+            col.innerHTML = `
+                <div class="mb-4 border-b border-gray-700 pb-2">
+                    <h3 class="text-lg font-bold text-cyan-400">${item.author}</h3>
+                    <p class="text-sm text-gray-400 truncate">${item.title}</p>
+                </div>
+                <!-- Prompt Content: Large Text for reading -->
+                <div class="flex-1 overflow-y-auto font-mono text-green-300 text-lg leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded">
+${item.prompt}
+                </div>
+            `;
+            grid.appendChild(col);
+        });
+
+        document.getElementById('prompt-list-modal').classList.add('hidden');
+        modal.classList.remove('hidden');
+
+        // Init Canvas (Phase 3)
+        setTimeout(setupCanvas, 100);
+    };
+
+    window.closeComparison = () => {
+        document.getElementById('comparison-modal').classList.add('hidden');
+        clearCanvas();
+    };
+
+    // --- Phase 3: Annotation Tools ---
+    let canvas, ctx;
+    let isDrawing = false;
+    let currentPenColor = '#ef4444'; // Red default
+
+    window.setupCanvas = () => {
+        canvas = document.getElementById('annotation-canvas');
+        const container = document.getElementById('comparison-container');
+        if (!canvas || !container) return;
+
+        ctx = canvas.getContext('2d');
+
+        // Resize
+        const resize = () => {
+            canvas.width = container.clientWidth;
+            canvas.height = container.clientHeight;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.strokeStyle = currentPenColor;
+            ctx.lineWidth = 3;
+        };
+        resize();
+        window.addEventListener('resize', resize);
+
+        // Drawing Events
+        const start = (e) => {
+            isDrawing = true;
+            ctx.beginPath();
+            const { x, y } = getPos(e);
+            ctx.moveTo(x, y);
+        };
+
+        const move = (e) => {
+            if (!isDrawing) return;
+            const { x, y } = getPos(e);
+            ctx.lineTo(x, y);
+            ctx.stroke();
+        };
+
+        const end = () => {
+            isDrawing = false;
+        };
+
+        canvas.onmousedown = start;
+        canvas.onmousemove = move;
+        canvas.onmouseup = end;
+        canvas.onmouseleave = end;
+
+        // Touch support
+        canvas.ontouchstart = (e) => { e.preventDefault(); start(e.touches[0]); };
+        canvas.ontouchmove = (e) => { e.preventDefault(); move(e.touches[0]); };
+        canvas.ontouchend = (e) => { e.preventDefault(); end(); };
+    };
+
+    function getPos(e) {
+        const rect = canvas.getBoundingClientRect();
+        return {
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        };
+    }
+
+    window.setPenColor = (color, btn) => {
+        currentPenColor = color;
+        if (ctx) ctx.strokeStyle = color;
+
+        // UI Update
+        document.querySelectorAll('.annotation-tool').forEach(b => {
+            b.classList.remove('ring-white');
+            b.classList.add('ring-transparent');
+        });
+        btn.classList.remove('ring-transparent');
+        btn.classList.add('ring-white');
+    };
+
+    window.clearCanvas = () => {
+        if (canvas && ctx) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+    };
 }
 
 /**
@@ -785,9 +1100,9 @@ function renderTransposedHeatmap(students) {
                 <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;">
+                <button onclick="window.openPromptList('student', '${student.id}', '${student.nickname}')" class="text-xs text-gray-300 font-medium truncate max-w-[80px] writing-vertical-lr hover:text-cyan-400 hover:font-bold transition-all" style="writing-mode: vertical-rl; text-orientation: mixed;" title="查看該學員所有提示詞">
                     ${student.nickname}
-                </span>
+                </button>
                 <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>
@@ -853,7 +1168,9 @@ function renderTransposedHeatmap(students) {
             <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>
+                    <button onclick="window.openPromptList('challenge', '${c.id}', '${c.title}')" class="font-bold text-white text-sm truncate max-w-[180px] text-left hover:text-cyan-400 transition-colors" title="查看此題目所有作品">
+                        ${index + 1}. ${c.title}
+                    </button>
                 </div>
                 <!-- Stats (Optional) -->
                 <!-- <span class="text-xs text-gray-500">0%</span> -->