Update index.html

index.html

@@ -399,24 +399,17 @@
                     { 
                         id: 405, q: "49 - (y-1)^2", 
                         a: [
-                            // 基本正解: (8-y)(y+6) 及其變體
                             "(8-y)(y+6)", "(y+6)(8-y)", 
                             "(6+y)(8-y)", "(8-y)(6+y)",
                             "(-y+8)(y+6)", "(y+6)(-y+8)",
                             "(-y+8)(6+y)", "(6+y)(-y+8)",
-
-                            // 負負得正系列: (-y-6)(y-8)
                             "(-y-6)(y-8)", "(y-8)(-y-6)",
                             "(-6-y)(y-8)", "(y-8)(-6-y)",
                             "(-y-6)(-8+y)", "(-8+y)(-y-6)",
-
-                            // 提出負號系列 1: -(y-8)(y+6)
                             "-(y-8)(y+6)", "-(y+6)(y-8)",
                             "-(y-8)(6+y)", "-(6+y)(y-8)",
                             "-(-8+y)(y+6)", "-(y+6)(-8+y)",
                             "-(-8+y)(6+y)", "-(6+y)(-8+y)",
-
-                            // 提出負號系列 2: -(8-y)(-y-6)
                             "-(8-y)(-y-6)", "-(-y-6)(8-y)",
                             "-(8-y)(-6-y)", "-(-6-y)(8-y)"
                         ], 
@@ -476,13 +469,20 @@
             return { q: "未知題目", category: "未知", id: pid };
         };
 
