Upload 9 files

src/services/classroom.js

@@ -11,9 +11,9 @@ import {
     where,
     getDocs,
     orderBy,
-    deleteDoc,
     updateDoc,
-    getCountFromServer
+    getCountFromServer,
+    deleteDoc
 } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 
 // Collection references
@@ -509,3 +509,12 @@ export function subscribeToUserProgress(userId, callback) {
         callback(progressMap);
     });
 }
+
+/**
+ * Removes a user from the classroom (Kick)
+ * @param {string} userId 
+ */
+export async function removeUser(userId) {
+    if (!userId) return;
+    await deleteDoc(doc(db, USERS_COLLECTION, userId));
+}

src/views/InstructorView.js

@@ -1,4 +1,4 @@
-import { createRoom, subscribeToRoom, getChallenges, resetProgress } from "../services/classroom.js";
+import { createRoom, subscribeToRoom, getChallenges, resetProgress, removeUser } from "../services/classroom.js";
 
 import { generateMonsterSVG, getNextMonster } from "../utils/monsterUtils.js";
 
@@ -378,6 +378,18 @@ export function setupInstructorEvents() {
             const students = [...currentStudents].sort(() => Math.random() - 0.5);
             const total = students.length;
 
+            // --- Dynamic Sizing Logic ---
+            let sizeClass = 'w-20 h-20 md:w-24 md:h-24'; // Default (Size 100%)
+            let scaleFactor = 1.0;
+
+            if (total >= 40) {
+                sizeClass = 'w-12 h-12 md:w-14 md:h-14'; // Size 60%
+                scaleFactor = 0.6;
+            } else if (total >= 20) {
+                sizeClass = 'w-16 h-16 md:w-20 md:h-20'; // Size 80%
+                scaleFactor = 0.8;
+            }
+
             students.forEach((s, index) => {
                 const progressMap = s.progress || {};
                 const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
@@ -398,24 +410,36 @@ export function setupInstructorEvents() {
                 const deg = finalAngle * (180 / Math.PI) % 360;
                 const normalizedDeg = deg < 0 ? deg + 360 : deg;
 
-                // Avoid "South" (approx 60 to 120 degrees) where the label sticks out
-                // Also push further away if near the bottom
+                // 1. Avoid Instructor Label (Bottom Center: 60-120 deg)
                 if (normalizedDeg > 60 && normalizedDeg < 120) {
                     // Push angle strictly out of the zone
                     const distTo60 = Math.abs(normalizedDeg - 60);
                     const distTo120 = Math.abs(normalizedDeg - 120);
 
                     if (distTo60 < distTo120) {
-                        finalAngle = (60 - 10) * (Math.PI / 180); // Move to 50 deg
+                        finalAngle = (60 - 15) * (Math.PI / 180); // Move to 45 deg
                     } else {
-                        finalAngle = (120 + 10) * (Math.PI / 180); // Move to 130 deg
+                        finalAngle = (120 + 15) * (Math.PI / 180); // Move to 135 deg
                     }
                 }
 
-                // Radius: Random within range (Push out further if still somewhat south)
+                // 2. Recalculate degree after shift
+                const finalDeg = finalAngle * (180 / Math.PI) % 360;
+                const normFinalDeg = finalDeg < 0 ? finalDeg + 360 : finalDeg;
+
+                // Radius: Random within range
                 let radius = minR + Math.random() * (maxR - minR);
-                if (normalizedDeg > 45 && normalizedDeg < 135) {
-                    radius += 60; // Extra buffer for bottom elements
+
+                // 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)
+                }
+
+                // 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;
                 }
 
                 const xOff = Math.cos(finalAngle) * radius;
@@ -444,7 +468,7 @@ export function setupInstructorEvents() {
                     </div>
 
                     <!-- Monster Image -->
-                    <div class="monster-img-container 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="monster-img-container relative ${sizeClass} 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>
@@ -609,9 +633,14 @@ function renderTransposedHeatmap(students) {
                         <!-- Online Indicator (Simulated) -->
                         <div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-gray-800 rounded-full"></div>
                     </div>
-                    <span class="text-xs text-gray-300 font-medium truncate max-w-[80px] writing-vertical-lr" style="writing-mode: vertical-rl; text-orientation: mixed;">
-                        ${student.nickname}
-                    </span>
+                    <div class="flex items-center justify-center space-x-1">
+                        <span class="text-xs text-gray-300 font-medium truncate max-w-[80px] writing-vertical-lr" style="writing-mode: vertical-rl; text-orientation: mixed;">
+                            ${student.nickname}
+                        </span>
+                        <button onclick="window.confirmKick('${student.id}', '${student.nickname}')" class="text-gray-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity" title="踢出學員">
+                            🗑️
+                        </button>
+                    </div>
                 </div>
             </th>
         `;