studyup 1.0.4 → 1.1.0

package/index.html

@@ -378,34 +378,6 @@
             color: var(--text-secondary);
             font-size: 12px;
         }
-        
-        /* Custom modal notification box */
-        #notification-modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background-color: rgba(0, 0, 0, 0.5);
-            z-index: 2000;
-            align-items: center;
-            justify-content: center;
-        }
-        .notification-box {
-            background: white;
-            padding: 24px;
-            border-radius: 4px;
-            box-shadow: var(--shadow-elevation-4);
-            max-width: 350px;
-            width: 90%;
-            text-align: center;
-        }
-        .notification-message {
-            margin-bottom: 20px;
-            font-size: 15px;
-            color: var(--text-primary);
-        }
     </style>
 </head>
 <body>
@@ -431,7 +403,6 @@
                     <input type="text" id="class-code-input" placeholder="e.g. 123456" maxlength="6" autofocus>
                     <label for="class-code-input">Class Code</label>
                 </div>
-
                 <div id="error-msg">Invalid class code or system currently locked.</div>
                 <button class="btn-raised" onclick="verifyCode()">Enter Code</button>
             </div>
@@ -450,7 +421,6 @@
                 <h2 style="margin: 0; color: var(--primary-color);">Admin Dashboard</h2>
                 <button class="btn-raised" style="width: auto; padding: 8px 16px;" onclick="switchView('portal-view')">&larr; Back to Portal</button>
             </div>
-
             <!-- Global Control Section -->
             <div class="admin-section">
                 <h2>Global System Controls</h2>
@@ -463,7 +433,6 @@
                     <button id="global-toggle-btn" class="btn-raised btn-warning" onclick="toggleGlobalBlock()">Temporarily Block All Codes</button>
                 </div>
             </div>
-
             <!-- Create Code Section -->
             <div class="admin-section">
                 <h2>Create New Class Code</h2>
@@ -476,7 +445,6 @@
                 </div>
                 <div id="admin-error-msg" style="color: var(--error-color); font-size: 13px; margin-top: 8px; display: none;"></div>
             </div>
-
             <!-- Manage Codes Section -->
             <div class="admin-section">
                 <h2>Manage Existing Codes & Game Permissions</h2>
@@ -500,29 +468,21 @@
                 </div>
             </div>
             <div class="modal-body">
-                <iframe id="game-iframe" src="" title="Game View" sandbox="allow-scripts allow-same-origin allow-modals allow-pointer-lock allow-downloads"></iframe>
+                <iframe id="game-iframe" src="" title="Game View" sandbox="allow-scripts allow-same-origin allow-modals allow-pointer-lock allow-downloads allow-forms allow-popups"></iframe>
             </div>
         </div>
     </div>
 
-    <!-- Custom Notification Modal -->
-    <div id="notification-modal">
-        <div class="notification-box">
-            <div id="notification-text" class="notification-message">Message here</div>
-            <button class="btn-raised" onclick="closeNotification()">OK</button>
-        </div>
-    </div>
-
     <footer>
         StudyUp &bull; Student Resource Portal &bull; 2026
     </footer>
 
     <script>
         const AVAILABLE_GAMES = [
-            { id: 'Sandboxels', name: 'Sandboxels', desc: 'A falling sand and physics sandbox game where you can mix elements and trigger chemical reactions.', url: 'https://cdn.jsdelivr.net/gh/RuneScape/sandboxels@master/index.html', color: '#00897b', icon: 'science' },
-            { id: 'HexGL', name: 'HexGL', desc: 'A futuristic 3D WebGL racing game built with HTML5 where you pilot a high-speed craft through complex tracks.', url: 'https://hexgl.bkcore.com/play/', color: '#e53935', icon: 'speed' },
-            { id: 'ClassiCube', name: 'ClassiCube', desc: 'A lightweight multiplayer-compatible classic block building sandbox game for spatial visualization.', url: 'https://www.classicube.net/play/', color: '#00acc1', icon: 'terrain' },
-            { id: '2048', name: '2048', desc: 'A classic sliding tile puzzle game where you combine matching numbers to reach the 2048 tile.', url: 'https://play2048.co/', color: '#ffb300', icon: 'grid_on' }
+            { id: 'Sandboxels', name: 'Sandboxels', desc: 'A falling sand and physics sandbox game where you can mix elements and trigger chemical reactions.', url: 'sandboxels-package/sandboxels-1.13.2/index.html', color: '#00897b', icon: 'science' },
+            { id: 'HexGL', name: 'HexGL', desc: 'A futuristic 3D WebGL racing game built with HTML5 where you pilot a high-speed craft through complex tracks.', url: 'hexgl-package/HexGL-master/index.html', color: '#e53935', icon: 'speed' },
+            { id: 'ClassiCube', name: 'ClassiCube', desc: 'A lightweight multiplayer-compatible classic block building sandbox game for spatial visualization.', url: 'classicube-package/index.html', color: '#00acc1', icon: 'terrain' },
+            { id: '2048', name: '2048', desc: 'A classic sliding tile puzzle game where you combine matching numbers to reach the 2048 tile.', url: '2048-package/index.html', color: '#ffb300', icon: 'grid_on' }
         ];
 
         const ADMIN_APP = {
@@ -538,151 +498,45 @@
             }
         };
 
