Upload 9 files

src/views/InstructorView.js

@@ -331,9 +331,9 @@ export function setupInstructorEvents() {
         const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} `;
 
         watermark.innerHTML = `
-    < span class="text-lg md:text-2xl font-black font-mono bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 tracking-wider" >
+    <span class="text-lg md:text-2xl font-black font-mono bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 tracking-wider">
         ${dateStr} VibeCoding 怪獸成長營
-            </span >
+    </span>
     `;
         relativeContainer.appendChild(watermark);
 
@@ -341,9 +341,9 @@ export function setupInstructorEvents() {
         const instructorSection = document.createElement('div');
         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" >
+    <div class="relative">
                 <div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full animate-pulse"></div>
-                <!--Pixel Art Avatar-- >
+                <!--Pixel Art Avatar-->
     <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 -->
@@ -442,16 +442,28 @@ export function setupInstructorEvents() {
                 // Radius: Random within range
                 let radius = minR + Math.random() * (maxR - minR);
 
-                // 3. Avoid Watermark (Bottom Right: 0-60 deg)
-                // If in this sector, pull them in closer to center to avoid the corner watermark
-                if (normFinalDeg >= 0 && normFinalDeg < 60) {
-                    radius = minR + Math.random() * 40; // Max radius restricted to minR + 40 (approx 260px)
+                // 3. Avoid Watermark (Bottom Right: 0-90 deg)
+                // Expanded zone to properly clear the label
+                if (normFinalDeg >= 0 && normFinalDeg < 90) {
+                    // Push angle strictly out of the zone
+                    const distTo0 = Math.abs(normFinalDeg - 0);
+                    const distTo90 = Math.abs(normFinalDeg - 90);
+
+                    if (distTo0 < distTo90) {
+                        finalAngle = (-15) * (Math.PI / 180); // Move to -15 deg
+                    } else {
+                        finalAngle = (105) * (Math.PI / 180); // Move to 105 deg
+                    }
                 }
 
-                // 4. Extra space for bottom area (outside watermark/label zones)
-                // If 120-150 deg (Bottom Left), can go further out
-                if (normFinalDeg > 120 && normFinalDeg < 150) {
-                    radius += 40;
+                // 4. Recalculate degree after shift
+                const shiftFinalDeg = finalAngle * (180 / Math.PI) % 360;
+                const shiftNormFinalDeg = shiftFinalDeg < 0 ? shiftFinalDeg + 360 : shiftFinalDeg;
+
+                // 2. Extra space for bottom area (Instructor Name Tag)
+                // If 80-100 deg (Bottom Center), push radius out
+                if (shiftNormFinalDeg > 80 && shiftNormFinalDeg < 100) {
+                    radius += 60;
                 }
 
                 const xOff = Math.cos(finalAngle) * radius;
@@ -504,8 +516,10 @@ export function setupInstructorEvents() {
         style.id = 'anim-float';
         style.innerHTML = `
 @keyframes float {
-    0 %, 100 % { transform: translateY(0) scale(1); }
-    50 % { transform: translateY(-5px) scale(1.02); }
+@keyframes float {
+    0%, 100% { transform: translateY(0) scale(1); }
+    50% { transform: translateY(-5px) scale(1.02); }
+}
 }
 `;
         document.head.appendChild(style);