Upload 9 files

src/views/InstructorView.js

@@ -124,12 +124,9 @@ export async function renderInstructorView() {
                     <div class="flex items-center"><div class="w-3 h-3 bg-red-500 animate-pulse rounded-sm mr-1"></div> 卡關 (>5m)</div>
                 </div>
 
-                <button id="group-photo-btn" class="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-lg transition-all shadow-lg border border-pink-400/30 flex items-center space-x-2">
+                <button id="group-photo-btn" class="hidden bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-lg transition-all shadow-lg border border-pink-400/30 flex items-center space-x-2">
                     <span>📸 大合照</span>
                 </button>
-                <button id="btn-open-gallery" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-lg transition-all border border-blue-400/30 flex items-center space-x-2">
-                    <span>👾 怪獸圖鑑</span>
-                </button>
                 <button id="nav-admin-btn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-all border border-gray-600">
                     管理題目
                 </button>
@@ -138,13 +135,20 @@ export async function renderInstructorView() {
                     <button id="rejoin-room-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded-lg">重回</button>
 
                     <button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold px-4 py-2 rounded-lg shadow-lg">開房</button>
-                    <button id="logout-btn" class="bg-red-800 hover:bg-red-700 text-white font-bold px-4 py-2 rounded-lg shadow-lg border border-red-600/50" title="登出">
-                        🚪
-                    </button>
                 </div>
             </div>
         </header>
 
+        <!-- Fixed Bottom Right Controls -->
+        <div class="fixed bottom-6 right-6 z-40 flex flex-col space-y-3">
+            <button id="btn-open-gallery" class="bg-blue-600 hover:bg-blue-500 text-white p-4 rounded-full shadow-2xl border border-blue-400/50 hover:scale-110 transition-transform flex items-center justify-center group" title="怪獸圖鑑">
+                <span class="text-2xl group-hover:animate-bounce">👾</span>
+            </button>
+            <button id="logout-btn" class="bg-red-800 hover:bg-red-700 text-white p-4 rounded-full shadow-2xl border border-red-600/50 hover:scale-110 transition-transform flex items-center justify-center" title="登出">
+                <span class="text-2xl">🚪</span>
+            </button>
+        </div>
+
         <!-- Heatmap Content -->
         <div id="dashboard-content" class="hidden overflow-x-auto pb-10">
             <table class="w-full border-collapse">
@@ -635,6 +639,7 @@ export function setupInstructorEvents() {
         createContainer.classList.add('hidden');
         roomInfo.classList.remove('hidden');
         dashboardContent.classList.remove('hidden');
+        document.getElementById('group-photo-btn').classList.remove('hidden'); // Show photo button
         displayRoomCode.textContent = roomCode;
         localStorage.setItem('vibecoding_instructor_room', roomCode);
         sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
@@ -786,8 +791,8 @@ function renderTransposedHeatmap(students) {
                 if (p.status === 'completed') {
                     statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-pointer shadow-[0_0_10px_rgba(34,197,94,0.1)]';
                     content = '✅';
-                    const safePrompt = p.prompt.replace(/"/g, '&quot;').replace(/'/g, "\\'");
-                    action = `onclick = "window.showBroadcastModal('${student.id}', '${c.id}', '${student.nickname}', '${c.title}', '${safePrompt}')"`;
+                    // Pass only IDs, lookup logic is in the modal function now to avoid escaping issues
+                    action = `onclick = "window.showBroadcastModal('${student.id}', '${c.id}')"`;
                 } else if (p.status === 'started') {
                     // Check stuck
                     const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
@@ -833,14 +838,25 @@ function renderTransposedHeatmap(students) {
 }
 
 // Global scope for HTML access
-window.showBroadcastModal = (userId, challengeId, nickname, title, prompt) => {
+// Global scope for HTML access
+window.showBroadcastModal = (userId, challengeId) => {
+    const student = currentStudents.find(s => s.id === userId);
+    if (!student) return;
+
+    const p = student.progress?.[challengeId];
+    if (!p) return;
+
+    const challenge = cachedChallenges.find(c => c.id === challengeId);
+    const title = challenge ? challenge.title : 'Unknown Challenge'; // Fallback
+
     const modal = document.getElementById('broadcast-modal');
     const content = document.getElementById('broadcast-content');
 
-    document.getElementById('broadcast-avatar').textContent = nickname[0];
-    document.getElementById('broadcast-author').textContent = nickname;
+    document.getElementById('broadcast-avatar').textContent = student.nickname[0];
+    document.getElementById('broadcast-author').textContent = student.nickname;
     document.getElementById('broadcast-challenge').textContent = title;
-    document.getElementById('broadcast-prompt').textContent = prompt;
+    // content is already just text, but let's be safe
+    document.getElementById('broadcast-prompt').textContent = p.prompt || p.code || ''; // robust fallback
 
     // Store IDs for actions
     modal.dataset.userId = userId;