Upload 8 files

src/views/InstructorView.js

@@ -211,12 +211,14 @@ export function setupInstructorEvents() {
                 <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">
                 
                 <!-- 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">
+                <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 justify-center space-x-2 z-30 whitespace-nowrap group-hover:bg-black transition-colors min-w-[150px] max-w-[300px]">
                     <span class="text-xl">👑</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"
+                        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 transition-all placeholder-yellow-700"
+                        style="width: ${Math.max(savedName.length * 20, 100)}px;"
                         onclick="this.select()"
+                        oninput="this.style.width = Math.max(this.value.length * 20, 100) + 'px'"
                     >
                 </div>
             </div>
@@ -245,47 +247,63 @@ export function setupInstructorEvents() {
                 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
+                // Min radius increased to verify clearance around label
+                const minR = 220;
+                const maxR = 350;
 
                 // 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;
+                let baseAngle = (index / total) * 2 * Math.PI;
+                const angleJitter = (Math.random() - 0.5) * 0.5;
+                let finalAngle = baseAngle + angleJitter;
+
+                // Collision Avoidance for Bottom Label (approx 90 deg / PI/2)
+                // If angle is roughly downwards (e.g., between 80deg and 100deg), push it aside
+                const deg = finalAngle * (180 / Math.PI) % 360;
+                const normalizedDeg = deg < 0 ? deg + 360 : deg;
+
+                // Avoid "South" (approx 75 to 105 degrees) where the label sticks out
+                if (normalizedDeg > 75 && normalizedDeg < 105) {
+                    finalAngle += (Math.random() > 0.5 ? 0.5 : -0.5); // Push left or right by ~30 deg
+                }
 
                 // Radius: Random within range
                 const radius = minR + Math.random() * (maxR - minR);
 
-                // 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 yOff = Math.sin(finalAngle) * radius * 0.8;
 
                 const card = document.createElement('div');
                 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
+                card.style.transform = 'translate(-50%, -50%)';
 
-                // Add slight floating animation delay
                 const floatDelay = Math.random() * 2;
 
                 card.innerHTML = `
+                    <!-- Top Info: Monster Stats -->
+                    <div class="mb-1 text-center bg-gray-900/60 backdrop-blur-sm rounded-lg px-2 py-1 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 transform translate-y-2 group-hover/card:translate-y-0 duration-300">
+                         <div class="text-[10px] text-gray-300 mb-0.5 whitespace-nowrap">${monster.name.split(' ')[1] || monster.name}</div>
+                         <div class="flex items-center justify-center space-x-2">
+                            <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>
+
+                    <!-- Monster Image -->
                     <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>
-                        <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-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>
+                    <!-- Bottom Info: User Nickname -->
+                    <div class="mt-1 text-center bg-black/60 backdrop-blur-sm rounded-full px-3 py-0.5 border border-gray-600/50 group-hover/card:bg-cyan-900/80 group-hover/card:border-cyan-400 transition-all">
+                        <div class="text-xs font-bold text-white shadow-black drop-shadow-md whitespace-nowrap tracking-wide">${s.nickname}</div>
                     </div>
                 `;
                 relativeContainer.appendChild(card);