npm - 4sp-dv - Versions diffs - 1.0.37 → 1.0.38 - Mend

4sp-dv 1.0.37 → 1.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/4simpleproblems_v5.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <title>4SP - VERSION 5 CLIENT</title>
     <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/4sp-dv@latest/images/logo.png">
-    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.36/logged-in/">
+    <base href="https://cdn.jsdelivr.net/npm/4sp-dv@1.0.38/logged-in/">
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
@@ -468,33 +468,9 @@
     #universal-loader.active {
         pointer-events: auto;
     }
-    /* Offline Indicator */
-    #offline-indicator {
-        position: fixed;
-        top: 1rem;
-        left: 50%;
-        transform: translateX(-50%);
-        background: rgba(239, 68, 68, 0.2);
-        border: 1px solid rgba(239, 68, 68, 0.5);
-        color: #f87171;
-        padding: 4px 12px;
-        border-radius: 20px;
-        font-size: 0.75rem;
-        z-index: 9999;
-        display: none;
-        align-items: center;
-        gap: 6px;
-        backdrop-filter: blur(4px);
-    }
-    #offline-indicator.show { display: flex; }
     </style>
 </head>
 <body>
-    <div id="offline-indicator">
-        <i class="fa-solid fa-plane"></i>
-        <span>Offline Mode</span>
-    </div>
     <div id="lock-screen" class="w-full h-full flex flex-col items-center justify-center p-4">
         <div class="max-w-5xl w-full bg-[#040404] flex flex-col md:flex-row border border-[#252525] rounded-3xl overflow-hidden shadow-2xl">
             <div class="flex-1 p-8 flex flex-col justify-center items-center border-b md:border-b-0 md:border-r border-[#252525]">
@@ -802,7 +778,7 @@
         const displayUsername = document.getElementById('display-username');
         const displayEmail = document.getElementById('display-email');
-        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.36/logged-in/';
+        const BASE_URL = 'https://cdn.jsdelivr.net/npm/4sp-dv@1.0.38/logged-in/';
         // Preload Logos
         const preloadImgs = [
@@ -1213,8 +1189,7 @@
                              pfpLetterBg: data.pfpLetterBg,
                              letterAvatarText: data.letterAvatarText,
                              letterAvatarTextColor: data.letterAvatarTextColor, // New Field
-                             navbarTheme: data.navbarTheme, // Sync theme if updated remotely
-                             verified_online: true // Mark as verified for offline use
+                             navbarTheme: data.navbarTheme // Sync theme if updated remotely
                          };
                          localStorage.setItem(USER_DATA_KEY, JSON.stringify(newUserData));
@@ -1305,25 +1280,6 @@
                 unlockBtn.classList.add('hidden');
                 codeInput.classList.add('hidden');
-                // --- OFFLINE CHECK ---
-                if (!navigator.onLine) {
-                    console.log("Client is offline. Checking for bypass...");
-                    let cachedUser = null;
-                    try { cachedUser = JSON.parse(localStorage.getItem(USER_DATA_KEY)); } catch(e){}
-                    if (cachedUser && cachedUser.verified_online) {
-                        console.log("Offline bypass granted for verified user.");
-                        currentUser = cachedUser;
-                        updateUIWithUser(cachedUser);
-                        document.getElementById('offline-indicator').classList.add('show');
-                        launchApp();
-                        return;
-                    } else {
-                        resetLockScreen("You are offline. Please connect to the internet to verify your code.");
-                        return;
-                    }
-                }
                 try {
                     const docRef = doc(db, "access_codes", savedCode);
                     const docSnap = await getDoc(docRef);
@@ -1355,17 +1311,7 @@
                     }
                 } catch(e) {
                     console.error("Auto-login error:", e);
-                    // Check if we can fallback to offline even on error (e.g. timeout)
-                    let cachedUser = null;
-                    try { cachedUser = JSON.parse(localStorage.getItem(USER_DATA_KEY)); } catch(err){}
-                    if (cachedUser && cachedUser.verified_online) {
-                        currentUser = cachedUser;
-                        updateUIWithUser(cachedUser);
-                        document.getElementById('offline-indicator').classList.add('show');
-                        launchApp();
-                    } else {
-                        resetLockScreen("Connection failed. Retrying...");
-                    }
+                    resetLockScreen("Connection failed. Retrying...");
                 }
             }
         }

package/logged-in/games.html CHANGED Viewed

@@ -331,16 +331,6 @@
         .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); border-radius: 4px; }
         .custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
         .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #555; }
