👑
${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) => {
console.log('🔵 confirmReset called');
console.log(' userId:', userId);
console.log(' challengeId:', challengeId);
console.log(' title:', title);
console.log(' typeof resetProgress:', typeof resetProgress);
if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
console.log('✅ User confirmed reset');
const roomCode = localStorage.getItem('vibecoding_room_code');
console.log(' roomCode:', roomCode);
if (userId && challengeId && roomCode) {
console.log('✅ All parameters valid, calling resetProgress...');
try {
// Use already imported resetProgress function
await resetProgress(userId, roomCode, challengeId);
console.log('✅ resetProgress completed successfully');
alert("已退回");
// close modal to refresh data context
document.getElementById('prompt-list-modal').classList.add('hidden');
console.log('✅ Modal closed');
} catch (e) {
console.error("❌ 退回失敗:", e);
console.error("Error stack:", e.stack);
alert("退回失敗: " + e.message);
}
} else {
console.error('❌ Missing required parameters:');
console.error(' userId:', userId, '(valid:', !!userId, ')');
console.error(' challengeId:', challengeId, '(valid:', !!challengeId, ')');
console.error(' roomCode:', roomCode, '(valid:', !!roomCode, ')');
alert('缺少必要參數，無法執行退回操作');
}
} else {
console.log('❌ User cancelled reset');
}
};
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 = `
${displayAuthor}
${item.title}
題目
學員 (${students.length})
${student.nickname[0]}
${content}
${c.level}