+
+
+ 
+
+
+
+ `;
+ relativeContainer.appendChild(instructorSection);
+
+ // Save name on change
+ setTimeout(() => {
+ const input = document.getElementById('instructor-name-input');
+ if (input) {
+ input.addEventListener('input', (e) => {
+ localStorage.setItem('vibecoding_instructor_name', e.target.value);
+ });
+ }
+ }, 100);
+
+ // 3. Students Scatter
+ if (currentStudents.length > 0) {
+ // Randomize array to prevent fixed order bias
+ const students = [...currentStudents].sort(() => Math.random() - 0.5);
+ const total = students.length;
+
+ // --- Dynamic Sizing Logic ---
+ let sizeClass = 'w-20 h-20 md:w-24 md:h-24'; // Default (Size 100%)
+ let scaleFactor = 1.0;
+
+ if (total >= 40) {
+ sizeClass = 'w-12 h-12 md:w-14 md:h-14'; // Size 60%
+ scaleFactor = 0.6;
+ } else if (total >= 20) {
+ sizeClass = 'w-16 h-16 md:w-20 md:h-20'; // Size 80%
+ scaleFactor = 0.8;
+ }
+
+ students.forEach((s, index) => {
+ const progressMap = s.progress || {};
+ const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
+ const totalCompleted = Object.values(progressMap).filter(p => p.status === 'completed').length;
+
+ // 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);
+ }
+
+ // --- FIXED: Even Arc Distribution (Safe Zone: 135 deg to 405 deg) ---
+ // Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
+ const minR = 220;
+ // Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
+
+ // Safe Arc Range: Starts at 135 deg (Bottom Left) -> Goes CW -> Ends at 405 deg (45 deg, Bottom Right)
+ // Total Span = 270 degrees
+ // If many students, use double ring
+
+ const safeStartAngle = 135 * (Math.PI / 180);
+ const safeSpan = 270 * (Math.PI / 180);
+
+ // Distribute evenly
+ // If only 1 student, put at top (270 deg / 4.71 rad)
+ let finalAngle;
+
+ if (total === 1) {
+ finalAngle = 270 * (Math.PI / 180);
+ } else {
+ const step = safeSpan / (total - 1);
+ finalAngle = safeStartAngle + (step * index);
+ }
+
+ // Radius: Fixed base + slight variation for "natural" look (but not overlap causing)
+ // Double ring logic if crowded
+ let radius = minR + (index % 2) * 40; // Zigzag radius (220, 260, 220...) to minimize overlap
+
+ // Reduce zigzag if few students
+ if (total < 10) radius = minR + (index % 2) * 20;
+
+ const xOff = Math.cos(finalAngle) * radius;
+ const yOff = Math.sin(finalAngle) * radius * 0.8;
+
+ const card = document.createElement('div');
+ card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500 cursor-move';
+
+ 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 = `
+
+
+
+
+
+ 👑
+
+
+
+
+
+
+ ${monster.name.split(' ')[1] || monster.name}
+
+ Lv.${totalCompleted + 1}
+
+
+ ♥
+ ${totalLikes}
+
+
+
+
+
+
+ ${generateMonsterSVG(monster)}
+
+
+
+ `;
+ relativeContainer.appendChild(card);
+
+ // Enable Drag & Drop
+ setupDraggable(card, relativeContainer);
+ });
+ }
+
+ modal.classList.remove('hidden');
+ });
+
+ // Helper: Drag & Drop Logic
+ function setupDraggable(el, container) {
+ let isDragging = false;
+ let startX, startY, initialLeft, initialTop;
+
+ el.addEventListener('mousedown', (e) => {
+ isDragging = true;
+ startX = e.clientX;
+ startY = e.clientY;
+
+ // Disable transition during drag for responsiveness
+ el.style.transition = 'none';
+ el.style.zIndex = 100; // Bring to front
+
+ // Convert current computed position to fixed pixels if relying on calc
+ const rect = el.getBoundingClientRect();
+ const containerRect = container.getBoundingClientRect();
+
+ // Calculate position relative to container
+ // The current transform is translate(-50%, -50%).
+ // We want to set left/top such that the center remains under the mouse offset,
+ // but for simplicity, let's just use current offsetLeft/Top if possible,
+ // OR robustly recalculate from rects.
+
+ // Current center point relative to container:
+ const centerX = rect.left - containerRect.left + rect.width / 2;
+ const centerY = rect.top - containerRect.top + rect.height / 2;
+
+ // Set explicit pixel values replacing calc()
+ el.style.left = `${centerX}px`;
+ el.style.top = `${centerY}px`;
+
+ initialLeft = centerX;
+ initialTop = centerY;
+ });
+
+ window.addEventListener('mousemove', (e) => {
+ if (!isDragging) return;
+ e.preventDefault();
+
+ const dx = e.clientX - startX;
+ const dy = e.clientY - startY;
+
+ el.style.left = `${initialLeft + dx}px`;
+ el.style.top = `${initialTop + dy}px`;
+ });
+
+ window.addEventListener('mouseup', () => {
+ if (isDragging) {
+ isDragging = false;
+ el.style.transition = ''; // Re-enable hover effects
+ el.style.zIndex = ''; // Restore z-index rule (or let hover take over)
+ }
+ });
+ }
+
+ // Add float animation style if not exists
+ if (!document.getElementById('anim-float')) {
+ 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); }
+}
+}
+ `;
+ document.head.appendChild(style);
+ }
+
+ // Gallery Logic
+ document.getElementById('btn-open-gallery').addEventListener('click', () => {
+ window.open('monster_preview.html', '_blank');
+ });
+
+ // Logout Logic
+ document.getElementById('logout-btn').addEventListener('click', async () => {
+ if (confirm('確定要登出講師模式嗎？ (將會回到首頁)')) {
+ await signOutUser();
+ sessionStorage.removeItem('vibecoding_instructor_in_room');
+ sessionStorage.removeItem('vibecoding_admin_referer');
+ window.location.hash = '';
+ window.location.reload();
+ }
+ });
+
+ // Check Previous Session (Handled by onAuthStateChanged now)
+ // if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
+ // authModal.classList.add('hidden');
+ // }
+
+ // Check Active Room State
+ const activeRoom = sessionStorage.getItem('vibecoding_instructor_in_room');
+ if (activeRoom === 'true' && savedRoomCode) {
+ enterRoom(savedRoomCode);
+ }
+
+ // Module-level variable to track subscription (Moved to top)
+
+ function enterRoom(roomCode) {
+ createContainer.classList.add('hidden');
+ roomInfo.classList.remove('hidden');
+ dashboardContent.classList.remove('hidden');
+ document.getElementById('group-photo-btn').classList.remove('hidden'); // Show photo button
+ displayRoomCode.textContent = roomCode;
+ localStorage.setItem('vibecoding_instructor_room', roomCode);
+ sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
+
+ // Unsubscribe previous if any
+ if (roomUnsubscribe) roomUnsubscribe();
+
+ // Subscribe to updates
+ roomUnsubscribe = subscribeToRoom(roomCode, (students) => {
+ currentStudents = students;
+ renderTransposedHeatmap(students);
+ });
+ }
+
+ // Leave Room Logic
+ document.getElementById('leave-room-btn').addEventListener('click', () => {
+ if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
+ // Unsubscribe
+ if (roomUnsubscribe) {
+ roomUnsubscribe();
+ roomUnsubscribe = null;
+ }
+
+ // UI Reset
+ createContainer.classList.remove('hidden');
+ roomInfo.classList.add('hidden');
+ dashboardContent.classList.add('hidden');
+ document.getElementById('group-photo-btn').classList.add('hidden'); // Hide photo button
+
+ // Clear Data Display
+ document.getElementById('heatmap-body').innerHTML = '${s.nickname}
+ 無資料
';
+ return;
+ }
+
+ prompts.forEach(p => {
+ const card = document.createElement('div');
+ // Reduced height (h-64 -> h-48) and padding, but larger text inside
+ card.className = 'bg-gray-800 rounded-xl p-3 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-48 group';
+ card.innerHTML = `
+
+
+
+
+
+
+ ${p.title}
+ + +
+ ${p.time}
+
+ `;
+ container.appendChild(card);
+ });
+ };
+
+ // Helper Actions
+ window.confirmReset = async (userId, challengeId, title) => {
+ if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
+ const roomCode = localStorage.getItem('vibecoding_instructor_room');
+ if (userId && challengeId && roomCode) {
+ try {
+ const { resetProgress } = await import("../services/classroom.js");
+ await resetProgress(userId, roomCode, challengeId);
+ // Refresh current list if open? (It will stay open but might not update immediately if realtime check isn't hooked to modal content. But subscriptions update `currentStudents`. We might need to refresh list)
+ // For now, simple alert or auto-close
+ alert("已退回");
+ // close modal to refresh data context
+ document.getElementById('prompt-list-modal').classList.add('hidden');
+ } catch (e) {
+ console.error(e);
+ alert("退回失敗");
+ }
+ }
+ }
+ };
+
+ window.broadcastPrompt = (userId, challengeId) => {
+ window.showBroadcastModal(userId, challengeId);
+ };
+
+ // 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() : ''
+ });
+ }
+ });
+
+ const isAnon = document.getElementById('list-anonymous-toggle')?.checked || false;
+ openComparisonView(dataToCompare, isAnon);
+ });
+ }
+
+ let isAnonymous = false;
+
+ window.toggleAnonymous = (btn) => {
+ isAnonymous = !isAnonymous;
+ btn.textContent = isAnonymous ? '🙈 顯示姓名' : '👀 隱藏姓名';
+ btn.classList.toggle('bg-gray-700');
+ btn.classList.toggle('bg-purple-700');
+
+ // Update DOM
+ document.querySelectorAll('.comparison-author').forEach(el => {
+ if (isAnonymous) {
+ el.dataset.original = el.textContent;
+ el.textContent = '學員';
+ el.classList.add('blur-sm'); // Optional Effect
+ setTimeout(() => el.classList.remove('blur-sm'), 300);
+ } else {
+ if (el.dataset.original) el.textContent = el.dataset.original;
+ }
+ });
+ };
+
+ window.openComparisonView = (items, initialAnonymous = false) => {
+ const modal = document.getElementById('comparison-modal');
+ const grid = document.getElementById('comparison-grid');
+
+ // Apply Anonymous State
+ isAnonymous = initialAnonymous;
+ const anonBtn = document.getElementById('btn-anonymous-toggle');
+
+ // Update Toggle UI to match state
+ if (anonBtn) {
+ if (isAnonymous) {
+ anonBtn.textContent = '🙈 顯示姓名';
+ anonBtn.classList.add('bg-purple-700');
+ anonBtn.classList.remove('bg-gray-700');
+ } else {
+ anonBtn.textContent = '👀 隱藏姓名';
+ anonBtn.classList.remove('bg-purple-700');
+ anonBtn.classList.add('bg-gray-700');
+ }
+ }
+
+ // Setup Grid Rows (Vertical Stacking)
+ let rowClass = 'grid-rows-1';
+ if (items.length === 2) rowClass = 'grid-rows-2';
+ if (items.length === 3) rowClass = 'grid-rows-3';
+
+ grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
+ grid.innerHTML = '';
+
+ items.forEach(item => {
+ const col = document.createElement('div');
+ // Check overflow-hidden to keep it contained, use flex-row for compact header + content
+ col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
+
+ // Logic for anonymous
+ let displayAuthor = item.author;
+ let blurClass = '';
+
+ if (isAnonymous) {
+ displayAuthor = '學員';
+ blurClass = 'blur-sm'; // Initial blur
+ // Auto remove blur after delay if needed, or keep it?
+ // Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
+ // The toggle logic uses dataset.original. We need to set it here too.
+ }
+
+ col.innerHTML = `
+
+
+
+
+
+
+
+
+ `;
+ grid.appendChild(col);
+
+ // If blurred, remove blur after animation purely for effect, or keep?
+ // User intention "Hidden Name" usually means "Replaced by generic name".
+ // The blur effect in toggle logic was transient.
+ // If we want persistent anonymity, just "學員" is enough.
+ // The existing toggle logic adds 'blur-sm' then removes it in 300ms.
+ // We should replicate that effect if we want consistency, or just skip blur on init.
+ if (isAnonymous) {
+ const el = col.querySelector('.comparison-author');
+ setTimeout(() => el.classList.remove('blur-sm'), 300);
+ }
+ });
+
+ 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 & 6: Annotation Tools ---
+ let canvas, ctx;
+ let isDrawing = false;
+ let currentPenColor = '#ef4444'; // Red default
+ let currentLineWidth = 3;
+ let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
+
+ 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 = currentLineWidth;
+ ctx.globalCompositeOperation = currentMode;
+ };
+ resize();
+ window.addEventListener('resize', resize);
+
+ // Init Size UI & Cursor
+ updateSizeBtnUI();
+ updateCursorStyle();
+
+ // Cursor Logic
+ const cursor = document.getElementById('tool-cursor');
+
+ canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
+ canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
+ canvas.addEventListener('mousemove', (e) => {
+ const { x, y } = getPos(e);
+ cursor.style.left = `${x}px`;
+ cursor.style.top = `${y}px`;
+ });
+
+ // Drawing Events
+ const start = (e) => {
+ isDrawing = true;
+ ctx.beginPath();
+
+ // Re-apply settings (state might change)
+ ctx.globalCompositeOperation = currentMode;
+ ctx.strokeStyle = currentPenColor;
+ ctx.lineWidth = currentLineWidth;
+
+ 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
+ };
+ }
+
+ // Unified Tool Handler
+ window.setPenTool = (tool, color, btn) => {
+ // 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');
+
+ if (tool === 'eraser') {
+ currentMode = 'destination-out';
+ // Force larger eraser size (e.g., 3x current size or fixed large)
+ // We'll multiply current selected size by 4 for better UX
+ const multiplier = 4;
+ // Store original explicitly if needed, but currentLineWidth is global.
+ // We should dynamically adjust context lineWidth during draw, or just hack it here.
+ // Hack: If we change currentLineWidth here, the UI size buttons might look wrong.
+ // Better: Update cursor style only? No, actual draw needs it.
+ // Let's set a separate 'actualWidth' used in draw, OR just change currentLineWidth temporarily?
+ // Simpler: Just change it. When user clicks size button, it resets.
+ // But if user clicks Pen back? We need to restore.
+ // Let's rely on setPenTool being called with color.
+ // When "Pen" is clicked, we usually don't call setPenTool with a saved size...
+ // Actually, let's just use a large default for eraser, and keep currentLineWidth for Pen.
+ // We need to change how draw() uses the width.
+ // BUT, since we don't want to touch draw() deep inside:
+ // We will hijack currentLineWidth.
+ if (!window.savedPenWidth) window.savedPenWidth = currentLineWidth;
+ currentLineWidth = window.savedPenWidth * 4;
+ } else {
+ currentMode = 'source-over';
+ currentPenColor = color;
+ // Restore pen width
+ if (window.savedPenWidth) {
+ currentLineWidth = window.savedPenWidth;
+ window.savedPenWidth = null;
+ }
+ }
+ updateCursorStyle();
+ };
+
+ // Size Handler
+ window.setPenSize = (size, btn) => {
+ currentLineWidth = size;
+ updateSizeBtnUI();
+ updateCursorStyle();
+ };
+
+ function updateCursorStyle() {
+ const cursor = document.getElementById('tool-cursor');
+ if (!cursor) return;
+
+ // Size
+ cursor.style.width = `${currentLineWidth}px`;
+ cursor.style.height = `${currentLineWidth}px`;
+
+ // Color
+ if (currentMode === 'destination-out') {
+ // Eraser: White solid
+ cursor.style.backgroundColor = 'white';
+ cursor.style.borderColor = '#999';
+ } else {
+ // Pen: Tool color
+ cursor.style.backgroundColor = currentPenColor;
+ cursor.style.borderColor = 'rgba(255,255,255,0.8)';
+ }
+ }
+
+ function updateSizeBtnUI() {
+ document.querySelectorAll('.size-btn').forEach(b => {
+ if (parseInt(b.dataset.size) === currentLineWidth) {
+ b.classList.add('bg-gray-600', 'text-white');
+ b.classList.remove('text-gray-400', 'hover:bg-gray-700');
+ } else {
+ b.classList.remove('bg-gray-600', 'text-white');
+ b.classList.add('text-gray-400', 'hover:bg-gray-700');
+ }
+ });
+ }
+
+ window.clearCanvas = () => {
+ if (canvas && ctx) {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ }
+ };
+ }
+
+ /**
+ * Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
+ */
+ function renderTransposedHeatmap(students) {
+ const thead = document.getElementById('heatmap-header');
+ const tbody = document.getElementById('heatmap-body');
+
+ if (students.length === 0) {
+ thead.innerHTML = '${displayAuthor}
+${item.title}
+
+ 題目
+ 學員 (${students.length})
+
+
+
+
+ ${student.nickname[0]}
+
+
+
+
+
+
+
+
+ ${content}
+
+
+
+
+ ${c.level}
+
+
+
+
+