+        // --- Storage Key Helper ---
+        // 新增：根據房間 ID 取得對應的 localStorage key
+        const getStorageKey = (roomId) => {
+            // 如果有房間代碼，使用專屬的 key；如果是空的（公開區），使用舊的 key 以保持相容性
+            return roomId ? `factoring_save_room_${roomId}` : 'factoring_game_data_v5';
+        };
+
         // --- Components ---
         
         const NameModal = ({ onSubmit }) => {
             const [name, setName] = useState("");
             const [roomId, setRoomId] = useState("");
 
-            // 新增：檢查網址參數是否有 room
+            // 檢查網址參數是否有 room
             useEffect(() => {
                 const params = new URLSearchParams(window.location.search);
                 const roomParam = params.get('room');
@@ -544,12 +544,12 @@
         const TeacherDashboard = ({ onClose, allData }) => {
             const [activeTab, setActiveTab] = useState('room'); // room, list, analysis
             const [roomCode, setRoomCode] = useState("");
-            const [manualRoomInput, setManualRoomInput] = useState(""); // 新增：手動輸入的狀態
-            const [roomHistory, setRoomHistory] = useState([]); // 新增：房間歷史紀錄
+            const [manualRoomInput, setManualRoomInput] = useState("");
+            const [roomHistory, setRoomHistory] = useState([]);
             const [selectedStudent, setSelectedStudent] = useState(null);
-            const [showLargeQr, setShowLargeQr] = useState(false); // 新增：控制大圖顯示狀態
+            const [showLargeQr, setShowLargeQr] = useState(false);
 
-            // 新增：載入歷史紀錄
+            // 載入歷史紀錄
             useEffect(() => {
                 const savedHistory = localStorage.getItem('teacher_room_history');
                 if (savedHistory) {
@@ -559,7 +559,7 @@
                 }
             }, []);
 
-            // 新增：切換房間並保存到歷史
+            // 切換房間並保存到歷史
             const switchRoom = (code) => {
                 setRoomCode(code);
                 setManualRoomInput(code); // 同步更新輸入框
@@ -577,14 +577,14 @@
                 switchRoom(code);
             };
 
-            // 新增：手動加入房間
+            // 手動加入房間
             const handleManualJoin = () => {
                 if (manualRoomInput.trim()) {
                     switchRoom(manualRoomInput.trim());
                 }
             };
 
-            // 新增：產生帶參數的網址與 QR Code 連結 (size 參數可調整)
+            // 產生帶參數的網址與 QR Code 連結 (size 參數可調整)
             const getQrUrl = (size = "150x150") => {
                 const baseUrl = window.location.origin + window.location.pathname;
                 const fullUrl = `${baseUrl}?room=${roomCode}`;
@@ -854,8 +854,8 @@
                         </div>
                     </div>
                 </div>
-                );
-            };
+            );
+        };
 
         // Teacher Login Modal
         const TeacherLoginModal = ({ onClose, onLogin }) => {
@@ -1034,27 +1034,39 @@
             const [chestOpen, setChestOpen] = useState(false);
             const [combo, setCombo] = useState(0); 
             
-            // State: Persistence (User Data) - Using Lazy Init to fix rotation data loss
+            // ★★★ 改良的資料初始化邏輯：支援多房間存檔 ★★★
             const [userData, setUserData] = useState(() => {
+                // 1. 取得網址中的房間參數
+                const params = new URLSearchParams(window.location.search);
+                const urlRoomId = params.get('room') || "";
+                
+                // 2. 計算該房間對應的儲存 Key
+                const storageKey = getStorageKey(urlRoomId);
+                const saved = localStorage.getItem(storageKey);
+                
+                // 預設資料結構
                 const defaultData = {
                     score: 0,
                     name: "",
-                    roomId: "", // Added Room ID
-                    mistakes: {}, // Added Mistake Tracking { problemId: count }
+                    roomId: urlRoomId, // 初始化時就綁定正確的 roomId
+                    mistakes: {}, 
                     unlockedItems: ['title_novice', 'scroll_default'],
                     equippedTitle: 'title_novice',
                     equippedScroll: 'scroll_default',
                     completedLevels: [] 
                 };
-                try {
-                    const saved = localStorage.getItem('factoring_game_data_v5'); // Bumped version to v5 for structure change
-                    if (saved) {
+
+                if (saved) {
+                    try {
                         const parsed = JSON.parse(saved);
-                        return { ...defaultData, ...parsed, completedLevels: parsed.completedLevels || [], mistakes: parsed.mistakes || {} };
+                        // 合併以確保新舊欄位都存在，並強制更新 roomId 為當前網址的 ID
+                        return { ...defaultData, ...parsed, roomId: urlRoomId }; 
+                    } catch (e) {
+                        console.error("Load error", e);
                     }
-                } catch (e) {
-                    console.error("Load error", e);
                 }
+                
+                // 如果沒有存檔（新房間），回傳預設值（相當於開新帳號）
                 return defaultData;
             });
 
@@ -1086,21 +1098,49 @@
                 }
             }, []);
 
-            // ★★★ 新增：檢查網址是否帶有新的房間代碼 (解決共用載具問題) ★★★
-            useEffect(() => {
-                const params = new URLSearchParams(window.location.search);
-                const roomParam = params.get('room');
+            // ★★★ 新增：處理手動輸入房間代碼後的切換邏輯 ★★★
+            // 這部分是為了 NameModal 提交後的行為
+            const handleJoinRoom = (name, newRoomId) => {
+                const targetRoomId = newRoomId.trim();
                 
-                // 如果網址有房間代碼，且跟目前儲存的不一樣，就更新它
-                if (roomParam && roomParam !== userData.roomId) {
-                    setUserData(prev => ({ ...prev, roomId: roomParam }));
-                    showNotification(`已加入房間：${roomParam}`, "success");
+                // 只有當房間代碼真的改變時，才進行切換
+                if (targetRoomId !== userData.roomId) {
+                    const newKey = getStorageKey(targetRoomId);
+                    const saved = localStorage.getItem(newKey);
+                    let newData;
+
+                    if (saved) {
+                        // 載入該房間的舊進度
+                        newData = JSON.parse(saved);
+                        // 確保名字更新為使用者剛輸入的
+                        newData.name = name;
+                        showNotification(`已切換至房間：${targetRoomId}`, "success");
+                    } else {
+                        // 該房間沒有紀錄，建立新帳號
+                        newData = {
+                            score: 0,
+                            name: name,
+                            roomId: targetRoomId,
+                            mistakes: {},
+                            unlockedItems: ['title_novice', 'scroll_default'],
+                            equippedTitle: 'title_novice',
+                            equippedScroll: 'scroll_default',
+                            completedLevels: [] 
+                        };
+                        showNotification(`已加入新房間：${targetRoomId}`, "success");
+                    }
+                    setUserData(newData);
+                } else {
+                    // 房間沒變，只更新名字
+                    setUserData(prev => ({ ...prev, name, roomId: targetRoomId }));
                 }
-            }, []);
+                setShowNameModal(false);
+            };
 
-            // Save Data
+            // Save Data (Modified to use dynamic key based on current userData.roomId)
             useEffect(() => {
-                localStorage.setItem('factoring_game_data_v5', JSON.stringify(userData));
+                const key = getStorageKey(userData.roomId);
+                localStorage.setItem(key, JSON.stringify(userData));
             }, [userData]);
 
             // --- Firebase Logic ---
@@ -1347,7 +1387,8 @@
                 return <TeacherDashboard onClose={() => setGameState('menu')} allData={leaderboardData} />;
             }
 
-            if (showNameModal) return <div className="relative min-h-screen"><div className="palace-bg"></div><div className="palace-overlay"></div><NameModal onSubmit={(name, roomId) => { setUserData(p => ({...p, name, roomId})); setShowNameModal(false); }} /></div>;
+            // 使用修改後的 handleJoinRoom 替換原本的直接 setUserData
+            if (showNameModal) return <div className="relative min-h-screen"><div className="palace-bg"></div><div className="palace-overlay"></div><NameModal onSubmit={handleJoinRoom} /></div>;
             if (showTeacherLogin) return <TeacherLoginModal onClose={() => setShowTeacherLogin(false)} onLogin={() => { setShowTeacherLogin(false); setGameState('teacher_dashboard'); }} />;
 
             if (gameState === 'leaderboard') {