Framework State 10

Title of State:

Resource State & Visibility

Goal of Change:

resources can exist but not be visible. We do this with a minimal visibility model:

• Each node gets Hidden: true/false
• Each node gets Revealed: true/false
• Rendering + click selection only consider nodes where Revealed === true
• In this slice we only spawn hidden ones (Oil by default, optional % later)
• No discovery mechanic yet (that comes next slice). For now we add a debug key to reveal all, so you can verify the pipeline

PATCH 1 — Resource nodes: add Hidden/Revealed flags on generation

Code to Remove

613 - 
      const node = {
        Type: type,
        X: randRange(minX, maxX),
        Y: randRange(minY, maxY),
        Radius: 16,
      };

Code to Add

613 - 
      const node = {
        Type: type,
        X: randRange(minX, maxX),
        Y: randRange(minY, maxY),
        Radius: 16,

        Hidden: false,
        Revealed: true,
      };

---

PATCH 2 — Make Oil spawn hidden by default

Code to Remove

628 - 
  if(S.resourceSettings.Oil.Enabled)   pushN("OIL",   S.resourceSettings.Oil.Count)

Code to Add

628 - 
  if(S.resourceSettings.Oil.Enabled){
    const before = S.resources.length;
    pushN("OIL", S.resourceSettings.Oil.Count);
    // mark oil nodes as hidden/unrevealed
    for(let i=before;i<S.resources.length;i++){
      S.resources[i].Hidden = true;
      S.resources[i].Revealed = false;
    }
  }

---

PATCH 3 — Drawing: skip unrevealed nodes

Code to Remove

