Upload 8 files

src/views/InstructorView.js

@@ -25,11 +25,17 @@ export async function renderInstructorView() {
                 <span class="text-gray-400">教室代碼</span>
                 <span id="display-room-code" class="text-3xl font-mono font-bold text-cyan-400 tracking-widest bg-gray-900 px-4 py-2 rounded-lg border border-cyan-500/30 shadow-[0_0_15px_rgba(34,211,238,0.3)]"></span>
             </div>
-            <div class="flex space-x-3">
                 <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">
                     管理題目 (Admin)
                 </button>
-                <div id="create-room-container">
+                <div id="create-room-container" class="flex items-center space-x-2">
+                    <div class="flex items-center bg-gray-900 rounded-lg border border-gray-700 p-1">
+                        <input type="text" id="rejoin-room-code" placeholder="輸入舊代碼" class="bg-transparent text-white px-2 py-1 w-24 text-center focus:outline-none text-sm">
+                        <button id="rejoin-room-btn" class="bg-gray-700 hover:bg-gray-600 text-xs text-white px-2 py-1 rounded transition-colors">
+                            重回
+                        </button>
+                    </div>
+                    <span class="text-gray-500">or</span>
                     <button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg shadow-purple-500/30">
                         建立新教室
                     </button>
@@ -82,23 +88,27 @@ export function setupInstructorEvents() {
         window.location.hash = 'admin';
     });
 
+    // Auto-fill room code from local storage
+    const savedRoomCode = localStorage.getItem('vibecoding_instructor_room');
+    if (savedRoomCode) {
+        document.getElementById('rejoin-room-code').value = savedRoomCode;
+    }
+
+    const rejoinBtn = document.getElementById('rejoin-room-btn');
+    rejoinBtn.addEventListener('click', () => {
+        const code = document.getElementById('rejoin-room-code').value.trim();
+        if (!code) return alert('請輸入教室代碼');
+
+        enterRoom(code);
+    });
+
     createBtn.addEventListener('click', async () => {
         try {
             createBtn.disabled = true;
             createBtn.textContent = "建立中...";
 
             const roomCode = await createRoom();
-
-            // UI Switch
-            createContainer.classList.add('hidden');
-            roomInfo.classList.remove('hidden');
-            dashboardContent.classList.remove('hidden');
-            displayRoomCode.textContent = roomCode;
-
-            // Subscribe to updates only after room is created
-            subscribeToRoom(roomCode, (students) => {
-                renderStudentCards(students, studentsGrid);
-            });
+            enterRoom(roomCode);
 
         } catch (error) {
             console.error(error);
@@ -106,6 +116,22 @@ export function setupInstructorEvents() {
             createBtn.disabled = false;
         }
     });
+
+    function enterRoom(roomCode) {
+        // UI Switch
+        createContainer.classList.add('hidden');
+        roomInfo.classList.remove('hidden');
+        dashboardContent.classList.remove('hidden');
+        displayRoomCode.textContent = roomCode;
+
+        // Save to local storage
+        localStorage.setItem('vibecoding_instructor_room', roomCode);
+
+        // Subscribe to updates
+        subscribeToRoom(roomCode, (students) => {
+            renderStudentCards(students, studentsGrid);
+        });
+    }
 }
 
 function renderStudentCards(students, container) {

src/views/StudentView.js

@@ -91,9 +91,12 @@ export async function renderStudentView() {
     return `
     <div class="min-h-screen p-4 pb-32 max-w-md mx-auto sm:max-w-4xl">
         <header class="flex justify-between items-center mb-8 sticky top-0 bg-slate-900/90 backdrop-blur z-20 py-4 px-2 -mx-2">
-            <div class="flex items-center space-x-2">
-                <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
-                <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
+            <div class="flex flex-col">
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                    <span class="text-gray-400 text-sm truncate max-w-[150px]">${nickname}</span>
+                </div>
+                <div class="text-xs text-gray-500 mt-1">教室: <span class="font-mono text-cyan-400 font-bold">${roomCode}</span></div>
             </div>
             <div>
                 <h1 class="text-xl font-bold italic text-white tracking-widest">VIBECODING</h1>