diff --git a/app.js b/app.js index 21c5c222e..57ce9b8f8 100644 --- a/app.js +++ b/app.js @@ -2516,24 +2516,46 @@ function populateAtlas() { const grid = document.getElementById('atlas-grid'); grid.innerHTML = ''; + // Counters by status let onlineCount = 0; let standbyCount = 0; + let rebuildingCount = 0; + let localCount = 0; + let blockedCount = 0; + + // Group portals by environment + const byEnv = { production: [], staging: [], local: [] }; portals.forEach(portal => { const config = portal.config; - if (config.status === 'online') onlineCount++; - if (config.status === 'standby') standbyCount++; + const status = config.status || 'online'; + const env = config.environment || 'production'; + // Count statuses + if (status === 'online' || status === 'active') onlineCount++; + else if (status === 'standby') standbyCount++; + else if (status === 'rebuilding') rebuildingCount++; + else if (status === 'local-only') localCount++; + else if (status === 'blocked') blockedCount++; + + // Group by environment + if (byEnv[env]) { + byEnv[env].push({ config, status }); + } else { + byEnv['production'].push({ config, status }); + } + + // Create atlas card const card = document.createElement('div'); card.className = 'atlas-card'; card.style.setProperty('--portal-color', config.color); - const statusClass = `status-${config.status || 'online'}`; + const statusClass = `status-${status}`; card.innerHTML = `
${config.name}
-
${config.status || 'ONLINE'}
+
${status.toUpperCase()}
${config.description}
@@ -2550,9 +2572,18 @@ function populateAtlas() { grid.appendChild(card); }); + // Update footer counts document.getElementById('atlas-online-count').textContent = onlineCount; document.getElementById('atlas-standby-count').textContent = standbyCount; - + document.getElementById('atlas-rebuilding-count').textContent = rebuildingCount; + document.getElementById('atlas-local-count').textContent = localCount; + document.getElementById('atlas-blocked-count').textContent = blockedCount; + + // Populate status wall by environment + populateStatusWallEnv('production', byEnv.production); + populateStatusWallEnv('staging', byEnv.staging); + populateStatusWallEnv('local', byEnv.local); + // Update Bannerlord HUD status const bannerlord = portals.find(p => p.config.id === 'bannerlord'); if (bannerlord) { @@ -2561,6 +2592,75 @@ function populateAtlas() { } } +function populateStatusWallEnv(envName, portalList) { + const container = document.getElementById(`${envName}-portals`); + const summary = document.getElementById(`${envName}-summary`); + container.innerHTML = ''; + + if (portalList.length === 0) { + container.innerHTML = '
No worlds
'; + summary.textContent = 'No portals in this environment'; + return; + } + + // Count statuses in this environment + const statusCounts = {}; + portalList.forEach(({ config, status }) => { + statusCounts[status] = (statusCounts[status] || 0) + 1; + }); + + // Create portal rows + portalList.forEach(({ config, status }) => { + const row = document.createElement('div'); + row.className = 'status-portal-row'; + + const indicator = document.createElement('span'); + indicator.className = `status-portal-indicator status-dot ${status}`; + + const nameSpan = document.createElement('span'); + nameSpan.className = 'status-portal-name'; + nameSpan.textContent = config.name; + + const statusSpan = document.createElement('span'); + statusSpan.style.fontSize = '9px'; + statusSpan.style.textTransform = 'uppercase'; + statusSpan.style.marginLeft = '8px'; + statusSpan.style.color = getStatusColor(status); + statusSpan.textContent = status; + + row.appendChild(nameSpan); + row.appendChild(statusSpan); + row.appendChild(indicator); + container.appendChild(row); + }); + + // Create summary + const summaryParts = Object.entries(statusCounts).map(([status, count]) => + `${count} ${status}` + ); + summary.textContent = summaryParts.join(' ยท '); +} + +function getStatusColor(status) { + switch (status) { + case 'online': + case 'active': + return 'var(--color-primary)'; + case 'standby': + return 'var(--color-gold)'; + case 'rebuilding': + return '#ffa500'; + case 'local-only': + return '#00ff88'; + case 'blocked': + return '#ff0000'; + case 'offline': + return 'var(--color-danger)'; + default: + return 'var(--color-text-muted)'; + } +} + function focusPortal(portal) { // Teleport player to a position in front of the portal const offset = new THREE.Vector3(0, 0, 6).applyEuler(new THREE.Euler(0, portal.config.rotation?.y || 0, 0)); diff --git a/index.html b/index.html index 54ada4897..7ede80a40 100644 --- a/index.html +++ b/index.html @@ -264,11 +264,57 @@
+ +
+
+ WORLD STATUS WALL + Real-time portal health +
+
+
+
+ + PRODUCTION +
+
+
+
+
+
+ + STAGING +
+
+
+
+
+
+ + LOCAL +
+
+
+
+
+
+
Online
+
Rebuilding
+
Local-only
+
Blocked
+
Offline
+
+
0 ONLINE    0 STANDBY +    + 0 REBUILDING +    + 0 LOCAL +    + 0 BLOCKED
Click a portal to focus or teleport
diff --git a/portals.json b/portals.json index 6b7e28706..6a1bed345 100644 --- a/portals.json +++ b/portals.json @@ -4,6 +4,7 @@ "name": "Morrowind", "description": "The Vvardenfell harness. Ash storms and ancient mysteries.", "status": "online", + "environment": "production", "color": "#ff6600", "position": { "x": 15, "y": 0, "z": -10 }, "rotation": { "y": -0.5 }, @@ -17,13 +18,13 @@ "id": "bannerlord", "name": "Bannerlord", "description": "Calradia battle harness. Massive armies, tactical command.", - "status": "active", + "status": "online", + "environment": "production", "color": "#ffd700", "position": { "x": -15, "y": 0, "z": -10 }, "rotation": { "y": 0.5 }, "portal_type": "game-world", "world_category": "strategy-rpg", - "environment": "production", "access_mode": "operator", "readiness_state": "active", "telemetry_source": "hermes-harness:bannerlord", @@ -42,6 +43,7 @@ "name": "Workshop", "description": "The creative harness. Build, script, and manifest.", "status": "online", + "environment": "production", "color": "#4af0c0", "position": { "x": 0, "y": 0, "z": -20 }, "rotation": { "y": 0 }, @@ -56,6 +58,7 @@ "name": "Archive", "description": "The repository of all knowledge. History, logs, and ancient data.", "status": "online", + "environment": "production", "color": "#0066ff", "position": { "x": 25, "y": 0, "z": 0 }, "rotation": { "y": -1.57 }, @@ -70,6 +73,7 @@ "name": "Chapel", "description": "A sanctuary for reflection and digital peace.", "status": "online", + "environment": "production", "color": "#ffd700", "position": { "x": -25, "y": 0, "z": 0 }, "rotation": { "y": 1.57 }, @@ -84,6 +88,7 @@ "name": "Courtyard", "description": "The open nexus. A place for agents to gather and connect.", "status": "online", + "environment": "production", "color": "#4af0c0", "position": { "x": 15, "y": 0, "z": 10 }, "rotation": { "y": -2.5 }, @@ -98,6 +103,7 @@ "name": "Gate", "description": "The transition point. Entry and exit from the Nexus core.", "status": "standby", + "environment": "staging", "color": "#ff4466", "position": { "x": -15, "y": 0, "z": 10 }, "rotation": { "y": 2.5 }, @@ -106,5 +112,20 @@ "type": "harness", "params": { "mode": "transit" } } + }, + { + "id": "dev", + "name": "Dev Sandbox", + "description": "Local development world. Unstable, experimental, honest.", + "status": "local-only", + "environment": "local", + "color": "#00ff88", + "position": { "x": 0, "y": 0, "z": 20 }, + "rotation": { "y": 0 }, + "destination": { + "url": "http://localhost:3000", + "type": "local", + "params": { "mode": "dev" } + } } ] diff --git a/style.css b/style.css index 2c3f70eb6..f5dd740ef 100644 --- a/style.css +++ b/style.css @@ -365,7 +365,11 @@ canvas#nexus-canvas { } .status-online { background: rgba(74, 240, 192, 0.2); color: var(--color-primary); border: 1px solid var(--color-primary); } +.status-active { background: rgba(74, 240, 192, 0.2); color: var(--color-primary); border: 1px solid var(--color-primary); } .status-standby { background: rgba(255, 215, 0, 0.2); color: var(--color-gold); border: 1px solid var(--color-gold); } +.status-rebuilding { background: rgba(255, 165, 0, 0.2); color: #ffa500; border: 1px solid #ffa500; } +.status-local-only { background: rgba(0, 255, 136, 0.2); color: #00ff88; border: 1px solid #00ff88; } +.status-blocked { background: rgba(255, 0, 0, 0.2); color: #ff0000; border: 1px solid #ff0000; } .status-offline { background: rgba(255, 68, 102, 0.2); color: var(--color-danger); border: 1px solid var(--color-danger); } .atlas-card-desc { @@ -410,6 +414,165 @@ canvas#nexus-canvas { font-style: italic; } +/* Portal Status Wall */ +.atlas-status-wall { + padding: 20px 30px; + border-top: 1px solid var(--color-border); + background: rgba(10, 15, 40, 0.5); +} + +.status-wall-header { + display: flex; + flex-direction: column; + gap: 4px; + margin-bottom: 16px; +} + +.status-wall-title { + font-family: var(--font-display); + font-size: 14px; + font-weight: 700; + color: var(--color-primary); + letter-spacing: 1px; +} + +.status-wall-subtitle { + font-family: var(--font-body); + font-size: 11px; + color: var(--color-text-muted); +} + +.status-wall-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-bottom: 16px; +} + +.status-wall-env { + background: rgba(20, 30, 60, 0.3); + border: 1px solid rgba(255, 255, 255, 0.05); + padding: 12px; + border-radius: 4px; +} + +.status-env-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 10px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.05); +} + +.status-env-dot { + width: 8px; + height: 8px; + border-radius: 50%; +} + +.status-env-dot.production { + background: var(--color-primary); + box-shadow: 0 0 5px var(--color-primary); +} + +.status-env-dot.staging { + background: var(--color-gold); + box-shadow: 0 0 5px var(--color-gold); +} + +.status-env-dot.local { + background: #00ff88; + box-shadow: 0 0 5px #00ff88; +} + +.status-env-label { + font-family: var(--font-display); + font-size: 11px; + font-weight: 600; + color: #fff; + letter-spacing: 0.5px; +} + +.status-env-portals { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 10px; + max-height: 120px; + overflow-y: auto; +} + +.status-portal-row { + display: flex; + align-items: center; + justify-content: space-between; + font-family: var(--font-body); + font-size: 11px; + color: var(--color-text-muted); + padding: 4px 0; +} + +.status-portal-name { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.status-portal-indicator { + width: 6px; + height: 6px; + border-radius: 50%; + margin-left: 8px; + flex-shrink: 0; +} + +.status-env-summary { + font-family: var(--font-body); + font-size: 10px; + color: var(--color-text-muted); + padding-top: 8px; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.status-wall-legend { + display: flex; + flex-wrap: wrap; + gap: 16px; + padding-top: 12px; + border-top: 1px solid rgba(255, 255, 255, 0.05); +} + +.legend-item { + display: flex; + align-items: center; + gap: 6px; + font-family: var(--font-body); + font-size: 10px; + color: var(--color-text-muted); +} + +.status-dot { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; +} + +.status-dot.online { background: var(--color-primary); box-shadow: 0 0 4px var(--color-primary); } +.status-dot.active { background: var(--color-primary); box-shadow: 0 0 4px var(--color-primary); } +.status-dot.standby { background: var(--color-gold); box-shadow: 0 0 4px var(--color-gold); } +.status-dot.rebuilding { background: #ffa500; box-shadow: 0 0 4px #ffa500; } +.status-dot.local-only { background: #00ff88; box-shadow: 0 0 4px #00ff88; } +.status-dot.blocked { background: #ff0000; box-shadow: 0 0 4px #ff0000; } +.status-dot.offline { background: var(--color-danger); box-shadow: 0 0 4px var(--color-danger); } + +/* Additional status indicators for footer */ +.status-indicator.rebuilding { background: #ffa500; box-shadow: 0 0 5px #ffa500; } +.status-indicator.local-only { background: #00ff88; box-shadow: 0 0 5px #00ff88; } +.status-indicator.blocked { background: #ff0000; box-shadow: 0 0 5px #ff0000; } + @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } @@ -423,6 +586,12 @@ canvas#nexus-canvas { .atlas-content { max-height: 90vh; } + .status-wall-grid { + grid-template-columns: 1fr; + } + .atlas-status-wall { + padding: 15px 20px; + } } /* Debug overlay */