Upload 9 files

src/views/StudentView.js

@@ -197,12 +197,11 @@ export async function renderStudentView() {
             monster = getNextMonster(actualStage, totalLikes, classSize);
         }
 
-        return `
         // 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 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;">
                 
@@ -217,8 +216,7 @@ export async function renderStudentView() {
             </div>
 
             <!--Evolution Prompt-- >
-            ${
-                canEvolve ? `
+            ${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">
@@ -231,7 +229,7 @@ export async function renderStudentView() {
                     </div>
                 </div>
             ` : ''
-        }
+            }
 
             < !--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]">
@@ -250,7 +248,7 @@ export async function renderStudentView() {
                 50% {transform: translateY(-3px); filter: brightness(1.1); }
             }
             @keyframes walk-float {
-                0 %, 100 % { transform: translateX(0) 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}); }
             }
@@ -310,13 +308,13 @@ export async function renderStudentView() {
         <div class="space-y-4">
             ${['beginner', 'intermediate', 'advanced'].map(level => {
         const tasks = levelGroups[level] || [];
-        
+
         // 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 = '';
@@ -324,8 +322,8 @@ export async function renderStudentView() {
         if (existingDetails) {
             if (existingDetails.hasAttribute('open')) isOpenStr = 'open';
         } else {
-             // Initial Load defaults
-             if (level === 'beginner') isOpenStr = 'open';
+            // Initial Load defaults
+            if (level === 'beginner') isOpenStr = 'open';
         }
 
         // Count completed
@@ -394,8 +392,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');
@@ -441,7 +439,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 {
@@ -508,7 +506,7 @@ 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('');
     }