@@ -652,341 +689,361 @@ export function setupInstructorEvents() {
subscribeToRoom(inputCode, (data) => {
// Check if updateDashboard is defined in scope
- if (typeof updateDashboard === 'function') {
- updateDashboard(data);
- } else {
- console.error("updateDashboard function missing");
+ // Auto-Restore Room View if exists
+ if (localStorage.getItem('vibecoding_gemini_key')) {
+ const { initGemini } = await import("../services/gemini.js");
+ const apiKey = localStorage.getItem('vibecoding_gemini_key');
+ const success = await initGemini(apiKey);
+ if (success) {
+ geminiEnabled = true;
+ // Check student toggle
+ const studentEnabled = localStorage.getItem('vibecoding_student_ai_enabled') === 'true';
+ // We need to store this in Firestore for students to see?
+ // Yes, 'settings/global' or room specific.
+ // For simplicity, let's assume 'settings/instructor_config' or just trust this is Local-only "AI Analysis" tool if not persisted.
+ // Wait, user wants Student AI to be enabled by this toggle.
+ // So we MUST persist this state to Firestore so StudentView can read it.
+ if (studentEnabled) {
+ // Update Firestore (assuming we have a 'settings' doc or room doc)
+ // Ideally we update the ROOM doc to say 'ai_enabled: true'.
+ // Finding current room...
+ const code = localStorage.getItem('vibecoding_room_code');
+ if (code) {
+ const { updateDoc, doc, db } = await import("../services/classroom.js"); // We need raw Firestore access or a helper
+ // Let's simplify: Helper in classroom.js "setRoomSettings(code, { aiEnabled: true })"
+ // I'll add the Firestore update logic directly here for speed.
+ import("https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js").then(({ doc, updateDoc, getFirestore }) => {
+ const db = getFirestore();
+ updateDoc(doc(db, "classrooms", code), { ai_active: true }).catch(console.error);
+ });
+ }
+ }
+ }
}
- });
- } catch (e) {
- alert("重回失敗: " + e.message);
- }
- });
- }
- // Leave Room
- const leaveBtn = document.getElementById('leave-room-btn');
- if (leaveBtn) {
- leaveBtn.addEventListener('click', () => {
- 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');
-
- localStorage.removeItem('vibecoding_room_code');
- localStorage.removeItem('vibecoding_is_host');
-
- displayRoomCode.textContent = '';
- roomInfo.classList.add('hidden');
- dashboardContent.classList.add('hidden');
- createContainer.classList.remove('hidden');
-
- // Unsubscribe logic if needed, usually auto-handled by new subscription or page reload
- window.location.reload();
- });
- }
+ // Leave Room
+ const leaveBtn = document.getElementById('leave-room-btn');
+ if (leaveBtn) {
+ leaveBtn.addEventListener('click', () => {
+ 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');
- // Nav to Admin
- if (navAdminBtn) {
- navAdminBtn.addEventListener('click', () => {
- localStorage.setItem('vibecoding_admin_referer', 'instructor');
- window.location.hash = '#admin';
- });
- }
+ localStorage.removeItem('vibecoding_room_code');
+ localStorage.removeItem('vibecoding_is_host');
- // Handle Instructor Management
- navInstBtn.addEventListener('click', async () => {
- const modal = document.getElementById('instructor-modal');
- const listBody = document.getElementById('instructor-list-body');
+ displayRoomCode.textContent = '';
+ roomInfo.classList.add('hidden');
+ dashboardContent.classList.add('hidden');
+ createContainer.classList.remove('hidden');
- // Load list
- const instructors = await getInstructors();
- listBody.innerHTML = instructors.map(inst => `
+ // Unsubscribe logic if needed, usually auto-handled by new subscription or page reload
+ window.location.reload();
+ });
+ }
+
+ // Nav to Admin
+ if (navAdminBtn) {
+ navAdminBtn.addEventListener('click', () => {
+ localStorage.setItem('vibecoding_admin_referer', 'instructor');
+ window.location.hash = '#admin';
+ });
+ }
+
+ // Handle Instructor Management
+ navInstBtn.addEventListener('click', async () => {
+ const modal = document.getElementById('instructor-modal');
+ const listBody = document.getElementById('instructor-list-body');
+
+ // Load list
+ const instructors = await getInstructors();
+ listBody.innerHTML = instructors.map(inst => `
| ${inst.name} |
${inst.email} |
${inst.permissions?.map(p => {
- const map = { create_room: '開房', add_question: '題目', manage_instructors: '管理' };
- return `${map[p] || p}`;
- }).join('')}
+ const map = { create_room: '開房', add_question: '題目', manage_instructors: '管理' };
+ return `${map[p] || p}`;
+ }).join('')}
|
${inst.role === 'admin' ? '不可移除' :
- ``}
+ ``}
|
`).join('');
- modal.classList.remove('hidden');
- });
-
- // Add New Instructor
- const addInstBtn = document.getElementById('btn-add-inst');
- if (addInstBtn) {
- addInstBtn.addEventListener('click', async () => {
- const email = document.getElementById('new-inst-email').value.trim();
- const name = document.getElementById('new-inst-name').value.trim();
-
- if (!email || !name) return alert("請輸入完整資料");
-
- const perms = [];
- if (document.getElementById('perm-room').checked) perms.push('create_room');
- if (document.getElementById('perm-q').checked) perms.push('add_question');
- if (document.getElementById('perm-inst').checked) perms.push('manage_instructors');
-
- try {
- await addInstructor(email, name, perms);
- alert("新增成功");
- navInstBtn.click(); // Reload list
- document.getElementById('new-inst-email').value = '';
- document.getElementById('new-inst-name').value = '';
- } catch (e) {
- alert("新增失敗: " + e.message);
- }
- });
- }
-
-
- // Global helper for remove (hacky but works for simple onclick)
- window.removeInst = async (email) => {
- if (confirm(`確定移除 ${email}?`)) {
- try {
- await removeInstructor(email);
- navInstBtn.click(); // Reload
- } catch (e) {
- alert(e.message);
- }
- }
- };
-
- // Auto Check Auth (Persistence)
- // We rely on Firebase Auth state observer instead of session storage for security?
- // Or we can just check if user is already signed in.
- import("../services/firebase.js").then(async ({ auth }) => {
- // Handle Redirect Result first
- try {
- console.log("Initializing Auth Check...");
- const { handleRedirectResult } = await import("../services/auth.js");
- const redirectUser = await handleRedirectResult();
- if (redirectUser) console.log("Redirect User Found:", redirectUser.email);
- } catch (e) { console.warn("Redirect check failed", e); }
-
- auth.onAuthStateChanged(async (user) => {
- console.log("Auth State Changed to:", user ? user.email : "Logged Out");
- if (user) {
- try {
- console.log("Checking permissions for:", user.email);
- const instructorData = await checkInstructorPermission(user);
- console.log("Permission Result:", instructorData);
-
- if (instructorData) {
- console.log("Hiding Modal and Setting Permissions...");
- authModal.classList.add('hidden');
- checkPermissions(instructorData);
-
- // Auto-Restore Room View if exists
- const savedRoomCode = localStorage.getItem('vibecoding_room_code');
- if (savedRoomCode) {
- console.log("Restoring Room Session:", savedRoomCode);
- const roomInfo = document.getElementById('room-info');
- const displayRoomCode = document.getElementById('display-room-code');
- const createContainer = document.getElementById('create-room-container');
- const dashboardContent = document.getElementById('dashboard-content');
-
- // Restore UI
- createContainer.classList.add('hidden');
- roomInfo.classList.remove('hidden');
- dashboardContent.classList.remove('hidden');
- displayRoomCode.textContent = savedRoomCode;
-
- // Re-subscribe locally using the existing updateDashboard logic if available,
- // or we need to redefine the callback here.
- // Since updateDashboard is inside createBtn scope, we can't mistakenly access it if it's not global.
- // Wait, updateDashboard IS inside createBtn scope. That's a problem.
- // We need to move updateDashboard out or duplicate the logic here.
- // Duplicating logic for robustness:
- subscribeToRoom(savedRoomCode, (data) => {
- const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
- currentStudents = users;
- renderTransposedHeatmap(users);
- });
- }
+ modal.classList.remove('hidden');
+ });
- } else {
- console.warn("User logged in but not an instructor.");
- // Show unauthorized message
- authErrorMsg.textContent = "此帳號無講師權限";
- authErrorMsg.classList.remove('hidden');
- authModal.classList.remove('hidden'); // Ensure modal stays up
+ // Add New Instructor
+ const addInstBtn = document.getElementById('btn-add-inst');
+ if (addInstBtn) {
+ addInstBtn.addEventListener('click', async () => {
+ const email = document.getElementById('new-inst-email').value.trim();
+ const name = document.getElementById('new-inst-name').value.trim();
+
+ if (!email || !name) return alert("請輸入完整資料");
+
+ const perms = [];
+ if (document.getElementById('perm-room').checked) perms.push('create_room');
+ if (document.getElementById('perm-q').checked) perms.push('add_question');
+ if (document.getElementById('perm-inst').checked) perms.push('manage_instructors');
+
+ try {
+ await addInstructor(email, name, perms);
+ alert("新增成功");
+ navInstBtn.click(); // Reload list
+ document.getElementById('new-inst-email').value = '';
+ document.getElementById('new-inst-name').value = '';
+ } catch (e) {
+ alert("新增失敗: " + e.message);
+ }
+ });
}
- } catch (e) {
- console.error("Permission Check Failed:", e);
- authErrorMsg.textContent = "權限檢查失敗: " + e.message;
- authErrorMsg.classList.remove('hidden');
- }
- } else {
- authModal.classList.remove('hidden');
- }
- });
- });
- // Define Kick Function globally (robust against auth flow)
- window.confirmKick = async (userId, nickname) => {
- if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
- try {
- const { removeUser } = await import("../services/classroom.js");
- await removeUser(userId);
- // UI will update automatically via subscribeToRoom
- } catch (e) {
- console.error("Kick failed:", e);
- alert("移除失敗");
- }
- }
- };
+ // Global helper for remove (hacky but works for simple onclick)
+ window.removeInst = async (email) => {
+ if (confirm(`確定移除 ${email}?`)) {
+ try {
+ await removeInstructor(email);
+ navInstBtn.click(); // Reload
+ } catch (e) {
+ alert(e.message);
+ }
+ }
+ };
+
+ // Auto Check Auth (Persistence)
+ // We rely on Firebase Auth state observer instead of session storage for security?
+ // Or we can just check if user is already signed in.
+ import("../services/firebase.js").then(async ({ auth }) => {
+ // Handle Redirect Result first
+ try {
+ console.log("Initializing Auth Check...");
+ const { handleRedirectResult } = await import("../services/auth.js");
+ const redirectUser = await handleRedirectResult();
+ if (redirectUser) console.log("Redirect User Found:", redirectUser.email);
+ } catch (e) { console.warn("Redirect check failed", e); }
+
+ auth.onAuthStateChanged(async (user) => {
+ console.log("Auth State Changed to:", user ? user.email : "Logged Out");
+ if (user) {
+ try {
+ console.log("Checking permissions for:", user.email);
+ const instructorData = await checkInstructorPermission(user);
+ console.log("Permission Result:", instructorData);
+
+ if (instructorData) {
+ console.log("Hiding Modal and Setting Permissions...");
+ authModal.classList.add('hidden');
+ checkPermissions(instructorData);
+
+ // Auto-Restore Room View if exists
+ const savedRoomCode = localStorage.getItem('vibecoding_room_code');
+ if (savedRoomCode) {
+ console.log("Restoring Room Session:", savedRoomCode);
+ const roomInfo = document.getElementById('room-info');
+ const displayRoomCode = document.getElementById('display-room-code');
+ const createContainer = document.getElementById('create-room-container');
+ const dashboardContent = document.getElementById('dashboard-content');
+
+ // Restore UI
+ createContainer.classList.add('hidden');
+ roomInfo.classList.remove('hidden');
+ dashboardContent.classList.remove('hidden');
+ displayRoomCode.textContent = savedRoomCode;
+
+ // Re-subscribe locally using the existing updateDashboard logic if available,
+ // or we need to redefine the callback here.
+ // Since updateDashboard is inside createBtn scope, we can't mistakenly access it if it's not global.
+ // Wait, updateDashboard IS inside createBtn scope. That's a problem.
+ // We need to move updateDashboard out or duplicate the logic here.
+ // Duplicating logic for robustness:
+ subscribeToRoom(savedRoomCode, (data) => {
+ const users = Array.isArray(data) ? data : (data?.users ? Object.values(data.users) : []);
+ currentStudents = users;
+ renderTransposedHeatmap(users);
+ });
+ }
+
+ } else {
+ console.warn("User logged in but not an instructor.");
+ // Show unauthorized message
+ authErrorMsg.textContent = "此帳號無講師權限";
+ authErrorMsg.classList.remove('hidden');
+ authModal.classList.remove('hidden'); // Ensure modal stays up
+ }
+ } catch (e) {
+ console.error("Permission Check Failed:", e);
+ authErrorMsg.textContent = "權限檢查失敗: " + e.message;
+ authErrorMsg.classList.remove('hidden');
+ }
+ } else {
+ authModal.classList.remove('hidden');
+ }
+ });
+ });
- // Snapshot Logic
- snapshotBtn.addEventListener('click', async () => {
- if (isSnapshotting || typeof htmlToImage === 'undefined') {
- if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
- return;
- }
- isSnapshotting = true;
-
- const overlay = document.getElementById('snapshot-overlay');
- const countEl = document.getElementById('countdown-number');
- const container = document.getElementById('group-photo-container');
- const modal = document.getElementById('group-photo-modal');
-
- // Close button hide
- const closeBtn = modal.querySelector('button');
- if (closeBtn) closeBtn.style.opacity = '0';
- snapshotBtn.style.opacity = '0';
-
- overlay.classList.remove('hidden');
- overlay.classList.add('flex');
-
- // Countdown Sequence
- const runCountdown = (num) => new Promise(resolve => {
- countEl.textContent = num;
- countEl.style.transform = 'scale(1.5)';
- countEl.style.opacity = '1';
-
- // Animation reset
- requestAnimationFrame(() => {
- countEl.style.transition = 'all 0.5s ease-out';
- countEl.style.transform = 'scale(1)';
- countEl.style.opacity = '0.5';
- setTimeout(resolve, 1000);
- });
- });
+ // Define Kick Function globally (robust against auth flow)
+ window.confirmKick = async (userId, nickname) => {
+ if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
+ try {
+ const { removeUser } = await import("../services/classroom.js");
+ await removeUser(userId);
+ // UI will update automatically via subscribeToRoom
+ } catch (e) {
+ console.error("Kick failed:", e);
+ alert("移除失敗");
+ }
+ }
+ };
- await runCountdown(3);
- await runCountdown(2);
- await runCountdown(1);
-
- // Action!
- countEl.textContent = '';
- overlay.classList.add('hidden');
-
- // 1. Emojis Explosion
- const emojis = ['🤘', '✌️', '👍', '🫶', '😎', '🔥'];
- const cards = container.querySelectorAll('.group\\/card');
-
- cards.forEach(card => {
- // Find the monster image container
- const imgContainer = card.querySelector('.monster-img-container');
- if (!imgContainer) return;
-
- // Random Emoji
- const emoji = emojis[Math.floor(Math.random() * emojis.length)];
- const emojiEl = document.createElement('div');
- emojiEl.textContent = emoji;
- // Position: Top-Right of the *Image*, slightly overlapping
- emojiEl.className = 'absolute -top-2 -right-2 text-2xl animate-bounce z-50 drop-shadow-md transform rotate-12';
- emojiEl.style.animationDuration = '0.6s';
- imgContainer.appendChild(emojiEl);
-
- // Remove after 3s
- setTimeout(() => emojiEl.remove(), 3000);
- });
- // 2. Capture using html-to-image
- setTimeout(async () => {
- try {
- // Flash Effect
- const flash = document.createElement('div');
- flash.className = 'fixed inset-0 bg-white z-[100] transition-opacity duration-300 pointer-events-none';
- document.body.appendChild(flash);
- setTimeout(() => flash.style.opacity = '0', 50);
- setTimeout(() => flash.remove(), 300);
-
- // Use htmlToImage.toPng
- const dataUrl = await htmlToImage.toPng(container, {
- backgroundColor: '#111827',
- pixelRatio: 2,
- cacheBust: true,
- });
+ // Snapshot Logic
+ snapshotBtn.addEventListener('click', async () => {
+ if (isSnapshotting || typeof htmlToImage === 'undefined') {
+ if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
+ return;
+ }
+ isSnapshotting = true;
+
+ const overlay = document.getElementById('snapshot-overlay');
+ const countEl = document.getElementById('countdown-number');
+ const container = document.getElementById('group-photo-container');
+ const modal = document.getElementById('group-photo-modal');
+
+ // Close button hide
+ const closeBtn = modal.querySelector('button');
+ if (closeBtn) closeBtn.style.opacity = '0';
+ snapshotBtn.style.opacity = '0';
+
+ overlay.classList.remove('hidden');
+ overlay.classList.add('flex');
+
+ // Countdown Sequence
+ const runCountdown = (num) => new Promise(resolve => {
+ countEl.textContent = num;
+ countEl.style.transform = 'scale(1.5)';
+ countEl.style.opacity = '1';
+
+ // Animation reset
+ requestAnimationFrame(() => {
+ countEl.style.transition = 'all 0.5s ease-out';
+ countEl.style.transform = 'scale(1)';
+ countEl.style.opacity = '0.5';
+ setTimeout(resolve, 1000);
+ });
+ });
- // Download
- const link = document.createElement('a');
- const dateStr = new Date().toISOString().slice(0, 10);
- link.download = `VIBE_Class_Photo_${dateStr}.png`;
- link.href = dataUrl;
- link.click();
+ await runCountdown(3);
+ await runCountdown(2);
+ await runCountdown(1);
+
+ // Action!
+ countEl.textContent = '';
+ overlay.classList.add('hidden');
+
+ // 1. Emojis Explosion
+ const emojis = ['🤘', '���️', '👍', '🫶', '😎', '🔥'];
+ const cards = container.querySelectorAll('.group\\/card');
+
+ cards.forEach(card => {
+ // Find the monster image container
+ const imgContainer = card.querySelector('.monster-img-container');
+ if (!imgContainer) return;
+
+ // Random Emoji
+ const emoji = emojis[Math.floor(Math.random() * emojis.length)];
+ const emojiEl = document.createElement('div');
+ emojiEl.textContent = emoji;
+ // Position: Top-Right of the *Image*, slightly overlapping
+ emojiEl.className = 'absolute -top-2 -right-2 text-2xl animate-bounce z-50 drop-shadow-md transform rotate-12';
+ emojiEl.style.animationDuration = '0.6s';
+ imgContainer.appendChild(emojiEl);
+
+ // Remove after 3s
+ setTimeout(() => emojiEl.remove(), 3000);
+ });
- } catch (e) {
- console.error("Snapshot failed:", e);
- alert("截圖失敗 (請嘗試手動截圖/PrtSc)\n原因: " + e.message);
- } finally {
- // Restore UI
- if (closeBtn) closeBtn.style.opacity = '1';
- snapshotBtn.style.opacity = '1';
- isSnapshotting = false;
- }
- }, 600); // Slight delay for emojis to appear
- });
+ // 2. Capture using html-to-image
+ setTimeout(async () => {
+ try {
+ // Flash Effect
+ const flash = document.createElement('div');
+ flash.className = 'fixed inset-0 bg-white z-[100] transition-opacity duration-300 pointer-events-none';
+ document.body.appendChild(flash);
+ setTimeout(() => flash.style.opacity = '0', 50);
+ setTimeout(() => flash.remove(), 300);
+
+ // Use htmlToImage.toPng
+ const dataUrl = await htmlToImage.toPng(container, {
+ backgroundColor: '#111827',
+ pixelRatio: 2,
+ cacheBust: true,
+ });
+
+ // Download
+ const link = document.createElement('a');
+ const dateStr = new Date().toISOString().slice(0, 10);
+ link.download = `VIBE_Class_Photo_${dateStr}.png`;
+ link.href = dataUrl;
+ link.click();
+
+ } catch (e) {
+ console.error("Snapshot failed:", e);
+ alert("截圖失敗 (請嘗試手動截圖/PrtSc)\n原因: " + e.message);
+ } finally {
+ // Restore UI
+ if (closeBtn) closeBtn.style.opacity = '1';
+ snapshotBtn.style.opacity = '1';
+ isSnapshotting = false;
+ }
+ }, 600); // Slight delay for emojis to appear
+ });
- // Group Photo Logic
- groupPhotoBtn.addEventListener('click', () => {
- const modal = document.getElementById('group-photo-modal');
- const container = document.getElementById('group-photo-container');
- const dateEl = document.getElementById('photo-date');
+ // Group Photo Logic
+ groupPhotoBtn.addEventListener('click', () => {
+ const modal = document.getElementById('group-photo-modal');
+ const container = document.getElementById('group-photo-container');
+ const dateEl = document.getElementById('photo-date');
- // Update Date
- const now = new Date();
- dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} `;
+ // Update Date
+ const now = new Date();
+ 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)';
+ // Get saved name
+ const savedName = localStorage.getItem('vibecoding_instructor_name') || '講師 (Instructor)';
- container.innerHTML = '';
+ container.innerHTML = '';
- // 1. Container for Relative Positioning with Custom Background
- const relativeContainer = document.createElement('div');
- relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl border border-gray-700/30 shadow-2xl flex items-center justify-center bg-cover bg-center';
- relativeContainer.style.backgroundImage = "url('assets/photobg.png')";
- container.appendChild(relativeContainer);
+ // 1. Container for Relative Positioning with Custom Background
+ const relativeContainer = document.createElement('div');
+ relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl border border-gray-700/30 shadow-2xl flex items-center justify-center bg-cover bg-center';
+ relativeContainer.style.backgroundImage = "url('assets/photobg.png')";
+ container.appendChild(relativeContainer);
- // Watermark (Bottom Right, High Z-Index, Gradient Text, Dark Backdrop)
- const watermark = document.createElement('div');
- 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';
+ // Watermark (Bottom Right, High Z-Index, Gradient Text, Dark Backdrop)
+ const watermark = document.createElement('div');
+ 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 d = new Date();
+ const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} `;
- watermark.innerHTML = `
+ watermark.innerHTML = `
${dateStr} VibeCoding 怪獸成長營
`;
- relativeContainer.appendChild(watermark);
+ 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 = `
+ // 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 = `
@@ -1005,98 +1062,98 @@ export function setupInstructorEvents() {
${displayAuthor}
${item.title}
@@ -1615,223 +1785,223 @@ export function setupInstructorEvents() {
${cleanText(item.prompt)}
`;
- 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);
- }
- });
+ 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`;
- });
+ 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
- };
- }
+ // Drawing Events
+ const start = (e) => {
+ isDrawing = true;
+ ctx.beginPath();
- // 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)';
- }
- }
+ // Re-apply settings (state might change)
+ ctx.globalCompositeOperation = currentMode;
+ ctx.strokeStyle = currentPenColor;
+ ctx.lineWidth = currentLineWidth;
- 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');
- }
- });
- }
+ const { x, y } = getPos(e);
+ ctx.moveTo(x, y);
+ };
- window.clearCanvas = () => {
- if (canvas && ctx) {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- }
- };
- }
+ 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');
+ const thead = document.getElementById('heatmap-header');
+ const tbody = document.getElementById('heatmap-body');
- if (students.length === 0) {
- thead.innerHTML = '
等待資料... | ';
- tbody.innerHTML = '
| 尚無學員加入 |
';
- return;
- }
+ if (students.length === 0) {
+ thead.innerHTML = '
等待資料... | ';
+ tbody.innerHTML = '
| 尚無學員加入 |
';
+ return;
+ }
- // 1. Render Header (Students)
- // Sticky Top for Header Row
- // Sticky Left for the first cell ("Challenge/Student")
- let headerHtml = `
+ // 1. Render Header (Students)
+ // Sticky Top for Header Row
+ // Sticky Left for the first cell ("Challenge/Student")
+ let headerHtml = `
題目
@@ -1840,8 +2010,8 @@ export function setupInstructorEvents() {
|
`;
- students.forEach(student => {
- headerHtml += `
+ students.forEach(student => {
+ headerHtml += `
@@ -1860,59 +2030,59 @@ export function setupInstructorEvents() {
|
`;
- });
- thead.innerHTML = headerHtml;
-
- // 2. Render Body (Challenges as Rows)
- if (cachedChallenges.length === 0) {
- tbody.innerHTML = '
| 沒有題目資料 |
';
- return;
- }
+ });
+ thead.innerHTML = headerHtml;
- tbody.innerHTML = cachedChallenges.map((c, index) => {
- const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
- const color = colors[c.level] || 'gray';
-
- // Build Row Cells (One per student)
- const rowCells = students.map(student => {
- const p = student.progress?.[c.id];
- 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-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
- content = '✅';
- // Action removed: Moved to prompt list view
- action = `title="完成 - 請點擊標題查看詳情"`;
- } else if (p.status === 'started') {
- // Check stuck
- 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 cursor-help';
- content = '🆘';
- } else {
- statusClass = 'bg-blue-600/20 border-blue-500';
- content = '🔵';
- }
- }
- }
+ // 2. Render Body (Challenges as Rows)
+ if (cachedChallenges.length === 0) {
+ tbody.innerHTML = '
| 沒有題目資料 |
';
+ return;
+ }
- return `
+ tbody.innerHTML = cachedChallenges.map((c, index) => {
+ const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+ const color = colors[c.level] || 'gray';
+
+ // Build Row Cells (One per student)
+ const rowCells = students.map(student => {
+ const p = student.progress?.[c.id];
+ 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-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
+ content = '✅';
+ // Action removed: Moved to prompt list view
+ action = `title="完成 - 請點擊標題查看詳情"`;
+ } else if (p.status === 'started') {
+ // Check stuck
+ 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 cursor-help';
+ content = '🆘';
+ } else {
+ statusClass = 'bg-blue-600/20 border-blue-500';
+ content = '🔵';
+ }
+ }
+ }
+
+ return `
${content}
|
`;
- }).join('');
+ }).join('');
- // Row Header (Challenge Title)
- return `
+ // Row Header (Challenge Title)
+ return `
|
@@ -1929,42 +2099,42 @@ export function setupInstructorEvents() {
${rowCells}
|
`;
- }).join('');
- }
+ }).join('');
+ }
// Global scope for HTML access
// Global scope for HTML access
window.showBroadcastModal = (userId, challengeId) => {
- const student = currentStudents.find(s => s.id === userId);
- if (!student) return;
-
- const p = student.progress?.[challengeId];
- if (!p) return;
-
- const challenge = cachedChallenges.find(c => c.id === challengeId);
- const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
-
- const modal = document.getElementById('broadcast-modal');
- const content = document.getElementById('broadcast-content');
-
- document.getElementById('broadcast-avatar').textContent = student.nickname[0];
- document.getElementById('broadcast-author').textContent = student.nickname;
- document.getElementById('broadcast-challenge').textContent = title;
- // content is already just text, but let's be safe
- const rawText = p.prompt || p.code || '';
- const isCode = !p.prompt && !!p.code; // If only code exists, treat as code
- document.getElementById('broadcast-prompt').textContent = cleanText(rawText, isCode);
- document.getElementById('broadcast-prompt').style.textAlign = isCode ? 'left' : 'left'; // Always left, but explicit
-
- // Store IDs for actions
- modal.dataset.userId = userId;
- modal.dataset.challengeId = challengeId;
-
- modal.classList.remove('hidden');
- // Animation trigger
- setTimeout(() => {
- content.classList.remove('scale-95', 'opacity-0');
- content.classList.add('opacity-100', 'scale-100');
- }, 10);
- };
-}
+ const student = currentStudents.find(s => s.id === userId);
+ if (!student) return;
+
+ const p = student.progress?.[challengeId];
+ if (!p) return;
+
+ const challenge = cachedChallenges.find(c => c.id === challengeId);
+ const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
+
+ const modal = document.getElementById('broadcast-modal');
+ const content = document.getElementById('broadcast-content');
+
+ document.getElementById('broadcast-avatar').textContent = student.nickname[0];
+ document.getElementById('broadcast-author').textContent = student.nickname;
+ document.getElementById('broadcast-challenge').textContent = title;
+ // content is already just text, but let's be safe
+ const rawText = p.prompt || p.code || '';
+ const isCode = !p.prompt && !!p.code; // If only code exists, treat as code
+ document.getElementById('broadcast-prompt').textContent = cleanText(rawText, isCode);
+ document.getElementById('broadcast-prompt').style.textAlign = isCode ? 'left' : 'left'; // Always left, but explicit
+
+ // Store IDs for actions
+ modal.dataset.userId = userId;
+ modal.dataset.challengeId = challengeId;
+
+ modal.classList.remove('hidden');
+ // Animation trigger
+ setTimeout(() => {
+ content.classList.remove('scale-95', 'opacity-0');
+ content.classList.add('opacity-100', 'scale-100');
+ }, 10);
+ };
+ }