-        /* Notifications */
-        #notification-container { position: fixed; bottom: 2rem; right: 2rem; display: flex; flex-direction: column; gap: 0.75rem; z-index: 9999; pointer-events: none; }
-        .notification-toast { background-color: #0a0a0a; border: 1px solid #333; border-radius: 14px; padding: 0.75rem 1.25rem; color: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; min-width: 200px; transform: translateX(120%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease, background-color 0.2s; opacity: 0; pointer-events: auto; cursor: default; }
-        .notification-toast.show { transform: translateX(0); opacity: 1; }
-        .notification-toast.show:hover { transform: scale(1.05) translateX(-5px); background-color: #151515; border-color: #555; box-shadow: 0 8px 25px rgba(0,0,0,0.7); }
-        .notification-icon { font-size: 1.1rem; }
-        .notification-icon.success { color: #4ade80; }
-        .notification-icon.info { color: #60a5fa; }
-        .notification-icon.warning { color: #fbbf24; }
     </style>
 </head>
@@ -460,16 +450,19 @@
         </div>
     </div>
-    <div id="notification-container"></div>
     <script>
         // --- Configuration & Globals ---
         const GN_ZONES_URL = "https://cdn.jsdelivr.net/gh/gn-math/assets@main/zones.json";
         const GN_COVER_URL_BASE = "https://cdn.jsdelivr.net/gh/gn-math/covers@main";
+        // FIXED: Use raw.githack.com for HTML to prevent "showing code" issue
         const GN_HTML_URL_BASE = "https://raw.githack.com/gn-math/html/main";
         const WORKER_ROOT = "https://dv-service-lfs.4simpleproblems.workers.dev/";
         const GAMES_BASE_URL = "https://dv-service-lfs.4simpleproblems.workers.dev/GAMES/";
         const CARDS_DATA_URL = "https://dv-service-lfs.4simpleproblems.workers.dev/GAMES/cards-data.js";
         const FAVORITES_KEY = 'gameHubFavorites_v3';
         let allGames = [];
@@ -499,26 +492,37 @@
         const prevCategoryBtn = document.getElementById('prev-category');
         const nextCategoryBtn = document.getElementById('next-category');
         const gamesGridContainer = document.getElementById('games-grid-container');
         const creditsModal = document.getElementById('creditsModal');
         const creditsContent = document.getElementById('creditsContent');
         const creditsBtn = document.getElementById('creditsBtn');
         const closeCreditsBtn = document.getElementById('closeCreditsBtn');
         const INSTRUCTION_KEY = '4sp-games-instruction-extended-seen';
         const instructionOverlay = document.getElementById('instruction-overlay');
         const instructionInput = document.getElementById('instruction-input');
-        // --- Intersection Observer ---
+        // --- Intersection Observer for Image Virtualization ---
         const imageObserver = new IntersectionObserver((entries, observer) => {
             entries.forEach(entry => {
                 const img = entry.target;
                 if (entry.isIntersecting) {
-                    if (img.dataset.src) img.src = img.dataset.src;
+                    if (img.dataset.src) {
+                        img.src = img.dataset.src;
+                    }
                 } else {
-                    if(img.src && !img.src.includes('placehold.co') && !img.dataset.src) img.dataset.src = img.src;
-                    if(img.dataset.src) img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+                    if(img.src && !img.src.includes('placehold.co') && !img.dataset.src) {
+                         img.dataset.src = img.src;
+                    }
+                    if(img.dataset.src) {
+                        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+                    }
                 }
             });
-        }, { rootMargin: "300px 0px", threshold: 0.01 });
+        }, {
+            rootMargin: "300px 0px",
+            threshold: 0.01
+        });
         function observeImages(container) {
             const images = container.querySelectorAll('img[data-src]');
@@ -529,7 +533,11 @@
         function updateURL(category, gameId = null) {
             let hash = `#${encodeURIComponent(category.replace(/\s+/g, '-'))}`;
             if (gameId) hash += `?id=${gameId}`;
-            try { history.replaceState(null, null, hash); } catch(e) { console.warn('History API not supported'); }
+            try {
+                history.replaceState(null, null, hash);
+            } catch(e) {
+                console.warn('History API not supported in this environment');
+            }
         }
         function parseURL() {
@@ -537,6 +545,7 @@
             if (!hash) return { category: null, gameId: null };
             const parts = hash.split('?');
             let rawCategory = parts[0];
+            let category = decodeURIComponent(rawCategory).replace(/-/g, ' ');
             let gameId = null;
             if (parts[1]) {
                 const params = new URLSearchParams(parts[1]);
@@ -567,7 +576,7 @@
             }
         }
-        // --- Favorites ---
+        // --- Favorites Management (Live Updates) ---
         const getFavorites = () => JSON.parse(localStorage.getItem(FAVORITES_KEY)) || [];
         const saveFavorites = (favs) => localStorage.setItem(FAVORITES_KEY, JSON.stringify(favs));
@@ -580,9 +589,9 @@
                 favorites = favorites.filter(id => id !== strGameId);
                 saveFavorites(favorites);
                 updateAllFavoriteButtons();
-                const favCard = favoritesGameList.querySelector(`[data-game-id='${strGameId}']`);
+                const favCard = favoritesGameList.querySelector(`.zone-item[data-game-id='${strGameId}'], .other-zone-item[data-game-id='${strGameId}']`);
                 if (favCard) {
-                    favCard.classList.add('animate-fade-out');
+                    favCard.classList.add('fade-out');
                     setTimeout(() => {
                         favCard.remove();
                         if (favoritesGameList.children.length === 0) {
@@ -595,11 +604,25 @@
                 favorites.push(strGameId);
                 saveFavorites(favorites);
                 updateAllFavoriteButtons();
-                let gameData = searchableGames.find(g => String(g.id) === strGameId);
+                let gameData = allGames.find(g => String(g.id) === strGameId);
+                if (!gameData) {
+                    allGames.some(g => {
+                        if (g.versions) {
+                            const ver = g.versions.find(v => String(v.favoriteId) === strGameId);
+                            if (ver) {
+                                gameData = { ...g, id: ver.favoriteId, name: `${g.name} - ${ver.name}`, url: ver.url, versions: undefined };
+                                return true;
+                            }
+                        }
+                        return false;
+                    });
+                }
                 if (gameData) {
                     favoritesHeader.style.display = "block";
                     favoritesGameList.style.display = "grid";
-                    favoritesGameList.appendChild(createGameCard(gameData, true));
+                    favoritesGameList.classList.add('grid', 'grid-cols-2', 'sm:grid-cols-3', 'md:grid-cols-5', 'lg:grid-cols-7', 'gap-4');
+                    const newCard = createGameCard(gameData, true);
+                    favoritesGameList.appendChild(newCard);
                 }
             }
         }
@@ -607,84 +630,37 @@
         function updateAllFavoriteButtons() {
             const favorites = getFavorites().map(String);
             document.querySelectorAll('.btn-card-action.fav-action').forEach(btn => {
-                const card = btn.closest('[data-game-id]');
+                const card = btn.closest('.zone-item, .other-zone-item, .search-item');
                 if (!card) return;
                 const cardGameId = String(card.dataset.gameId);
-                const isFavorited = favorites.includes(cardGameId);
-                btn.classList.toggle('favorited', isFavorited);
-                btn.title = isFavorited ? 'Remove from Favorites' : 'Add to Favorites';
-            });
-        }
-        // --- Offline Mode (IndexedDB) ---
-        const DB_NAME = '4SP_OfflineGames';
-        const DB_VERSION = 1;
-        const STORE_NAME = 'games';
-        function openDB() {
-            return new Promise((resolve, reject) => {
-                const request = indexedDB.open(DB_NAME, DB_VERSION);
-                request.onupgradeneeded = (e) => {
-                    const db = e.target.result;
-                    if (!db.objectStoreNames.contains(STORE_NAME)) db.createObjectStore(STORE_NAME, { keyPath: 'id' });
-                };
-                request.onsuccess = (e) => resolve(e.target.result);
-                request.onerror = (e) => reject(e.target.error);
-            });
-        }
-        async function saveGameOffline(gameId, name, url) {
-            try {
-                const res = await fetch(url);
-                if (!res.ok) throw new Error('Fetch failed');
-                const html = await res.text();
-                const db = await openDB();
-                return new Promise((resolve, reject) => {
-                    const tx = db.transaction(STORE_NAME, 'readwrite');
-                    const store = tx.objectStore(STORE_NAME);
-                    store.put({ id: String(gameId), name, html, timestamp: Date.now() });
-                    tx.oncomplete = () => { db.close(); resolve(); };
-                    tx.onerror = () => reject(tx.error);
-                });
-            } catch (e) { console.error("Offline Save Error:", e); throw e; }
-        }
-        async function getOfflineGame(gameId) {
-            const db = await openDB();
-            return new Promise((resolve, reject) => {
-                const tx = db.transaction(STORE_NAME, 'readonly');
-                const store = tx.objectStore(STORE_NAME);
-                const request = store.get(String(gameId));
-                request.onsuccess = () => { db.close(); resolve(request.result); };
-                request.onerror = () => reject(request.error);
-            });
-        }
-        async function removeOfflineGame(gameId) {
-            const db = await openDB();
-            return new Promise((resolve, reject) => {
-                const tx = db.transaction(STORE_NAME, 'readwrite');
-                const store = tx.objectStore(STORE_NAME);
-                store.delete(String(gameId));
-                tx.oncomplete = () => { db.close(); resolve(); };
-                tx.onerror = () => reject(tx.error);
+                if (btn.classList.contains('version-favorite-btn')) {
+                    const isAnyVersionFavorited = favorites.some(favId => favId.startsWith(cardGameId + '_'));
+                    btn.classList.toggle('favorited', isAnyVersionFavorited);
+                } else {
+                    const isFavorited = favorites.includes(cardGameId);
+                    btn.classList.toggle('favorited', isFavorited);
+                    btn.title = isFavorited ? 'Remove from Favorites' : 'Add to Favorites';
+                }
             });
         }
-        async function isGameOffline(gameId) {
-            const game = await getOfflineGame(gameId);
-            return !!game;
-        }
-        // --- URL Helpers ---
+        // --- URL Helpers (Strongdog) ---
+        // Modified to support injected URLs using WORKER_ROOT + directory logic
         function getAdjustedUrls(imgSrc, page) {
-            if (page && page > 1) return { adjustedImgSrc: `${WORKER_ROOT}strongdog${page}/img/${imgSrc}` };
+            if (page && page > 1) {
+                // ../strongdog2/img/... -> exists outside GAMES dir
+                return { adjustedImgSrc: `${WORKER_ROOT}strongdog${page}/img/${imgSrc}` };
+            }
+            // ./img -> assumed inside GAMES dir or wherever relative
             return { adjustedImgSrc: `${GAMES_BASE_URL}img/${imgSrc}` };
         }
         function sd_getBaseURLForPage(page) {
+            // Updated to point to WORKER_ROOT for numbered pages, GAMES_BASE_URL for default
             if (page > 1) return `${WORKER_ROOT}strongdog${page}/`;
-            return `${WORKER_ROOT}STRONGDOG/`;
+            return `${WORKER_ROOT}STRONGDOG/`; // Assumes default strongdog is at root/STRONGDOG? Or inside GAMES?
+            // Re-reading logic: "stuff like ../DOOM/ will stay in GAMES directory but strongdog# directories exit"
+            // Let's assume default STRONGDOG is adjacent to strongdog2 etc. at root level based on prior naming conventions
         }
         async function sd_getEmbedPath(adjustedHref, originalHref, page) {
@@ -702,52 +678,73 @@
                     }
                 }
             } catch (error) {}
-            for (const path of pathsToTry) { if (await sd_fileExists(path)) return path; }
+            for (const path of pathsToTry) {
+                if (await sd_fileExists(path)) return path;
+            }
             return adjustedHref;
         }
-        async function sd_fileExists(url) { try { const response = await fetch(url, { method: "HEAD" }); return response.ok; } catch { return false; } }
+        async function sd_fileExists(url) {
+            try { const response = await fetch(url, { method: "HEAD" }); return response.ok; } catch { return false; }
+        }
+        // --- URL Resolution Helper for "Others" ---
         function resolveGameUrl(relativePath) {
-            if (relativePath.startsWith('../')) return `${WORKER_ROOT}${relativePath.substring(3)}`;
+            // Logic:
+            // If path starts with ../ -> Go to WORKER_ROOT + path (stripping ../)
+            // If path starts with ../GAMES/ -> It will effectively be WORKER_ROOT/GAMES/ (which matches GAMES_BASE_URL)
+            // This allows us to access root folders like ../GTA-JSDOS/ while keeping ../GAMES/sm64 intact.
+            if (relativePath.startsWith('../')) {
+                const pathPart = relativePath.substring(3); // Remove '../'
+                return `${WORKER_ROOT}${pathPart}`;
+            }
+            // If it doesn't start with ../, assume it's relative to GAMES base
             return `${GAMES_BASE_URL}${relativePath.replace(/^\.\//, '')}`;
         }
+        // --- Game Data (Others) ---
+        // We keep the original relative paths here so the resolver logic above can handle them dynamically
         const othersGames = [
             { id: "other-eaglercraft", name: "Eaglercraft", imgSrc: "./images/eaglercraft.png", description: "The classic survival and building game with authentic block-based physics and multiplayer support, accessible directly in the browser.", category: "Others", versions: [ { name: "Release 1.12.2", url: "../EAGLERCRAFT/eaglercraft-1.12.2.html", favoriteId: "other-eaglercraft_1.12.2" }, { name: "Release 1.12.2 WASM", url: "../EAGLERCRAFT/eaglercraft-1.12.2-wasm.html", favoriteId: "other-eaglercraft_wasm", wasm: true } ] },
             { id: "other-gta", name: "Grand Theft Auto", imgSrc: "./images/gta.png", description: "The original top-down classic. Cause chaos, complete missions, or just go for a drive in three iconic cities.", category: "Others", versions: [ { name: "Carnage3D", url: "../CARNAGE3D/web/carnage3D.html", favoriteId: "other-gta_carnage3d" }, { name: "Grand Theft Auto (JS-DOS)", url: "../GTA-JSDOS/index.html", favoriteId: "other-gta_jsdos" } ] },
             { id: "other-simcity", name: "Sim City", imgSrc: "./images/simcity2000.png", description: "The original city-building classics. Design, build, and manage the city of your dreams in either the original Sim City or the detailed Sim City 2000.", category: "Others", versions: [ { name: "Sim City", url: "../SIM-CITY/index.html", favoriteId: "other-simcity_1" }, { name: "Sim City 2000", url: "../SIM-CITY-2/index.html", favoriteId: "other-simcity_2000" } ] },
-            { id: "other-doom", name: "DOOM", imgSrc: "./images/doom.png", description: "The legendary first-person shooter that pioneered the genre, focusing on blasting through hordes of demons in a timeless, adrenaline-fueled classic.", category: "Others", url: "../DOOM/index.html" }
+            { id: "other-doom", name: "DOOM", imgSrc: "./images/doom.png", description: "The legendary first-person shooter that pioneered the genre, focusing on blasting through hordes of demons in a timeless, adrenaline-fueled classic.", category: "Others", url: "../DOOM/index.html" },
+            { id: "other-sm64", name: "Super Mario 64", imgSrc: "./images/sm64.png", description: "The iconic 3D platformer that revolutionized gaming. Run, jump, and triple-jump your way through vast worlds to collect stars and save the princess.", category: "Others", url: "../GAMES/sm64/index.html" }
         ];
         // --- Card Creation ---
         function createOthersGameCard(game) {
             const favorites = getFavorites().map(String);
             const isAnyFavorite = game.versions ? favorites.some(favId => game.versions.some(v => String(v.favoriteId) === favId)) : favorites.includes(String(game.id));
             const card = document.createElement("div");
             card.className = 'other-zone-item bg-card-dark rounded-2xl border border-brand-border col-span-full shadow-lg';
             card.dataset.gameId = game.id;
+            // Resolve Image URL
             const resolvedImgSrc = resolveGameUrl(game.imgSrc);
-            let gameButtonsHtml = '', favoriteButtonHtml = '', offlineButtonHtml = '';
-            const isEaglercraft = game.id === 'other-eaglercraft';
+            let gameButtonsHtml = '';
+            let favoriteButtonHtml = '';
             if (game.versions && game.versions.length > 0) {
                 const availableVersions = game.versions;
                 if (availableVersions.length === 1) {
                     const vUrl = resolveGameUrl(availableVersions[0].url);
-                    gameButtonsHtml = `<button class="btn-card-action play-action" data-url="${vUrl}" data-version-name="${availableVersions[0].name}" title="Play Game"><i class="fa-solid fa-play"></i></button>`;
+                    gameButtonsHtml = `<button class="btn-card-action play-action" data-url="${vUrl}" data-version-name="${availableVersions[0].name}" title="Play Game"><i class="fa-solid fa-play transition-colors"></i></button>`;
                 } else {
-                    const dropdownLinks = availableVersions.map(v => `<a href="#" class="eagler-dropdown-link" data-url="${resolveGameUrl(v.url)}" data-version-name="${v.name}">${v.name}</a>`).join('');
-                    gameButtonsHtml = `<div class="relative"><button class="btn-card-action version-btn" title="Select Version"><i class="fa-solid fa-chevron-up"></i></button><div class="eagler-dropdown">${dropdownLinks}</div></div>`;
+                    const dropdownLinks = availableVersions.map(v => {
+                        const vUrl = resolveGameUrl(v.url);
+                        return `<a href="#" class="eagler-dropdown-link" data-url="${vUrl}" data-version-name="${v.name}">${v.name}</a>`
+                    }).join('');
+                    gameButtonsHtml = `<div class="relative"><button class="btn-card-action version-btn" title="Select Version"><i class="fa-solid fa-chevron-up transition-colors"></i></button><div class="eagler-dropdown">${dropdownLinks}</div></div>`;
                 }
-                if (isEaglercraft) {
-                    offlineButtonHtml = `<div class="relative"><button class="btn-card-action offline-action version-offline-btn" title="Offline Mode"><i class="fa-solid fa-cloud"></i></button><div class="eagler-dropdown">${game.versions.map(v => `<a href="#" class="eagler-dropdown-link offline-link" data-game-id="${v.favoriteId}" data-url="${resolveGameUrl(v.url)}" data-name="${game.name} - ${v.name}">${v.name}</a>`).join('')}</div></div>`;
-                }
-                favoriteButtonHtml = `<div class="relative"><button class="btn-card-action fav-action version-favorite-btn ${isAnyFavorite ? 'favorited' : ''}" title="Favorite a version"><i class="fa-solid fa-star fa-solid-star"></i><i class="fa-regular fa-star fa-regular-star"></i></button><div class="eagler-dropdown">${game.versions.map(v => `<a href="#" class="eagler-dropdown-link favorite-link" data-favorite-id="${v.favoriteId}">${v.name}</a>`).join('')}</div></div>`;
+                favoriteButtonHtml = `<div class="relative"><button class="btn-card-action fav-action version-favorite-btn ${isAnyFavorite ? 'favorited' : ''}" title="Favorite a version"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button><div class="eagler-dropdown">${game.versions.map(v => `<a href="#" class="eagler-dropdown-link favorite-link" data-favorite-id="${v.favoriteId}">${v.name}</a>`).join('')}</div></div>`;
             } else {
                 const gUrl = resolveGameUrl(game.url);
-                gameButtonsHtml = `<button class="btn-card-action play-action" data-url="${gUrl}" title="Play Game"><i class="fa-solid fa-play"></i></button>`;
-                if (isEaglercraft) offlineButtonHtml = `<button class="btn-card-action offline-action" data-game-id="${game.id}" data-url="${gUrl}" data-name="${game.name}" title="Enable Offline Mode"><i class="fa-solid fa-cloud"></i></button>`;
-                favoriteButtonHtml = `<button class="btn-card-action fav-action ${isAnyFavorite ? 'favorited' : ''}" title="${isAnyFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"><i class="fa-solid fa-star fa-solid-star"></i><i class="fa-regular fa-star fa-regular-star"></i></button>`;
+                gameButtonsHtml = `<button class="btn-card-action play-action" data-url="${gUrl}" title="Play Game"><i class="fa-solid fa-play transition-colors"></i></button>`;
+                favoriteButtonHtml = `<button class="btn-card-action fav-action ${isAnyFavorite ? 'favorited' : ''}" title="${isAnyFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button>`;
             }
             card.innerHTML = `
@@ -758,7 +755,8 @@
                         <div class="flex items-start justify-between w-full">
                             <h3 class="text-4xl font-bold text-white truncate drop-shadow-lg" style="max-width: 80%;" title="${game.name}">${game.name}</h3>
                             <div class="flex items-center gap-1.5 bg-black/50 backdrop-blur-sm rounded-2xl p-1.5">
-                                ${gameButtonsHtml} ${offlineButtonHtml} ${favoriteButtonHtml}
+                                ${gameButtonsHtml}
+                                ${favoriteButtonHtml}
                             </div>
                         </div>
                         <p class="text-lg text-white font-medium drop-shadow-lg" style="max-width: 50%;">${game.description}</p>
@@ -766,59 +764,53 @@
                 </div>
             `;
-            if (!game.versions) { card.querySelector('.group').addEventListener('click', () => openZone({...game, url: resolveGameUrl(game.url)})); }
+            if (!game.versions) {
+                card.querySelector('.group').addEventListener('click', () => {
+                     const gUrl = resolveGameUrl(game.url);
+                     openZone({...game, url: gUrl});
+                });
+            }
             card.querySelectorAll('.play-action').forEach(btn => btn.addEventListener('click', (e) => { e.stopPropagation(); openZone({ ...game, name: btn.dataset.versionName ? `${game.name} - ${btn.dataset.versionName}` : game.name, url: btn.dataset.url }); }));
             const versionBtn = card.querySelector('.version-btn');
             if (versionBtn) { versionBtn.addEventListener('click', (e) => { e.stopPropagation(); document.querySelectorAll('.eagler-dropdown.show').forEach(d => d.classList.remove('show')); versionBtn.nextElementSibling.classList.toggle('show'); }); }
-            const offlineVerBtn = card.querySelector('.version-offline-btn');
-            if (offlineVerBtn) { offlineVerBtn.addEventListener('click', (e) => { e.stopPropagation(); document.querySelectorAll('.eagler-dropdown.show').forEach(d => d.classList.remove('show')); offlineVerBtn.nextElementSibling.classList.toggle('show'); }); }
-            card.querySelectorAll('.offline-link').forEach(link => link.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleOfflineMode(link.dataset.gameId, link.dataset.name, link.dataset.url, offlineVerBtn); link.closest('.eagler-dropdown').classList.remove('show'); }));
-            card.querySelectorAll('.eagler-dropdown-link:not(.favorite-link):not(.offline-link)').forEach(link => link.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openZone({ ...game, name: link.dataset.versionName ? `${game.name} - ${link.dataset.versionName}` : game.name, url: link.dataset.url }); link.closest('.eagler-dropdown').classList.remove('show'); }));
+            card.querySelectorAll('.eagler-dropdown-link:not(.favorite-link)').forEach(link => link.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); openZone({ ...game, name: link.dataset.versionName ? `${game.name} - ${link.dataset.versionName}` : game.name, url: link.dataset.url }); link.closest('.eagler-dropdown').classList.remove('show'); }));
             const favBtn = card.querySelector('.btn-card-action.fav-action');
             if (favBtn.classList.contains('version-favorite-btn')) {
                 favBtn.addEventListener('click', (e) => { e.stopPropagation(); document.querySelectorAll('.eagler-dropdown.show').forEach(d => d.classList.remove('show')); favBtn.nextElementSibling.classList.toggle('show'); });
                 card.querySelectorAll('.favorite-link').forEach(link => link.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleFavorite(link.dataset.favoriteId); link.closest('.eagler-dropdown').classList.remove('show'); }));
