studyup 1.0.3 → 1.0.4

package/index.html

@@ -7,7 +7,6 @@
     <!-- Material Design / Roboto Typography & Icons -->
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    
     <style>
         :root {
             --primary-color: #3f51b5; /* Indigo */
@@ -23,7 +22,6 @@
             --shadow-elevation-2: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
             --shadow-elevation-4: 0 4px 5px -2px rgba(0,0,0,0.2), 0 7px 10px 1px rgba(0,0,0,0.14), 0 2px 16px 1px rgba(0,0,0,0.12);
         }
-
         body {
             font-family: 'Roboto', sans-serif;
             background-color: var(--background-color);
@@ -35,7 +33,6 @@
             min-height: 100vh;
             justify-content: space-between;
         }
-
         header {
             background-color: var(--primary-color);
             color: white;
@@ -45,7 +42,6 @@
             align-items: center;
             justify-content: space-between;
         }
-
         header h1 {
             margin: 0;
             font-size: 20px;
@@ -53,13 +49,11 @@
             letter-spacing: 0.5px;
             cursor: pointer;
         }
-
         .header-actions {
             display: flex;
             gap: 12px;
             align-items: center;
         }
-
         .view {
             display: none;
             flex: 1;
@@ -68,7 +62,6 @@
         .view.active {
             display: flex;
         }
-
         .container {
             max-width: 420px;
             width: 100%;
@@ -80,7 +73,6 @@
             align-items: center;
             justify-content: center;
         }
-
         .card {
             background-color: var(--card-background);
             border-radius: 2px;
@@ -93,7 +85,6 @@
             width: 100%;
             box-sizing: border-box;
         }
-
         .card-icon-wrapper {
             background-color: rgba(63, 81, 181, 0.1);
             color: var(--primary-color);
@@ -105,32 +96,27 @@
             justify-content: center;
             margin-bottom: 20px;
         }
-
         .card-icon-wrapper i {
             font-size: 32px;
         }
-
         .card-title {
             font-size: 24px;
             font-weight: 500;
             margin: 0 0 8px 0;
             color: var(--text-primary);
         }
-
         .card-subtitle {
             font-size: 14px;
             color: var(--text-secondary);
             margin: 0 0 24px 0;
             line-height: 1.4;
         }
-
         .input-container {
             position: relative;
             margin-bottom: 24px;
             width: 100%;
             text-align: left;
         }
-
         .input-container input {
             width: 100%;
             padding: 12px;
@@ -143,13 +129,11 @@
             background: transparent;
             transition: border-color 0.2s;
         }
-
         .input-container input:focus {
             border-color: var(--primary-color);
             border-width: 2px;
             padding: 11px;
         }
-
         .input-container label {
             position: absolute;
             left: 12px;
@@ -161,7 +145,6 @@
             background: white;
             padding: 0 4px;
         }
-
         .input-container input:focus ~ label,
         .input-container input:not(:placeholder-shown) ~ label {
             top: -10px;
@@ -169,7 +152,6 @@
             color: var(--primary-color);
             font-weight: 500;
         }
-
         #error-msg {
             color: var(--error-color);
             font-size: 13px;
@@ -177,7 +159,6 @@
             display: none;
             font-weight: 500;
         }
-
         .btn-raised {
             background-color: var(--primary-color);
             color: white;
@@ -194,26 +175,22 @@
             transition: background-color 0.2s, box-shadow 0.2s;
             letter-spacing: 0.5px;
         }
-
         .btn-raised:hover {
             background-color: var(--primary-dark);
             box-shadow: var(--shadow-elevation-4);
         }
-
         .btn-danger {
             background-color: var(--error-color);
         }
         .btn-danger:hover {
             background-color: #b71c1c;
         }
-
         .btn-warning {
             background-color: var(--warning-color);
         }
         .btn-warning:hover {
             background-color: #e65100;
         }
-
         .portal-container {
             max-width: 1000px;
             width: 100%;
@@ -225,7 +202,6 @@
             gap: 24px;
             flex: 1;
         }
-
         .portal-card {
             background-color: var(--card-background);
             border-radius: 2px;
@@ -235,11 +211,9 @@
             flex-direction: column;
             overflow: hidden;
         }
-
         .portal-card:hover {
             box-shadow: var(--shadow-elevation-4);
         }
-
         .card-media {
             height: 120px;
             display: flex;
@@ -247,33 +221,28 @@
             justify-content: center;
             color: white;
         }
-
         .card-content {
             padding: 24px;
             flex: 1;
         }
-
         .portal-card-title {
             font-size: 20px;
             font-weight: 500;
             margin: 0 0 8px 0;
             color: var(--text-primary);
         }
-
         .card-text {
             font-size: 14px;
             color: var(--text-secondary);
             line-height: 1.4;
             margin: 0;
         }
-
         .card-actions {
             padding: 8px 16px 16px 16px;
             display: flex;
             justify-content: flex-end;
             gap: 8px;
         }
-
         .btn-flat {
             background: transparent;
             border: none;
@@ -289,11 +258,9 @@
             transition: background-color 0.2s;
             letter-spacing: 0.5px;
         }
