studyup 1.0.2 → 1.0.3

package/index.html

@@ -4,12 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>StudyUp - Student Portal</title>
-    <!-- Material Design 1 / Roboto Typography & Icons -->
+    <!-- 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>
-        /* Material Design 1 Core Variables & Palette */
         :root {
             --primary-color: #3f51b5; /* Indigo */
             --primary-dark: #303f9f;
@@ -19,6 +18,8 @@
             --text-primary: rgba(0, 0, 0, 0.87);
             --text-secondary: rgba(0, 0, 0, 0.54);
             --error-color: #d32f2f;
+            --success-color: #388e3c;
+            --warning-color: #f57c00;
             --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);
         }
@@ -35,7 +36,6 @@
             justify-content: space-between;
         }
 
-        /* Material Toolbar (Header) */
         header {
             background-color: var(--primary-color);
             color: white;
@@ -51,9 +51,15 @@
             font-size: 20px;
             font-weight: 500;
             letter-spacing: 0.5px;
+            cursor: pointer;
+        }
+
+        .header-actions {
+            display: flex;
+            gap: 12px;
+            align-items: center;
         }
 
-        /* View Switching (Login vs Portal Dashboard) */
         .view {
             display: none;
             flex: 1;
@@ -63,7 +69,6 @@
             display: flex;
         }
 
-        /* Main Container & Login Card */
         .container {
             max-width: 420px;
             width: 100%;
@@ -119,7 +124,6 @@
             line-height: 1.4;
         }
 
-        /* Material Floating Label Input Field */
         .input-container {
             position: relative;
             margin-bottom: 24px;
@@ -166,7 +170,6 @@
             font-weight: 500;
         }
 
-        /* Error Message */
         #error-msg {
             color: var(--error-color);
             font-size: 13px;
@@ -175,7 +178,6 @@
             font-weight: 500;
         }
 
-        /* Material Raised Button */
         .btn-raised {
             background-color: var(--primary-color);
             color: white;
@@ -198,15 +200,28 @@
             box-shadow: var(--shadow-elevation-4);
         }
 
-        /* Portal Dashboard Grid */
+        .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: 900px;
+            max-width: 1000px;
             width: 100%;
             margin: 40px auto;
             padding: 0 16px;
             box-sizing: border-box;
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 24px;
             flex: 1;
         }
@@ -226,7 +241,7 @@
         }
 
         .card-media {
-            height: 140px;
+            height: 120px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -256,6 +271,7 @@
             padding: 8px 16px 16px 16px;
             display: flex;
             justify-content: flex-end;
+            gap: 8px;
         }
 
         .btn-flat {
@@ -278,7 +294,56 @@
             background-color: rgba(63, 81, 181, 0.08);
         }
 
-        /* Modal / Window Overlay */
+        .admin-section {
+            background: white;
+            padding: 24px;
+            border-radius: 2px;
+            box-shadow: var(--shadow-elevation-2);
+            margin-bottom: 24px;
+        }
+
+        .admin-section h2 {
+            margin-top: 0;
+            font-size: 18px;
+            color: var(--primary-color);
+            border-bottom: 2px solid var(--background-color);
+            padding-bottom: 8px;
+        }
+
+        .code-list-item {
+            display: flex;
+            flex-direction: column;
+            background: #fafafa;
+            padding: 16px;
+            margin-bottom: 12px;
+            border-radius: 4px;
+            border: 1px solid #e0e0e0;
+            gap: 12px;
+        }
+
+        @media(min-width: 600px) {
+            .code-list-item {
+                flex-direction: row;
+                align-items: center;
+                justify-content: space-between;
+            }
+        }
+
+        .checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            font-size: 14px;
+            align-items: center;
+        }
+
+        .checkbox-group label {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer;
+        }
+
         #game-modal {
             display: none;
             position: fixed;
@@ -311,7 +376,6 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
-            font-family: 'Roboto', sans-serif;
         }
 
         .modal-title {
@@ -356,7 +420,6 @@
             border: none;
         }
 