-            } else { favBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleFavorite(game.id); }); }
-            const offBtn = card.querySelector('.offline-action:not(.version-offline-btn)');
-            if (offBtn) { offBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleOfflineMode(game.id, game.name, resolveGameUrl(game.url), offBtn); }); }
+            } else {
+                favBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleFavorite(game.id); });
+            }
             imageObserver.observe(card.querySelector('img'));
             return card;
         }
         function createGameCard(game, forceSmallCard = false) {
             if (game.category === 'Others' && !forceSmallCard) return createOthersGameCard(game);
-            const isStrongdog = game.category === 'StrongdogXP', isGNMath = game.category === 'GN-Math';
+            const isStrongdog = game.category === 'StrongdogXP';
+            // Resolve Image Src
             let imgSrc = game.imgSrc;
-            if (isStrongdog) imgSrc = getAdjustedUrls(game.imgSrc, game.page).adjustedImgSrc;
-            else if (game.category === 'Others' || game.category === 'Gameboy Games') imgSrc = resolveGameUrl(game.imgSrc);
+            if (isStrongdog) {
+                 imgSrc = getAdjustedUrls(game.imgSrc, game.page).adjustedImgSrc;
+            } else if (game.category === 'Others' || game.category === 'Gameboy Games') {
+                 imgSrc = resolveGameUrl(game.imgSrc);
+            }
             const isFavorite = getFavorites().map(String).includes(String(game.id));
             const card = document.createElement("div");
             card.className = 'zone-item bg-card-dark rounded-2xl border border-brand-border overflow-hidden';
             card.dataset.gameId = game.id;
-            let gUrl = game.url;
-            if (game.category === 'Others' || game.category === 'Gameboy Games') gUrl = resolveGameUrl(game.url);
-            else if (isStrongdog) {
-                const baseURL = sd_getBaseURLForPage(game.page);
-                gUrl = baseURL.endsWith("/") ? baseURL + game.href.replace(/^\.\//, "") : baseURL + "/" + game.href.replace(/^\.\//, "");
-            }
-            const offlineBtn = isGNMath ? `<button class="btn-card-action offline-action" data-game-id="${game.id}" data-url="${gUrl}" data-name="${game.name}" title="Enable Offline Mode"><i class="fa-solid fa-cloud"></i></button>` : '';
             card.innerHTML = `
                 <div class="relative w-full cursor-pointer group">
                     <div class="aspect-w-3 aspect-h-2"><img data-src="${imgSrc}" alt="${game.name}" class="w-full h-full object-cover"></div>
                     <h3 class="absolute top-2 right-2 z-10 max-w-[80%] bg-black/60 backdrop-blur-md rounded-xl px-3 py-1.5 text-white truncate text-sm font-semibold shadow-lg" title="${game.name}">${game.name}</h3>
                     <div class="absolute bottom-2 right-2 bg-black/50 backdrop-blur-sm rounded-2xl p-1.5 flex items-center gap-1.5 shadow-lg">
-                        <button class="btn-card-action play-action" title="Play Game"><i class="fa-solid fa-play"></i></button>
-                        ${offlineBtn}
+                        <button class="btn-card-action play-action" title="Play Game"><i class="fa-solid fa-play transition-colors"></i></button>
                         <button class="btn-card-action fav-action ${isFavorite ? 'favorited' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button>
                     </div>
                 </div>
@@ -831,121 +823,136 @@
                     let adjustedHref = baseURL.endsWith("/") ? baseURL + game.href.replace(/^\.\//, "") : baseURL + "/" + game.href.replace(/^\.\//, "");
                     const embedPath = await sd_getEmbedPath(adjustedHref, game.href, game.page);
                     openZone({ name: game.name, url: embedPath, category: game.category, id: game.id });
-                } else { openZone({ ...game, url: gUrl }); }
+                } else {
+                    // For GN-Math, url is absolute (handled in init). For Others/Gameboy, we might need to resolve
+                    let gUrl = game.url;
+                    if (game.category === 'Others' || game.category === 'Gameboy Games') {
+                        gUrl = resolveGameUrl(game.url);
+                    }
+                    openZone({ ...game, url: gUrl });
+                }
             };
             card.querySelector('.group').addEventListener('click', handlePlay);
             card.querySelector('.play-action').addEventListener('click', handlePlay);
             card.querySelector('.fav-action').addEventListener('click', (e) => { e.stopPropagation(); toggleFavorite(game.id); });
-            if (isGNMath) {
-                const offBtn = card.querySelector('.offline-action');
-                offBtn.addEventListener('click', (e) => { e.stopPropagation(); toggleOfflineMode(game.id, game.name, gUrl, offBtn); });
-            }
             imageObserver.observe(card.querySelector('img'));
             return card;
         }
         // --- Game Viewer Logic ---
-        async function openZone(game) {
+        function openZone(game) {
             if (!game || !game.url) return;
             updateURL(categories[currentCategoryIndex], game.id || null);
-            const zoneViewer = document.getElementById('zoneViewer'), zoneFrame = document.getElementById('zoneFrame'), zoneNameEl = document.getElementById('zoneNameEl'), downloadBtn = document.getElementById('downloadBtnZone'), controls = zoneViewer.querySelector('.zone-controls');
-            const show404 = (errorMsg = "Game content unavailable.") => {
-                const doc = zoneFrame.contentWindow.document;
-                doc.open();
-                doc.write(`<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet"><style>body { background: #000; color: #fff; font-family: 'Geist', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; text-align: center; } h1 { font-size: 4rem; margin: 0; color: #4f46e5; } p { color: #888; font-size: 1.2rem; max-width: 400px; margin-top: 10px; } .btn { margin-top: 30px; padding: 10px 25px; border: 1px solid #333; border-radius: 12px; color: #fff; cursor: pointer; background: #111; transition: all 0.2s; } .btn:hover { border-color: #4f46e5; background: #4f46e51a; }</style></head><body><h1>404</h1><p><strong>${game.name}</strong> could not be loaded.<br><span style="font-size: 0.9rem; opacity: 0.7;">${errorMsg}</span></p><div class="btn" onclick="window.parent.closeZoneViewer()">Return to Hub</div></body></html>`);
-                doc.close();
-                zoneViewer.style.display = "flex"; zoneViewer.classList.add('active', 'animate-fade-in');
-            };
+            const zoneViewer = document.getElementById('zoneViewer');
+            const zoneFrame = document.getElementById('zoneFrame');
+            const zoneNameEl = document.getElementById('zoneNameEl');
+            const downloadBtn = document.getElementById('downloadBtnZone');
+            const controls = zoneViewer.querySelector('.zone-controls');
+            // Setup Download Button (Specific to Eaglercraft)
             if (game.baseGameId === 'other-eaglercraft' || game.id === 'other-eaglercraft') {
-                downloadBtn.href = game.url; downloadBtn.download = game.name.replace(/ /g, '_') + '.html'; downloadBtn.classList.remove('hidden');
-            } else { downloadBtn.classList.add('hidden'); }
+                downloadBtn.href = game.url;
+                downloadBtn.download = game.name.replace(/ /g, '_') + '.html';
+                downloadBtn.removeAttribute('target');
+                downloadBtn.classList.remove('hidden');
+            } else {
+                downloadBtn.classList.add('hidden');
+                downloadBtn.href = '#';
+                downloadBtn.removeAttribute('download');
+            }
+            // --- INJECT FAVORITE BUTTON IN PLAYER HEADER ---
+            // Remove existing if any
             const existingFav = controls.querySelector('.player-fav-btn');
             if (existingFav) existingFav.remove();
             const favBtn = document.createElement('button');
             favBtn.className = 'player-fav-btn btn-card-action fav-action';
             favBtn.innerHTML = '<i class="fa-solid fa-star fa-solid-star"></i><i class="fa-regular fa-star fa-regular-star"></i>';
