Upload 8 files

src/views/InstructorView.js

@@ -1,6 +1,12 @@
 import { createRoom, subscribeToRoom, getChallenges, resetProgress } from "../services/classroom.js";
+import { createRoom, subscribeToRoom, getChallenges, resetProgress } from "../services/classroom.js";
 import { generateMonsterSVG, getNextMonster } from "../utils/monsterUtils.js";
 
+// Load html2canvas dynamically
+const script = document.createElement('script');
+script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
+document.head.appendChild(script);
+
 let cachedChallenges = [];
 let currentStudents = [];
 
@@ -78,9 +84,21 @@ export async function renderInstructorView() {
             <p class="text-gray-400 mt-2 font-mono" id="photo-date">2026.01.27</p>
         </div>
 
-        <div id="group-photo-container" class="w-full max-w-7xl flex flex-col items-center overflow-y-auto max-h-[80vh] custom-scrollbar">
+        <div class="absolute top-6 left-6 z-50 flex space-x-4">
+            <button id="snapshot-btn" class="bg-white/10 hover:bg-white/20 text-white border border-white/30 font-bold py-2 px-6 rounded-full backdrop-blur-md transition-all flex items-center space-x-2 shadow-lg group">
+                <span class="text-2xl group-hover:scale-110 transition-transform">📸</span>
+                <span>拍照 (Snapshot)</span>
+            </button>
+        </div>
+
+        <div id="group-photo-container" class="w-full max-w-7xl flex flex-col items-center overflow-y-auto max-h-[80vh] custom-scrollbar relative">
             <!-- Dynamic Content -->
         </div>
+
+        <!-- Countdown Overlay -->
+        <div id="snapshot-overlay" class="absolute inset-0 z-[60] hidden flex-col items-center justify-center pointer-events-none">
+             <div id="countdown-number" class="text-[150px] font-black text-white drop-shadow-[0_0_50px_rgba(0,0,0,0.8)] animate-pulse">3</div>
+        </div>
     </div>
 
     <div class="min-h-screen p-6 pb-20 bg-gray-900 text-white">
@@ -180,6 +198,102 @@ export function setupInstructorEvents() {
     const displayRoomCode = document.getElementById('display-room-code');
     const navAdminBtn = document.getElementById('nav-admin-btn');
     const groupPhotoBtn = document.getElementById('group-photo-btn');
+    const snapshotBtn = document.getElementById('snapshot-btn');
+    let isSnapshotting = false;
+
+    // Snapshot Logic
+    snapshotBtn.addEventListener('click', async () => {
+        if (isSnapshotting || typeof html2canvas === 'undefined') return;
+        isSnapshotting = true;
+
+        const overlay = document.getElementById('snapshot-overlay');
+        const countEl = document.getElementById('countdown-number');
+        const container = document.getElementById('group-photo-container');
+        const modal = document.getElementById('group-photo-modal');
+
+        // Close button hide
+        const closeBtn = modal.querySelector('button');
+        if (closeBtn) closeBtn.style.opacity = '0';
+        snapshotBtn.style.opacity = '0';
+
+        overlay.classList.remove('hidden');
+        overlay.classList.add('flex');
+
+        // Countdown Sequence
+        const runCountdown = (num) => new Promise(resolve => {
+            countEl.textContent = num;
+            countEl.style.transform = 'scale(1.5)';
+            countEl.style.opacity = '1';
+
+            // Animation reset
+            requestAnimationFrame(() => {
+                countEl.style.transition = 'all 0.5s ease-out';
+                countEl.style.transform = 'scale(1)';
+                countEl.style.opacity = '0.5';
+                setTimeout(resolve, 1000);
+            });
+        });
+
+        await runCountdown(3);
+        await runCountdown(2);
+        await runCountdown(1);
+
+        // Action!
+        countEl.textContent = '';
+        overlay.classList.add('hidden');
+
+        // 1. Emojis Explosion
+        const emojis = ['🤘', '✌️', '👍', '🫶', '😎', '🔥'];
+        const cards = container.querySelectorAll('.group\\/card');
+
+        cards.forEach(card => {
+            // Random Emoji
+            const emoji = emojis[Math.floor(Math.random() * emojis.length)];
+            const emojiEl = document.createElement('div');
+            emojiEl.textContent = emoji;
+            emojiEl.className = 'absolute -top-12 left-1/2 transform -translate-x-1/2 text-4xl animate-bounce z-50 drop-shadow-lg';
+            emojiEl.style.animationDuration = '0.5s';
+            card.appendChild(emojiEl);
+
+            // Remove after 2s
+            setTimeout(() => emojiEl.remove(), 3000);
+        });
+
+        // 2. Capture
+        setTimeout(async () => {
+            try {
+                // Flash Effect
+                const flash = document.createElement('div');
+                flash.className = 'fixed inset-0 bg-white z-[100] transition-opacity duration-300 pointer-events-none';
+                document.body.appendChild(flash);
+                setTimeout(() => flash.style.opacity = '0', 50);
+                setTimeout(() => flash.remove(), 300);
+
+                const canvas = await html2canvas(container, {
+                    backgroundColor: '#111827', // Match bg-gray-900
+                    scale: 2, // High res
+                    useCORS: true,
+                    logging: false
+                });
+
+                // Download
+                const link = document.createElement('a');
+                const dateStr = new Date().toISOString().slice(0, 10);
+                link.download = `VIBE_Class_Photo_${dateStr}.png`;
+                link.href = canvas.toDataURL();
+                link.click();
+
+            } catch (e) {
+                console.error("Snapshot failed:", e);
+                alert("截圖失敗，請手動截圖 (Press PrtSc)");
+            } finally {
+                // Restore UI
+                if (closeBtn) closeBtn.style.opacity = '1';
+                snapshotBtn.style.opacity = '1';
+                isSnapshotting = false;
+            }
+        }, 600); // Slight delay for emojis to appear
+    });
 
     // Group Photo Logic
     groupPhotoBtn.addEventListener('click', () => {
@@ -257,17 +371,29 @@ export function setupInstructorEvents() {
                 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
+                // Expanded exclusion zone for better label clearance (60 to 120 degrees)
                 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
+                // Avoid "South" (approx 60 to 120 degrees) where the label sticks out
+                // Also push further away if near the bottom
+                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
+                    } else {
+                        finalAngle = (120 + 10) * (Math.PI / 180); // Move to 130 deg
+                    }
                 }
 
-                // Radius: Random within range
-                const radius = minR + Math.random() * (maxR - minR);
+                // Radius: Random within range (Push out further if still somewhat south)
+                let radius = minR + Math.random() * (maxR - minR);
+                if (normalizedDeg > 45 && normalizedDeg < 135) {
+                    radius += 60; // Extra buffer for bottom elements
+                }
 
                 const xOff = Math.cos(finalAngle) * radius;
                 const yOff = Math.sin(finalAngle) * radius * 0.8;