Overhaul the web UI

This commit is contained in:
Tanner
2026-11-04 16:50:40 +00:00
parent 67c0ed5af4
commit 4129686b07
22 changed files with 787 additions and 11614 deletions
+107 -1
View File
@@ -1 +1,107 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,i=r[0],l=r[1],a=r[2],p=0,s=[];p<i.length;p++)f=i[p],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(c&&c(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var l=t[i];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var i=this.webpackJsonpweb_interface=this.webpackJsonpweb_interface||[],l=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var c=l;t()}([])</script><script src="/static/js/2.2b306052.chunk.js"></script><script src="/static/js/main.27336089.chunk.js"></script></body></html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#10130f" />
<meta name="description" content="Live Minecraft bot dashboard" />
<title>Mosfet · Minecraft Bot</title>
<link rel="stylesheet" href="/static/css/dashboard.css?v=4" />
<script defer src="/static/js/dashboard.js?v=7"></script>
</head>
<body>
<div class="shell">
<main>
<section class="hero panel">
<div class="hero-main">
<div class="eyebrow">LIVE SESSION <span class="eyebrow-line"></span></div>
<h1 id="bot-name">Mosfet<span class="name-period">.</span></h1>
<p id="session-subtitle" class="session-subtitle">Waiting for the bot connection</p>
</div>
<div class="hero-coordinates">
<div class="coordinate-label">CURRENT POSITION</div>
<div id="position" class="coordinate-value">—</div>
<div id="dimension" class="dimension-value">NO DIMENSION</div>
</div>
<div class="hero-grid" aria-hidden="true"></div>
<div class="hero-glow" aria-hidden="true"></div>
</section>
<section class="stats-grid" aria-label="Bot status">
<article class="stat-card panel">
<div class="stat-top"><span class="stat-label">HEALTH</span><span class="stat-icon heart">♥</span></div>
<div class="stat-value"><span id="health-value">—</span><small>/ 20</small></div>
<div class="meter"><span id="health-meter" class="meter-fill health-fill"></span></div>
</article>
<article class="stat-card panel">
<div class="stat-top"><span class="stat-label">HUNGER</span><span class="stat-icon food">◆</span></div>
<div class="stat-value"><span id="food-value">—</span><small>/ 20</small></div>
<div class="meter"><span id="food-meter" class="meter-fill food-fill"></span></div>
</article>
<article class="stat-card panel">
<div class="stat-top"><span class="stat-label">MOVEMENT</span><span class="live-dot"></span></div>
<div id="movement-value" class="stat-value stat-word">IDLE</div>
<div id="movement-detail" class="stat-caption">No active path</div>
</article>
<article class="stat-card panel">
<div class="stat-top"><span class="stat-label">WORLD CACHE</span><span class="stat-icon cache-icon">▦</span></div>
<div class="stat-value"><span id="chunk-count">—</span><small> chunks</small></div>
<div id="chunk-detail" class="stat-caption">Waiting for world data</div>
</article>
</section>
<section class="content-grid">
<section class="inventory-panel panel">
<div class="section-heading">
<div>
<div class="eyebrow">PLAYER STORAGE</div>
<h2>Inventory</h2>
</div>
<div class="inventory-summary">
<span id="inventory-count">0 items</span>
<span class="heading-divider"></span>
<span id="inventory-slots">0 / 46 slots</span>
</div>
</div>
<div id="inventory-warning" class="inventory-warning" hidden>
Some item components are not decoded yet; displayed contents may be partial.
</div>
<div id="inventory-grid" class="inventory-grid" aria-label="Minecraft inventory"></div>
<div class="inventory-legend"><span class="legend-swatch"></span> Empty slot <span class="legend-note">Hover an item for its name and stack size</span></div>
</section>
<aside class="side-column">
<section class="side-panel panel">
<div class="section-heading compact-heading">
<div><div class="eyebrow">MULTIPLAYER</div><h2>Players</h2></div>
<span id="player-count" class="count-badge">0</span>
</div>
<div id="player-list" class="player-list"><div class="empty-state">No player data yet</div></div>
</section>
<section class="side-panel panel">
<div class="section-heading compact-heading">
<div><div class="eyebrow">AUTOMATION</div><h2>Runtime</h2></div>
</div>
<dl class="runtime-list">
<div><dt>Game mode</dt><dd id="game-mode">—</dd></div>
<div><dt>Active job</dt><dd id="job-state">IDLE</dd></div>
<div><dt>Path nodes</dt><dd id="path-length">0</dd></div>
<div><dt>Entities</dt><dd id="entity-count">0 mobs · 0 drops</dd></div>
<div><dt>AFK</dt><dd id="afk-state">NO</dd></div>
</dl>
<div id="movement-error" class="error-box" hidden></div>
</section>
</aside>
</section>
<footer class="footer">
<span class="footer-brand"><span class="footer-mark">■</span> MOSFET / 26.3</span>
<span id="connection-pill" class="connection-pill is-offline"><i></i><span>OFFLINE</span></span>
<span id="last-update">Waiting for API data</span>
</footer>
</main>
</div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
</body>
</html>