-            if (getFavorites().map(String).includes(String(game.id))) favBtn.classList.add('favorited');
-            favBtn.onclick = (e) => { e.stopPropagation(); toggleFavorite(game.id); favBtn.classList.toggle('favorited'); };
+            const isFavorited = getFavorites().map(String).includes(String(game.id));
+            if (isFavorited) favBtn.classList.add('favorited');
+            favBtn.onclick = (e) => {
+                e.stopPropagation();
+                toggleFavorite(game.id);
+                favBtn.classList.toggle('favorited');
+            };
+            // Prepend to controls (Left side)
             controls.prepend(favBtn);
-            zoneNameEl.textContent = game.name; zoneFrame.src = 'about:blank';
-            zoneFrame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-pointer-lock');
+            zoneNameEl.textContent = game.name;
+            // RESET FRAME BEFORE LOAD
+            zoneFrame.src = 'about:blank';
+            // SECURITY: Set sandbox permissions
+            const sandboxRules = 'allow-scripts allow-same-origin allow-forms allow-pointer-lock';
+            zoneFrame.setAttribute('sandbox', sandboxRules);
             zoneFrame.setAttribute('allow', 'fullscreen; pointer-lock; autoplay; clipboard-write');
-            const offlineGame = await getOfflineGame(game.id);
-            if (offlineGame) {
-                const doc = zoneFrame.contentWindow.document; doc.open(); doc.write(offlineGame.html); doc.close();
-                zoneViewer.style.display = "flex"; zoneViewer.classList.add('active', 'animate-fade-in');
-                return;
-            }
-            if (!navigator.onLine) { show404("You are offline and this game isn't saved."); return; }
-            try {
-                const check = await fetch(game.url, { method: 'HEAD' });
-                if (!check.ok) throw new Error("File not found");
+            // --- REVISED LOGIC FOR LOADING GAMES ---
+            const isStandardURLGame = game.category === 'StrongdogXP' || game.category === 'Others' || game.category === 'GN-Math';
+            if (isStandardURLGame) {
                 zoneFrame.src = game.url;
-                zoneViewer.style.display = "flex"; zoneViewer.classList.add('active', 'animate-fade-in');
-            } catch (e) { show404("The game source is broken or blocked."); }
-        }
-        async function toggleOfflineMode(gameId, name, url, buttonElement) {
-            const isSaved = await isGameOffline(gameId);
-            try {
-                if (isSaved) { await removeOfflineGame(gameId); showNotification(`${name} removed from storage.`, 'fa-solid fa-trash', 'info'); }
-                else { buttonElement.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>'; await saveGameOffline(gameId, name, url); showNotification(`${name} saved!`, 'fa-solid fa-check-circle', 'success'); }
-                updateAllOfflineButtons();
-            } catch (e) { showNotification(`Failed to save ${name}.`, 'fa-solid fa-circle-exclamation', 'warning'); }
-        }
-        async function updateAllOfflineButtons() {
-            const btns = document.querySelectorAll('.offline-action');
-            for (const btn of btns) {
-                const isSaved = await isGameOffline(btn.dataset.gameId);
-                btn.innerHTML = isSaved ? '<i class="fa-solid fa-cloud-arrow-down text-green-400"></i>' : '<i class="fa-solid fa-cloud"></i>';
+                // SHOW WITH ANIMATION
+                zoneViewer.style.display = "flex";
+                zoneViewer.classList.remove('animate-fade-out');
+                zoneViewer.classList.add('active', 'animate-fade-in');
+            } else {
+                fetch(`${game.url}?t=${Date.now()}`)
+                    .then(response => {
+                        if (!response.ok) throw new Error(`HTTP error ${response.status}`);
+                        return response.text();
+                    })
+                    .then(html => {
+                        const doc = zoneFrame.contentWindow.document;
+                        doc.open();
+                        doc.write(html);
+                        doc.close();
+                        // SHOW WITH ANIMATION
+                        zoneViewer.style.display = "flex";
+                        zoneViewer.classList.remove('animate-fade-out');
+                        zoneViewer.classList.add('active', 'animate-fade-in');
+                    })
+                    .catch(error => {
+                        console.error(`Failed to load game "${game.name}": ${error.message}`);
+                        zoneFrame.src = game.url;
+                        zoneViewer.style.display = "flex";
+                        zoneViewer.classList.remove('animate-fade-out');
+                        zoneViewer.classList.add('active', 'animate-fade-in');
+                    });
             }
         }
         function closeZoneViewer() {
-            const zoneViewer = document.getElementById('zoneViewer'), zoneFrame = document.getElementById('zoneFrame');
-            zoneViewer.classList.remove('animate-fade-in'); zoneViewer.classList.add('animate-fade-out');
+            const zoneViewer = document.getElementById('zoneViewer');
+            const zoneFrame = document.getElementById('zoneFrame');
+            zoneViewer.classList.remove('animate-fade-in');
+            zoneViewer.classList.add('animate-fade-out');
             setTimeout(() => {
-                zoneViewer.style.display = "none"; zoneViewer.classList.remove('active', 'animate-fade-out');
-                if (zoneFrame) zoneFrame.src = 'about:blank';
+                zoneViewer.style.display = "none";
+                zoneViewer.classList.remove('active', 'animate-fade-out');
+                if (zoneFrame) {
+                    zoneFrame.src = 'about:blank';
+                }
                 updateURL(categories[currentCategoryIndex]);
+                const downloadBtn = document.getElementById('downloadBtnZone');
+                downloadBtn.classList.add('hidden');
+                downloadBtn.href = '#';
+                downloadBtn.removeAttribute('download');
+                downloadBtn.removeAttribute('target');
             }, 300);
         }
-        // --- Sound & Notification Logic ---
-        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-        let isMuted = false;
-        function playClickSound() {
-            if (isMuted) return; if (audioCtx.state === 'suspended') audioCtx.resume();
-            const osc = audioCtx.createOscillator(), gainNode = audioCtx.createGain();
-            osc.connect(gainNode); gainNode.connect(audioCtx.destination);
-            osc.type = 'sine'; osc.frequency.setValueAtTime(300, audioCtx.currentTime);
-            gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.015);
-            osc.start(); osc.stop(audioCtx.currentTime + 0.015);
-        }
-        function showNotification(message, iconClass = 'fa-solid fa-info-circle', type = 'info') {
-            const container = document.getElementById('notification-container');
-            if (!container) return;
-            while (container.children.length >= 3) container.removeChild(container.firstChild);
-            const toast = document.createElement('div'); toast.className = 'notification-toast';
-            toast.innerHTML = `<i class="${iconClass} notification-icon ${type}"></i><span>${message}</span>`;
-            container.appendChild(toast);
-            requestAnimationFrame(() => { toast.classList.add('show'); playClickSound(); });
-            setTimeout(() => { toast.classList.remove('show'); setTimeout(() => { if (toast.parentElement) toast.remove(); }, 300); }, 3000);
-        }
-        // Expose to window
-        window.openZone = openZone; window.closeZoneViewer = closeZoneViewer; window.toggleOfflineMode = toggleOfflineMode;
-        window.showNotification = showNotification; window.toggleFavorite = toggleFavorite; window.getUserBrowserLocation = async function() {};
         // --- Render Lists ---
         function renderGames(gamesToRender, targetElement, forceSmallCard = false) {
             targetElement.innerHTML = '';
@@ -957,19 +964,34 @@
         function renderFavorites() {
             const favoriteIds = getFavorites().map(String);
             if (favoriteIds.length > 0) {
-                favoritesHeader.style.display = "block"; favoritesGameList.style.display = "grid";
+                favoritesHeader.style.display = "block";
+                favoritesGameList.style.display = "grid";
                 const favoriteGames = [];
                 allGames.forEach(game => {
-                    if (favoriteIds.includes(String(game.id)) && !game.versions) favoriteGames.push(game);
+                    if (favoriteIds.includes(String(game.id)) && !game.versions) { favoriteGames.push(game); }
                     else if (game.versions) {
-                        game.versions.forEach(v => { if (favoriteIds.includes(String(v.favoriteId))) {
-                            let vUrl = v.url; if (game.category === 'Others' || game.category === 'Gameboy Games') vUrl = resolveGameUrl(v.url);
-                            favoriteGames.push({ ...game, id: v.favoriteId, name: `${game.name} - ${v.name}`, url: vUrl, versions: undefined });
-                        }});
+                        game.versions.forEach(v => {
+                            if (favoriteIds.includes(String(v.favoriteId))) {
+                                let vUrl = v.url;
+                                if (game.category === 'Others' || game.category === 'Gameboy Games') {
+                                    vUrl = resolveGameUrl(v.url);
+                                }
+                                favoriteGames.push({ ...game, id: v.favoriteId, name: `${game.name} - ${v.name}`, url: vUrl, versions: undefined });
+                            }
+                        });
                     }
                 });
                 renderGames(favoriteGames.sort((a, b) => a.name.localeCompare(b.name)), favoritesGameList, true);
-            } else { favoritesHeader.style.display = "none"; favoritesGameList.style.display = "none"; }
+            } else {
+                favoritesHeader.style.display = "none";
+                favoritesGameList.style.display = "none";
+            }
+        }
+        // --- Category Nav ---
+        function updateArrowVisibility() {
+            prevCategoryBtn.disabled = currentCategoryIndex === 0;
+            nextCategoryBtn.disabled = currentCategoryIndex === categories.length - 1;
         }
         function switchCategory(newIndex) {
@@ -988,77 +1010,230 @@
             gamesGridContainer.classList.remove('opacity-0');
         }
