Framework State 17

Title of State:

Adding HUDs

Goal of Change:

• Add HUD3: a 400×400 shadow box under the existing top-left HUD area (left side).
• Add Bottom HUD: a shadow box 1500×250 across the bottom of the viewer.
• Move the current top-left debug text (#hud) into the bottom HUD and stop drawing it top-left.

PATCH 1 — HTML: hide #hud, add LEFT HUD (400×400) + BOTTOM HUD (1500×250)

Code to Remove

286 -
<div id="hud">READY</div>

Code to Add

286 - 
<div id="hud" style="display:none;">READY</div>

<div id="hudLeft"
     style="position:absolute; left:12px; top:424px; width:400px; height:400px;
            padding:10px; box-sizing:border-box;
            background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
            box-shadow:0 8px 24px rgba(0,0,0,.5);
            color:#e9f0ff; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space:pre; overflow:hidden;">
LEFT HUD
</div>

<div id="bottomhud"
     style="position:absolute; left:0px; bottom:0px; width:1500px; height:250px;
            padding:12px; box-sizing:border-box;
            background:rgba(0,0,0,.55); border-top:1px solid rgba(255,255,255,.18);
            box-shadow:0 -8px 24px rgba(0,0,0,.5);
            color:#e9f0ff; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space:pre; overflow:hidden;">
READY
</div>

---

PATCH 2 — JS: keep hud reference, add bottomhud

Code to Remove

529 - 
const hud = document.getElementById("hud");

Code to Add

529 - 
const hud = document.getElementById("hud");
const bottomhud = document.getElementById("bottomhud");

---

PATCH 3 — JS: move setHUD output to bottomhud (fallback to hud)

Code to Remove

621 - 
function setHUD(lines){ hud.textContent = lines; }

Code to Add

621 -
function setHUD(lines){
  if(bottomhud) bottomhud.textContent = lines;
  else hud.textContent = lines;
}

---

Move the “left HUD” under the two right-side HUDs

Code to Remove

288 - 
<div id="hudLeft"
     style="position:absolute; left:12px; top:424px; width:400px; height:400px;
            padding:10px; box-sizing:border-box;
            background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
            box-shadow:0 8px 24px rgba(0,0,0,.5);
            color:#e9f0ff; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space:pre; overflow:hidden;">
LEFT HUD
</div>

Code to Add

288 -
<div id="hudLeft"
     style="position:absolute; right:12px; top:836px; width:400px; height:400px;
            padding:10px; box-sizing:border-box;
            background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
            box-shadow:0 8px 24px rgba(0,0,0,.5);
            color:#e9f0ff; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space:pre; overflow:hidden;">
LEFT HUD
</div>

---

PATCH 2 — Keep the bottom HUD inside the viewer (with margins)

Code to Remove

298 - 
<div id="bottomhud"
     style="position:absolute; left:0px; bottom:0px; width:1500px; height:250px;
            padding:12px; box-sizing:border-box;
            background:rgba(0,0,0,.55); border-top:1px solid rgba(255,255,255,.18);
            box-shadow:0 -8px 24px rgba(0,0,0,.5);
            color:#e9f0ff; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space:pre; overflow:hidden;">
READY
</div>

Code to Add

298 -
<div id="bottomhud"
     style="position:absolute; left:12px; bottom:12px; width:1476px; height:250px;
            padding:12px; box-sizing:border-box;
            background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
            box-shadow:0 -8px 24px rgba(0,0,0,.5);
            color:#e9f0ff; font:12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            white-space:pre; overflow:hidden;">
READY
</div>

---

Result