703 - 
  for(const n of S.resources){

Code to Add

703 - 
  for(const n of S.resources){
    if(n.Revealed !== true) continue;

---

PATCH 4 — Click selection: only select revealed nodes

Code to Remove

648 - 
    const n = S.resources[i];

Code to Add

648 - 
    const n = S.resources[i];
    if(n.Revealed !== true) continue;

---

PATCH 5 — HUD: show how many are hidden/revealed (sanity)

Code to Remove

838 - 
  `\\nRES: ${S.resources ? S.resources.length : 0}` +

Code to Add

838 - 
  `\\nRES: ${S.resources ? S.resources.length : 0}` +
  ` (shown: ${S.resources ? S.resources.filter(r=>r.Revealed===true).length : 0})` +

---

PATCH 6 — Debug reveal toggle (press R to reveal all / hide all hidden)

Code to Remove

437 - 
window.addEventListener("keydown", (e)=>{
  S.keys[e.code] = true;

  if(e.code==="KeyP"){ togglePause(); }
  if(e.code==="Space"){ e.preventDefault(); onSpace(); }
});

Code to Add

437 - 
window.addEventListener("keydown", (e)=>{
  S.keys[e.code] = true;

  if(e.code==="KeyP"){ togglePause(); }
  if(e.code==="Space"){ e.preventDefault(); onSpace(); }

  // Debug: reveal all resources (including hidden oil)
  if(e.code==="KeyR"){
    if(S.resources && S.resources.length){
      for(const n of S.resources){
        n.Revealed = true;
      }
    }
  }
});

---

PATCH 7 — MENU HTML: add 4 hidden checkboxes (one per resource)

Code to Remove

291 - 
                <div class="resRow">
                  <label class="chkRow">
                    <input id="resOreOn" type="checkbox" checked />
                    <span>Ore</span>
                  </label>
                  <input id="resOreCount" class="countInput" type="number" step="1" min="0" value="40" />
                </div>

                <div class="resRow">
                  <label class="chkRow">
                    <input id="resStoneOn" type="checkbox" checked />
                    <span>Stone</span>
                  </label>
                  <input id="resStoneCount" class="countInput" type="number" step="1" min="0" value="35" />
                </div>

                <div class="resRow">
                  <label class="chkRow">
                    <input id="resOilOn" type="checkbox" checked />
                    <span>Oil</span>
                  </label>
                  <input id="resOilCount" class="countInput" type="number" step="1" min="0" value="12" />
                </div>

                <div class="resRow">
                  <label class="chkRow">
                    <input id="resWoodOn" type="checkbox" checked />
                    <span>Wood</span>
                  </label>
                  <input id="resWoodCount" class="countInput" type="number" step="1" min="0" value="55" />
                </div>

Code to Add

291 - 
                <div class="resRow">
                  <label class="chkRow">
                    <input id="resOreOn" type="checkbox" checked />
                    <span>Ore</span>
                  </label>

                  <label class="chkRow smallChk">
                    <input id="resOreHidden" type="checkbox" />
                    <span>Hidden</span>
                  </label>

                  <input id="resOreCount" class="countInput" type="number" step="1" min="0" value="40" />
                </div>

                <div class="resRow">
                  <label class="chkRow">
                    <input id="resStoneOn" type="checkbox" checked />
                    <span>Stone</span>
                  </label>

                  <label class="chkRow smallChk">
                    <input id="resStoneHidden" type="checkbox" />
                    <span>Hidden</span>
                  </label>

                  <input id="resStoneCount" class="countInput" type="number" step="1" min="0" value="35" />
                </div>

                <div class="resRow">
                  <label class="chkRow">
                    <input id="resOilOn" type="checkbox" checked />
                    <span>Oil</span>
                  </label>

                  <label class="chkRow smallChk">
                    <input id="resOilHidden" type="checkbox" checked />
                    <span>Hidden</span>
                  </label>

                  <input id="resOilCount" class="countInput" type="number" step="1" min="0" value="12" />
                </div>

                <div class="resRow">
                  <label class="chkRow">
                    <input id="resWoodOn" type="checkbox" checked />
                    <span>Wood</span>
                  </label>

                  <label class="chkRow smallChk">
                    <input id="resWoodHidden" type="checkbox" />
                    <span>Hidden</span>
                  </label>

                  <input id="resWoodCount" class="countInput" type="number" step="1" min="0" value="55" />
                </div>

---

PATCH 8 — CSS: make the “Hidden” checkbox compact

Code to Remove

172 - 
  .chkRow{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    opacity:.95;
    user-select:none;
  }

Code to Add

172 - 
  .chkRow{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    opacity:.95;
    user-select:none;
  }
  .smallChk{
    opacity:.85;
    font-size:12px;
    gap:8px;
    white-space:nowrap;
  }

---

PATCH 9 — JS: grab the 4 new hidden controls

Code to Remove

383 - 
const resEnable   = document.getElementById("resEnable");
const resOreOn    = document.getElementById("resOreOn");
const resStoneOn  = document.getElementById("resStoneOn");
const resOilOn    = document.getElementById("resOilOn");
const resWoodOn   = document.getElementById("resWoodOn");

Code to Add

383 - 
const resEnable   = document.getElementById("resEnable");
const resOreOn    = document.getElementById("resOreOn");
const resStoneOn  = document.getElementById("resStoneOn");
const resOilOn    = document.getElementById("resOilOn");
const resWoodOn   = document.getElementById("resWoodOn");

const resOreHidden   = document.getElementById("resOreHidden");
const resStoneHidden = document.getElementById("resStoneHidden");
const resOilHidden   = document.getElementById("resOilHidden");
const resWoodHidden  = document.getElementById("resWoodHidden");

---

PATCH 10 — JS: read hidden settings into readResourceSettings()

Code to Remove

634 - 
  return {
    Enabled: on,
    Ore:   { Enabled: on && oreOn,   Count: oreCount },
    Stone: { Enabled: on && stoneOn, Count: stoneCount },
    Oil:   { Enabled: on && oilOn,   Count: oilCount },
    Wood:  { Enabled: on && woodOn,  Count: woodCount },
  };

Code to Add

634 - 
  return {
    Enabled: on,
    Ore:   { Enabled: on && oreOn,   Count: oreCount,   Hidden: !!resOreHidden.checked },
    Stone: { Enabled: on && stoneOn, Count: stoneCount, Hidden: !!resStoneHidden.checked },
    Oil:   { Enabled: on && oilOn,   Count: oilCount,   Hidden: !!resOilHidden.checked },
    Wood:  { Enabled: on && woodOn,  Count: woodCount,  Hidden: !!resWoodHidden.checked },
  };

---

PATCH 11 — JS: apply hidden flags during generation (replace the Oil special-case)

Code to Remove

670 - 
  if(S.resourceSettings.Ore.Enabled)   pushN("ORE",   S.resourceSettings.Ore.Count);
  if(S.resourceSettings.Stone.Enabled) pushN("STONE", S.resourceSettings.Stone.Count);
  if(S.resourceSettings.Oil.Enabled){
    const before = S.resources.length;
    pushN("OIL", S.resourceSettings.Oil.Count);
    // mark oil nodes as hidden/unrevealed
    for(let i=before;i<S.resources.length;i++){
      S.resources[i].Hidden = true;
      S.resources[i].Revealed = false;
    }
  }
  if(S.resourceSettings.Wood.Enabled)  pushN("WOOD",  S.resourceSettings.Wood.Count);

Code to Add

670 - 
  const applyHidden = (typeKey, before)=>{
    const cfg = S.resourceSettings[typeKey];
    if(!cfg || !cfg.Hidden) return;
    for(let i=before;i<S.resources.length;i++){
      if(S.resources[i].Type === typeKey.toUpperCase()){
        S.resources[i].Hidden = true;
        S.resources[i].Revealed = false;
      }
    }
  };

  if(S.resourceSettings.Ore.Enabled){
    const before = S.resources.length;
    pushN("ORE", S.resourceSettings.Ore.Count);
    applyHidden("Ore", before);
  }

  if(S.resourceSettings.Stone.Enabled){
    const before = S.resources.length;
    pushN("STONE", S.resourceSettings.Stone.Count);
    applyHidden("Stone", before);
  }

  if(S.resourceSettings.Oil.Enabled){
    const before = S.resources.length;
    pushN("OIL", S.resourceSettings.Oil.Count);
    applyHidden("Oil", before);
  }

  if(S.resourceSettings.Wood.Enabled){
    const before = S.resources.length;
    pushN("WOOD", S.resourceSettings.Wood.Count);
    applyHidden("Wood", before);
  }

---

Result