Upload 8 files

src/main.js

@@ -1,22 +1,36 @@
 import { renderLandingView, setupLandingEvents } from './views/LandingView.js';
 import { renderInstructorView, setupInstructorEvents } from './views/InstructorView.js';
 import { renderStudentView, setupStudentEvents } from './views/StudentView.js';
+import { renderAdminView, setupAdminEvents } from './views/AdminView.js';
 
 const app = document.querySelector('#app');
 
 function navigateTo(view) {
+    // Update hash maybe? For now simple switch
     switch (view) {
         case 'landing':
             app.innerHTML = renderLandingView();
             setupLandingEvents(navigateTo);
             break;
         case 'instructor':
-            app.innerHTML = renderInstructorView();
-            setupInstructorEvents();
+            app.innerHTML = '載入中...';
+            // Async render because Instructor view fetches challenges for column headers
+            renderInstructorView().then(html => {
+                app.innerHTML = html;
+                setupInstructorEvents();
+            });
             break;
         case 'student':
-            app.innerHTML = renderStudentView();
-            setupStudentEvents();
+            app.innerHTML = '載入中...';
+            // Async render because Student view fetches challenges
+            renderStudentView().then(html => {
+                app.innerHTML = html;
+                setupStudentEvents();
+            });
+            break;
+        case 'admin':
+            app.innerHTML = renderAdminView();
+            setupAdminEvents();
             break;
         default:
             app.innerHTML = renderLandingView();
@@ -24,5 +38,27 @@ function navigateTo(view) {
     }
 }
 
+// Route Handler
+function handleRoute() {
+    const hash = window.location.hash.slice(1);
+    if (hash === 'admin') {
+        navigateTo('admin');
+        return;
+    }
+
+    // Auto-login check
+    const roomCode = localStorage.getItem('vibecoding_room_code');
+    const userId = localStorage.getItem('vibecoding_user_id'); // Changed key to match new logic
+
+    if (roomCode && userId && !hash) {
+        navigateTo('student');
+    } else {
+        navigateTo('landing');
+    }
+}
+
+// Listen to hash changes
+window.addEventListener('hashchange', handleRoute);
+
 // Initial Load
-navigateTo('landing');
+handleRoute();

src/services/classroom.js

@@ -9,11 +9,17 @@ import {
     serverTimestamp,
     query,
     where,
-    getDocs
+    getDocs,
+    orderBy,
+    deleteDoc,
+    updateDoc
 } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
 
 // Collection references
 const ROOMS_COLLECTION = "classrooms";
+const USERS_COLLECTION = "users";
+const PROGRESS_COLLECTION = "progress";
+const CHALLENGES_COLLECTION = "challenges";
 
 /**
  * Creates a new classroom room
@@ -32,12 +38,13 @@ export async function createRoom() {
 }
 
 /**
- * Joins an existing room
+ * Joins a room with Dual-Role Auth / Session Persistence logic
  * @param {string} roomCode 
  * @param {string} nickname 
- * @returns {Promise<string>} The student ID
+ * @returns {Promise<string>} The student ID (userId)
  */
 export async function joinRoom(roomCode, nickname) {
+    // 1. Verify Room Exists
     const roomRef = doc(db, ROOMS_COLLECTION, roomCode);
     const roomSnap = await getDoc(roomRef);
 
@@ -45,83 +52,200 @@ export async function joinRoom(roomCode, nickname) {
         throw new Error("教室代碼不存在");
     }
 
-    // Create student document within the room
-    const studentsRef = collection(roomRef, "students");
-    const studentDoc = await addDoc(studentsRef, {
+    // 2. Check if user already exists in this room (Cross-device sync)
+    const usersRef = collection(db, USERS_COLLECTION);
+    const q = query(
+        usersRef,
+        where("current_room", "==", roomCode),
+        where("nickname", "==", nickname)
+    );
+
+    const querySnapshot = await getDocs(q);
+
+    if (!querySnapshot.empty) {
+        // User exists, return existing ID
+        const userDoc = querySnapshot.docs[0];
+        // Update last active
+        await updateDoc(userDoc.ref, { last_active: serverTimestamp() });
+        return userDoc.id;
+    }
+
+    // 3. Create new user if not exists
+    const newUserRef = await addDoc(usersRef, {
         nickname,
+        current_room: roomCode,
+        role: 'student',
         joinedAt: serverTimestamp(),
-        progress: {}
+        last_active: serverTimestamp()
     });
 
-    return studentDoc.id;
+    return newUserRef.id;
 }
 
 /**
  * Submits a prompt for a specific level
+ * @param {string} userId 
  * @param {string} roomCode 
- * @param {string} studentId 
- * @param {string} levelId 
+ * @param {string} challengeId 
  * @param {string} prompt 
  */
-export async function submitPrompt(roomCode, studentId, levelId, prompt) {
+export async function submitPrompt(userId, roomCode, challengeId, prompt) {
     const text = prompt.trim();
     if (!text) return;
 
-    const studentRef = doc(db, ROOMS_COLLECTION, roomCode, "students", studentId);
-
-    // Update using merge to preserve other progress
-    await setDoc(studentRef, {
-        progress: {
-            [levelId]: {
-                status: "completed",
-                prompt: text,
-                timestamp: serverTimestamp()
-            }
-        },
-        lastActive: serverTimestamp()
-    }, { merge: true });
+    // Check if submission already exists to update it, or add new
+    // For simplicity, we can just use a composite ID or query first.
+    // Let's use addDoc for history, or setDoc with custom ID for latest state.
+    // Requirement says "progress/{docId}", let's query first to see if we should update.
+
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    const q = query(
+        progressRef,
+        where("userId", "==", userId),
+        where("challengeId", "==", challengeId)
+    );
+    const snapshot = await getDocs(q);
+
+    if (!snapshot.empty) {
+        // Update existing
+        const docRef = snapshot.docs[0].ref;
+        await updateDoc(docRef, {
+            status: "completed",
+            submission_prompt: text,
+            timestamp: serverTimestamp()
+        });
+    } else {
+        // Create new
+        await addDoc(progressRef, {
+            userId,
+            roomCode, // Added for easier querying by instructor
+            challengeId,
+            status: "completed",
+            submission_prompt: text,
+            timestamp: serverTimestamp()
+        });
+    }
+
+    // Update user last active
+    const userRef = doc(db, USERS_COLLECTION, userId);
+    await updateDoc(userRef, { last_active: serverTimestamp() });
 }
 
 /**
- * Subscribes to room updates (for Instructor)
+ * Subscribes to room users and their progress
  * @param {string} roomCode 
- * @param {Function} callback 
+ * @param {Function} callback (studentsWithProgress) => void
  * @returns {Function} Unsubscribe function
  */
 export function subscribeToRoom(roomCode, callback) {
-    const studentsRef = collection(db, ROOMS_COLLECTION, roomCode, "students");
+    // Listen to users in the room
+    const usersQuery = query(collection(db, USERS_COLLECTION), where("current_room", "==", roomCode));
+
+    // We also need progress. Real-time listening to TWO collections and joining them 
+    // is complex in NoSQL. 
+    // Strategy: Listen to Users. When Users change, fetch all progress for this room (or listen to it).
+    // Simpler efficient approach for dashboard: 
+    // Listen to Progress independent of users? No, we need user list.
+
+    // Let's listen to Users, and inside, listen to Progress for this room.
 
-    return onSnapshot(studentsRef, (snapshot) => {
-        const students = [];
-        snapshot.forEach((doc) => {
-            students.push({ id: doc.id, ...doc.data() });
+    let unsubscribeProgress = () => { };
+
+    const unsubscribeUsers = onSnapshot(usersQuery, (userSnap) => {
+        const users = [];
+        userSnap.forEach((doc) => {
+            users.push({ id: doc.id, ...doc.data() });
+        });
+
+        // Now listen to progress for this room
+        const progressQuery = query(collection(db, PROGRESS_COLLECTION), where("roomCode", "==", roomCode));
+
+        unsubscribeProgress(); // Detach previous listener if any
+
+        unsubscribeProgress = onSnapshot(progressQuery, (progressSnap) => {
+            const progressMap = {}; // { userId: { challengeId: { status, prompt } } }
+
+            progressSnap.forEach(doc => {
+                const data = doc.data();
+                if (!progressMap[data.userId]) progressMap[data.userId] = {};
+                progressMap[data.userId][data.challengeId] = {
+                    status: data.status,
+                    prompt: data.submission_prompt,
+                    timestamp: data.timestamp
+                };
+            });
+
+            // Merge back to users
+            const combinedData = users.map(user => ({
+                ...user,
+                progress: progressMap[user.id] || {}
+            }));
+
+            callback(combinedData);
         });
-        callback(students);
     });
+
+    return () => {
+        unsubscribeUsers();
+        unsubscribeProgress();
+    };
 }
 
 /**
- * Fetches prompts for a specific level from all students in the room
- * @param {string} roomCode 
- * @param {string} levelId 
- * @returns {Promise<Array>} Array of { nickname, prompt }
+ * Fetches prompts for Peer Learning
  */
-export async function getPeerPrompts(roomCode, levelId) {
-    const studentsRef = collection(db, ROOMS_COLLECTION, roomCode, "students");
-    const snapshot = await getDocs(studentsRef);
-
-    const prompts = [];
-    snapshot.forEach(doc => {
+export async function getPeerPrompts(roomCode, challengeId) {
+    const progressRef = collection(db, PROGRESS_COLLECTION);
+    // We need nickname too. progress collection only has userId.
+    // We might need to fetch user info or store nickname in progress (denormalization).
+    // Let's store nickname in progress for easier read? Or fetch users.
+    // For now, let's fetch matching progress, then unique userIds, then fetch those users.
+
+    const q = query(
+        progressRef,
+        where("roomCode", "==", roomCode),
+        where("challengeId", "==", challengeId),
+        where("status", "==", "completed")
+    );
+
+    const snapshot = await getDocs(q);
+    const entries = [];
+
+    for (const doc of snapshot.docs) {
         const data = doc.data();
-        const levelData = data.progress?.[levelId];
-        if (levelData && levelData.status === 'completed' && levelData.prompt) {
-            prompts.push({
-                nickname: data.nickname,
-                prompt: levelData.prompt,
-                timestamp: levelData.timestamp
+        // Fetch nickname (not efficient N+1, but okay for prototype with small rooms)
+        // Optimization: Cache users or store nickname in progress.
+        // Let's assume we can fetch user. 
+        const userSnap = await getDoc(doc(db, USERS_COLLECTION, data.userId));
+        if (userSnap.exists()) {
+            entries.push({
+                nickname: userSnap.data().nickname,
+                prompt: data.submission_prompt,
+                timestamp: data.timestamp
             });
         }
-    });
+    }
+
+    return entries;
+}
+
+// --- Admin / Challenge Services ---
+
+export async function getChallenges() {
+    const q = query(collection(db, CHALLENGES_COLLECTION), orderBy("order", "asc"));
+    const snapshot = await getDocs(q);
+    return snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
+}
+
+export async function createChallenge(data) {
+    // data: { level, title, description, link, order }
+    await addDoc(collection(db, CHALLENGES_COLLECTION), data);
+}
+
+export async function updateChallenge(id, data) {
+    await updateDoc(doc(db, CHALLENGES_COLLECTION, id), data);
+}
 
-    return prompts;
+export async function deleteChallenge(id) {
+    await deleteDoc(doc(db, CHALLENGES_COLLECTION, id));
 }

src/views/AdminView.js

@@ -0,0 +1,140 @@
+import { getChallenges, createChallenge, updateChallenge, deleteChallenge } from "../services/classroom.js";
+
+export function renderAdminView() {
+    return `
+    <div class="min-h-screen p-6 pb-20">
+        <header class="flex justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm">
+            <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-400 to-orange-600">
+                後台管理系統 Admin Panel
+            </h1>
+            <button id="add-challenge-btn" class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-6 rounded-lg transition-all shadow-lg">
+                + 新增題目
+            </button>
+        </header>
+
+        <div id="challenges-list" class="space-y-4">
+            <!-- Questions loaded here -->
+            <div class="text-center text-gray-500 py-10">載入中...</div>
+        </div>
+
+        <!-- Edit/Add Modal -->
+        <div id="challenge-modal" class="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm hidden flex items-center justify-center z-50 p-4">
+            <div class="bg-gray-800 rounded-xl w-full max-w-2xl border border-gray-700 shadow-2xl overflow-y-auto max-h-[90vh]">
+                <div class="p-6 border-b border-gray-700">
+                    <h3 id="modal-title" class="text-xl font-bold text-white">編輯題目</h3>
+                </div>
+                <div class="p-6 space-y-4">
+                    <input type="hidden" id="edit-id">
+                    <div>
+                        <label class="block text-gray-400 mb-1">標題 (Title)</label>
+                        <input type="text" id="edit-title" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">難度 (Level)</label>
+                        <select id="edit-level" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
+                            <option value="beginner">初級 (Beginner)</option>
+                            <option value="intermediate">中級 (Intermediate)</option>
+                            <option value="advanced">高級 (Advanced)</option>
+                        </select>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">描述 (Description)</label>
+                        <textarea id="edit-desc" rows="3" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">連結 (GeminiCanvas Link/Code)</label>
+                        <input type="text" id="edit-link" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-1">排序 (Order)</label>
+                        <input type="number" id="edit-order" class="w-full bg-gray-900 border border-gray-600 rounded p-2 text-white" value="1">
+                    </div>
+                </div>
+                <div class="p-6 border-t border-gray-700 flex justify-end space-x-3">
+                    <button onclick="closeChallengeModal()" class="px-4 py-2 text-gray-400 hover:text-white">取消</button>
+                    <button id="save-challenge-btn" class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded">儲存</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+}
+
+export function setupAdminEvents() {
+    loadChallenges();
+
+    document.getElementById('add-challenge-btn').addEventListener('click', () => {
+        openModal();
+    });
+
+    document.getElementById('save-challenge-btn').addEventListener('click', async () => {
+        const id = document.getElementById('edit-id').value;
+        const data = {
+            title: document.getElementById('edit-title').value,
+            level: document.getElementById('edit-level').value,
+            description: document.getElementById('edit-desc').value,
+            link: document.getElementById('edit-link').value,
+            order: parseInt(document.getElementById('edit-order').value) || 0
+        };
+
+        if (id) {
+            await updateChallenge(id, data);
+        } else {
+            await createChallenge(data);
+        }
+
+        closeChallengeModal();
+        loadChallenges();
+    });
+}
+
+async function loadChallenges() {
+    const list = document.getElementById('challenges-list');
+    const challenges = await getChallenges();
+
+    list.innerHTML = challenges.map(c => `
+        <div class="bg-gray-800 p-4 rounded-lg border border-gray-700 flex justify-between items-center group hover:border-gray-500 transition-colors">
+            <div>
+                <span class="inline-block px-2 py-1 text-xs rounded bg-gray-700 text-gray-300 mr-2">${c.level}</span>
+                <span class="font-bold text-white text-lg">${c.title}</span>
+                <p class="text-gray-400 text-sm mt-1 truncate max-w-md">${c.description}</p>
+            </div>
+            <div class="flex space-x-2 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity">
+                <button onclick="window.editChallenge('${c.id}')" class="bg-cyan-600/20 text-cyan-400 px-3 py-1 rounded hover:bg-cyan-600 hover:text-white transition-colors">編輯</button>
+                <button onclick="window.deleteChallenge('${c.id}')" class="bg-red-600/20 text-red-400 px-3 py-1 rounded hover:bg-red-600 hover:text-white transition-colors">刪除</button>
+            </div>
+        </div>
+    `).join('');
+
+    // Expose helpers globally for onclick
+    window.editChallenge = (id) => {
+        const c = challenges.find(x => x.id === id);
+        if (c) openModal(c);
+    };
+    window.deleteChallenge = async (id) => {
+        if (confirm('確定刪除?')) {
+            await deleteChallenge(id);
+            loadChallenges();
+        }
+    };
+}
+
+function openModal(challenge = null) {
+    const modal = document.getElementById('challenge-modal');
+    const title = document.getElementById('modal-title');
+
+    // Reset or Fill
+    document.getElementById('edit-id').value = challenge ? challenge.id : '';
+    document.getElementById('edit-title').value = challenge ? challenge.title : '';
+    document.getElementById('edit-level').value = challenge ? challenge.level : 'beginner';
+    document.getElementById('edit-desc').value = challenge ? challenge.description : '';
+    document.getElementById('edit-link').value = challenge ? challenge.link : '';
+    document.getElementById('edit-order').value = challenge ? challenge.order : '1';
+
+    title.textContent = challenge ? '編輯題目' : '新增題目';
+    modal.classList.remove('hidden');
+}
+
+window.closeChallengeModal = () => {
+    document.getElementById('challenge-modal').classList.add('hidden');
+};

src/views/InstructorView.js

@@ -1,10 +1,23 @@
-import { createRoom, subscribeToRoom } from "../services/classroom.js";
+import { createRoom, subscribeToRoom, getChallenges } from "../services/classroom.js";
+
+let cachedChallenges = [];
+
+export async function renderInstructorView() {
+    // Pre-fetch challenges for table headers
+    cachedChallenges = await getChallenges();
 
-export function renderInstructorView() {
     return `
-    <div class="min-h-screen p-6">
+    <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-90 backdrop-blur z-50 flex items-center justify-center">
+        <div class="bg-gray-800 p-8 rounded-xl border border-gray-600 shadow-2xl max-w-sm w-full">
+            <h2 class="text-xl font-bold text-center mb-6 text-white">🔒 講師身分驗證</h2>
+            <input type="password" id="instructor-password" class="w-full bg-gray-900 border border-gray-700 rounded p-3 text-white text-center text-lg tracking-widest mb-4 focus:border-cyan-500 focus:outline-none" placeholder="輸入密碼">
+            <button id="auth-btn" class="w-full bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 rounded-lg transition-colors">確認進入</button>
+        </div>
+    </div>
+
+    <div class="min-h-screen p-6 pb-20">
         <!-- Header -->
-        <header class="flex justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm">
+        <header class="flex flex-col md:flex-row justify-between items-center mb-10 bg-gray-800 bg-opacity-50 p-4 rounded-xl border border-gray-700 backdrop-blur-sm space-y-4 md:space-y-0">
             <h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
                 講師儀表板 Instructor Dashboard
             </h1>
@@ -21,7 +34,7 @@ export function renderInstructorView() {
 
         <!-- Student List -->
         <div id="dashboard-content" class="hidden">
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="students-grid">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="students-grid">
                 <!-- Student Cards will go here -->
                 <div class="text-center text-gray-500 col-span-full py-20">
                     等待學員加入...
@@ -33,6 +46,25 @@ export function renderInstructorView() {
 }
 
 export function setupInstructorEvents() {
+    // Auth Logic
+    const authBtn = document.getElementById('auth-btn');
+    const pwdInput = document.getElementById('instructor-password');
+    const authModal = document.getElementById('auth-modal');
+
+    authBtn.addEventListener('click', () => checkPassword());
+    pwdInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') checkPassword();
+    });
+
+    function checkPassword() {
+        if (pwdInput.value === '88300') {
+            authModal.classList.add('hidden');
+        } else {
+            alert('密碼錯誤');
+            pwdInput.value = '';
+        }
+    }
+
     const createBtn = document.getElementById('create-room-btn');
     const roomInfo = document.getElementById('room-info');
     const createContainer = document.getElementById('create-room-container');
@@ -72,43 +104,47 @@ function renderStudentCards(students, container) {
         return;
     }
 
+    // Sort students by join time (if available) or random
+    // students.sort((a,b) => a.joinedAt - b.joinedAt);
+
     container.innerHTML = students.map(student => {
-        const progress = student.progress || {};
-        // Define levels we care about
-        const levels = [
-            { id: 'beginner', label: '初級', color: 'cyan' },
-            { id: 'intermediate', label: '中級', color: 'blue' },
-            { id: 'advanced', label: '高級', color: 'purple' }
-        ];
-
-        let badgesHtml = levels.map(level => {
-            const isCompleted = progress[level.id]?.status === 'completed';
-            const statusClass = isCompleted
-                ? `bg-${level.color}-500/20 text-${level.color}-300 border-${level.color}-500`
-                : 'bg-gray-700/50 text-gray-500 border-gray-700';
+        const progress = student.progress || {}; // Map of challengeId -> {status, prompt ...}
+
+        // Progress Summary
+        let totalCompleted = 0;
+        let badgesHtml = cachedChallenges.map(c => {
+            const isCompleted = progress[c.id]?.status === 'completed';
+            if (isCompleted) totalCompleted++;
+
+            // Only show completed dots/badges or progress bar to save space?
+            // User requested "Card showing status". 15 items is a lot for small badges.
+            // Let's us simple dots color-coded by level.
+
+            const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
+            const color = colors[c.level] || 'gray';
 
             return `
-                <div class="flex items-center justify-between p-2 rounded border ${statusClass} transition-all">
-                    <span class="text-xs font-bold">${level.label}</span>
-                    <span class="text-xs">${isCompleted ? '✓' : '...'}</span>
-                </div>
+                <div class="w-3 h-3 rounded-full ${isCompleted ? `bg-${color}-500 shadow-[0_0_5px_${color}]` : 'bg-gray-700'} 
+                     title="${c.title} (${c.level})" 
+                ></div>
             `;
         }).join('');
 
         return `
-        <div class="bg-gray-800 bg-opacity-40 backdrop-blur rounded-xl border border-gray-700 p-4 hover:border-gray-500 transition-all">
+        <div class="bg-gray-800 bg-opacity-40 backdrop-blur rounded-xl border border-gray-700 p-4 hover:border-gray-500 transition-all flex flex-col">
             <div class="flex items-center justify-between mb-4">
                 <div class="flex items-center space-x-3">
-                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-lg font-bold text-white">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-lg font-bold text-white uppercase">
                         ${student.nickname[0]}
                     </div>
                     <div>
                         <h3 class="font-bold text-white">${student.nickname}</h3>
-                        <p class="text-xs text-gray-400">Online</p>
+                        <p class="text-xs text-gray-400">完成度: ${totalCompleted} / ${cachedChallenges.length}</p>
                     </div>
                 </div>
             </div>
-            <div class="space-y-2">
+            
+            <div class="flex flex-wrap gap-2 mt-auto">
                 ${badgesHtml}
             </div>
         </div>

src/views/LandingView.js

@@ -50,10 +50,14 @@ export function setupLandingEvents(navigateTo) {
         try {
             joinBtn.textContent = '加入中...';
             joinBtn.disabled = true;
+
             const studentId = await joinRoom(roomCode, nickname);
-            localStorage.setItem('vibecoding_student_id', studentId);
+
+            // Save Session
+            localStorage.setItem('vibecoding_user_id', studentId);
             localStorage.setItem('vibecoding_room_code', roomCode);
             localStorage.setItem('vibecoding_nickname', nickname);
+
             navigateTo('student');
         } catch (error) {
             alert('加入失敗: ' + error.message);