Upload 10 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/instructor_avatar.png filter=lfs diff=lfs merge=lfs -text

src/views/InstructorView.js

@@ -1,6 +1,8 @@
 import { createRoom, subscribeToRoom, getChallenges, resetProgress } from "../services/classroom.js";
+import { generateMonsterSVG, getNextMonster } from "../utils/monsterUtils.js";
 
 let cachedChallenges = [];
+let currentStudents = [];
 
 export async function renderInstructorView() {
     // Pre-fetch challenges for table headers
@@ -65,6 +67,22 @@ export async function renderInstructorView() {
         </div>
     </div>
 
+    <!-- Group Photo Modal -->
+    <div id="group-photo-modal" class="fixed inset-0 bg-gray-900/95 backdrop-blur-md z-50 hidden flex flex-col items-center justify-center p-4 transition-opacity duration-300">
+        <button onclick="document.getElementById('group-photo-modal').classList.add('hidden')" class="absolute top-6 right-6 text-gray-400 hover:text-white text-4xl z-50">✕</button>
+        
+        <div class="text-center mb-8 z-10">
+            <h2 class="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 tracking-wider drop-shadow-lg">
+                大合照 CLASS PHOTO
+            </h2>
+            <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">
+            <!-- Dynamic Content -->
+        </div>
+    </div>
+
     <div class="min-h-screen p-6 pb-20 bg-gray-900 text-white">
         <!-- Header -->
         <header class="flex flex-col md:flex-row justify-between items-center mb-6 bg-gray-800 p-4 rounded-xl border border-gray-700 space-y-4 md:space-y-0 sticky top-0 z-30 shadow-lg">
@@ -86,6 +104,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">
+                    <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>
@@ -158,6 +179,87 @@ export function setupInstructorEvents() {
     const dashboardContent = document.getElementById('dashboard-content');
     const displayRoomCode = document.getElementById('display-room-code');
     const navAdminBtn = document.getElementById('nav-admin-btn');
+    const groupPhotoBtn = document.getElementById('group-photo-btn');
+
+    // Group Photo Logic
+    groupPhotoBtn.addEventListener('click', () => {
+        const modal = document.getElementById('group-photo-modal');
+        const container = document.getElementById('group-photo-container');
+        const dateEl = document.getElementById('photo-date');
+
+        // Update Date
+        const now = new Date();
+        dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`;
+
+        container.innerHTML = '';
+
+        // 1. Instructor Section (Center Top)
+        const instructorSection = document.createElement('div');
+        instructorSection.className = 'flex flex-col items-center justify-center mb-10 w-full relative';
+        instructorSection.innerHTML = `
+            <div class="relative group animate-bounce-slow">
+                <div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full"></div>
+                <!-- Pixel Art Avatar -->
+                <img src="assets/instructor_avatar.png" class="relative w-40 h-40 md:w-56 md:h-56 object-contain pixel-art drop-shadow-[0_10px_20px_rgba(0,0,0,0.5)] z-10 hover:scale-105 transition-transform duration-300" alt="Instructor">
+                
+                <!-- Name Tag -->
+                <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 bg-black/80 backdrop-blur text-yellow-400 px-4 py-1.5 rounded-full border border-yellow-500/30 shadow-xl flex items-center space-x-2 z-20 whitespace-nowrap">
+                    <span class="text-xl">👑</span>
+                    <span class="font-bold text-lg">講師 (Instructor)</span>
+                </div>
+            </div>
+        `;
+        container.appendChild(instructorSection);
+
+        // 2. Students Grid
+        if (currentStudents.length === 0) {
+            const emptyMsg = document.createElement('div');
+            emptyMsg.className = 'text-gray-500 text-xl mt-10';
+            emptyMsg.textContent = '尚無學員加入...';
+            container.appendChild(emptyMsg);
+        } else {
+            const grid = document.createElement('div');
+            grid.className = 'grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 md:gap-8 w-full px-4 md:px-10';
+
+            currentStudents.forEach(s => {
+                const progressMap = s.progress || {};
+                const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
+
+                // Get Monster
+                const monster = getNextMonster(s.monster_stage || 0, totalLikes, currentStudents.length, s.monster_id);
+
+                const card = document.createElement('div');
+                card.className = 'flex flex-col items-center group relative';
+                card.innerHTML = `
+                    <div class="relative w-24 h-24 flex items-center justify-center transform group-hover:-translate-y-2 transition-transform duration-300">
+                        <div class="w-20 h-20 md:w-24 md:h-24 pixel-art drop-shadow-lg filter group-hover:brightness-110 transition-all">
+                            ${generateMonsterSVG(monster)}
+                        </div>
+                        
+                        <!-- Floating Hearts Effect (Pseudo) -->
+                        <div class="absolute -top-2 -right-2 opacity-0 group-hover:opacity-100 transition-opacity text-pink-400 text-xs font-bold animate-pulse">
+                            ❤️
+                        </div>
+                    </div>
+                    
+                    <div class="mt-2 text-center bg-gray-800/60 backdrop-blur rounded-lg px-3 py-1.5 border border-gray-700 group-hover:border-cyan-500/50 transition-colors w-full max-w-[120px]">
+                        <div class="text-sm font-bold text-cyan-200 truncate">${s.nickname}</div>
+                        <div class="flex items-center justify-center space-x-2 mt-1">
+                            <span class="text-[10px] bg-blue-900/50 text-blue-300 px-1.5 rounded border border-blue-500/30">Lv.${(s.monster_stage || 0) + 1}</span>
+                            <div class="flex items-center text-[10px] text-pink-400 font-bold">
+                                <span>♥</span>
+                                <span class="ml-0.5">${totalLikes}</span>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                grid.appendChild(card);
+            });
+            container.appendChild(grid);
+        }
+
+        modal.classList.remove('hidden');
+    });
 
     navAdminBtn.addEventListener('click', () => {
         // Save current room to return later
@@ -201,6 +303,7 @@ export function setupInstructorEvents() {
 
         // Subscribe to updates
         subscribeToRoom(roomCode, (students) => {
+            currentStudents = students;
             renderTransposedHeatmap(students);
         });
     }