Framework State 14

Back to Building Frameworks

Back to Framework State 13
Back to Framework State 15

Title of State:

Adding a Minimap

Goal of Change:

Add a 400×400 minimap HUD in the top-left corner that:

This is purely a visual overlay layer.

PATCH 1 — Add minimap canvas to HTML

Code to Remove

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

Code to Add

286 - 
<div id="hud">READY</div>
<canvas id="minimap" width="400" height="400"
        style="position:absolute; left:12px; top:60px; 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>

PATCH 2 — Add minimap references

Code to Remove

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

Code to Add

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

PATCH 3 — Add drawMinimap() function

Code to Remove

1339 - 
function drawMapNative(){

Code to Add

1339 - 
function drawMinimap(){
  if(!mmCtx) return;

  const MM = 400;
  const scale = MM / MAP_SIZE;

  // clear
  mmCtx.fillStyle = "#0b0f18";
  mmCtx.fillRect(0,0,MM,MM);

  // resources
  if(S.resources){
    for(const r of S.resources){
      if(!r.Revealed) continue;

      const x = r.X * scale;
      const y = r.Y * scale;

      if(r.Type === "WOOD")  mmCtx.fillStyle = "#46c85a";
      if(r.Type === "STONE") mmCtx.fillStyle = "#9a9a9a";
      if(r.Type === "OIL")   mmCtx.fillStyle = "#111111";
      if(r.Type === "ORE")   mmCtx.fillStyle = "#5f5041";

      mmCtx.fillRect(x-2, y-2, 4, 4);
    }
  }

  // entities
  if(S.entities){
    for(const e of S.entities){
      const x = e.X * scale;
      const y = e.Y * scale;

      mmCtx.fillStyle = "#ffffff";
      mmCtx.fillRect(x-3, y-3, 6, 6);
    }
  }

  // camera viewport rectangle
  mmCtx.strokeStyle = "rgba(255,255,255,.9)";
  mmCtx.lineWidth = 1;
  mmCtx.strokeRect(
    S.camX * scale,
    S.camY * scale,
    VIEW * scale,
    VIEW * scale
  );
}

function drawMapNative(){

PATCH 4 — Call minimap render inside draw()

Code to Remove

1410 - 
  // map first (so other debug overlays draw on top)
  drawMapNative();

Code to Add

1410 - 
  // map first
  drawMapNative();

  // minimap (independent overlay)
  drawMinimap();

PATCH 5 — Only render minimap during GAME view

Code to Remove

1339 -
function drawMinimap(){

Code to Add

1339 - 
function drawMinimap(){
  if(S.view !== "GAME") return;

PATCH 6 — Move minimap to TOP RIGHT

Code to Remove

287 - 
<canvas id="minimap" width="400" height="400"
        style="position:absolute; left:12px; top:60px; 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>

Result