+        // --- Search ---
+        function debounce(func, delay) {
+            let timeout;
+            return function(...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), delay);
+            };
+        }
         const handleSearch = debounce(() => {
             const text = searchInput.value.toLowerCase().trim();
             const filteredDropdown = text ? searchableGames.filter(g => g.name.toLowerCase().includes(text)).slice(0, 5) : [];
             searchResults.innerHTML = "";
-            if (filteredDropdown.length === 0 || !text) { searchResults.style.display = "none"; searchDivider.style.display = "none"; return; }
+            if (filteredDropdown.length === 0 || !text) {
+                searchResults.style.display = "none";
+                searchDivider.style.display = "none";
+                return;
+            }
             const favorites = getFavorites().map(String);
             filteredDropdown.forEach(game => {
                 const isStrongdog = game.category === 'StrongdogXP';
-                let imgSrc, finalGameData = { ...game };
-                if (isStrongdog) imgSrc = getAdjustedUrls(game.imgSrc, game.page).adjustedImgSrc;
-                else if (game.category === 'Others' || game.category === 'Gameboy Games') { imgSrc = resolveGameUrl(game.imgSrc); finalGameData.url = resolveGameUrl(game.url); }
-                else imgSrc = game.imgSrc;
-                const linkEl = document.createElement("a"); linkEl.href = '#'; linkEl.className = 'search-item flex justify-between items-center'; linkEl.dataset.gameId = game.id;
+                let imgSrc;
+                let finalGameData = { ...game }; // clone
+                if (isStrongdog) {
+                    const { adjustedImgSrc } = getAdjustedUrls(game.imgSrc, game.page);
+                    imgSrc = adjustedImgSrc;
+                } else if (game.category === 'Others' || game.category === 'Gameboy Games') {
+                    imgSrc = resolveGameUrl(game.imgSrc);
+                    finalGameData.url = resolveGameUrl(game.url);
+                } else {
+                    imgSrc = game.imgSrc;
+                }
+                const linkEl = document.createElement("a");
+                linkEl.href = '#';
+                linkEl.className = 'search-item flex justify-between items-center';
+                linkEl.dataset.gameId = game.id;
                 let isFavorite = favorites.includes(String(game.id));
                 const catLabel = game.category === 'StrongdogXP' ? 'StrongdogXP' : (game.category === 'GN-Math' ? 'GN-Math' : 'Others');
                 const catColor = game.category === 'StrongdogXP' ? 'text-strongdog-orange' : (game.category === 'GN-Math' ? 'text-gn-math' : 'text-gray-400');
-                linkEl.innerHTML = `<div class="flex items-center truncate min-w-0"><img src="${imgSrc}" alt="${game.name}" class="w-10 h-10 rounded-lg object-cover flex-shrink-0"><div class="flex flex-col ml-3 truncate min-w-0"><span class="font-medium truncate text-gray-200" title="${game.name}">${game.name}</span><span class="category-badge w-fit ${catColor}">${catLabel}</span></div></div><div class="flex items-center flex-shrink-0"><div class="bg-black/50 backdrop-blur-sm rounded-2xl p-1.5 flex items-center gap-1.5"><button class="btn-card-action play-action" title="Play Game"><i class="fa-solid fa-play"></i></button><button class="btn-card-action fav-action ${isFavorite ? 'favorited' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}"><i class="fa-solid fa-star fa-solid-star transition-colors"></i><i class="fa-regular fa-star fa-regular-star transition-colors"></i></button></div></div>`;
-                linkEl.querySelector('.fav-action').addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); toggleFavorite(game.id); });
-                linkEl.addEventListener('click', (e) => { e.preventDefault(); openZone(finalGameData); searchResults.style.display = "none"; searchDivider.style.display = "none"; });
+                linkEl.innerHTML = `
+                    <div class="flex items-center truncate min-w-0">
+                        <img src="${imgSrc}" alt="${game.name}" class="w-10 h-10 rounded-lg object-cover flex-shrink-0">
+                        <div class="flex flex-col ml-3 truncate min-w-0">
+                            <span class="font-medium truncate text-gray-200" title="${game.name}">${game.name}</span>
+                            <span class="category-badge w-fit ${catColor}">${catLabel}</span>
+                        </div>
+                    </div>
+                    <div class="flex items-center flex-shrink-0">
+                        <div class="bg-black/50 backdrop-blur-sm rounded-2xl p-1.5 flex items-center gap-1.5">
+                            <button class="btn-card-action play-action" title="Play Game">
+                                <i class="fa-solid fa-play transition-colors"></i>
+                            </button>
+                            <button class="btn-card-action fav-action ${isFavorite ? 'favorited' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}">
+                                <i class="fa-solid fa-star fa-solid-star transition-colors"></i>
+                                <i class="fa-regular fa-star fa-regular-star transition-colors"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                const favBtn = linkEl.querySelector('.fav-action');
+                favBtn.addEventListener('click', (e) => {
+                    e.preventDefault(); e.stopPropagation();
+                    toggleFavorite(game.id);
+                });
+                linkEl.addEventListener('click', async (e) => {
+                    e.preventDefault();
+                    if (isStrongdog) {
+                        const baseURL = sd_getBaseURLForPage(game.page);
+                        let adjustedHref = baseURL.endsWith("/") ? baseURL + game.href.replace(/^\.\//, "") : baseURL + "/" + game.href.replace(/^\.\//, "");
+                        const embedPath = await sd_getEmbedPath(adjustedHref, game.href, game.page);
+                        const strongdogGameData = { name: game.name, url: embedPath, category: game.category, id: game.id };
+                        openZone(strongdogGameData);
+                    } else {
+                        openZone(finalGameData);
+                    }
+                    searchResults.style.display = "none";
+                    searchDivider.style.display = "none";
+                });
                 searchResults.appendChild(linkEl);
             });
-            searchResults.style.display = "block"; searchDivider.style.display = "block";
+            searchResults.style.display = "block";
+            searchDivider.style.display = "block";
         }, 250);
-        function debounce(func, delay) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), delay); }; }
+        // --- FETCHING DATA MANUALLY (NO MODULES) ---
+        // This function fetches the JS file as text, transforms it to set a global variable, and evals it.
+        // This bypasses module loading restrictions on file:// protocols.
         async function fetchGameData() {
             try {
-                const response = await fetch(CARDS_DATA_URL); if (!response.ok) throw new Error('Failed to fetch');
-                let scriptText = await response.text(); if (scriptText.includes('export default')) scriptText = scriptText.replace('export default', 'window.loadedGameData =');
-                const scriptEl = document.createElement('script'); scriptEl.textContent = scriptText; document.body.appendChild(scriptEl);
+                // Fetch the file
+                const response = await fetch(CARDS_DATA_URL);
+                if (!response.ok) throw new Error('Failed to fetch game data');
+                let scriptText = await response.text();
+                // Transform 'export default' to 'window.loadedGameData ='
+                // This assumes the file structure is simple "export default [...]"
+                if (scriptText.includes('export default')) {
+                    scriptText = scriptText.replace('export default', 'window.loadedGameData =');
+                }
+                // Execute the script
+                // We use new Function instead of eval for slight isolation, though still unsafe for untrusted code
+                // (But we trust this source).
+                // However, new Function creates a local scope. We need global assignment.
+                // Standard eval or appending a script tag is better.
+                const scriptEl = document.createElement('script');
+                scriptEl.textContent = scriptText;
+                document.body.appendChild(scriptEl);
+                // Wait a tick for execution
                 await new Promise(resolve => setTimeout(resolve, 0));
-                return window.loadedGameData || [];
-            } catch (e) { console.error(e); return []; }
+                if (window.loadedGameData) {
+                    return window.loadedGameData;
+                } else {
+                    console.warn("Script loaded but window.loadedGameData is undefined");
+                    return [];
+                }
+            } catch (e) {
+                console.error("Error manual loading games:", e);
+                return [];
+            }
         }
+        // --- Init ---
         async function initializeApp() {
-            let gamesData = await fetchGameData();
+            // Load Game Data Manually
+            let gamesData = [];
+            try {
+                gamesData = await fetchGameData();
+            } catch (e) {
+                console.error("Could not load external games data", e);
+            }
             const strongdogGames = gamesData.map(g => ({ ...g, category: 'StrongdogXP' }));
             try {
-                const res = await fetch(GN_ZONES_URL), gnMathRaw = await res.json();
+                const res = await fetch(GN_ZONES_URL);
+                const gnMathRaw = await res.json();
                 const gnMathGames = gnMathRaw.map(g => ({ id: `gn-${g.id}`, name: g.name, imgSrc: g.cover.replace("{COVER_URL}", GN_COVER_URL_BASE), category: 'GN-Math', url: g.url.replace("{HTML_URL}", GN_HTML_URL_BASE) }));
                 allGames = [...strongdogGames, ...gnMathGames, ...othersGames];
-            } catch (error) { allGames = [...strongdogGames, ...othersGames]; }
+            } catch (error) {
+                console.warn("Failed to load GN-Math, falling back to others.", error);
+                allGames = [...strongdogGames, ...othersGames];
+            }
             allGames = allGames.filter(g => !['bitlife', 'soundboard'].some(term => g.name.toLowerCase().includes(term)));
+            searchableGames = [];
             allGames.forEach(game => {
-                if (game.versions && game.versions.length > 0) game.versions.forEach(v => searchableGames.push({ ...game, id: v.favoriteId, name: `${game.name} - ${v.name}`, url: v.url, versions: undefined, baseGameId: game.id }));
-                else searchableGames.push(game);
+                if (game.versions && game.versions.length > 0) {
+                    game.versions.forEach(version => {
+                        searchableGames.push({
+                            ...game,
+                            id: version.favoriteId,
+                            name: `${game.name} - ${version.name}`,
+                            url: version.url,
+                            wasm: version.wasm,
+                            versions: undefined,
+                            baseGameId: game.id
+                        });
+                    });
+                } else {
+                    searchableGames.push(game);
+                }
             });
             categories = ['StrongdogXP', 'GN-Math', 'Gameboy Games', 'Others'].filter(cat => allGames.some(g => g.category === cat));
             const { category: urlCat } = parseURL();
             if (urlCat) currentCategoryIndex = Math.max(0, categories.findIndex(c => c.replace(/\s+/g, '-').toLowerCase() === urlCat.toLowerCase()));
             categorySlider.style.width = `${categories.length * 100}%`;
             categorySlider.innerHTML = categories.map(cat => `<div class="w-64 flex-shrink-0"><h2 class="text-3xl font-bold ${categoryColors[cat] || 'text-white'}"><strong>${cat}</strong></h2></div>`).join('');
-            switchCategory(currentCategoryIndex); renderFavorites(); updateAllOfflineButtons(); setupInstructionOverlay();
-            searchInput.addEventListener("input", handleSearch); searchInput.addEventListener("focus", handleSearch);
+            switchCategory(currentCategoryIndex);
+            renderFavorites();
+            setupInstructionOverlay();
+            searchInput.placeholder = `Search all games...`;
+            searchInput.addEventListener("input", handleSearch);
+            searchInput.addEventListener("focus", handleSearch);
             document.addEventListener("click", ev => {
-                if (!document.getElementById('bottom-fixed-bar').contains(ev.target)) { searchResults.style.display = "none"; searchDivider.style.display = "none"; }
-                if (!ev.target.closest('.version-btn') && !ev.target.closest('.version-favorite-btn') && !ev.target.closest('.offline-action') && !ev.target.closest('.eagler-dropdown')) document.querySelectorAll('.eagler-dropdown.show').forEach(d => d.classList.remove('show'));
+                if (!document.getElementById('bottom-fixed-bar').contains(ev.target)) {
+                    searchResults.style.display = "none";
+                    searchDivider.style.display = "none";
+                }
+                if (!ev.target.closest('.version-btn') && !ev.target.closest('.version-favorite-btn') && !ev.target.closest('.eagler-dropdown')) {
+                    document.querySelectorAll('.eagler-dropdown.show').forEach(d => {
+                        d.classList.remove('show');
+                    });
+                }
             });
             prevCategoryBtn.addEventListener('click', () => switchCategory(currentCategoryIndex - 1));
             nextCategoryBtn.addEventListener('click', () => switchCategory(currentCategoryIndex + 1));
             document.getElementById('closeBtnZone').addEventListener('click', closeZoneViewer);
-            document.getElementById('fullscreenBtnZone').addEventListener('click', () => { const frame = document.getElementById('zoneFrame'); if (frame.requestFullscreen) frame.requestFullscreen(); });
+            // --- FULLSCREEN BUTTON LISTENER ---
+            document.getElementById('fullscreenBtnZone').addEventListener('click', () => {
+                const zoneFrame = document.getElementById('zoneFrame');
+                if (zoneFrame && zoneFrame.requestFullscreen) {
+                    zoneFrame.requestFullscreen();
+                } else if (zoneFrame && zoneFrame.webkitRequestFullscreen) {
+                    zoneFrame.webkitRequestFullscreen();
+                } else if (zoneFrame && zoneFrame.msRequestFullscreen) {
+                    zoneFrame.msRequestFullscreen();
+                }
+            });
             creditsBtn.addEventListener('click', () => { creditsModal.style.display = 'flex'; creditsContent.innerHTML = categories.map(cat => CREDITS_DATA[cat] ? `<div class="p-4 border border-brand-border rounded-lg"><h4 class="font-bold mb-1">${cat}</h4><p class="text-sm text-gray-400">${CREDITS_DATA[cat].credit}</p></div>` : '').join(''); });
             closeCreditsBtn.addEventListener('click', () => creditsModal.style.display = 'none');
-            document.addEventListener('click', (e) => { const target = e.target.closest('button, .nav-tab, .zone-item, .btn-card-action, a, .icon-btn'); if (target) playClickSound(); });
-            document.addEventListener('keydown', (e) => { const target = e.target.closest('input, textarea'); if (target && !e.repeat && window.parent?.playTypeSound) window.parent.playTypeSound(); });
-            document.addEventListener('copy', () => { if (window.getSelection().toString().length > 0) showNotification('Copied to clipboard', 'fa-solid fa-copy', 'success'); });
-            document.addEventListener('paste', (e) => { if (e.target.closest('input, textarea')) showNotification('Pasted from clipboard', 'fa-solid fa-paste', 'info'); });
         }
         document.addEventListener('DOMContentLoaded', initializeApp);
     </script>
 </body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "4sp-dv",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "description": "",
   "keywords": [],
   "homepage": "https://github.com/v5-4simpleproblems/v5-4simpleproblems-dv#readme",