Upload 9 files

src/views/StudentView.js

@@ -1,5 +1,5 @@
 import { submitPrompt, getChallenges, startChallenge, getUserProgress, getPeerPrompts, resetProgress, toggleLike, subscribeToNotifications, markNotificationRead, getClassSize, updateUserMonster, getUser, subscribeToUserProgress } from "../services/classroom.js";
-import { generateMonsterSVG, getNextMonster, MONSTER_STAGES } from "../utils/monsterUtils.js";
+import { generateMonsterSVG, getNextMonster, MONSTER_STAGES, MONSTER_DEFS } from "../utils/monsterUtils.js";
 
 
 // Cache challenges locally
@@ -198,9 +198,12 @@ export async function renderStudentView() {
         }
 
         return `
-        <div id="monster-container-fixed" class="fixed top-24 left-1/2 -translate-x-1/2 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-40 h-40">
-            <!-- Walking Container -->
-            <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center hover:scale-110" 
+        // Left sidebar position: Fixed Left-8 or similar. 
+        // User wants it in the empty left area.
+        return `
+            < div id = "monster-container-fixed" class="fixed top-32 left-8 z-50 flex flex-col items-center group pointer-events-none sm:pointer-events-auto w-32 h-32" >
+            < !--Walking Container-- >
+            <div class="pixel-art-container relative transform transition-transform duration-500 ease-out origin-center" 
                  style="transform: scale(${currentScale}); animation: walk-float 6s ease-in-out infinite;">
                 
                 <div class="pixel-monster w-28 h-28 drop-shadow-2xl filter" style="animation: breathe 3s infinite ease-in-out;">