-        /* Footer */
         footer {
             text-align: center;
             padding: 16px;
@@ -367,10 +430,12 @@
 </head>
 <body>
 
-    <!-- Material Design Toolbar -->
     <header>
-        <h1>StudyUp</h1>
-        <i class="material-icons">school</i>
+        <h1 onclick="logout()">StudyUp</h1>
+        <div class="header-actions">
+            <span id="current-user-badge" style="font-size: 13px; font-weight: 500;"></span>
+            <i class="material-icons" style="cursor:pointer;" onclick="logout()">exit_to_app</i>
+        </div>
     </header>
 
     <!-- VIEW 1: Login Screen -->
@@ -388,7 +453,7 @@
                     <label for="class-code-input">Class Code</label>
                 </div>
 
-                <div id="error-msg">Invalid class code. Please check with your teacher or instructor.</div>
+                <div id="error-msg">Invalid class code or system currently locked.</div>
 
                 <button class="btn-raised" onclick="verifyCode()">Enter Code</button>
             </div>
@@ -397,61 +462,47 @@
 
     <!-- VIEW 2: Portal Dashboard -->
     <div id="portal-view" class="view">
-        <div class="portal-container">
-            <!-- Card 1: Sandboxels -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #00897b;">
-                    <i class="material-icons">science</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">Sandboxels</h2>
-                    <p class="card-text">A falling sand and physics sandbox game where you can mix elements, trigger chemical reactions, and experiment on a grid. Great for life science.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('Sandboxels', 'sandboxels-package/sandboxels-1.13.2/index.html')">Launch App</button>
-                </div>
+        <div class="portal-container" id="student-games-grid"></div>
+    </div>
+
+    <!-- VIEW 3: Admin Management Panel View -->
+    <div id="admin-view" class="view">
+        <div style="max-width: 1000px; width: 100%; margin: 30px auto; padding: 0 16px; box-sizing: border-box; flex:1;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <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>
 
-            <!-- Card 2: HexGL -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #e53935;">
-                    <i class="material-icons">speed</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">HexGL</h2>
-                    <p class="card-text">A futuristic 3D WebGL racing game built with HTML5 where you pilot a high-speed craft through complex tracks. Great for testing your shape naming skills.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('HexGL', 'hexgl-package/HexGL-master/index.html')">Launch App</button>
+            <!-- Global Control Section -->
+            <div class="admin-section">
+                <h2>Global System Controls</h2>
+                <p style="font-size: 14px; color: var(--text-secondary);">Manage global availability for all student class codes.</p>
+                <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;">
+                    <div>
+                        <strong>Maintenance / Lockdown Mode:</strong>
+                        <div id="global-status-text" style="font-size: 13px; color: var(--success-color); font-weight: 500;">All student codes are currently ACTIVE.</div>
+                    </div>
+                    <button id="global-toggle-btn" class="btn-raised btn-warning" onclick="toggleGlobalBlock()">Temporarily Block All Codes</button>
                 </div>
             </div>
 
-            <!-- Card 3: ClassiCube -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #00acc1;">
-                    <i class="material-icons">terrain</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">ClassiCube</h2>
-                    <p class="card-text">A lightweight multiplayer-compatible classic block building sandbox game. Great for architecture and spatial visualization exercises.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('ClassiCube', 'classicube-package/index.html')">Launch App</button>
+            <!-- Create Code Section -->
+            <div class="admin-section">
+                <h2>Create New Class Code</h2>
+                <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;">
+                    <div class="input-container" style="flex: 1; min-width: 200px; margin-bottom: 0;">
+                        <input type="text" id="new-code-input" placeholder="e.g. 654321" maxlength="6">
+                        <label for="new-code-input">New Code (Digits)</label>
+                    </div>
+                    <button class="btn-raised" onclick="createNewCode()" style="height: 48px; width: auto; padding: 0 24px;">Create Code</button>
                 </div>
+                <div id="admin-error-msg" style="color: var(--error-color); font-size: 13px; margin-top: 8px; display: none;"></div>
             </div>
 
-            <!-- Card 4: 2048 -->
-            <div class="portal-card">
-                <div class="card-media" style="background-color: #ffb300;">
-                    <i class="material-icons">grid_on</i>
-                </div>
-                <div class="card-content">
-                    <h2 class="portal-card-title">2048</h2>
-                    <p class="card-text">A classic sliding tile puzzle game where you combine matching numbers to reach the 2048 tile. Great for math logic and strategic thinking.</p>
-                </div>
-                <div class="card-actions">
-                    <button class="btn-flat" onclick="openGame('2048', '2048-package/index.html')">Launch App</button>
-                </div>
+            <!-- Manage Codes Section -->
+            <div class="admin-section">
+                <h2>Manage Existing Codes & Game Permissions</h2>
+                <div id="codes-management-list"></div>
             </div>
         </div>
     </div>
@@ -481,27 +532,285 @@
     </footer>
 
     <script>
-        // Allow pressing 'Enter' to submit code
+        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' }
+        ];
+
+        const ADMIN_APP = {
+            id: 'AdminPanel',
+            name: 'Admin Panel',
+            desc: 'Manage global locks, create or delete class codes, and control individual student app permissions.',
+            color: '#3f51b5',
+            icon: 'admin_panel_settings',
+            isCustomAction: true,
+            action: function() {
+                switchView('admin-view');
+                loadAdminDashboard();
+            }
+        };
+
+        // Fetch config from Express server backend (/api/config)
+        async function getConfig() {
+            try {
+                const response = await fetch('/api/config');
+                const data = await response.json();
+                return data;
+            } catch (err) {
+                console.error("Failed to fetch configuration from server:", err);
+                return {
+                    globalBlock: false,
+                    codes: { "123456": { games: ["Sandboxels", "HexGL", "ClassiCube", "2048"] } }
+                };
+            }
+        }
+
+        // Save config changes to Express server backend (/api/config)
+        async function saveConfig(configObj) {
+            try {
+                await fetch('/api/config', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(configObj)
+                });
+            } catch (err) {
+                console.error("Failed to save changes to server:", err);
+                alert("Error saving update to server.");
+            }
+        }
+
         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 = await getConfig();
