feat(oracle): HTML5 Canvas frontend — Mind's Eye viewport
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Seth
@@ -0,0 +1,801 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MORTDECAI — MIND'S EYE</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #1a1a2e;
|
||||
--bg-panel: #16162a;
|
||||
--bg-darker: #111122;
|
||||
--orange: #D35400;
|
||||
--blue: #2196F3;
|
||||
--green: #4CAF50;
|
||||
--red: #E74C3C;
|
||||
--text: #E0E0E0;
|
||||
--text-dim: #888;
|
||||
--border: #2a2a4a;
|
||||
--purple: #9C27B0;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%; height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
grid-template-rows: 1fr 56px;
|
||||
width: 100vw; height: 100vh;
|
||||
}
|
||||
|
||||
/* ── World Map Panel ── */
|
||||
#map-panel {
|
||||
grid-column: 1; grid-row: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--bg-darker);
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
#map-panel canvas {
|
||||
display: block;
|
||||
width: 100%; height: 100%;
|
||||
}
|
||||
|
||||
#map-title {
|
||||
position: absolute;
|
||||
top: 12px; left: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#header-bar {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, rgba(26,26,46,0.95) 0%, rgba(26,26,46,0) 100%);
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#header-bar h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 4px;
|
||||
color: var(--orange);
|
||||
text-shadow: 0 0 20px rgba(211,84,0,0.3);
|
||||
}
|
||||
|
||||
/* ── Tool Trace Panel ── */
|
||||
#trace-panel {
|
||||
grid-column: 2; grid-row: 1 / 3;
|
||||
background: var(--bg-panel);
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#trace-header {
|
||||
padding: 14px 16px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#trace-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#trace-list::-webkit-scrollbar { width: 4px; }
|
||||
#trace-list::-webkit-scrollbar-track { background: transparent; }
|
||||
#trace-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
|
||||
.trace-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid rgba(42,42,74,0.5);
|
||||
animation: traceIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes traceIn {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.trace-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trace-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(76,175,80,0.5); }
|
||||
.trace-dot.fail { background: var(--red); box-shadow: 0 0 6px rgba(231,76,60,0.5); }
|
||||
|
||||
.trace-tool {
|
||||
flex: 1;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trace-tool.rcon { color: var(--orange); }
|
||||
.trace-tool.world { color: var(--blue); }
|
||||
.trace-tool.journal { color: var(--purple); }
|
||||
.trace-tool.script { color: var(--green); }
|
||||
.trace-tool.memory { color: #FF9800; }
|
||||
.trace-tool.other { color: var(--text-dim); }
|
||||
|
||||
.trace-step {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trace-time {
|
||||
font-size: 10px;
|
||||
color: rgba(136,136,136,0.6);
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
#trace-footer {
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Status Bar ── */
|
||||
#status-bar {
|
||||
grid-column: 1; grid-row: 2;
|
||||
background: var(--bg-panel);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
gap: 24px;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
color: var(--text-dim);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot.idle { background: #555; }
|
||||
.status-dot.god { background: var(--orange); box-shadow: 0 0 8px rgba(211,84,0,0.6); }
|
||||
.status-dot.sudo { background: var(--blue); box-shadow: 0 0 8px rgba(33,150,243,0.6); }
|
||||
.status-dot.connected { background: var(--green); box-shadow: 0 0 6px rgba(76,175,80,0.5); }
|
||||
.status-dot.disconnected { background: var(--red); box-shadow: 0 0 6px rgba(231,76,60,0.5); }
|
||||
|
||||
#status-mode { font-weight: 700; }
|
||||
#status-player { color: var(--text); font-weight: 600; }
|
||||
#status-pos { color: var(--text-dim); font-variant-numeric: tabular-nums; }
|
||||
#status-players-count { color: var(--text); }
|
||||
|
||||
/* ── Reconnect Overlay ── */
|
||||
#reconnect-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(17,17,34,0.92);
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#reconnect-overlay.visible { display: flex; }
|
||||
|
||||
#reconnect-overlay .spinner {
|
||||
width: 40px; height: 40px;
|
||||
border: 3px solid var(--border);
|
||||
border-top-color: var(--orange);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
#reconnect-overlay .label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* ── Idle pulse ── */
|
||||
@keyframes idlePulse {
|
||||
0%, 100% { opacity: 0.4; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
#idle-eye {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
animation: idlePulse 4s ease-in-out infinite;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
#idle-eye.hidden { opacity: 0; pointer-events: none; }
|
||||
|
||||
#idle-eye .eye-icon {
|
||||
font-size: 64px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#idle-eye .eye-label {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
color: var(--text-dim);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media (max-width: 700px) {
|
||||
#app {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr 200px 48px;
|
||||
}
|
||||
#trace-panel { grid-column: 1; grid-row: 2; border-left: none; border-top: 1px solid var(--border); }
|
||||
#status-bar { grid-column: 1; grid-row: 3; gap: 12px; padding: 0 12px; font-size: 11px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="app">
|
||||
<!-- World Map -->
|
||||
<div id="map-panel">
|
||||
<div id="header-bar"><h1>MORTDECAI — MIND'S EYE</h1></div>
|
||||
<canvas id="world-canvas"></canvas>
|
||||
<div id="idle-eye">
|
||||
<div class="eye-icon">◎</div>
|
||||
<div class="eye-label">AWAITING VISION</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tool Trace -->
|
||||
<div id="trace-panel">
|
||||
<div id="trace-header">TOOL TRACE</div>
|
||||
<div id="trace-list"></div>
|
||||
<div id="trace-footer">No active session</div>
|
||||
</div>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div id="status-bar">
|
||||
<div class="status-item">
|
||||
<span class="status-dot idle" id="mode-dot"></span>
|
||||
<span class="status-label">Mode</span>
|
||||
<span id="status-mode">IDLE</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">Player</span>
|
||||
<span id="status-player">—</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">Pos</span>
|
||||
<span id="status-pos">—</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-dot disconnected" id="conn-dot"></span>
|
||||
<span id="status-conn">Offline</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="status-label">Players</span>
|
||||
<span id="status-players-count">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reconnect Overlay -->
|
||||
<div id="reconnect-overlay">
|
||||
<div class="spinner"></div>
|
||||
<div class="label">RECONNECTING...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// ── Block color map ──
|
||||
const BLOCK_COLORS = {
|
||||
stone: '#808080', cobblestone: '#6B6B6B', deepslate: '#4A4A4A',
|
||||
dirt: '#8B6914', grass_block: '#4CAF50', sand: '#F4E4A0',
|
||||
gravel: '#A0A0A0', oak_planks: '#BC8F4F', oak_log: '#6B4226',
|
||||
spruce_planks: '#5C3A1E', birch_planks: '#D4C78F',
|
||||
water: '#2196F3', lava: '#FF5722',
|
||||
redstone_wire: '#FF0000', redstone_torch: '#FF4444',
|
||||
diamond_ore: '#4FC3F7', iron_ore: '#D4A574', gold_ore: '#FFD54F',
|
||||
coal_ore: '#333333', bedrock: '#1A1A1A', obsidian: '#1A0A2E',
|
||||
glass: 'rgba(224,247,250,0.3)', torch: '#FFEB3B',
|
||||
chest: '#8D6E3F', crafting_table: '#B8860B', furnace: '#888888',
|
||||
_default: '#9E9E9E',
|
||||
};
|
||||
|
||||
// ── Entity colors ──
|
||||
const HOSTILE_MOBS = new Set([
|
||||
'zombie', 'skeleton', 'creeper', 'spider', 'enderman', 'witch',
|
||||
'blaze', 'ghast', 'slime', 'phantom', 'drowned', 'husk', 'stray',
|
||||
'pillager', 'vindicator', 'evoker', 'ravager', 'warden', 'wither',
|
||||
]);
|
||||
const PASSIVE_MOBS = new Set([
|
||||
'cow', 'pig', 'sheep', 'chicken', 'horse', 'donkey', 'mule',
|
||||
'cat', 'dog', 'wolf', 'rabbit', 'villager', 'iron_golem',
|
||||
'bee', 'parrot', 'turtle', 'axolotl', 'frog', 'sniffer',
|
||||
]);
|
||||
|
||||
// ── State ──
|
||||
const state = {
|
||||
mode: 'idle',
|
||||
activePlayer: null,
|
||||
connected: false,
|
||||
players: [],
|
||||
world: { time: 0, isRaining: false },
|
||||
blocks: [],
|
||||
entities: [],
|
||||
center: { x: 0, y: 0, z: 0 },
|
||||
traces: [],
|
||||
traceStep: null,
|
||||
traceTotal: null,
|
||||
sessionId: null,
|
||||
dirty: true,
|
||||
hasWorldData: false,
|
||||
scanHighlights: [], // {x, z, age}
|
||||
lastHeartbeat: 0,
|
||||
};
|
||||
|
||||
const TILE = 8;
|
||||
const MAX_TRACES = 50;
|
||||
|
||||
// ── DOM refs ──
|
||||
const canvas = document.getElementById('world-canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const traceList = document.getElementById('trace-list');
|
||||
const traceFooter = document.getElementById('trace-footer');
|
||||
const modeDot = document.getElementById('mode-dot');
|
||||
const connDot = document.getElementById('conn-dot');
|
||||
const statusMode = document.getElementById('status-mode');
|
||||
const statusPlayer = document.getElementById('status-player');
|
||||
const statusPos = document.getElementById('status-pos');
|
||||
const statusConn = document.getElementById('status-conn');
|
||||
const statusPlayersCount = document.getElementById('status-players-count');
|
||||
const reconnectOverlay = document.getElementById('reconnect-overlay');
|
||||
const idleEye = document.getElementById('idle-eye');
|
||||
|
||||
// ── Canvas resize ──
|
||||
function resizeCanvas() {
|
||||
const panel = document.getElementById('map-panel');
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = panel.clientWidth * dpr;
|
||||
canvas.height = panel.clientHeight * dpr;
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
state.dirty = true;
|
||||
}
|
||||
window.addEventListener('resize', resizeCanvas);
|
||||
resizeCanvas();
|
||||
|
||||
// ── Mode colors ──
|
||||
function getModeAccent() {
|
||||
if (state.mode === 'god') return '#D35400';
|
||||
if (state.mode === 'sudo') return '#2196F3';
|
||||
return '#555';
|
||||
}
|
||||
|
||||
function getModeGlow() {
|
||||
if (state.mode === 'god') return 'rgba(211,84,0,0.15)';
|
||||
if (state.mode === 'sudo') return 'rgba(33,150,243,0.1)';
|
||||
return 'transparent';
|
||||
}
|
||||
|
||||
// ── Render world ──
|
||||
function renderWorld() {
|
||||
const w = canvas.width / (window.devicePixelRatio || 1);
|
||||
const h = canvas.height / (window.devicePixelRatio || 1);
|
||||
|
||||
// Background
|
||||
ctx.fillStyle = '#111122';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
if (!state.hasWorldData) return;
|
||||
|
||||
// Center offset
|
||||
const cx = Math.floor(w / 2);
|
||||
const cz = Math.floor(h / 2);
|
||||
const refX = state.center.x;
|
||||
const refZ = state.center.z;
|
||||
|
||||
// Mode glow overlay
|
||||
const glowColor = getModeGlow();
|
||||
if (glowColor !== 'transparent') {
|
||||
const grad = ctx.createRadialGradient(cx, cz, 0, cx, cz, Math.max(w, h) * 0.5);
|
||||
grad.addColorStop(0, glowColor);
|
||||
grad.addColorStop(1, 'transparent');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
}
|
||||
|
||||
// Grid lines (sudo mode only)
|
||||
if (state.mode === 'sudo') {
|
||||
ctx.strokeStyle = 'rgba(33,150,243,0.06)';
|
||||
ctx.lineWidth = 0.5;
|
||||
const offsetX = cx % TILE;
|
||||
const offsetZ = cz % TILE;
|
||||
for (let x = offsetX; x < w; x += TILE) {
|
||||
ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke();
|
||||
}
|
||||
for (let z = offsetZ; z < h; z += TILE) {
|
||||
ctx.beginPath(); ctx.moveTo(0, z); ctx.lineTo(w, z); ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks
|
||||
for (const block of state.blocks) {
|
||||
const sx = cx + (block.x - refX) * TILE;
|
||||
const sz = cz + (block.z - refZ) * TILE;
|
||||
if (sx < -TILE || sx > w + TILE || sz < -TILE || sz > h + TILE) continue;
|
||||
|
||||
const btype = block.type ? block.type.replace('minecraft:', '') : '_default';
|
||||
ctx.fillStyle = BLOCK_COLORS[btype] || BLOCK_COLORS._default;
|
||||
ctx.fillRect(sx - TILE / 2, sz - TILE / 2, TILE, TILE);
|
||||
}
|
||||
|
||||
// Scan highlights (pulse)
|
||||
const now = performance.now();
|
||||
for (let i = state.scanHighlights.length - 1; i >= 0; i--) {
|
||||
const sh = state.scanHighlights[i];
|
||||
const age = now - sh.born;
|
||||
if (age > 3000) { state.scanHighlights.splice(i, 1); continue; }
|
||||
const alpha = 0.3 * (1 - age / 3000);
|
||||
const accent = state.mode === 'sudo' ? `rgba(33,150,243,${alpha})` : `rgba(211,84,0,${alpha})`;
|
||||
const sx = cx + (sh.x - refX) * TILE;
|
||||
const sz = cz + (sh.z - refZ) * TILE;
|
||||
ctx.fillStyle = accent;
|
||||
ctx.fillRect(sx - TILE / 2, sz - TILE / 2, TILE, TILE);
|
||||
}
|
||||
|
||||
// Entities
|
||||
for (const ent of state.entities) {
|
||||
const sx = cx + (ent.x - refX) * TILE;
|
||||
const sz = cz + (ent.z - refZ) * TILE;
|
||||
if (sx < -6 || sx > w + 6 || sz < -6 || sz > h + 6) continue;
|
||||
|
||||
const etype = (ent.type || '').replace('minecraft:', '');
|
||||
let color = '#FFD54F'; // default yellow
|
||||
if (HOSTILE_MOBS.has(etype)) color = '#E74C3C';
|
||||
else if (PASSIVE_MOBS.has(etype)) color = '#4CAF50';
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(sx, sz, 3, 0, Math.PI * 2);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
|
||||
// Entity type label (small)
|
||||
if (etype) {
|
||||
ctx.font = '9px Rajdhani';
|
||||
ctx.fillStyle = 'rgba(224,224,224,0.5)';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(etype, sx, sz - 6);
|
||||
}
|
||||
}
|
||||
|
||||
// Players
|
||||
for (const p of state.players) {
|
||||
const sx = cx + (p.x - refX) * TILE;
|
||||
const sz = cz + (p.z - refZ) * TILE;
|
||||
|
||||
const isActive = p.name === state.activePlayer;
|
||||
|
||||
// Glow for active player
|
||||
if (isActive) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(sx, sz, 10, 0, Math.PI * 2);
|
||||
const accent = getModeAccent();
|
||||
ctx.fillStyle = accent.replace(')', ',0.2)').replace('rgb', 'rgba');
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Dot
|
||||
ctx.beginPath();
|
||||
ctx.arc(sx, sz, isActive ? 5 : 4, 0, Math.PI * 2);
|
||||
ctx.fillStyle = isActive ? '#FFFFFF' : '#CCCCCC';
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = isActive ? getModeAccent() : '#666';
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.stroke();
|
||||
|
||||
// Name label
|
||||
ctx.font = isActive ? 'bold 12px Rajdhani' : '11px Rajdhani';
|
||||
ctx.fillStyle = isActive ? '#FFFFFF' : '#AAAAAA';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(p.name, sx, sz - 10);
|
||||
}
|
||||
|
||||
// Compass indicator
|
||||
ctx.font = 'bold 11px Rajdhani';
|
||||
ctx.fillStyle = 'rgba(224,224,224,0.3)';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('N', cx, 16);
|
||||
ctx.fillText('S', cx, h - 8);
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText('W', 8, cz + 4);
|
||||
ctx.textAlign = 'right';
|
||||
ctx.fillText('E', w - 8, cz + 4);
|
||||
|
||||
// Coordinate display
|
||||
ctx.font = '10px Rajdhani';
|
||||
ctx.fillStyle = 'rgba(224,224,224,0.25)';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText(`Center: ${refX}, ${state.center.y}, ${refZ}`, 12, h - 10);
|
||||
}
|
||||
|
||||
// ── Render loop ──
|
||||
function renderLoop() {
|
||||
if (state.dirty || state.scanHighlights.length > 0) {
|
||||
renderWorld();
|
||||
state.dirty = false;
|
||||
}
|
||||
requestAnimationFrame(renderLoop);
|
||||
}
|
||||
requestAnimationFrame(renderLoop);
|
||||
|
||||
// ── Update status bar ──
|
||||
function updateStatus() {
|
||||
// Mode
|
||||
modeDot.className = 'status-dot ' + state.mode;
|
||||
statusMode.textContent = state.mode.toUpperCase();
|
||||
statusMode.style.color = getModeAccent();
|
||||
|
||||
// Player
|
||||
statusPlayer.textContent = state.activePlayer || '\u2014';
|
||||
|
||||
// Position
|
||||
const ap = state.players.find(p => p.name === state.activePlayer);
|
||||
if (ap) {
|
||||
statusPos.textContent = `(${Math.round(ap.x)}, ${Math.round(ap.y)}, ${Math.round(ap.z)})`;
|
||||
} else {
|
||||
statusPos.textContent = '\u2014';
|
||||
}
|
||||
|
||||
// Connection
|
||||
connDot.className = 'status-dot ' + (state.connected ? 'connected' : 'disconnected');
|
||||
statusConn.textContent = state.connected ? 'Online' : 'Offline';
|
||||
|
||||
// Player count
|
||||
statusPlayersCount.textContent = state.players.length;
|
||||
|
||||
// Idle eye
|
||||
if (state.mode === 'idle' && !state.hasWorldData) {
|
||||
idleEye.classList.remove('hidden');
|
||||
} else {
|
||||
idleEye.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Title accent
|
||||
const titleH1 = document.querySelector('#header-bar h1');
|
||||
if (state.mode === 'sudo') {
|
||||
titleH1.style.color = '#2196F3';
|
||||
titleH1.style.textShadow = '0 0 20px rgba(33,150,243,0.3)';
|
||||
} else {
|
||||
titleH1.style.color = '#D35400';
|
||||
titleH1.style.textShadow = '0 0 20px rgba(211,84,0,0.3)';
|
||||
}
|
||||
}
|
||||
|
||||
// ── Trace panel ──
|
||||
function getToolClass(tool) {
|
||||
if (!tool) return 'other';
|
||||
if (tool.startsWith('rcon')) return 'rcon';
|
||||
if (tool.startsWith('world')) return 'world';
|
||||
if (tool.startsWith('journal')) return 'journal';
|
||||
if (tool.startsWith('script')) return 'script';
|
||||
if (tool.startsWith('memory')) return 'memory';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
function addTrace(data) {
|
||||
state.traces.unshift(data);
|
||||
if (state.traces.length > MAX_TRACES) state.traces.pop();
|
||||
|
||||
const entry = document.createElement('div');
|
||||
entry.className = 'trace-entry';
|
||||
|
||||
const dot = document.createElement('span');
|
||||
dot.className = 'trace-dot ' + (data.ok !== false ? 'ok' : 'fail');
|
||||
|
||||
const tool = document.createElement('span');
|
||||
tool.className = 'trace-tool ' + getToolClass(data.tool);
|
||||
tool.textContent = data.tool || 'unknown';
|
||||
|
||||
const step = document.createElement('span');
|
||||
step.className = 'trace-step';
|
||||
step.textContent = data.step != null ? `#${data.step}` : '';
|
||||
|
||||
const time = document.createElement('span');
|
||||
time.className = 'trace-time';
|
||||
const d = data.ts ? new Date(data.ts) : new Date();
|
||||
time.textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
|
||||
entry.appendChild(dot);
|
||||
entry.appendChild(tool);
|
||||
entry.appendChild(step);
|
||||
entry.appendChild(time);
|
||||
|
||||
traceList.insertBefore(entry, traceList.firstChild);
|
||||
|
||||
// Trim DOM
|
||||
while (traceList.children.length > MAX_TRACES) {
|
||||
traceList.removeChild(traceList.lastChild);
|
||||
}
|
||||
|
||||
// Update footer
|
||||
if (data.session_id) state.sessionId = data.session_id;
|
||||
const modeLabel = data.mode ? data.mode.toUpperCase() : state.mode.toUpperCase();
|
||||
const playerLabel = data.player || state.activePlayer || '?';
|
||||
traceFooter.textContent = `${modeLabel} | ${playerLabel} | step ${data.step || '?'}`;
|
||||
}
|
||||
|
||||
// ── WebSocket ──
|
||||
let ws = null;
|
||||
let reconnectDelay = 1000;
|
||||
const MAX_RECONNECT_DELAY = 30000;
|
||||
|
||||
function connectWS() {
|
||||
const proto = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
ws = new WebSocket(`${proto}://${location.host}/ws`);
|
||||
|
||||
ws.onopen = function() {
|
||||
state.connected = true;
|
||||
reconnectDelay = 1000;
|
||||
reconnectOverlay.classList.remove('visible');
|
||||
updateStatus();
|
||||
};
|
||||
|
||||
ws.onclose = function() {
|
||||
state.connected = false;
|
||||
updateStatus();
|
||||
reconnectOverlay.classList.add('visible');
|
||||
setTimeout(connectWS, reconnectDelay);
|
||||
reconnectDelay = Math.min(reconnectDelay * 2, MAX_RECONNECT_DELAY);
|
||||
};
|
||||
|
||||
ws.onerror = function() {
|
||||
ws.close();
|
||||
};
|
||||
|
||||
ws.onmessage = function(evt) {
|
||||
let msg;
|
||||
try { msg = JSON.parse(evt.data); } catch { return; }
|
||||
|
||||
switch (msg.type) {
|
||||
case 'heartbeat':
|
||||
state.mode = msg.mode || 'idle';
|
||||
state.activePlayer = msg.activePlayer || null;
|
||||
state.players = msg.players || [];
|
||||
if (msg.world) {
|
||||
state.world = msg.world;
|
||||
}
|
||||
state.lastHeartbeat = Date.now();
|
||||
state.dirty = true;
|
||||
updateStatus();
|
||||
break;
|
||||
|
||||
case 'world':
|
||||
state.mode = msg.mode || state.mode;
|
||||
state.activePlayer = msg.activePlayer || state.activePlayer;
|
||||
state.center = msg.center || state.center;
|
||||
state.blocks = msg.blocks || [];
|
||||
state.entities = msg.entities || [];
|
||||
state.players = msg.players || state.players;
|
||||
state.hasWorldData = true;
|
||||
state.dirty = true;
|
||||
|
||||
// Add scan highlight on all new block positions
|
||||
const born = performance.now();
|
||||
const seen = new Set();
|
||||
for (const b of state.blocks) {
|
||||
const key = b.x + ',' + b.z;
|
||||
if (!seen.has(key)) {
|
||||
seen.add(key);
|
||||
state.scanHighlights.push({ x: b.x, z: b.z, born });
|
||||
}
|
||||
}
|
||||
|
||||
updateStatus();
|
||||
break;
|
||||
|
||||
case 'trace':
|
||||
addTrace(msg);
|
||||
if (msg.mode) state.mode = msg.mode;
|
||||
if (msg.player) state.activePlayer = msg.player;
|
||||
state.dirty = true;
|
||||
updateStatus();
|
||||
break;
|
||||
|
||||
case 'mode':
|
||||
state.mode = msg.mode || 'idle';
|
||||
if (msg.player) state.activePlayer = msg.player;
|
||||
state.dirty = true;
|
||||
updateStatus();
|
||||
break;
|
||||
|
||||
case 'status':
|
||||
if (msg.connected !== undefined) {
|
||||
state.connected = msg.connected;
|
||||
updateStatus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
connectWS();
|
||||
|
||||
// ── Idle heartbeat timeout → revert to idle ──
|
||||
setInterval(function() {
|
||||
if (state.lastHeartbeat && Date.now() - state.lastHeartbeat > 15000) {
|
||||
if (state.mode !== 'idle') {
|
||||
state.mode = 'idle';
|
||||
state.dirty = true;
|
||||
updateStatus();
|
||||
}
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user