Framework State 15

Back to Building Frameworks

Back to Framework State 14
Back to Framework State 16

Title of State:

Adding Object HUD

Goal of Change:

Add a 2nd 400×400 HUD panel directly below the minimap (top-right), used as a Selection HUD that shows details for whatever is currently selected:

Priority:

  1. selected entity (building/vehicle/infantry)
  2. else selected resource
  3. else “No selection”

PATCH 1 — HTML: add selection panel <div> under the minimap

Code to Remove

287 - 
<canvas id="minimap" width="400" height="400"
        style="position:absolute; right:12px; top:12px; width:400px; height:400px;
               background:#000; border:1px solid rgba(255,255,255,.2);
               box-shadow:0 8px 24px rgba(0,0,0,.5);">
</canvas>

Code to Add

287 - 
<canvas id="minimap" width="400" height="400"
        style="position:absolute; right:12px; top:12px; width:400px; height:400px;
               background:#000; border:1px solid rgba(255,255,255,.2);
               box-shadow:0 8px 24px rgba(0,0,0,.5);">
</canvas>

<div id="selhud"
     style="position:absolute; right: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;">
NO SELECTION
</div>

PATCH 2 — JS: bind the selection HUD element

Code to Remove

510 -
const minimap = document.getElementById("minimap");
const mmCtx = minimap.getContext("2d");

Code to Add

510 - 
const minimap = document.getElementById("minimap");
const mmCtx = minimap.getContext("2d");
const selhud = document.getElementById("selhud");

PATCH 3 — JS: add updateSelectionHUD() function

Code to Remove

1350 - 
function drawMinimap(){

Code to Add

1350 - 
function updateSelectionHUD(){
  if(!selhud) return;
  if(S.view !== "GAME"){
    selhud.textContent = "NO SELECTION";
    return;
  }

  // 1 entity selection
  if(S.selectedEntityId){
    const e = S.entities ? S.entities.find(x => x.Id === S.selectedEntityId) : null;
    if(e){
      const tx = (e.TargetX == null) ? "-" : Math.floor(e.TargetX);
      const ty = (e.TargetY == null) ? "-" : Math.floor(e.TargetY);

      selhud.textContent =
        "ENTITY\\n" +
        "Id: " + e.Id + "\\n" +
        "Kind: " + e.Kind + "\\n" +
        "Sprite: " + e.SpriteKey + "\\n" +
        "Owner: " + (e.OwnerColor || "-") + "\\n" +
        "Pos: " + Math.floor(e.X) + "," + Math.floor(e.Y) + "\\n" +
        "Heading: " + (e.Heading ? e.Heading.toFixed(2) : "0.00") + "\\n" +
        "Speed: " + (e.Speed || 0) + "\\n" +
        "Target: " + tx + "," + ty;
      return;
    }
  }

  // 2 resource selection
  if(S.selectedResourceIndex != null && S.selectedResourceIndex >= 0 && S.resources && S.selectedResourceIndex < S.resources.length){
    const r = S.resources[S.selectedResourceIndex];
    selhud.textContent =
      "RESOURCE\\n" +
      "Index: " + S.selectedResourceIndex + "\\n" +
      "Type: " + r.Type + "\\n" +
      "Pos: " + Math.floor(r.X) + "," + Math.floor(r.Y) + "\\n" +
      "Amt: " + Math.floor(r.Remaining) + " / " + Math.floor(r.MaxRemaining) + "\\n" +
      "Hidden: " + (!!r.Hidden) + "\\n" +
      "Revealed: " + (!!r.Revealed) + "\\n" +
      "Gen: " + (r.GenerationRate ?? 0) + " u/s\\n" +
      "Spawn: " + (!!r.SpawnOn) + " @ " + (r.SpawnRate ?? 0) + "%";
    return;
  }

  selhud.textContent = "NO SELECTION";
}

function drawMinimap(){

PATCH 4 — Call Selection HUD updater every frame (GAME only)

Code to Remove

1474 - 
  drawMinimap();

Code to Add

1474 - 
  drawMinimap();
  updateSelectionHUD();

Result