-
         .btn-flat:hover {
             background-color: rgba(63, 81, 181, 0.08);
         }
-
         .admin-section {
             background: white;
             padding: 24px;
@@ -301,7 +268,6 @@
             box-shadow: var(--shadow-elevation-2);
             margin-bottom: 24px;
         }
-
         .admin-section h2 {
             margin-top: 0;
             font-size: 18px;
@@ -309,7 +275,6 @@
             border-bottom: 2px solid var(--background-color);
             padding-bottom: 8px;
         }
-
         .code-list-item {
             display: flex;
             flex-direction: column;
@@ -320,7 +285,6 @@
             border: 1px solid #e0e0e0;
             gap: 12px;
         }
-
         @media(min-width: 600px) {
             .code-list-item {
                 flex-direction: row;
@@ -328,7 +292,6 @@
                 justify-content: space-between;
             }
         }
-
         .checkbox-group {
             display: flex;
             flex-wrap: wrap;
@@ -336,14 +299,12 @@
             font-size: 14px;
             align-items: center;
         }
-
         .checkbox-group label {
             display: flex;
             align-items: center;
             gap: 4px;
             cursor: pointer;
         }
-
         #game-modal {
             display: none;
             position: fixed;
@@ -357,7 +318,6 @@
             align-items: center;
             justify-content: center;
         }
-
         .modal-content {
             width: 90vw;
             height: 85vh;
@@ -368,7 +328,6 @@
             flex-direction: column;
             overflow: hidden;
         }
-
         .modal-header {
             background-color: #212121;
             color: white;
@@ -377,19 +336,16 @@
             align-items: center;
             justify-content: space-between;
         }
-
         .modal-title {
             margin: 0;
             font-size: 16px;
             font-weight: 500;
         }
-
         .modal-header-actions {
             display: flex;
             align-items: center;
             gap: 8px;
         }
-
         .modal-btn {
             background: transparent;
             border: none;
@@ -403,33 +359,56 @@
             border-radius: 50%;
             transition: background-color 0.2s;
         }
-
         .modal-btn:hover {
             background-color: rgba(255, 255, 255, 0.1);
         }
-
         .modal-body {
             flex: 1;
             width: 100%;
             background: #fff;
         }
-
         .modal-body iframe {
             width: 100%;
             height: 100%;
             border: none;
         }
-
         footer {
             text-align: center;
             padding: 16px;
             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>
-
     <header>
         <h1 onclick="logout()">StudyUp</h1>
         <div class="header-actions">
@@ -454,7 +433,6 @@
                 </div>
 
                 <div id="error-msg">Invalid class code or system currently locked.</div>
-
                 <button class="btn-raised" onclick="verifyCode()">Enter Code</button>
             </div>
         </main>
@@ -527,16 +505,24 @@
         </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: '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' }
+            { 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' }
         ];
 
         const ADMIN_APP = {
@@ -552,45 +538,151 @@
             }
         };
 
-        // Fetch config from Express server backend (/api/config)
-        async function getConfig() {
+        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() {
             try {
-                const response = await fetch('/api/config');
-                const data = await response.json();
-                return data;
+                const stored = localStorage.getItem(STORAGE_KEY);
+                if (stored) {
+                    return JSON.parse(stored);
+                }
             } catch (err) {
-                console.error("Failed to fetch configuration from server:", err);
-                return {
-                    globalBlock: false,
-                    codes: { "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] } }
-                };
+                console.error("Failed to read from localStorage:", err);
             }
+            
+            const defaultConfig = {
+                globalBlock: false,
+                timestamp: Date.now(),
+                codes: {
+                    "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] }
+                }
+            };
+            saveConfig(defaultConfig, false);
+            return defaultConfig;
         }
 
-        // Save config changes to Express server backend (/api/config)
-        async function saveConfig(configObj) {
+        function saveConfig(configObj, broadcast = true) {
             try {
-                await fetch('/api/config', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(configObj)
-                });
+                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 });
+                }
             } catch (err) {
-                console.error("Failed to save changes to server:", err);
-                alert("Error saving update to server.");
+                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);
+            }
+        }
+
+        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();
             }
         });
 