@@ -213,8 +216,9 @@ export async function renderStudentView() {
                 </div>
             </div>
 
-            <!-- Evolution Prompt -->
-             ${canEvolve ? `
+            <!--Evolution Prompt-- >
+            ${
+                canEvolve ? `
                 <div id="evolution-prompt" class="absolute top-full mt-2 pointer-events-auto animate-bounce z-50">
                     <div class="flex flex-col items-center">
                         <div class="bg-gray-900/90 text-pink-200 text-xs py-2 px-3 rounded-xl border border-pink-500/30 shadow-lg text-center font-bold mb-1 backdrop-blur-sm whitespace-nowrap">
@@ -226,9 +230,10 @@ export async function renderStudentView() {
                         </button>
                     </div>
                 </div>
-            ` : ''}
+            ` : ''
+        }
 
-            <!-- Stats Tooltip -->
+            < !--Stats Tooltip-- >
             <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-gray-900/90 backdrop-blur text-xs text-slate-300 p-3 rounded-xl border border-slate-700 mt-6 text-left pointer-events-auto shadow-2xl min-w-[120px]">
                 <div class="font-bold text-white text-sm mb-1 text-center border-b border-gray-700 pb-1">${monster.name}</div>
                 <div class="space-y-1 mt-1">
@@ -237,20 +242,20 @@ export async function renderStudentView() {
                     <div class="flex justify-between"><span>⚔️ 任務:</span> <span class="text-yellow-400 font-bold">${totalCompleted}</span></div>
                 </div>
             </div>
-        </div>
+        </div >
 
         <style>
             @keyframes breathe {
-                0%, 100% { transform: translateY(0); filter: brightness(1); }
-                50% { transform: translateY(-3px); filter: brightness(1.1); }
+                0 %, 100 % { transform: translateY(0); filter: brightness(1); }
+                50% {transform: translateY(-3px); filter: brightness(1.1); }
             }
             @keyframes walk-float {
-                0%, 100% { transform: translateX(0) scale(${currentScale}); }
-                25% { transform: translateX(-10px) rotate(-2deg) scale(${currentScale}); }
-                75% { transform: translateX(10px) rotate(2deg) scale(${currentScale}); }
+                0 %, 100 % { transform: translateX(0) scale(${ currentScale }); }
+                25% {transform: translateX(-10px) rotate(-2deg) scale(${currentScale}); }
+            75% {transform: translateX(10px) rotate(2deg) scale(${currentScale}); }
             }
         </style>
-        `;
+    `;
     };
 
     // Inject Initial Monster UI
@@ -287,7 +292,7 @@ export async function renderStudentView() {
 
     // Accordion Layout
     return `
-    <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4">
+        < div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl pt-24 sm:pt-4" >
         <header class="flex justify-end items-center mb-6 sticky top-0 bg-slate-900/95 backdrop-blur z-20 py-4 px-2 -mx-2 border-b border-gray-800">
             <div class="flex flex-col items-end">
                 <div class="flex items-center space-x-2">
@@ -305,12 +310,30 @@ export async function renderStudentView() {
         <div class="space-y-4">
             ${['beginner', 'intermediate', 'advanced'].map(level => {
         const tasks = levelGroups[level] || [];
-        const isOpen = level === 'beginner' ? 'open' : '';
+        
+        // State Preservation Logic:
+        // Check DOM for existing details element and its open attribute
+        // ID strategy: details-{level}
+        // If not found, default to open for 'beginner', closed for others.
+        // But if we are re-rendering, we want to keep current state.
+        
+        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;
+        const allClear = completedCount === tasks.length && tasks.length > 0;
 
         return `
-                <details class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden transition-all" ${isOpen}>
+                <details id="${detailsId}" class="group border border-gray-700 rounded-xl bg-gray-800/30 overflow-hidden transition-all" ${isOpenStr}>
                     <summary class="flex items-center justify-between p-4 cursor-pointer bg-gray-800/80 hover:bg-gray-700 transition-colors select-none">
                         <div class="flex items-center space-x-3">
                             <h3 class="text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
@@ -333,15 +356,15 @@ export async function renderStudentView() {
     }).join('')}
         </div>
         
-        <!-- Peer Learning FAB -->
+        <!--Peer Learning FAB-- >
         <button onclick="window.openPeerModal()" class="fixed bottom-6 right-6 bg-purple-600 hover:bg-purple-500 text-white rounded-full p-4 shadow-xl shadow-purple-600/40 transition-transform hover:scale-110 active:scale-90 z-40"
             title="查看同學作業">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0z" />
             </svg>
         </button>
-    </div>
-    `;
+    </div >
+        `;
 }
 
 export function setupStudentEvents() {
@@ -371,8 +394,8 @@ export function setupStudentEvents() {
     };
 
     window.submitLevel = async (challengeId) => {
-        const input = document.getElementById(`input-${challengeId}`);
-        const errorMsg = document.getElementById(`error-${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');
@@ -418,7 +441,7 @@ export function setupStudentEvents() {
             const newCardHTML = renderTaskCard(challenge, newProgress);
 
             // 3. Replace in DOM
-            const oldCard = document.getElementById(`card-${challengeId}`);
+            const oldCard = document.getElementById(`card - ${ challengeId } `);
             if (oldCard) {
                 oldCard.outerHTML = newCardHTML;
             } else {
@@ -485,12 +508,12 @@ function renderPeerModal() {
     let optionsHtml = '<option value="" disabled selected>選擇題目...</option>';
     if (cachedChallenges.length > 0) {
         optionsHtml += cachedChallenges.map(c =>
-            `<option value="${c.id}">[${c.level}] ${c.title}</option>`
+            `< option value = "${c.id}" > [${ c.level }] ${ c.title }</option > `
         ).join('');
     }
 
     return `
-        <div id="peer-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
+        < div id = "peer-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4" >
             <div class="bg-gray-800 rounded-2xl w-full max-w-md h-[80vh] flex flex-col border border-gray-700 shadow-2xl">
                 <div class="p-6 border-b border-gray-700 flex justify-between items-center">
                     <h3 class="text-xl font-bold text-white">同學的成功提示詞</h3>
@@ -507,7 +530,7 @@ function renderPeerModal() {
                     <div class="text-center text-gray-500 mt-10">請選擇一個題目來查看</div>
                 </div>
             </div>
-        </div>
+        </div >
         `;
 }
 
@@ -543,7 +566,7 @@ window.loadPeerPrompts = async (challengeId) => {
         const isLiked = p.likedBy && p.likedBy.includes(currentUserId);
 
         return `
-        <div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600">
+        < div class="bg-gray-700/30 p-4 rounded-xl border border-gray-600" >
             <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center space-x-2">
                     <div class="w-6 h-6 rounded-full bg-cyan-600 flex items-center justify-center text-xs font-bold text-white">
@@ -562,11 +585,11 @@ window.loadPeerPrompts = async (challengeId) => {
                 </button>
             </div>
             <p class="text-gray-300 font-mono text-sm bg-black/20 p-3 rounded-lg border border-gray-700/50 whitespace-pre-wrap">${p.prompt}</p>
-        </div>
+        </div >
         `}).join('');
 
     // Attach challenge title for notification context
-    window.currentPeerChallengeTitle = document.querySelector(`#peer-challenge-select option[value="${challengeId}"]`).text;
+    window.currentPeerChallengeTitle = document.querySelector(`#peer - challenge - select option[value = "${challengeId}"]`).text;
 };
 
 // Like Handler