載入題目中...
';
return;
}
// Sort challenges by order
const challenges = cachedChallenges.sort((a, b) => a.order - b.order);
// Sort users by login time (or name)
const sortedUsers = users.sort((a, b) => (a.joinedAt || 0) - (b.joinedAt || 0));
let html = `
| 學員 (${sortedUsers.length}) | ${challenges.map(c => `
${c.title}
${c.description?.slice(0, 50)}...
|
`).join('')}
|---|---|
|
${statusDot}
${user.nickname}
|
`;
challenges.forEach(c => {
const progress = user.progress?.[c.id];
let cellContent = '-';
let cellClass = 'text-center border-b border-gray-800 p-2';
if (progress) {
if (progress.status === 'completed') {
cellContent = `
${cellContent} | `; }); html += `
👑
${monster.name.split(' ')[1] || monster.name}
Lv.${totalCompleted + 1}
♥
${totalLikes}
${generateMonsterSVG(monster)}
${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} 嗎？此動作將清除學員目前的進度。`)) {
// Unified top-level import
const roomCode = localStorage.getItem('vibecoding_room_code') || localStorage.getItem('vibecoding_instructor_room'); // Fallback
if (userId && challengeId) {
try {
alert("正在執行退回 (列表模式)...");
// Use top-level import directly
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);
});
}
// AI Analysis Logic
const aiAnalyzeBtn = document.getElementById('btn-ai-analyze');
if (aiAnalyzeBtn) {
// Show button if key exists
if (localStorage.getItem('vibecoding_gemini_key')) {
aiAnalyzeBtn.classList.remove('hidden');
}
aiAnalyzeBtn.addEventListener('click', async () => {
if (currentStudents.length === 0) return alert("無學生資料");
// Robust Challenge ID Detection
let challengeId = window.currentViewingChallengeId;
// Fallback 1: Try to infer from first card
if (!challengeId) {
const firstCard = document.getElementById('prompt-list-container')?.firstElementChild;
if (firstCard) {
const fullId = firstCard.querySelector('input[type="checkbox"]')?.dataset.id;
if (fullId && fullId.includes('_')) {
challengeId = fullId.split('_').pop();
window.currentViewingChallengeId = challengeId; // Set it for future stability
}
}
}
if (!challengeId) return alert("無法確認目前所在的題目，請重新開啟列表");
// UI Loading State
aiAnalyzeBtn.innerHTML = '⏳ AI 分析中 (Batch)...';
aiAnalyzeBtn.disabled = true;
aiAnalyzeBtn.classList.add('animate-pulse');
try {
const challenge = cachedChallenges.find(c => c.id === challengeId);
const challengeDesc = challenge ? challenge.description : "No Description";
// 1. Collect Valid Submissions for THIS challenge only
const submissions = [];
currentStudents.forEach(s => {
const p = s.progress?.[challengeId];
if (p && p.status === 'completed' && p.prompt && p.prompt.length > 3) {
submissions.push({
userId: s.id,
prompt: p.prompt,
nickname: s.nickname
});
}
});
if (submissions.length === 0) throw new Error("沒有足足夠的有效回答可供分析");
// 2. Call Batch API
const { initGemini, evaluatePrompts } = await import("../services/gemini.js");
if (localStorage.getItem('vibecoding_gemini_key')) {
await initGemini(localStorage.getItem('vibecoding_gemini_key'));
}
const results = await evaluatePrompts(submissions, challengeId);
// 3. Update UI with Badges
const badgeColors = {
"rough": "bg-gray-600 text-gray-200 border-gray-500", // 原石
"precise": "bg-blue-600 text-blue-100 border-blue-400", // 精確
"gentle": "bg-pink-600 text-pink-100 border-pink-400", // 有禮
"creative": "bg-purple-600 text-purple-100 border-purple-400", // 創意
"spam": "bg-red-900 text-red-200 border-red-700", // 無效
"parrot": "bg-yellow-600 text-yellow-100 border-yellow-400" // 鸚鵡
};
const badgeLabels = {
"rough": "🗿 原石",
"precise": "🎯 精確",
"gentle": "💖 有禮",
"creative": "✨ 創意",
"spam": "🗑️ 無效",
"parrot": "🦜 鸚鵡"
};
let count = 0;
Object.entries(results).forEach(([category, ids]) => {
ids.forEach(userId => {
// Find card
const checkbox = document.querySelector(`input[data-id="${userId}_${challengeId}"]`);
if (checkbox) {
const card = checkbox.closest('.group\\/card');
if (card) {
const header = card.querySelector('h3')?.parentNode;
if (header) {
// Remove old badge
const oldBadge = card.querySelector('.ai-badge');
if (oldBadge) oldBadge.remove();
const badge = document.createElement('span');
badge.className = `ai-badge ml-2 text-xs px-2 py-0.5 rounded-full border ${badgeColors[category] || 'bg-gray-600'}`;
badge.textContent = badgeLabels[category] || category;
header.appendChild(badge);
count++;
}
}
}
});
});
aiAnalyzeBtn.innerHTML = `✅ 完成分析 (${count})`;
setTimeout(() => {
aiAnalyzeBtn.innerHTML = '✨ AI 選粹 (刷新)';
aiAnalyzeBtn.disabled = false;
aiAnalyzeBtn.classList.remove('animate-pulse');
}, 3000);
} catch (e) {
console.error(e);
alert("分析失敗: " + e.message);
aiAnalyzeBtn.innerHTML = '❌ 重試';
aiAnalyzeBtn.disabled = false;
aiAnalyzeBtn.classList.remove('animate-pulse');
}
});
}
// Direct Heatmap AI Analysis Link
window.analyzeChallenge = (challengeId, challengeTitle) => {
if (!localStorage.getItem('vibecoding_gemini_key')) {
alert("請先設定 Gemini API Key");
return;
}
// 1. Open the list
window.openPromptList('challenge', challengeId, challengeTitle);
// 2. Trigger analysis logic automatically after slight delay (to ensure DOM render)
setTimeout(() => {
const btn = document.getElementById('btn-ai-analyze');
if (btn && !btn.disabled) {
btn.click();
} else {
console.warn("AI Analyze button not found or disabled");
}
}, 300);
};
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 = `
${displayAuthor}
${item.title}