+
+            if (config.globalBlock && inputVal !== '814212') {
+                errorMsg.innerText = "System is temporarily locked by administrator.";
+                errorMsg.style.display = 'block';
+                document.getElementById('class-code-input').focus();
+                return;
+            }
 
             if (inputVal === '814212') {
                 errorMsg.style.display = 'none';
-                document.getElementById('login-view').classList.remove('active');
-                document.getElementById('portal-view').classList.add('active');
+                document.getElementById('class-code-input').value = '';
+                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 = '';
+                switchView('portal-view');
+                document.getElementById('current-user-badge').innerText = `Class Code: ${inputVal}`;
+                loadStudentDashboard(config.codes[inputVal].games || [], false);
             } else {
+                errorMsg.innerText = "Invalid class code. Please check with your teacher or instructor.";
                 errorMsg.style.display = 'block';
                 document.getElementById('class-code-input').focus();
             }
         }
 
+        function switchView(viewId) {
+            document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
+            document.getElementById(viewId).classList.add('active');
+        }
+
+        function logout() {
+            closeGame();
+            switchView('login-view');
+            document.getElementById('current-user-badge').innerText = '';
+            document.getElementById('class-code-input').focus();
+        }
+
+        function loadStudentDashboard(allowedGameIds, isAdminUser) {
+            const grid = document.getElementById('student-games-grid');
+            grid.innerHTML = '';
+
+            const permittedGames = AVAILABLE_GAMES.filter(g => allowedGameIds.includes(g.id));
+            const displayCards = [];
+            if (isAdminUser) displayCards.push(ADMIN_APP);
+            permittedGames.forEach(g => displayCards.push(g));
+
+            if (displayCards.length === 0) {
+                grid.innerHTML = `<div style="grid-column: 1/-1; text-align: center; padding: 40px; background: white; border-radius: 4px; box-shadow: var(--shadow-elevation-2);">
+                    <i class="material-icons" style="font-size: 48px; color: var(--text-secondary);">block</i>
+                    <h3 style="margin: 12px 0 4px 0;">No Apps Available</h3>
+                    <p style="color: var(--text-secondary); margin: 0;">There are currently no apps assigned or permitted for this class code.</p>
+                </div>`;
+                return;
+            }
+
+            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};">
+                            <i class="material-icons">${item.icon}</i>
+                        </div>
+                        <div class="card-content">
+                            <h2 class="portal-card-title">${item.name}</h2>
+                            <p class="card-text">${item.desc}</p>
+                        </div>
+                        <div class="card-actions">
+                            <button class="btn-flat" id="admin-panel-launch-btn">Open Panel</button>
+                        </div>
+                    `;
+                    card.querySelector('#admin-panel-launch-btn').addEventListener('click', item.action);
+                } else {
+                    card.innerHTML = `
+                        <div class="card-media" style="background-color: ${item.color};">
+                            <i class="material-icons">${item.icon}</i>
+                        </div>
+                        <div class="card-content">
+                            <h2 class="portal-card-title">${item.name}</h2>
+                            <p class="card-text">${item.desc}</p>
+                        </div>
+                        <div class="card-actions">
+                            <button class="btn-flat" onclick="openGame('${item.name}', '${item.url}')">Launch App</button>
+                        </div>
+                    `;
+                }
+                grid.appendChild(card);
+            });
+        }
+
+        async function loadAdminDashboard() {
+            const config = await getConfig();
+            const isBlocked = config.globalBlock;
+            
+            const statusText = document.getElementById('global-status-text');
+            const toggleBtn = document.getElementById('global-toggle-btn');
+            if (isBlocked) {
+                statusText.innerText = "System is LOCKED. All student codes are temporarily blocked.";
+                statusText.style.color = "var(--error-color)";
+                toggleBtn.innerText = "Unblock All Codes";
+                toggleBtn.className = "btn-raised";
+            } else {
+                statusText.innerText = "All student codes are currently ACTIVE.";
+                statusText.style.color = "var(--success-color)";
+                toggleBtn.innerText = "Temporarily Block All Codes";
+                toggleBtn.className = "btn-raised btn-warning";
+            }
+
+            const listContainer = document.getElementById('codes-management-list');
+            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;
+            }
+
+            studentCodes.forEach(code => {
+                const codeObj = config.codes[code];
+                const assignedGames = codeObj.games || [];
+
+                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>`;
+                }).join('');
+
+                item.innerHTML = `
+                    <div>
+                        <strong style="font-size: 16px; color: var(--primary-color);">Code: ${code}</strong>
+                    </div>
+                    <div class="checkbox-group">
+                        ${checkboxesHtml}
+                    </div>
+                    <div style="display: flex; gap: 8px;">
+                        <button class="btn-raised" style="padding: 6px 12px; font-size: 12px;" onclick="allowAllForCode('${code}')">Allow All</button>
+                        <button class="btn-raised btn-danger" style="padding: 6px 12px; font-size: 12px;" onclick="deleteCode('${code}')">Delete</button>
+                    </div>
+                `;
+                listContainer.appendChild(item);
+            });
+        }
+
+        async function toggleGlobalBlock() {
+            const config = await getConfig();
+            config.globalBlock = !config.globalBlock;
+            await saveConfig(config);
+            loadAdminDashboard();
+        }
+
+        async function createNewCode() {
+            const input = document.getElementById('new-code-input');
+            const err = document.getElementById('admin-error-msg');
+            const val = input.value.trim();
+
+            if (!/^\d{6}$/.test(val)) {
+                err.innerText = "Code must be exactly 6 digits.";
+                err.style.display = 'block';
+                return;
+            }
+            if (val === '814212') {
+                err.innerText = "814212 is reserved as the Master Admin code.";
+                err.style.display = 'block';
+                return;
+            }
+
+            const config = await getConfig();
+            if (!config.codes) config.codes = {};
+
+            if (config.codes[val]) {
+                err.innerText = "This code already exists.";
+                err.style.display = 'block';
+                return;
+            }
+
+            err.style.display = 'none';
+            config.codes[val] = { games: AVAILABLE_GAMES.map(g => g.id) };
+            await saveConfig(config);
+            input.value = '';
+            loadAdminDashboard();
+        }
+
+        async function deleteCode(code) {
+            if (confirm(`Are you sure you want to delete code ${code}?`)) {
+                const config = await getConfig();
+                delete config.codes[code];
+                await saveConfig(config);
+                loadAdminDashboard();
+            }
+        }
+
+        async function updateCodePermission(code, gameId, isChecked) {
+            const config = await getConfig();
+            if (!config.codes[code].games) config.codes[code].games = [];
+
+            if (isChecked) {
+                if (!config.codes[code].games.includes(gameId)) {
+                    config.codes[code].games.push(gameId);
+                }
+            } else {
+                config.codes[code].games = config.codes[code].games.filter(id => id !== gameId);
+            }
+            await saveConfig(config);
+        }
+
+        async function allowAllForCode(code) {
+            const config = await getConfig();
+            config.codes[code].games = AVAILABLE_GAMES.map(g => g.id);
+            await saveConfig(config);
+            loadAdminDashboard();
+        }
+
         function openGame(gameName, gameUrl) {
             document.getElementById('modal-game-title').innerText = gameName;
             document.getElementById('game-iframe').src = gameUrl;
@@ -509,7 +818,6 @@
         }
 
         function closeGame() {
-            // Exit fullscreen if active when closing
             if (document.fullscreenElement) {
                 document.exitFullscreen();
             }
@@ -532,7 +840,6 @@
             }
         }
 
-        // Keep fullscreen icon updated if user exits via keyboard (Esc)
         document.addEventListener('fullscreenchange', () => {
             const icon = document.getElementById('fullscreen-icon');
             if (!document.fullscreenElement) {

package/package.json

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

package/server.js

@@ -0,0 +1,50 @@
+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}`);
+});