-        async function verifyCode() {
+        function verifyCode() {
             const inputVal = document.getElementById('class-code-input').value.trim();
             const errorMsg = document.getElementById('error-msg');
-            const config = await getConfig();
+            const config = getConfig();
 
             if (config.globalBlock && inputVal !== '814212') {
                 errorMsg.innerText = "System is temporarily locked by administrator.";
@@ -602,14 +694,16 @@
             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';
-                
+
                 const allGameIds = AVAILABLE_GAMES.map(g => g.id);
                 loadStudentDashboard(allGameIds, true);
             } 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);
@@ -626,6 +720,7 @@
         }
 
         function logout() {
+            currentSession = { isLoggedIn: false, code: null, isAdmin: false };
             closeGame();
             switchView('login-view');
             document.getElementById('current-user-badge').innerText = '';
@@ -653,7 +748,7 @@
             displayCards.forEach(item => {
                 const card = document.createElement('div');
                 card.className = 'portal-card';
-                
+
                 if (item.isCustomAction) {
                     card.innerHTML = `
                         <div class="card-media" style="background-color: ${item.color};">
@@ -686,10 +781,10 @@
             });
         }
 
-        async function loadAdminDashboard() {
-            const config = await getConfig();
+        function loadAdminDashboard() {
+            const config = getConfig();
             const isBlocked = config.globalBlock;
-            
+
             const statusText = document.getElementById('global-status-text');
             const toggleBtn = document.getElementById('global-toggle-btn');
             if (isBlocked) {
@@ -720,7 +815,7 @@
 
                 const item = document.createElement('div');
                 item.className = 'code-list-item';
-                
+
                 let checkboxesHtml = AVAILABLE_GAMES.map(g => {
                     const checked = assignedGames.includes(g.id) ? 'checked' : '';
                     return `<label><input type="checkbox" value="${g.id}" ${checked} onchange="updateCodePermission('${code}', '${g.id}', this.checked)"> ${g.name}</label>`;
@@ -742,14 +837,14 @@
             });
         }
 
-        async function toggleGlobalBlock() {
-            const config = await getConfig();
+        function toggleGlobalBlock() {
+            const config = getConfig();
             config.globalBlock = !config.globalBlock;
-            await saveConfig(config);
+            saveConfig(config);
             loadAdminDashboard();
         }
 
-        async function createNewCode() {
+        function createNewCode() {
             const input = document.getElementById('new-code-input');
             const err = document.getElementById('admin-error-msg');
             const val = input.value.trim();
@@ -765,7 +860,7 @@
                 return;
             }
 
-            const config = await getConfig();
+            const config = getConfig();
             if (!config.codes) config.codes = {};
 
             if (config.codes[val]) {
@@ -776,22 +871,22 @@
 
             err.style.display = 'none';
             config.codes[val] = { games: AVAILABLE_GAMES.map(g => g.id) };
-            await saveConfig(config);
+            saveConfig(config);
             input.value = '';
             loadAdminDashboard();
         }
 
-        async function deleteCode(code) {
+        function deleteCode(code) {
             if (confirm(`Are you sure you want to delete code ${code}?`)) {
-                const config = await getConfig();
+                const config = getConfig();
                 delete config.codes[code];
-                await saveConfig(config);
+                saveConfig(config);
                 loadAdminDashboard();
             }
         }
 
-        async function updateCodePermission(code, gameId, isChecked) {
-            const config = await getConfig();
+        function updateCodePermission(code, gameId, isChecked) {
+            const config = getConfig();
             if (!config.codes[code].games) config.codes[code].games = [];
 
             if (isChecked) {
@@ -801,13 +896,13 @@
             } else {
                 config.codes[code].games = config.codes[code].games.filter(id => id !== gameId);
             }
-            await saveConfig(config);
+            saveConfig(config);
         }
 
-        async function allowAllForCode(code) {
-            const config = await getConfig();
+        function allowAllForCode(code) {
+            const config = getConfig();
             config.codes[code].games = AVAILABLE_GAMES.map(g => g.id);
-            await saveConfig(config);
+            saveConfig(config);
             loadAdminDashboard();
         }
 
@@ -831,7 +926,7 @@
 
             if (!document.fullscreenElement) {
                 modalBox.requestFullscreen().catch(err => {
-                    alert(`Error attempting to enable fullscreen: ${err.message}`);
+                    showNotification(`Error attempting to enable fullscreen: ${err.message}`);
                 });
                 icon.innerText = 'fullscreen_exit';
             } else {

package/package.json

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

package/server.js

@@ -1,50 +0,0 @@
-const express = require('express');
-const fs = require('fs');
-const path = require('path');
-
-const app = express();
-const PORT = process.env.PORT || 3000;
-const DATA_FILE = path.join(__dirname, 'data.json');
-
-app.use(express.json());
-// Serve static files from the same root folder where server.js lives
-app.use(express.static(__dirname));
-
-// Helper to read data
-function getData() {
-    if (!fs.existsSync(DATA_FILE)) {
-        const defaultData = {
-            globalBlock: false,
-            codes: {
-                "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] }
-            }
-        };
-        fs.writeFileSync(DATA_FILE, JSON.stringify(defaultData, null, 2));
-        return defaultData;
-    }
-    return JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
-}
-
-// Helper to write data
-function saveData(data) {
-    fs.writeFileSync(DATA_FILE, JSON.stringify(data, null, 2));
-}
-
-// API: Get current config
-app.get('/api/config', (req, res) => {
-    res.json(getData());
-});
-
-// API: Save/Update config (Admin actions)
-app.post('/api/config', (req, res) => {
-    try {
-        saveData(req.body);
-        res.json({ success: true });
-    } catch (err) {
-        res.status(500).json({ success: false, error: err.message });
-    }
-});
-
-app.listen(PORT, () => {
-    console.log(`StudyUp server running on port ${PORT}`);
-});