Upload 9 files

src/services/classroom.js

@@ -87,7 +87,52 @@ export async function verifyInstructorPassword(inputPassword) {
  * @param {string} nickname 
  * @returns {Promise<{userId: string, nickname: string}>} Object containing userId and final nickname
  */
-export async function joinRoom(roomCode, nickname) {
+/**
+ * Checks for nickname conflicts in a room
+ * @param {string} roomCode 
+ * @param {string} nickname 
+ * @returns {Promise<Array<{id: string, nickname: string, last_active: any}>>} List of conflicting users
+ */
+export async function checkNicknameConflict(roomCode, nickname) {
+    const usersRef = collection(db, USERS_COLLECTION);
+
+    // We want to find users whose nickname STARTS with the input nickname
+    // Firestore doesn't have a simple "startsWith" for this specific case combined with other filters easily without an index.
+    // However, we can query exact match OR match with suffix pattern if we fetch all users in room.
+    // Given class size is small (<100), fetching all room users is efficient enough.
+
+    // Actually, let's just query for the exact nickname AND nicknames that likely start with it?
+    // Firestore querying for "nickname" >= "Name" and "nickname" <= "Name\uf8ff" works.
+
+    const q = query(
+        usersRef,
+        where("current_room", "==", roomCode)
+    );
+
+    const snapshot = await getDocs(q);
+    const conflicts = [];
+
+    snapshot.forEach(doc => {
+        const data = doc.data();
+        const name = data.nickname;
+
+        // Match exact "Name" or "Name#1234"
+        if (name === nickname || (name.startsWith(nickname + "#") && /#\d{4}$/.test(name))) {
+            conflicts.push({ id: doc.id, ...data });
+        }
+    });
+
+    return conflicts;
+}
+
+/**
+ * Creates a new user or joins as an existing specific user
+ * @param {string} roomCode 
+ * @param {string} nickname 
+ * @param {boolean} forceNew - If true, force create new user with suffix even if exact match exists
+ * @returns {Promise<{userId: string, nickname: string}>}
+ */
+export async function joinRoom(roomCode, nickname, forceNew = false) {
     // 1. Verify Room Exists
     const roomRef = doc(db, ROOMS_COLLECTION, roomCode);
     const roomSnap = await getDoc(roomRef);
@@ -96,25 +141,50 @@ export async function joinRoom(roomCode, nickname) {
         throw new Error("教室代碼不存在");
     }
 
-    // 2. Check for nickname collision
     const usersRef = collection(db, USERS_COLLECTION);
-    const q = query(
-        usersRef,
-        where("current_room", "==", roomCode),
-        where("nickname", "==", nickname)
-    );
-
-    const querySnapshot = await getDocs(q);
     let finalNickname = nickname;
 
-    if (!querySnapshot.empty) {
-        // Nickname exists! Add a random suffix to differentiate
-        // Use a short random string to avoid "Little Ming (2)" collision if many
-        const suffix = Math.floor(1000 + Math.random() * 9000).toString(); // 4-digit suffix
+    // Check if direct re-login (e.g. user typed "Name#1234")
+    const isspecificAuth = /#\d{4}$/.test(nickname);
+
+    if (isspecificAuth && !forceNew) {
+        // Try to find this specific user
+        const q = query(
+            usersRef,
+            where("current_room", "==", roomCode),
+            where("nickname", "==", nickname)
+        );
+        const snapshot = await getDocs(q);
+
+        if (!snapshot.empty) {
+            const userDoc = snapshot.docs[0];
+            await updateDoc(userDoc.ref, { last_active: serverTimestamp() });
+            return { userId: userDoc.id, nickname: nickname };
+        }
+    }
+
+    // Logic for generic name or forced new
+    if (forceNew) {
+        // Generate suffix
+        const suffix = Math.floor(1000 + Math.random() * 9000).toString();
         finalNickname = `${nickname}#${suffix}`;
+    } else {
+        // Check if exact match exists
+        const q = query(
+            usersRef,
+            where("current_room", "==", roomCode),
+            where("nickname", "==", nickname)
+        );
+        const snapshot = await getDocs(q);
+
+        if (!snapshot.empty) {
+            // Collision on generic name -> Auto suffix
+            const suffix = Math.floor(1000 + Math.random() * 9000).toString();
+            finalNickname = `${nickname}#${suffix}`;
+        }
     }
 
-    // 3. Create new user
+    // Create new user
     const newUserRef = await addDoc(usersRef, {
         nickname: finalNickname,
         current_room: roomCode,

src/views/LandingView.js

@@ -1,6 +1,7 @@
-import { createRoom, joinRoom } from "../services/classroom.js";
+import { createRoom, joinRoom, checkNicknameConflict } from "../services/classroom.js";
 import { generateMonsterSVG, MONSTER_DEFS } from "../utils/monsterUtils.js";
 
+// ... (renderLandingView remains same) ...
 export function renderLandingView() {
     // Select Decor Monsters
     // Left: Genesis Dragon (L3_AAA), Right: Gundam (L3_BAA) - or fallbacks
@@ -55,6 +56,9 @@ export function renderLandingView() {
             </div>
         </div>
         
+        <!-- Conflict Modal Container -->
+        <div id="conflict-modal-container"></div>
+
         <style>
             @keyframes float {
                 0%, 100% { transform: translateY(0); }
@@ -69,6 +73,23 @@ export function setupLandingEvents(navigateTo) {
     const joinBtn = document.getElementById('join-btn');
     const instructorBtn = document.getElementById('instructor-mode-btn');
 
+    const handleJoin = async (roomCode, nickname, forceNew = false) => {
+        try {
+            const { userId, nickname: finalNickname } = await joinRoom(roomCode, nickname, forceNew);
+
+            // Save Session
+            localStorage.setItem('vibecoding_user_id', userId);
+            localStorage.setItem('vibecoding_room_code', roomCode);
+            localStorage.setItem('vibecoding_nickname', finalNickname);
+
+            navigateTo('student');
+            return true;
+        } catch (error) {
+            alert('加入失敗: ' + error.message);
+            return false;
+        }
+    };
+
     joinBtn.addEventListener('click', async () => {
         const roomCode = document.getElementById('room-code-input').value.trim();
         const nickname = document.getElementById('nickname-input').value.trim();
@@ -78,20 +99,27 @@ export function setupLandingEvents(navigateTo) {
             return;
         }
 
+        joinBtn.textContent = '檢查中...';
+        joinBtn.disabled = true;
+
         try {
-            joinBtn.textContent = '加入中...';
-            joinBtn.disabled = true;
+            // Check conflicts first
+            const conflicts = await checkNicknameConflict(roomCode, nickname);
 
-            const { userId, nickname: finalNickname } = await joinRoom(roomCode, nickname);
+            if (conflicts.length > 0) {
+                // Show Conflict Modal
+                showConflictModal(conflicts, nickname, roomCode, navigateTo, handleJoin);
+                joinBtn.textContent = '進入教室';
+                joinBtn.disabled = false;
+                return;
+            }
 
-            // Save Session
-            localStorage.setItem('vibecoding_user_id', userId);
-            localStorage.setItem('vibecoding_room_code', roomCode);
-            localStorage.setItem('vibecoding_nickname', finalNickname);
+            // No conflict -> direct join
+            await handleJoin(roomCode, nickname);
 
-            navigateTo('student');
-        } catch (error) {
-            alert('加入失敗: ' + error.message);
+        } catch (e) {
+            console.error(e);
+            alert("檢查失敗: " + e.message);
             joinBtn.textContent = '進入教室';
             joinBtn.disabled = false;
         }
@@ -103,3 +131,64 @@ export function setupLandingEvents(navigateTo) {
         navigateTo('instructor');
     });
 }
+
+function showConflictModal(conflicts, originalNickname, roomCode, navigateTo, handleJoin) {
+    const container = document.getElementById('conflict-modal-container');
+
+    const userListHTML = conflicts.map(u => `
+        <button onclick="window.selectUser('${u.nickname}')" 
+            class="w-full text-left bg-gray-700 hover:bg-gray-600 p-4 rounded-xl flex justify-between items-center group transition-all border border-gray-600 hover:border-cyan-500">
+            <span class="font-bold text-white group-hover:text-cyan-300 transition-colors">${u.nickname}</span>
+            <span class="text-xs text-gray-400 bg-gray-800 px-2 py-1 rounded">舊學員</span>
+        </button>
+    `).join('');
+
+    container.innerHTML = `
+        <div class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+            <div class="bg-gray-800 w-full max-w-md rounded-2xl border border-gray-700 shadow-2xl overflow-hidden animate-[fadeIn_0.3s_ease-out]">
+                <div class="p-6 border-b border-gray-700 bg-gray-900/50">
+                    <h3 class="text-xl font-bold text-white mb-1">發現相同暱稱</h3>
+                    <p class="text-gray-400 text-sm">教室裡已經有叫「${originalNickname}」的同學了，請問您是？</p>
+                </div>
+                
+                <div class="p-6 space-y-3 max-h-[60vh] overflow-y-auto">
+                    ${userListHTML}
+                    
+                    <div class="relative flex py-2 items-center">
+                        <div class="flex-grow border-t border-gray-700"></div>
+                        <span class="flex-shrink-0 mx-4 text-gray-500 text-xs">或者</span>
+                        <div class="flex-grow border-t border-gray-700"></div>
+                    </div>
+
+                    <button onclick="window.createNewUser()" 
+                        class="w-full bg-gradient-to-r from-green-600 to-teal-600 hover:from-green-500 hover:to-teal-500 text-white font-bold p-4 rounded-xl shadow-lg shadow-green-900/40 transform transition hover:scale-[1.02] flex items-center justify-center space-x-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
+                        </svg>
+                        <span>我是新同學，建立新分身</span>
+                    </button>
+                </div>
+
+                <div class="p-4 bg-gray-900/50 border-t border-gray-700 flex justify-end">
+                    <button onclick="document.getElementById('conflict-modal-container').innerHTML=''" 
+                        class="text-gray-400 hover:text-white text-sm px-4 py-2">
+                        取消
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Bind temporary window functions for the modal buttons
+    window.selectUser = async (targetNickname) => {
+        // Log in as existing
+        document.getElementById('conflict-modal-container').innerHTML = ''; // Close modal
+        await handleJoin(roomCode, targetNickname, false);
+    };
+
+    window.createNewUser = async () => {
+        // Create new
+        document.getElementById('conflict-modal-container').innerHTML = ''; // Close modal
+        await handleJoin(roomCode, originalNickname, true); // Force new
+    };
+}