Upload 8 files

src/views/InstructorView.js

@@ -191,76 +191,123 @@ export function setupInstructorEvents() {
         const now = new Date();
         dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
 
+        // Get saved name
+        const savedName = localStorage.getItem('vibecoding_instructor_name') || '講師 (Instructor)';
+
         container.innerHTML = '';
 
-        // 1. Instructor Section (Center Top)
+        // 1. Container for Relative Positioning
+        const relativeContainer = document.createElement('div');
+        relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl bg-gray-900/50 border border-gray-700/30 shadow-inner';
+        container.appendChild(relativeContainer);
+
+        // 2. Instructor Section (Absolute Center)
         const instructorSection = document.createElement('div');
-        instructorSection.className = 'flex flex-col items-center justify-center mb-10 w-full relative';
+        instructorSection.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-20 group cursor-pointer';
         instructorSection.innerHTML = `
-            <div class="relative group animate-bounce-slow">
-                <div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full"></div>
+            <div class="relative">
+                <div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full animate-pulse"></div>
                 <!-- Pixel Art Avatar -->
-                <img src="assets/instructor_avatar.png" class="relative w-40 h-40 md:w-56 md:h-56 object-contain pixel-art drop-shadow-[0_10px_20px_rgba(0,0,0,0.5)] z-10 hover:scale-105 transition-transform duration-300" alt="Instructor">
+                <img src="assets/instructor_avatar.png" class="relative w-48 h-48 md:w-64 md:h-64 object-contain pixel-art drop-shadow-[0_10px_30px_rgba(0,0,0,0.6)] z-10 hover:scale-105 transition-transform duration-300" alt="Instructor">
                 
-                <!-- Name Tag -->
-                <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-black/80 backdrop-blur text-yellow-400 px-4 py-1.5 rounded-full border border-yellow-500/30 shadow-xl flex items-center space-x-2 z-20 whitespace-nowrap">
+                <!-- Editable Name Tag -->
+                <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-black/80 backdrop-blur text-yellow-400 px-6 py-2 rounded-full border border-yellow-500/30 shadow-2xl flex items-center space-x-2 z-30 whitespace-nowrap group-hover:bg-black transition-colors">
                     <span class="text-xl">👑</span>
-                    <span class="font-bold text-lg">講師 (Instructor)</span>
+                    <input type="text" id="instructor-name-input" 
+                        value="${savedName}" 
+                        class="bg-transparent border-b border-transparent hover:border-yellow-500/50 focus:border-yellow-500 text-lg font-bold text-yellow-400 text-center focus:outline-none w-40 transition-all placeholder-yellow-700"
+                        onclick="this.select()"
+                    >
                 </div>
             </div>
         `;
-        container.appendChild(instructorSection);
-
-        // 2. Students Grid
-        if (currentStudents.length === 0) {
-            const emptyMsg = document.createElement('div');
-            emptyMsg.className = 'text-gray-500 text-xl mt-10';
-            emptyMsg.textContent = '尚無學員加入...';
-            container.appendChild(emptyMsg);
-        } else {
-            const grid = document.createElement('div');
-            grid.className = 'grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 md:gap-8 w-full px-4 md:px-10';
-
-            currentStudents.forEach(s => {
+        relativeContainer.appendChild(instructorSection);
+
+        // Save name on change
+        setTimeout(() => {
+            const input = document.getElementById('instructor-name-input');
+            if (input) {
+                input.addEventListener('input', (e) => {
+                    localStorage.setItem('vibecoding_instructor_name', e.target.value);
+                });
+            }
+        }, 100);
+
+        // 3. Students Scatter
+        if (currentStudents.length > 0) {
+            // Randomize array to prevent fixed order bias
+            const students = [...currentStudents].sort(() => Math.random() - 0.5);
+            const total = students.length;
+
+            students.forEach((s, index) => {
                 const progressMap = s.progress || {};
                 const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
+                const monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
+
+                // Scatter Logic: Radial Distribution with Jitter
+                // Min radius ensures they don't cover instructor
+                const minR = 180; // slightly outside instructor (128 radius approx)
+                const maxR = 320; // max spread
+
+                // Angle: Evenly distributed + Jitter
+                const baseAngle = (index / total) * 2 * Math.PI; // Even separation
+                const angleJitter = (Math.random() - 0.5) * 0.5; // +/- ~15 degrees
+                const finalAngle = baseAngle + angleJitter;
+
+                // Radius: Random within range
+                const radius = minR + Math.random() * (maxR - minR);
 
-                // Get Monster
-                const monster = getNextMonster(s.monster_stage || 0, totalLikes, currentStudents.length, s.monster_id);
+                // Convert to % for responsiveness (Relative to center 50%)
+                // Assuming container ~800px wide, 50% = 400px.
+                // x offset = cos(angle) * r
+                const xOff = Math.cos(finalAngle) * radius;
+                const yOff = Math.sin(finalAngle) * radius * 0.8; // Flatten Y slightly for perspective
 
                 const card = document.createElement('div');
-                card.className = 'flex flex-col items-center group relative';
+                card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500';
+
+                // Style placement
+                card.style.left = `calc(50% + ${xOff}px)`;
+                card.style.top = `calc(50% + ${yOff}px)`;
+                card.style.transform = 'translate(-50%, -50%)'; // Center pivot
+
+                // Add slight floating animation delay
+                const floatDelay = Math.random() * 2;
+
                 card.innerHTML = `
-                    <div class="relative w-24 h-24 flex items-center justify-center transform group-hover:-translate-y-2 transition-transform duration-300">
-                        <div class="w-20 h-20 md:w-24 md:h-24 pixel-art drop-shadow-lg filter group-hover:brightness-110 transition-all">
+                    <div class="relative w-20 h-20 md:w-24 md:h-24 flex items-center justify-center transform group-hover/card:scale-125 transition-transform duration-300" style="animation: float 3s ease-in-out infinite; animation-delay: -${floatDelay}s;">
+                        <div class="w-full h-full pixel-art drop-shadow-md filter group-hover/card:brightness-110 transition-all">
                             ${generateMonsterSVG(monster)}
                         </div>
-                        
-                        <!-- Floating Hearts Effect (Pseudo) -->
-                        <div class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity text-pink-400 text-xs font-bold animate-pulse">
+                        <div class="absolute -top-4 -right-2 opacity-0 group-hover/card:opacity-100 transition-opacity text-pink-400 text-lg font-bold animate-bounce hidden md:block">
                             ❤️
                         </div>
                     </div>
                     
-                    <div class="mt-2 text-center bg-gray-800/60 backdrop-blur rounded-lg px-3 py-1.5 border border-gray-700 group-hover:border-cyan-500/50 transition-colors w-full max-w-[120px]">
-                        <div class="text-sm font-bold text-cyan-200 truncate">${s.nickname}</div>
-                        <div class="flex items-center justify-center space-x-2 mt-1">
-                            <span class="text-[10px] bg-blue-900/50 text-blue-300 px-1.5 rounded border border-blue-500/30">Lv.${(s.monster_stage || 0) + 1}</span>
-                            <div class="flex items-center text-[10px] text-pink-400 font-bold">
-                                <span>♥</span>
-                                <span class="ml-0.5">${totalLikes}</span>
-                            </div>
-                        </div>
+                    <div class="mt-1 text-center bg-gray-900/40 backdrop-blur-sm rounded px-2 py-0.5 border border-gray-600/30 group-hover/card:bg-gray-800 group-hover/card:border-cyan-500/50 transition-all opacity-80 group-hover/card:opacity-100">
+                        <div class="text-xs font-bold text-cyan-200 shadow-black drop-shadow-md whitespace-nowrap">${s.nickname}</div>
                     </div>
                 `;
-                grid.appendChild(card);
+                relativeContainer.appendChild(card);
             });
-            container.appendChild(grid);
         }
 
         modal.classList.remove('hidden');
     });
 
+    // Add float animation style if not exists
+    if (!document.getElementById('anim-float')) {
+        const style = document.createElement('style');
+        style.id = 'anim-float';
+        style.innerHTML = `
+            @keyframes float {
+                0%, 100% { transform: translateY(0) scale(1); }
+                50% { transform: translateY(-5px) scale(1.02); }
+            }
+        `;
+        document.head.appendChild(style);
+    }
+
     navAdminBtn.addEventListener('click', () => {
         // Save current room to return later
         const currentRoom = localStorage.getItem('vibecoding_instructor_room');