Title of State:
Upgrade Menu
Goal of Change:
- add start game formatting
- add map images to menu
Replace the Start Game button HTML
Code to Remove
556 -
<button id="btnStartGame" class="btnPrimary" type="button" disabled>START GAME</button>
Code to Add
556 -
<button id="btnStartGame" class="rr-start" type="button" disabled>START GAME</button>
Add the START GAME “glow text” CSS
Code to Remove
119 -
.rr-begin:active{
transform: translateY(0px) scale(0.99);
}
Code to Add
119 -
.rr-begin:active{
transform: translateY(0px) scale(0.99);
}
/* START GAME: same vibe as BEGIN? */
.rr-start{
background:transparent;
border:none;
padding:0;
margin-top:6px;
color:#ffe900;
font-weight:950;
font-size:40px;
letter-spacing:6px;
cursor:pointer;
user-select:none;
text-shadow:
0 2px 0 rgba(0,0,0,.55),
0 0 18px rgba(255,233,0,.65),
0 0 60px rgba(255,233,0,.22);
transition: color .18s ease, text-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.rr-start:hover{
color:#ff2a2a;
text-shadow:
0 2px 0 rgba(0,0,0,.60),
0 0 18px rgba(255,42,42,.72),
0 0 60px rgba(255,42,42,.22);
transform: translateY(-1px);
}
.rr-start:active{
transform: translateY(0px) scale(0.99);
}
/* Disabled state: dim + no hover behavior */
.rr-start:disabled{
opacity:0.28;
cursor:not-allowed;
text-shadow:none;
transform:none;
}
.rr-start:disabled:hover{
color:#ffe900;
text-shadow:none;
transform:none;
}
Remove the old disabled styling that was for the old button look
Code to Remove
345 -
#btnStartGame[disabled]{
opacity:.45;
cursor:not-allowed;
}
Code to Add
345 -
/* disabled handled by .rr-start:disabled */
CSS: make map buttons layout icon + text
Code to Remove
192 -
.mapCard{
cursor:pointer;
text-align:left;
padding:16px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#e9f0ff;
min-height:130px;
}
Code to Add
192 -
.mapCard{
cursor:pointer;
padding:16px;
border-radius:14px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
color:#e9f0ff;
min-height:130px;
display:flex;
align-items:center;
gap:14px;
text-align:left;
}
.mapIcon{
width:50px;
height:50px;
flex:0 0 50px;
image-rendering:auto;
}
.mapText{
display:flex;
flex-direction:column;
gap:6px;
}
Grass button HTML
Code to Remove
447 -
<button class="mapCard" id="mapGrass" type="button">
<div class="mapName">Grass</div>
<div class="mapMeta">5120×5120 (4 tiles)</div>
</button>
Code to Add
447 -
<button class="mapCard" id="mapGrass" type="button">
<img class="mapIcon" src="https://chrisdeasy.com/wp-content/uploads/image-3844.png" width="50" height="50" alt="Grass" />
<div class="mapText">
<div class="mapName">Grass</div>
<div class="mapMeta">5120×5120</div>
</div>
</button>
Sand button HTML
Code to Remove
455 -
<button class="mapCard" id="mapSand" type="button">
<div class="mapName">Sand</div>
<div class="mapMeta">5120×5120 (4 tiles)</div>
</button>
Code to Add
455 -
<button class="mapCard" id="mapSand" type="button">
<img class="mapIcon" src="https://chrisdeasy.com/wp-content/uploads/image-3845.png" width="50" height="50" alt="Sand" />
<div class="mapText">
<div class="mapName">Sand</div>
<div class="mapMeta">5120×5120</div>
</div>
</button>
Snow button HTML
Code to Remove
463 -
<button class="mapCard" id="mapSnow" type="button">
<div class="mapName">Snow</div>
<div class="mapMeta">5120×5120 (4 tiles)</div>
</button>
Code to Add
463 -
<button class="mapCard" id="mapSnow" type="button">
<img class="mapIcon" src="https://chrisdeasy.com/wp-content/uploads/image-3846.png" width="50" height="50" alt="Snow" />
<div class="mapText">
<div class="mapName">Snow</div>
<div class="mapMeta">5120×5120</div>
</div>
</button>
Menu panel fills stage with 20px buffer
Code to Remove
169 -
/* Menu panel size */
.menuPanel{
width:1500px;
height:900px;
position:relative;
display:flex;
flex-direction:column;
}
Code to Add
169 -
/* Menu panel fills stage with 20px buffer on all sides (stage is 1500×1500) */
.menuPanel{
width:1460px; /* 1500 - (20*2) */
height:1460px; /* 1500 - (20*2) */
position:relative;
display:flex;
flex-direction:column;
}
Add centered menu title + section title, and reorder controls
Code to Remove
60 -
.panelHeader{
padding:24px 26px 0 26px;
}
.panelTitle{
font-size:28px;
letter-spacing:.3px;
}
.panelSub{
margin-top:8px;
font-size:13px;
opacity:.85;
}
Code to Add
60 -
.panelHeader{
padding:26px 26px 0 26px;
text-align:center;
}
.panelTitle{
font-size:34px;
letter-spacing:.3px;
font-weight:900;
color:#1ea7ff; /* bright blue */
}
.panelSub{
margin-top:10px;
font-size:20px;
letter-spacing:.2px;
color:#ffffff;
opacity:0.95;
}
HTML: change header text + move START GAME + add “Map Selection” label
Code to Remove
445 -
<div class="panelHeader">
<div class="panelTitle">MENU</div>
<div class="panelSub">Start the game</div>
</div>
<div class="menuBody">
<div class="menuGrid">
Code to Add
445 -
<div class="panelHeader">
<div class="panelTitle">Ranger Ranch Menu</div>
<div class="panelSub">Map Selection</div>
</div>
<div class="menuBody">
<div class="menuGrid">
Code to Remove
478 -
<div class="seedRow">
<div class="seedLabel">Seed</div>
<input id="seedInput" class="seedInput" type="number" step="1" value="12345" />
</div>
<div class="resPanel">
<div class="resHeader">Resources</div>
<label class="chkRow">
<input id="resEnable" type="checkbox" checked />
<span>Enable Resources</span>
</label>
<div class="resGrid">
<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>
<span class="miniLabel">#</span>
<input id="resOreCount" class="countInput" type="number" step="1" min="0" value="40" />
<span class="miniLabel">Avg</span>
<input id="resOreAvg" class="numInput" type="number" step="1" min="0" value="700" />
<span class="miniLabel">Var%</span>
<input id="resOreVar" class="pctInput" type="number" step="1" min="0" max="100" value="20" />
<span class="miniLabel">Max</span>
<input id="resOreMax" class="numInput" type="number" step="1" min="1" value="1200" />
<span class="miniLabel">Gen%</span>
<input id="resOreGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resOreSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resOreSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</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>
<span class="miniLabel">#</span>
<input id="resStoneCount" class="countInput" type="number" step="1" min="0" value="35" />
<span class="miniLabel">Avg</span>
<input id="resStoneAvg" class="numInput" type="number" step="1" min="0" value="900" />
<span class="miniLabel">Var%</span>
<input id="resStoneVar" class="pctInput" type="number" step="1" min="0" max="100" value="15" />
<span class="miniLabel">Max</span>
<input id="resStoneMax" class="numInput" type="number" step="1" min="1" value="1600" />
<span class="miniLabel">Gen%</span>
<input id="resStoneGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resStoneSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resStoneSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</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>
<span class="miniLabel">#</span>
<input id="resOilCount" class="countInput" type="number" step="1" min="0" value="12" />
<span class="miniLabel">Avg</span>
<input id="resOilAvg" class="numInput" type="number" step="1" min="0" value="1200" />
<span class="miniLabel">Var%</span>
<input id="resOilVar" class="pctInput" type="number" step="1" min="0" max="100" value="25" />
<span class="miniLabel">Max</span>
<input id="resOilMax" class="numInput" type="number" step="1" min="1" value="2500" />
<span class="miniLabel">Gen%</span>
<input id="resOilGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resOilSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resOilSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</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>
<span class="miniLabel">#</span>
<input id="resWoodCount" class="countInput" type="number" step="1" min="0" value="55" />
<span class="miniLabel">Avg</span>
<input id="resWoodAvg" class="numInput" type="number" step="1" min="0" value="300" />
<span class="miniLabel">Var%</span>
<input id="resWoodVar" class="pctInput" type="number" step="1" min="0" max="100" value="35" />
<span class="miniLabel">Max</span>
<input id="resWoodMax" class="numInput" type="number" step="1" min="1" value="900" />
<span class="miniLabel">Gen%</span>
<input id="resWoodGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resWoodSpawnOn" type="checkbox" checked />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resWoodSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="5" />
</div>
</div>
</div>
<button id="btnStartGame" class="rr-start" type="button" disabled>START GAME</button>
Code to Add
478 -
<button id="btnStartGame" class="rr-start" type="button" disabled>START GAME</button>
<div class="seedRow">
<div class="seedLabel">Seed</div>
<input id="seedInput" class="seedInput" type="number" step="1" value="12345" />
</div>
<div class="resPanel">
<div class="resHeader">Resources</div>
<label class="chkRow">
<input id="resEnable" type="checkbox" checked />
<span>Enable Resources</span>
</label>
<div class="resGrid">
<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>
<span class="miniLabel">#</span>
<input id="resOreCount" class="countInput" type="number" step="1" min="0" value="40" />
<span class="miniLabel">Avg</span>
<input id="resOreAvg" class="numInput" type="number" step="1" min="0" value="700" />
<span class="miniLabel">Var%</span>
<input id="resOreVar" class="pctInput" type="number" step="1" min="0" max="100" value="20" />
<span class="miniLabel">Max</span>
<input id="resOreMax" class="numInput" type="number" step="1" min="1" value="1200" />
<span class="miniLabel">Gen%</span>
<input id="resOreGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resOreSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resOreSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</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>
<span class="miniLabel">#</span>
<input id="resStoneCount" class="countInput" type="number" step="1" min="0" value="35" />
<span class="miniLabel">Avg</span>
<input id="resStoneAvg" class="numInput" type="number" step="1" min="0" value="900" />
<span class="miniLabel">Var%</span>
<input id="resStoneVar" class="pctInput" type="number" step="1" min="0" max="100" value="15" />
<span class="miniLabel">Max</span>
<input id="resStoneMax" class="numInput" type="number" step="1" min="1" value="1600" />
<span class="miniLabel">Gen%</span>
<input id="resStoneGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resStoneSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resStoneSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</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>
<span class="miniLabel">#</span>
<input id="resOilCount" class="countInput" type="number" step="1" min="0" value="12" />
<span class="miniLabel">Avg</span>
<input id="resOilAvg" class="numInput" type="number" step="1" min="0" value="1200" />
<span class="miniLabel">Var%</span>
<input id="resOilVar" class="pctInput" type="number" step="1" min="0" max="100" value="25" />
<span class="miniLabel">Max</span>
<input id="resOilMax" class="numInput" type="number" step="1" min="1" value="2500" />
<span class="miniLabel">Gen%</span>
<input id="resOilGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resOilSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resOilSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</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>
<span class="miniLabel">#</span>
<input id="resWoodCount" class="countInput" type="number" step="1" min="0" value="55" />
<span class="miniLabel">Avg</span>
<input id="resWoodAvg" class="numInput" type="number" step="1" min="0" value="300" />
<span class="miniLabel">Var%</span>
<input id="resWoodVar" class="pctInput" type="number" step="1" min="0" max="100" value="35" />
<span class="miniLabel">Max</span>
<input id="resWoodMax" class="numInput" type="number" step="1" min="1" value="900" />
<span class="miniLabel">Gen%</span>
<input id="resWoodGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resWoodSpawnOn" type="checkbox" checked />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%</span>
<input id="resWoodSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="5" />
</div>
</div>
</div>
Add “Seed” section title + explanation + better seed controls/layout
Code to Remove
235-
.menuActions{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding-top:4px;
}
Code to Add
235 -
.menuActions{
width:100%;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
padding-top:4px;
}
/* Menu section title + helper text */
.menuSectionTitle{
width:100%;
text-align:center;
font-size:20px; /* matches Map Selection size */
letter-spacing:.2px;
color:#ffffff;
opacity:0.95;
margin-top:10px;
}
.menuHelp{
width:100%;
max-width:980px;
text-align:center;
font-size:13px;
line-height:1.35;
color:rgba(233,240,255,.92);
opacity:0.92;
margin-top:-2px;
margin-bottom:2px;
}
/* Improved seed controls */
.seedPanel{
width:100%;
max-width:980px;
padding:12px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}
.seedInput{
width:220px; /* bigger */
padding:12px 12px;
border-radius:10px;
border:1px solid rgba(255,255,255,.18);
background:rgba(0,0,0,.25);
color:#e9f0ff;
font-size:16px;
outline:none;
}
.seedBtn{
cursor:pointer;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.10);
color:#e9f0ff;
padding:12px 14px;
border-radius:12px;
font-size:14px;
letter-spacing:.2px;
user-select:none;
}
.seedBtn:hover{ background:rgba(255,255,255,.14); }
.seedBtn:active{ transform: translateY(1px); }
.seedBtn.secondary{
background:rgba(0,0,0,.22);
border-color:rgba(255,255,255,.14);
opacity:0.95;
}
.seedBtn.secondary:hover{ background:rgba(0,0,0,.28); }
HTML: replace the old seed row with title + explanation + buttons
Code to Remove
546 -
<div class="seedRow">
<div class="seedLabel">Seed</div>
<input id="seedInput" class="seedInput" type="number" step="1" value="12345" />
</div>
Code to Add
546 -
<div class="menuSectionTitle">Seed</div>
<div class="menuHelp">
The seed is the number used to generate this session’s world. Same map + same seed = same resource layout.
Change it for a fresh roll. Use any whole number (negative allowed). Press Enter to apply.
</div>
<div class="seedPanel">
<input id="seedInput" class="seedInput" type="number" step="1" value="12345" />
<button id="btnSeedApply" class="seedBtn" type="button">Apply</button>
<button id="btnSeedRandom" class="seedBtn secondary" type="button">Random</button>
<button id="btnSeedReset" class="seedBtn secondary" type="button">Reset</button>
</div>
JS: wire up Apply/Random/Reset buttons (no behavior change elsewhere)
Code to Remove
734 -
const seedInput = document.getElementById("seedInput");
Code to Add
734 -
const seedInput = document.getElementById("seedInput");
const btnSeedApply = document.getElementById("btnSeedApply");
const btnSeedRandom = document.getElementById("btnSeedRandom");
const btnSeedReset = document.getElementById("btnSeedReset");
JS: add click handlers for the new buttons
Code to Remove
928 -
seedInput.addEventListener("change", ()=>{
reseed(seedInput.value);
});
seedInput.addEventListener("keydown", (e)=>{
if(e.key === "Enter"){
reseed(seedInput.value);
}
});
Code to Add
928 -
seedInput.addEventListener("change", ()=>{
reseed(seedInput.value);
});
seedInput.addEventListener("keydown", (e)=>{
if(e.key === "Enter"){
reseed(seedInput.value);
}
});
if(btnSeedApply){
btnSeedApply.addEventListener("click", ()=>{
reseed(seedInput.value);
});
}
if(btnSeedRandom){
btnSeedRandom.addEventListener("click", ()=>{
// random 32-bit signed-ish range, then normalized by reseed()
const v = (Math.floor(Math.random() * 0x7fffffff));
seedInput.value = String(v);
reseed(seedInput.value);
});
}
if(btnSeedReset){
btnSeedReset.addEventListener("click", ()=>{
seedInput.value = "12345";
reseed(seedInput.value);
});
}
Resources header becomes a real section + adds explanation + legend styles (CSS)
Code to Remove
344 -
.resHeader{
font-size:13px;
opacity:.9;
margin-bottom:8px;
}
Code to Add
344 -
.resHeader{
font-size:16px;
font-weight:800;
letter-spacing:.2px;
opacity:0.98;
margin-bottom:6px;
}
.resHelp{
margin:6px 0 10px 0;
font-size:12px;
line-height:1.35;
color:rgba(233,240,255,.92);
opacity:0.92;
text-align:left;
}
.resLegend{
width:100%;
margin-top:8px;
margin-bottom:10px;
padding:8px 10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.14);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.resLegend .legendRight{
display:flex;
align-items:center;
gap:14px;
opacity:0.82;
font-size:12px;
flex-wrap:wrap;
}
.resLegend .legendRight span{ white-space:nowrap; }
Replace the top of the Resources panel (HTML)
Code to Remove
595 -
<div class="resPanel">
<div class="resHeader">Resources</div>
<label class="chkRow">
<input id="resEnable" type="checkbox" checked />
<span>Enable Resources</span>
</label>
<div class="resGrid">
Code to Add
595 -
<div class="resPanel">
<div class="resHeader">Resources</div>
<div class="resHelp">
These settings control how resource nodes spawn on the map. Count is how many nodes exist. Start Avg is the typical starting amount per node.
Variance randomizes each node around the average. Cap is the maximum a node can hold. Gen is the change per second (use negatives to drain).
Hidden spawns nodes undiscovered until revealed. Spawn allows a node to create new nearby nodes over time; Rate is chance per second.
</div>
<label class="chkRow">
<input id="resEnable" type="checkbox" checked />
<span>Enable Resources</span>
</label>
<div class="resLegend">
<div class="legendRight">
<span>Count</span>
<span>Start Avg</span>
<span>Variance%</span>
<span>Cap</span>
<span>Gen (u/s)</span>
<span>Spawn</span>
<span>Rate%/s</span>
</div>
</div>
<div class="resGrid">
Fix the per-row labels (HTML)
Code to Remove
633 -
<span class="miniLabel">#</span>
667 -
<span class="miniLabel">#</span>
701 -
<span class="miniLabel">#</span>
735 -
<span class="miniLabel">#</span>
Code to Add
633 -
<span class="miniLabel">Count</span>
667 -
<span class="miniLabel">Count</span>
701 -
<span class="miniLabel">Count</span>
735 -
<span class="miniLabel">Count</span>
“Avg” → “Start Avg”
Code to Remove
636 -
<span class="miniLabel">Avg</span>
670 -
<span class="miniLabel">Avg</span>
704 -
<span class="miniLabel">Avg</span>
738 -
<span class="miniLabel">Avg</span>
Code to Add
636 -
<span class="miniLabel">Start Avg</span>
670 -
<span class="miniLabel">Start Avg</span>
704 -
<span class="miniLabel">Start Avg</span>
738 -
<span class="miniLabel">Start Avg</span>
“Var%” → “Variance%”
Code to Remove
639 -
<span class="miniLabel">Var%</span>
673 -
<span class="miniLabel">Var%</span>
707-
<span class="miniLabel">Var%</span>
741 -
<span class="miniLabel">Var%</span>
Code to Add
639 -
<span class="miniLabel">Variance%</span>
673 -
<span class="miniLabel">Variance%</span>
707-
<span class="miniLabel">Variance%</span>
741 -
<span class="miniLabel">Variance%</span>
“Max” → “Cap”
Code to Remove
642 -
<span class="miniLabel">Max</span>
676 -
<span class="miniLabel">Max</span>
710 -
<span class="miniLabel">Max</span>
744 -
<span class="miniLabel">Max</span>
Code to Add
642 -
<span class="miniLabel">Cap</span>
676 -
<span class="miniLabel">Cap</span>
710 -
<span class="miniLabel">Cap</span>
744 -
<span class="miniLabel">Cap</span>
“Gen%” → “Gen (u/s)”
Code to Remove
645 -
<span class="miniLabel">Gen%</span>
679 -
<span class="miniLabel">Gen%</span>
713 -
<span class="miniLabel">Gen%</span>
747 -
<span class="miniLabel">Gen%</span>
Code to Add
645 -
<span class="miniLabel">Gen (u/s)</span>
679 -
<span class="miniLabel">Gen (u/s)</span>
713 -
<span class="miniLabel">Gen (u/s)</span>
747 -
<span class="miniLabel">Gen (u/s)</span>
“Rate%” → “Rate%/s”
Code to Remove
652 -
<span class="miniLabel">Rate%</span>
686 -
<span class="miniLabel">Rate%</span>
720 -
<span class="miniLabel">Rate%</span>
754 -
<span class="miniLabel">Rate%</span>
Code to Add
652 -
<span class="miniLabel">Rate%/s</span>
686 -
<span class="miniLabel">Rate%/s</span>
720 -
<span class="miniLabel">Rate%/s</span>
754 -
<span class="miniLabel">Rate%/s</span>
Replace the existing .resRow{...} CSS with grid-based row system
Code to Remove
404 -
.resRow{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
padding:10px 10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.18);
flex-wrap:wrap;
}
Code to Add
404 -
/* Grid-based resource row (real UI upgrade) */
.resRowGrid{
display:grid;
grid-template-columns:
150px /* Type */
90px /* Hidden */
105px /* Count */
120px /* Start Avg */
120px /* Variance% */
110px /* Cap */
120px /* Gen (u/s) */
95px /* Spawn */
110px; /* Rate%/s */
gap:10px;
align-items:center;
padding:12px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.18);
}
.resCell{
display:flex;
flex-direction:column;
gap:6px;
min-width:0;
}
.resCellLabel{
font-size:11px;
letter-spacing:.15px;
opacity:.78;
user-select:none;
white-space:nowrap;
}
.resRowGrid input[type="number"]{
width:100%;
box-sizing:border-box;
}
/* Keep checkbox cells aligned */
.resRowGrid .chkRow,
.resRowGrid .spawnRow{
margin:0;
padding:0;
}
/* Hide old per-field inline labels (we remove them in HTML, but this is a safety net) */
.resRowGrid .miniLabel{ display:none; }
Replace the legend so it matches the new columns
Code to Remove
649 -
<div class="resLegend">
<div class="legendRight">
<span>Count</span>
<span>Start Avg</span>
<span>Variance%</span>
<span>Cap</span>
<span>Gen (u/s)</span>
<span>Spawn</span>
<span>Rate%/s</span>
</div>
</div>
Code to Add
649 -
<div class="resLegend">
<div class="legendRight">
<span>Type</span>
<span>Hidden</span>
<span>Count</span>
<span>Start Avg</span>
<span>Variance%</span>
<span>Cap</span>
<span>Gen (u/s)</span>
<span>Spawn</span>
<span>Rate%/s</span>
</div>
</div>
Replace ORE row with grid row + tooltips
Code to Remove
664 -
<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>
<span class="miniLabel">Count</span>
<input id="resOreCount" class="countInput" type="number" step="1" min="0" value="40" />
<span class="miniLabel">Start Avg</span>
<input id="resOreAvg" class="numInput" type="number" step="1" min="0" value="700" />
<span class="miniLabel">Variance%</span>
<input id="resOreVar" class="pctInput" type="number" step="1" min="0" max="100" value="20" />
<span class="miniLabel">Cap</span>
<input id="resOreMax" class="numInput" type="number" step="1" min="1" value="1200" />
<span class="miniLabel">Gen (u/s)</span>
<input id="resOreGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resOreSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%/s</span>
<input id="resOreSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</div>
Code to Add
664 -
<div class="resRowGrid">
<div class="resCell" title="Enable/disable Ore nodes entirely.">
<div class="resCellLabel">Type</div>
<label class="chkRow">
<input id="resOreOn" type="checkbox" checked />
<span>Ore</span>
</label>
</div>
<div class="resCell" title="If Hidden, nodes spawn undiscovered until revealed.">
<div class="resCellLabel">Hidden</div>
<label class="chkRow smallChk">
<input id="resOreHidden" type="checkbox" />
<span>Hidden</span>
</label>
</div>
<div class="resCell" title="How many Ore nodes spawn on the map.">
<div class="resCellLabel">Count</div>
<input id="resOreCount" class="countInput" type="number" step="1" min="0" value="40" />
</div>
<div class="resCell" title="Typical starting amount per node (before variance).">
<div class="resCellLabel">Start Avg</div>
<input id="resOreAvg" class="numInput" type="number" step="1" min="0" value="700" />
</div>
<div class="resCell" title="Randomizes start amount around Avg. 0% = exactly Avg. 100% = wide spread.">
<div class="resCellLabel">Variance%</div>
<input id="resOreVar" class="pctInput" type="number" step="1" min="0" max="100" value="20" />
</div>
<div class="resCell" title="Maximum amount a node can hold.">
<div class="resCellLabel">Cap</div>
<input id="resOreMax" class="numInput" type="number" step="1" min="1" value="1200" />
</div>
<div class="resCell" title="Change per second. Positive grows, negative drains. (Units per second.)">
<div class="resCellLabel">Gen (u/s)</div>
<input id="resOreGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
</div>
<div class="resCell" title="If enabled, this node may spawn a new nearby node over time.">
<div class="resCellLabel">Spawn</div>
<label class="spawnRow">
<input id="resOreSpawnOn" type="checkbox" />
<span>On</span>
</label>
</div>
<div class="resCell" title="Chance per second to spawn a new node near an existing node.">
<div class="resCellLabel">Rate%/s</div>
<input id="resOreSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</div>
</div>
Replace STONE row
Code to Remove
720 -
<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>
<span class="miniLabel">Count</span>
<input id="resStoneCount" class="countInput" type="number" step="1" min="0" value="35" />
<span class="miniLabel">Start Avg</span>
<input id="resStoneAvg" class="numInput" type="number" step="1" min="0" value="900" />
<span class="miniLabel">Variance%</span>
<input id="resStoneVar" class="pctInput" type="number" step="1" min="0" max="100" value="15" />
<span class="miniLabel">Cap</span>
<input id="resStoneMax" class="numInput" type="number" step="1" min="1" value="1600" />
<span class="miniLabel">Gen (u/s)</span>
<input id="resStoneGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resStoneSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%/s</span>
<input id="resStoneSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</div>
Code to Add
720 -
<div class="resRowGrid">
<div class="resCell" title="Enable/disable Stone nodes entirely.">
<div class="resCellLabel">Type</div>
<label class="chkRow">
<input id="resStoneOn" type="checkbox" checked />
<span>Stone</span>
</label>
</div>
<div class="resCell" title="If Hidden, nodes spawn undiscovered until revealed.">
<div class="resCellLabel">Hidden</div>
<label class="chkRow smallChk">
<input id="resStoneHidden" type="checkbox" />
<span>Hidden</span>
</label>
</div>
<div class="resCell" title="How many Stone nodes spawn on the map.">
<div class="resCellLabel">Count</div>
<input id="resStoneCount" class="countInput" type="number" step="1" min="0" value="35" />
</div>
<div class="resCell" title="Typical starting amount per node (before variance).">
<div class="resCellLabel">Start Avg</div>
<input id="resStoneAvg" class="numInput" type="number" step="1" min="0" value="900" />
</div>
<div class="resCell" title="Randomizes start amount around Avg. 0% = exactly Avg. 100% = wide spread.">
<div class="resCellLabel">Variance%</div>
<input id="resStoneVar" class="pctInput" type="number" step="1" min="0" max="100" value="15" />
</div>
<div class="resCell" title="Maximum amount a node can hold.">
<div class="resCellLabel">Cap</div>
<input id="resStoneMax" class="numInput" type="number" step="1" min="1" value="1600" />
</div>
<div class="resCell" title="Change per second. Positive grows, negative drains. (Units per second.)">
<div class="resCellLabel">Gen (u/s)</div>
<input id="resStoneGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
</div>
<div class="resCell" title="If enabled, this node may spawn a new nearby node over time.">
<div class="resCellLabel">Spawn</div>
<label class="spawnRow">
<input id="resStoneSpawnOn" type="checkbox" />
<span>On</span>
</label>
</div>
<div class="resCell" title="Chance per second to spawn a new node near an existing node.">
<div class="resCellLabel">Rate%/s</div>
<input id="resStoneSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</div>
</div>
Replace OIL row
Code to Remove
776 -
<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>
<span class="miniLabel">Count</span>
<input id="resOilCount" class="countInput" type="number" step="1" min="0" value="12" />
<span class="miniLabel">Start Avg</span>
<input id="resOilAvg" class="numInput" type="number" step="1" min="0" value="1200" />
<span class="miniLabel">Variance%</span>
<input id="resOilVar" class="pctInput" type="number" step="1" min="0" max="100" value="25" />
<span class="miniLabel">Cap</span>
<input id="resOilMax" class="numInput" type="number" step="1" min="1" value="2500" />
<span class="miniLabel">Gen (u/s)</span>
<input id="resOilGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resOilSpawnOn" type="checkbox" />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%/s</span>
<input id="resOilSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</div>
Code to Add
776 -
<div class="resRowGrid">
<div class="resCell" title="Enable/disable Oil nodes entirely.">
<div class="resCellLabel">Type</div>
<label class="chkRow">
<input id="resOilOn" type="checkbox" checked />
<span>Oil</span>
</label>
</div>
<div class="resCell" title="If Hidden, nodes spawn undiscovered until revealed.">
<div class="resCellLabel">Hidden</div>
<label class="chkRow smallChk">
<input id="resOilHidden" type="checkbox" checked />
<span>Hidden</span>
</label>
</div>
<div class="resCell" title="How many Oil nodes spawn on the map.">
<div class="resCellLabel">Count</div>
<input id="resOilCount" class="countInput" type="number" step="1" min="0" value="12" />
</div>
<div class="resCell" title="Typical starting amount per node (before variance).">
<div class="resCellLabel">Start Avg</div>
<input id="resOilAvg" class="numInput" type="number" step="1" min="0" value="1200" />
</div>
<div class="resCell" title="Randomizes start amount around Avg. 0% = exactly Avg. 100% = wide spread.">
<div class="resCellLabel">Variance%</div>
<input id="resOilVar" class="pctInput" type="number" step="1" min="0" max="100" value="25" />
</div>
<div class="resCell" title="Maximum amount a node can hold.">
<div class="resCellLabel">Cap</div>
<input id="resOilMax" class="numInput" type="number" step="1" min="1" value="2500" />
</div>
<div class="resCell" title="Change per second. Positive grows, negative drains. (Units per second.)">
<div class="resCellLabel">Gen (u/s)</div>
<input id="resOilGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
</div>
<div class="resCell" title="If enabled, this node may spawn a new nearby node over time.">
<div class="resCellLabel">Spawn</div>
<label class="spawnRow">
<input id="resOilSpawnOn" type="checkbox" />
<span>On</span>
</label>
</div>
<div class="resCell" title="Chance per second to spawn a new node near an existing node.">
<div class="resCellLabel">Rate%/s</div>
<input id="resOilSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="0" />
</div>
</div>
Replace WOOD row
Code to Remove
832 -
<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>
<span class="miniLabel">Count</span>
<input id="resWoodCount" class="countInput" type="number" step="1" min="0" value="55" />
<span class="miniLabel">Start Avg</span>
<input id="resWoodAvg" class="numInput" type="number" step="1" min="0" value="300" />
<span class="miniLabel">Variance%</span>
<input id="resWoodVar" class="pctInput" type="number" step="1" min="0" max="100" value="35" />
<span class="miniLabel">Cap</span>
<input id="resWoodMax" class="numInput" type="number" step="1" min="1" value="900" />
<span class="miniLabel">Gen (u/s)</span>
<input id="resWoodGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
<label class="spawnRow">
<input id="resWoodSpawnOn" type="checkbox" checked />
<span>Spawn</span>
</label>
<span class="miniLabel">Rate%/s</span>
<input id="resWoodSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="5" />
</div>
Code to Add
832 -
<div class="resRowGrid">
<div class="resCell" title="Enable/disable Wood nodes entirely.">
<div class="resCellLabel">Type</div>
<label class="chkRow">
<input id="resWoodOn" type="checkbox" checked />
<span>Wood</span>
</label>
</div>
<div class="resCell" title="If Hidden, nodes spawn undiscovered until revealed.">
<div class="resCellLabel">Hidden</div>
<label class="chkRow smallChk">
<input id="resWoodHidden" type="checkbox" />
<span>Hidden</span>
</label>
</div>
<div class="resCell" title="How many Wood nodes spawn on the map.">
<div class="resCellLabel">Count</div>
<input id="resWoodCount" class="countInput" type="number" step="1" min="0" value="55" />
</div>
<div class="resCell" title="Typical starting amount per node (before variance).">
<div class="resCellLabel">Start Avg</div>
<input id="resWoodAvg" class="numInput" type="number" step="1" min="0" value="300" />
</div>
<div class="resCell" title="Randomizes start amount around Avg. 0% = exactly Avg. 100% = wide spread.">
<div class="resCellLabel">Variance%</div>
<input id="resWoodVar" class="pctInput" type="number" step="1" min="0" max="100" value="35" />
</div>
<div class="resCell" title="Maximum amount a node can hold.">
<div class="resCellLabel">Cap</div>
<input id="resWoodMax" class="numInput" type="number" step="1" min="1" value="900" />
</div>
<div class="resCell" title="Change per second. Positive grows, negative drains. (Units per second.)">
<div class="resCellLabel">Gen (u/s)</div>
<input id="resWoodGen" class="pctInput" type="number" step="1" min="-1000" max="1000" value="0" />
</div>
<div class="resCell" title="If enabled, this node may spawn a new nearby node over time.">
<div class="resCellLabel">Spawn</div>
<label class="spawnRow">
<input id="resWoodSpawnOn" type="checkbox" checked />
<span>On</span>
</label>
</div>
<div class="resCell" title="Chance per second to spawn a new node near an existing node.">
<div class="resCellLabel">Rate%/s</div>
<input id="resWoodSpawnRate" class="pctInput" type="number" step="1" min="0" max="100" value="5" />
</div>
</div>
HTML: Replace the current legend block with a grid legend with explanations
Code to Remove
649 -
<div class="resLegend">
<div class="legendRight">
<span>Type</span>
<span>Hidden</span>
<span>Count</span>
<span>Start Avg</span>
<span>Variance%</span>
<span>Cap</span>
<span>Gen (u/s)</span>
<span>Spawn</span>
<span>Rate%/s</span>
</div>
</div>
Code to Add
649 -
<div class="resLegendGrid">
<div class="resLegendCell"><div class="resLegendTitle">Type</div><div class="resLegendDesc">Resource kind</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Hidden</div><div class="resLegendDesc">Spawn unrevealed</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Count</div><div class="resLegendDesc"># of nodes</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Start Avg</div><div class="resLegendDesc">Typical start amount</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Variance%</div><div class="resLegendDesc">± around avg</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Cap</div><div class="resLegendDesc">Max per node</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Gen (u/s)</div><div class="resLegendDesc">Units per second</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Spawn</div><div class="resLegendDesc">Allow new nodes</div></div>
<div class="resLegendCell"><div class="resLegendTitle">Rate%/s</div><div class="resLegendDesc">Chance per second</div></div>
</div>
CSS: Delete the old flex legend styles and replace with grid legend styles
Code to Remove
361 -
.resLegend{
width:100%;
margin-top:8px;
margin-bottom:10px;
padding:8px 10px;
border-radius:10px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.14);
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
flex-wrap:wrap;
}
.resLegend .legendRight{
display:flex;
align-items:center;
gap:14px;
opacity:0.82;
font-size:12px;
flex-wrap:wrap;
}
.resLegend .legendRight span{ white-space:nowrap; }
Code to Add
361 -
/* Legend that matches resRowGrid columns (REAL spacing) */
.resLegendGrid{
width:100%;
margin-top:8px;
margin-bottom:10px;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(255,255,255,.10);
background:rgba(0,0,0,.14);
display:grid;
grid-template-columns:
150px /* Type */
90px /* Hidden */
105px /* Count */
120px /* Start Avg */
120px /* Variance% */
110px /* Cap */
120px /* Gen (u/s) */
95px /* Spawn */
110px; /* Rate%/s */
gap:10px;
align-items:start;
}
.resLegendCell{
display:flex;
flex-direction:column;
gap:4px;
min-width:0;
}
.resLegendTitle{
font-size:12px;
font-weight:800;
letter-spacing:.15px;
opacity:0.95;
white-space:nowrap;
}
.resLegendDesc{
font-size:11px;
line-height:1.15;
opacity:0.62;
}
Code to Remove
Code to Add
Code to Remove
Code to Add
Result