`;
}
export async function renderStudentView() {
const nickname = localStorage.getItem('vibecoding_nickname') || 'Guest';
const roomCode = localStorage.getItem('vibecoding_room_code') || 'Unknown';
const userId = localStorage.getItem('vibecoding_user_id');
// Fetch challenges if empty
if (cachedChallenges.length === 0) {
try {
cachedChallenges = await getChallenges();
} catch (e) {
console.error("Failed to fetch challenges", e);
throw new Error("無法讀取題目列表 (Error: " + e.message + ")");
}
}
// Fetch User Progress
let userProgress = {};
if (userId) {
try {
userProgress = await getUserProgress(userId);
} catch (e) {
console.error("Failed to fetch progress", e);
}
}
const levelGroups = {
beginner: cachedChallenges.filter(c => c.level === 'beginner'),
intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
advanced: cachedChallenges.filter(c => c.level === 'advanced')
};
const levelNames = {
beginner: "初級 (Beginner)",
intermediate: "中級 (Intermediate)",
advanced: "高級 (Advanced)"
};
// --- Monster Section Render Function ---
// --- Monster Section Helper Functions ---
// 1. Calculate Monster State (Separated logic)
const calculateMonsterState = (currentUserProgress, classSize, userProfile) => {
const totalLikes = Object.values(currentUserProgress).reduce((acc, p) => acc + (p.likes || 0), 0);
// Count completions per level
const counts = {
1: cachedChallenges.filter(c => c.level === 'beginner' && currentUserProgress[c.id]?.status === 'completed').length,
2: cachedChallenges.filter(c => c.level === 'intermediate' && currentUserProgress[c.id]?.status === 'completed').length,
3: cachedChallenges.filter(c => c.level === 'advanced' && currentUserProgress[c.id]?.status === 'completed').length
};
const totalCompleted = counts[1] + counts[2] + counts[3];
let potentialStage = 0;
if (counts[1] >= 5) potentialStage = 1;
if (counts[2] >= 5 && potentialStage >= 1) potentialStage = 2;
if (counts[3] >= 5 && potentialStage >= 2) potentialStage = 3;
const actualStage = userProfile.monster_stage || 0;
const actualMonsterId = userProfile.monster_id || 'Egg';
// Regression Logic Check
if (actualStage > potentialStage) {
// Regression Logic: Pass 'Egg' (or null) to enforce downgrade
const targetId = potentialStage === 0 ? 'Egg' : null; // If going to 0, force Egg. Else keep null to let system decide? Or should we query?
// Actually, if we devolve, we lose the specific form. So we should probably reset ID to something generic or clear it.
// If we go to stage 0, 'Egg' is safe.
// If we go to stage 1 (from 2), we might want to keep the stage 1 form (if we knew it).
// But simplifying: just clear the ID so getNextMonster picks default for that stage.
updateUserMonster(userId, potentialStage, targetId).then(() => {
setTimeout(() => window.location.reload(), 500);
});
// Return corrected state temporary
return {
...calculateMonsterState(currentUserProgress, classSize, { ...userProfile, monster_stage: potentialStage, monster_id: targetId }),
isRegressing: true
};
}
const canEvolve = potentialStage > actualStage;
// Scale Logic
const growthFactor = 0.08;
const baseScale = 1.0;
const currentScale = baseScale + (totalCompleted * growthFactor);
// Get Monster Data
let monster = getNextMonster(actualStage, 0, 0, actualMonsterId);
if (actualMonsterId && actualMonsterId !== 'Egg') {
const stored = MONSTER_DEFS.find(m => m.id === actualMonsterId);
if (stored) monster = stored;
} else {
monster = getNextMonster(actualStage, totalLikes, classSize);
}
return {
monster,
currentScale,
totalCompleted,
totalLikes,
canEvolve,
actualStage,
classSize,
counts
};
};
// 2. Render Stats HTML (Partial Update Target)
const renderMonsterStats = (state) => {
return `
${state.monster.name}
💖${state.totalLikes}
`;
};
// 3. Render Full Monster Container (Initial or Full Update)
// Now positioned stats to TOP
const renderMonsterSection = (currentUserProgress, classSize, userProfile) => {
const state = calculateMonsterState(currentUserProgress, classSize, userProfile);
// Left sidebar position: Responsive
// Mobile: Top Left (in header space)
// Desktop: Fixed Left Sidebar
return `
${renderMonsterStats(state)}
${generateMonsterSVG(state.monster)}
Lv.${1 + state.totalCompleted}
${state.canEvolve ? `
咦，小怪獸的樣子 正在發生變化...
` : ''}
`;
};
// Inject Initial Monster UI
const monsterContainerId = 'monster-ui-layer';
let monsterContainer = document.getElementById(monsterContainerId);
if (!monsterContainer) {
monsterContainer = document.createElement('div');
monsterContainer.id = monsterContainerId;
document.body.appendChild(monsterContainer);
}
// Initial Render
let classSize = 1;
let userProfile = {};
try {
classSize = await getClassSize(roomCode);
userProfile = await getUser(userId) || {};
} catch (e) { console.error("Fetch stats error", e); }
monsterContainer.innerHTML = renderMonsterSection(userProgress, classSize, userProfile);
// Setup Real-time Subscription
if (window.currentProgressUnsub) window.currentProgressUnsub();
window.currentProgressUnsub = subscribeToUserProgress(userId, (newProgressMap) => {
// Merge updates (Actually newProgressMap is complete source of truth from firestore listener)
const updatedProgress = newProgressMap;
// 1. Update Monster (Visuals)
const newState = calculateMonsterState(updatedProgress, classSize, userProfile);
const fixedContainer = document.getElementById('monster-container-fixed');
const currentMonsterId = fixedContainer?.getAttribute('data-monster-id');
if (fixedContainer && String(currentMonsterId) === String(newState.monster.id)) {
// Monster ID is same (no evolution/devolution).
// Just update stats tooltip
const statsContainer = document.getElementById('monster-stats-content');
if (statsContainer) {
statsContainer.innerHTML = renderMonsterStats(newState);
}
// Check level up (totalCompleted) to update scale/animation if needed
const oldTotal = parseInt(fixedContainer.querySelector('.bg-gray-900\\/90')?.textContent?.replace('Lv.', '') || '1') - 1;
if (oldTotal !== newState.totalCompleted) {
monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
}
} else {
// Full Monster Render
monsterContainer.innerHTML = renderMonsterSection(updatedProgress, classSize, userProfile);
}
// 2. Update Task List (Accordions) - Realtime "Reject" support
const levelGroups = {
beginner: cachedChallenges.filter(c => c.level === 'beginner'),
intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
advanced: cachedChallenges.filter(c => c.level === 'advanced')
};
const levelNames = {
beginner: "初級 (Beginner)",
intermediate: "中級 (Intermediate)",
advanced: "高級 (Advanced)"
};
['beginner', 'intermediate', 'advanced'].forEach(level => {
const detailEl = document.getElementById(`details-group-${level}`);
if (detailEl) {
// renderLevelGroup checks existing DOM for 'open' state, so it persists
const newHTML = renderLevelGroup(level, levelGroups[level], updatedProgress, levelNames);
detailEl.outerHTML = newHTML;
}
});
});
// Accordion Layout
return `
`;
}
export function setupStudentEvents() {
// Start Level Logic
window.startLevel = async (challengeId, link) => {
// Open link
window.open(link, '_blank');
// Call service to update status
const roomCode = localStorage.getItem('vibecoding_room_code');
const userId = localStorage.getItem('vibecoding_user_id');
if (roomCode && userId) {
try {
await startChallenge(userId, roomCode, challengeId);
// Reload view to show Input State
// Ideally we should use state management, but checking URL hash or re-rendering works
const app = document.querySelector('#app');
app.innerHTML = await renderStudentView();
// Re-attach events (recursion safety check needed? No, navigateTo does this usually, but here we manually re-render)
// Or better: trigger a custom event or call navigateTo functionality?
// Simple re-render is fine for now.
} catch (e) {
console.error("Start challenge failed", e);
}
}
};
window.submitLevel = async (challengeId) => {
const input = document.getElementById(`input-${challengeId}`);
const errorMsg = document.getElementById(`error-${challengeId}`);
const prompt = input.value;
const roomCode = localStorage.getItem('vibecoding_room_code');
const userId = localStorage.getItem('vibecoding_user_id');
if (!participantDataCheck(roomCode, userId)) return;
if (prompt.trim().length < 5) {
errorMsg.classList.remove('hidden');
input.classList.add('border-red-500');
return;
}
errorMsg.classList.add('hidden');
input.classList.remove('border-red-500');
// Show loading state on button
const container = input.parentElement;
const btn = container.querySelector('button');
const originalText = btn.textContent;
btn.textContent = "提交中...";
btn.disabled = true;
try {
await submitPrompt(userId, roomCode, challengeId, prompt);
btn.textContent = "✓ 已通關";
btn.classList.add("bg-green-600");
// Fetch latest progress to ensure correct count
const { getUserProgress } = await import("../services/classroom.js");
const newProgress = await getUserProgress(userId);
// Re-render the level group to update count and all-clear status
const challenge = cachedChallenges.find(c => c.id === challengeId);
const level = challenge.level;
const levelGroups = {
beginner: cachedChallenges.filter(c => c.level === 'beginner'),
intermediate: cachedChallenges.filter(c => c.level === 'intermediate'),
advanced: cachedChallenges.filter(c => c.level === 'advanced')
};
const levelNames = {
beginner: "初級 (Beginner)",
intermediate: "中級 (Intermediate)",
advanced: "高級 (Advanced)"
};
const newGroupHTML = renderLevelGroup(level, levelGroups[level], newProgress, levelNames);
const detailEl = document.getElementById(`details-group-${level}`);
if (detailEl) {
detailEl.outerHTML = newGroupHTML;
} else {
const app = document.querySelector('#app');
app.innerHTML = await renderStudentView();
}
} catch (error) {
console.error(error);
btn.textContent = originalText;
btn.disabled = false;
alert("提交失敗: " + error.message);
}
};
window.resetLevel = async (challengeId) => {
if (!confirm("確定要重置這一題的進度嗎？(提示詞將會保留，但狀態會變回進行中)")) return;
const roomCode = localStorage.getItem('vibecoding_room_code');
const userId = localStorage.getItem('vibecoding_user_id');
try {
// Import and call resetProgress (Need to make sure it is imported or available globally?
// Ideally import it. But setupStudentEvents is in module scope so imports are available.
// Wait, import 'resetProgress' is not in the top import list yet. I need to add it.)
// Let's assume I will update the import in the next step or use the global trick if needed.
// But I should edit the import first.
// For now, let's assume it is there. I will add it to the import list in a parallel or subsequent edit.
// Checking imports above... I see 'getUserProgress' but not 'resetProgress'. I must update imports.
// I'll do it in a separate edit step to be safe.
// For now, just the logic:
const { resetProgress } = await import("../services/classroom.js"); // Dynamic import to avoid changing top file lines again?
// Or just rely on previous 'replace' having updated the file?
// Actually, I should update the top import.
await resetProgress(userId, roomCode, challengeId);
const app = document.querySelector('#app');
app.innerHTML = await renderStudentView();
} catch (e) {
console.error(e);
alert("重置失敗");
}
};
}
function participantDataCheck(roomCode, userId) {
if (!roomCode || !userId) {
alert("連線資訊遺失，請重新登入");
window.location.reload();
return false;
}
return true;
}
window.logout = () => {
if (!confirm("確定要登出嗎？")) return;
localStorage.removeItem('vibecoding_user_id');
localStorage.removeItem('vibecoding_room_code');
localStorage.removeItem('vibecoding_nickname');
window.location.reload();
};
// Peer Learning Modal Logic
function renderPeerModal() {
// We need to re-fetch challenges for the dropdown?
// They are cached in 'cachedChallenges' module variable
let optionsHtml = '';
if (cachedChallenges.length > 0) {
optionsHtml += cachedChallenges.map(c =>
``
).join('');
}
return `
同學的成功提示詞
請選擇一個題目來查看
`;
}
window.openPeerModal = () => {
const existing = document.getElementById('peer-modal');
if (existing) existing.remove();
const div = document.createElement('div');
div.innerHTML = renderPeerModal();
document.body.appendChild(div.firstElementChild);
document.getElementById('peer-modal').classList.remove('hidden');
};
window.closePeerModal = () => {
document.getElementById('peer-modal').classList.add('hidden');
};
// Helper to render a level group (Accordion)
function renderLevelGroup(level, tasks, userProgress, levelNames) {
const detailsId = `details-group-${level}`;
const existingDetails = document.getElementById(detailsId);
let isOpenStr = '';
if (existingDetails) {
if (existingDetails.hasAttribute('open')) isOpenStr = 'open';
} else {
// Initial Load defaults
if (level === 'beginner') isOpenStr = 'open';
}
// Count completed
const completedCount = tasks.filter(t => userProgress[t.id]?.status === 'completed').length;
return `