-        const STORAGE_KEY = 'studyup_portal_config_v2';
-        const BROADCAST_CHANNEL_NAME = 'studyup_sync_channel';
-
-        // Session state tracking for current browser tab/window
-        let currentSession = {
-            isLoggedIn: false,
-            code: null,     // null, '814212', or student class code
-            isAdmin: false
-        };
-
-        let broadcastChannel = null;
-        try {
-            if (window.BroadcastChannel) {
-                broadcastChannel = new BroadcastChannel(BROADCAST_CHANNEL_NAME);
-                broadcastChannel.onmessage = (event) => {
-                    handleSyncEvent(event.data);
-                };
-            }
-        } catch (e) {
-            console.warn("BroadcastChannel not supported in this environment.", e);
-        }
-
-        // Listen to storage events across tabs/devices
-        window.addEventListener('storage', (event) => {
-            if (event.key === STORAGE_KEY || event.key === STORAGE_KEY + '_timestamp') {
-                const config = getConfig();
-                evaluateCurrentSession(config);
-            }
-        });
-
-        // Periodic polling interval to guarantee instant updates across all open tabs/devices
-        setInterval(() => {
-            const config = getConfig();
-            evaluateCurrentSession(config);
-        }, 1000);
-
-        function showNotification(msg) {
-            document.getElementById('notification-text').innerText = msg;
-            document.getElementById('notification-modal').style.display = 'flex';
-        }
-
-        function closeNotification() {
-            document.getElementById('notification-modal').style.display = 'none';
-        }
-
-        function getConfig() {
+        // Fetch config from Express server backend (/api/config)
+        async function getConfig() {
             try {
-                const stored = localStorage.getItem(STORAGE_KEY);
-                if (stored) {
-                    return JSON.parse(stored);
-                }
+                const response = await fetch('/api/config');
+                const data = await response.json();
+                return data;
             } catch (err) {
-                console.error("Failed to read from localStorage:", err);
+                console.error("Failed to fetch configuration from server:", err);
+                return {
+                    globalBlock: false,
+                    codes: { "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] } }
+                };
             }
-            
-            const defaultConfig = {
-                globalBlock: false,
-                timestamp: Date.now(),
-                codes: {
-                    "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] }
-                }
-            };
-            saveConfig(defaultConfig, false);
-            return defaultConfig;
         }
 
-        function saveConfig(configObj, broadcast = true) {
+        // Save config changes to Express server backend (/api/config)
+        async function saveConfig(configObj) {
             try {
-                configObj.timestamp = Date.now();
-                localStorage.setItem(STORAGE_KEY, JSON.stringify(configObj));
-                localStorage.setItem(STORAGE_KEY + '_timestamp', configObj.timestamp.toString());
-
-                if (broadcast && broadcastChannel) {
-                    broadcastChannel.postMessage({ type: 'CONFIG_UPDATED', config: configObj });
-                }
+                await fetch('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(configObj)
+                });
             } catch (err) {
-                console.error("Failed to save to localStorage:", err);
-                showNotification("Error saving update to local storage.");
-            }
-        }
-
-        function handleSyncEvent(data) {
-            if (data && data.type === 'CONFIG_UPDATED') {
-                evaluateCurrentSession(data.config);
-            }
-        }
-
-        // Evaluate whether the logged-in user is still valid based on latest config
-        function evaluateCurrentSession(config) {
-            const loginViewActive = document.getElementById('login-view').classList.contains('active');
-            if (!currentSession.isLoggedIn || loginViewActive) {
-                return;
-            }
-
-            // Master Admin is never automatically kicked out unless global lock happens and they choose to log out,
-            // but let's check if regular student code is valid or globally blocked.
-            if (config.globalBlock && !currentSession.isAdmin) {
-                forceLogout("System is temporarily locked by administrator.");
-                return;
-            }
-
-            if (currentSession.isAdmin) {
-                // Admin dashboard might be open, update dashboard if view is active
-                if (document.getElementById('admin-view').classList.contains('active')) {
-                    loadAdminDashboard();
-                }
-                return;
-            }
-
-            // Student session validation
-            const code = currentSession.code;
-            if (!config.codes || !config.codes[code]) {
-                forceLogout("Your class code has been modified or revoked.");
-                return;
-            }
-
-            // Update student dashboard games dynamically in real time
-            const allowedGames = config.codes[code].games || [];
-            if (document.getElementById('portal-view').classList.contains('active')) {
-                loadStudentDashboard(allowedGames, false);
+                console.error("Failed to save changes to server:", err);
+                alert("Error saving update to server.");
             }
         }
 
-        function forceLogout(reason) {
-            currentSession = { isLoggedIn: false, code: null, isAdmin: false };
-            closeGame();
-            switchView('login-view');
-            document.getElementById('current-user-badge').innerText = '';
-            const errorMsg = document.getElementById('error-msg');
-            errorMsg.innerText = reason;
-            errorMsg.style.display = 'block';
-            document.getElementById('class-code-input').value = '';
-            document.getElementById('class-code-input').focus();
-        }
-
         document.getElementById('class-code-input').addEventListener('keypress', function (e) {
             if (e.key === 'Enter') {
                 verifyCode();
             }
         });
 
-        function verifyCode() {
+        async function verifyCode() {
             const inputVal = document.getElementById('class-code-input').value.trim();
             const errorMsg = document.getElementById('error-msg');
-            const config = getConfig();
+            const config = await getConfig();
 
             if (config.globalBlock && inputVal !== '814212') {
                 errorMsg.innerText = "System is temporarily locked by administrator.";
@@ -694,7 +548,6 @@
             if (inputVal === '814212') {
                 errorMsg.style.display = 'none';
                 document.getElementById('class-code-input').value = '';
-                currentSession = { isLoggedIn: true, code: '814212', isAdmin: true };
                 switchView('portal-view');
                 document.getElementById('current-user-badge').innerText = 'Master Admin Mode';
 
@@ -703,7 +556,6 @@
             } else if (config.codes && config.codes[inputVal]) {
                 errorMsg.style.display = 'none';
                 document.getElementById('class-code-input').value = '';
-                currentSession = { isLoggedIn: true, code: inputVal, isAdmin: false };
                 switchView('portal-view');
                 document.getElementById('current-user-badge').innerText = `Class Code: ${inputVal}`;
                 loadStudentDashboard(config.codes[inputVal].games || [], false);
@@ -720,7 +572,6 @@
         }
 
         function logout() {
-            currentSession = { isLoggedIn: false, code: null, isAdmin: false };
             closeGame();
             switchView('login-view');
             document.getElementById('current-user-badge').innerText = '';
@@ -781,8 +632,8 @@
             });
         }
 
-        function loadAdminDashboard() {
-            const config = getConfig();
+        async function loadAdminDashboard() {
+            const config = await getConfig();
             const isBlocked = config.globalBlock;
 
             const statusText = document.getElementById('global-status-text');
@@ -803,7 +654,6 @@
             listContainer.innerHTML = '';
 
             const studentCodes = Object.keys(config.codes || {});
-
             if (studentCodes.length === 0) {
                 listContainer.innerHTML = `<p style="color: var(--text-secondary); font-style: italic;">No active student codes found. Create one above.</p>`;
                 return;
@@ -837,14 +687,14 @@
             });
         }
 
-        function toggleGlobalBlock() {
-            const config = getConfig();
+        async function toggleGlobalBlock() {
+            const config = await getConfig();
             config.globalBlock = !config.globalBlock;
-            saveConfig(config);
+            await saveConfig(config);
             loadAdminDashboard();
         }
 
-        function createNewCode() {
+        async function createNewCode() {
             const input = document.getElementById('new-code-input');
             const err = document.getElementById('admin-error-msg');
             const val = input.value.trim();
@@ -860,7 +710,7 @@
                 return;
             }
 
-            const config = getConfig();
+            const config = await getConfig();
             if (!config.codes) config.codes = {};
 
             if (config.codes[val]) {
@@ -871,22 +721,22 @@
 
             err.style.display = 'none';
             config.codes[val] = { games: AVAILABLE_GAMES.map(g => g.id) };
-            saveConfig(config);
+            await saveConfig(config);
             input.value = '';
             loadAdminDashboard();
         }
 
-        function deleteCode(code) {
+        async function deleteCode(code) {
             if (confirm(`Are you sure you want to delete code ${code}?`)) {
-                const config = getConfig();
+                const config = await getConfig();
                 delete config.codes[code];
-                saveConfig(config);
+                await saveConfig(config);
                 loadAdminDashboard();
             }
         }
 
-        function updateCodePermission(code, gameId, isChecked) {
-            const config = getConfig();
+        async function updateCodePermission(code, gameId, isChecked) {
+            const config = await getConfig();
             if (!config.codes[code].games) config.codes[code].games = [];
 
             if (isChecked) {
@@ -896,13 +746,13 @@
             } else {
                 config.codes[code].games = config.codes[code].games.filter(id => id !== gameId);
             }
-            saveConfig(config);
+            await saveConfig(config);
         }
 
-        function allowAllForCode(code) {
-            const config = getConfig();
+        async function allowAllForCode(code) {
+            const config = await getConfig();
             config.codes[code].games = AVAILABLE_GAMES.map(g => g.id);
-            saveConfig(config);
+            await saveConfig(config);
             loadAdminDashboard();
         }
 
@@ -926,7 +776,7 @@
 
             if (!document.fullscreenElement) {
                 modalBox.requestFullscreen().catch(err => {
-                    showNotification(`Error attempting to enable fullscreen: ${err.message}`);
+                    alert(`Error attempting to enable fullscreen: ${err.message}`);
                 });
                 icon.innerText = 'fullscreen_exit';
             } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "studyup",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "StudyUp Game Portal",
   "main": "index.html",
   "scripts": {