Upload 8 files

src/views/InstructorView.js

@@ -2,9 +2,9 @@ import { createRoom, subscribeToRoom, getChallenges, resetProgress } from "../se
 
 import { generateMonsterSVG, getNextMonster } from "../utils/monsterUtils.js";
 
-// Load html2canvas dynamically
+// Load html-to-image dynamically (Better support than html2canvas)
 const script = document.createElement('script');
-script.src = "https://html2canvas.hertzen.com/dist/html2canvas.min.js";
+script.src = "https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.js";
 document.head.appendChild(script);
 
 let cachedChallenges = [];
@@ -203,7 +203,10 @@ export function setupInstructorEvents() {
 
     // Snapshot Logic
     snapshotBtn.addEventListener('click', async () => {
-        if (isSnapshotting || typeof html2canvas === 'undefined') return;
+        if (isSnapshotting || typeof htmlToImage === 'undefined') {
+            if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
+            return;
+        }
         isSnapshotting = true;
 
         const overlay = document.getElementById('snapshot-overlay');
@@ -251,15 +254,16 @@ export function setupInstructorEvents() {
             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';
+            // Updated Position: Top-Right, Smaller, Overlapping
+            emojiEl.className = 'absolute -top-3 -right-3 text-2xl animate-bounce z-50 drop-shadow-md';
+            emojiEl.style.animationDuration = '0.6s';
             card.appendChild(emojiEl);
 
-            // Remove after 2s
+            // Remove after 3s
             setTimeout(() => emojiEl.remove(), 3000);
         });
 
-        // 2. Capture
+        // 2. Capture using html-to-image
         setTimeout(async () => {
             try {
                 // Flash Effect
@@ -269,23 +273,23 @@ export function setupInstructorEvents() {
                 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
+                // Use htmlToImage.toPng
+                const dataUrl = await htmlToImage.toPng(container, {
+                    backgroundColor: '#111827',
+                    pixelRatio: 2,
+                    cacheBust: true,
                 });
 
                 // 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.href = dataUrl;
                 link.click();
 
             } catch (e) {
                 console.error("Snapshot failed:", e);
-                alert("截圖失敗，請手動截圖 (Press PrtSc)");
+                alert("截圖失敗 (請嘗試手動截圖/PrtSc)\n原因: " + e.message);
             } finally {
                 // Restore UI
                 if (closeBtn) closeBtn.style.opacity = '1';