`;
+ // 1. If a specific sector is selected: Render the Sector Executive Summary Banner
+ if (selectedSector !== 'all' && currentSectorObj) {
+ const stats = engine?.sectorStats?.[selectedSector] || { revenueRate: 0, unitsRate: 0, activeLines: 0, totalProduced: 0 };
+ html += `
+
+
+
+
+
+
+
INDUSTRY OUTPUT OVERVIEW
+
${currentSectorObj.name}
+
${currentSectorObj.description}
+
+
+
+
+ Wholesale Output Rate:
+ +$${fmtNum(stats.revenueRate, 2)}/s
+
+
+ Production Velocity:
+ ${fmtNum(stats.unitsRate, 1)} units/s
+
+
+ Operating Lines:
+ ${stats.activeLines} active
+
+
+ Lifetime Sector Output:
+ ${fmtNum(stats.totalProduced, 0)} units
+
+
+
+ `;
+ }
+
+ // 2. If 'All Sectors' is selected: Render the Industry Output Grid summarizing all sectors
+ if (selectedSector === 'all') {
+ html += `
+
+ ${SECTORS.map(s => {
+ const stats = engine?.sectorStats?.[s.id] || { revenueRate: 0, unitsRate: 0, activeLines: 0 };
+ return `
+
+
+
+
+ Output Rate
+ +$${fmtNum(stats.revenueRate, 2)}/s
+
+
+ Velocity
+ ${fmtNum(stats.unitsRate, 1)} u/s
+
+
+
+ `;
+ }).join('')}
+
+ `;
+ }
+
+ html += `
`;
+
for (const p of filteredProducts) {
const pState = state.products[p.id] || { unlocked: false, lines: 0, stock: 0, cycleProgress: 0, isBottlenecked: false };
const sector = SECTORS.find(s => s.id === p.sector);
@@ -213,6 +289,10 @@ export function mountProductionFloor(container, state, onAction) {
btn.onclick = () => onAction({ type: 'SELECT_SECTOR', sector: btn.dataset.sector });
});
+ container.querySelectorAll('.sector-mini-card').forEach(card => {
+ card.onclick = () => onAction({ type: 'SELECT_SECTOR', sector: card.dataset.sector });
+ });
+
container.querySelectorAll('.facility-card').forEach(card => {
card.onclick = (e) => {
if (e.target.closest('button')) return;
@@ -244,15 +324,73 @@ export function mountProductionFloor(container, state, onAction) {
/**
* Fine-grained in-place DOM updates (0% layout thrashing, 0% DOM teardown)
*/
-export function updateProductionFloor(container, state) {
+export function updateProductionFloor(container, state, engine) {
const buyMode = state.buyMode || '1';
const cash = state.cash;
+ const selectedSector = state.selectedSector || 'all';
+ // 1. Update Sector Navigation Pills Output Rates
+ for (const s of SECTORS) {
+ const stats = engine?.sectorStats?.[s.id];
+ if (stats) {
+ const elPillRate = document.getElementById(`pill-rate-${s.id}`);
+ if (elPillRate) {
+ const text = `+$${fmtNum(stats.revenueRate, 2)}/s`;
+ if (elPillRate.textContent !== text) elPillRate.textContent = text;
+ }
+ // Update All-Sectors Mini Cards if on 'all'
+ if (selectedSector === 'all') {
+ const elMiniRev = document.getElementById(`all-sec-rev-${s.id}`);
+ if (elMiniRev) {
+ const text = `+$${fmtNum(stats.revenueRate, 2)}/s`;
+ if (elMiniRev.textContent !== text) elMiniRev.textContent = text;
+ }
+ const elMiniUnits = document.getElementById(`all-sec-units-${s.id}`);
+ if (elMiniUnits) {
+ const text = `${fmtNum(stats.unitsRate, 1)} u/s`;
+ if (elMiniUnits.textContent !== text) elMiniUnits.textContent = text;
+ }
+ const elMiniLines = document.getElementById(`all-sec-lines-${s.id}`);
+ if (elMiniLines) {
+ const text = `${stats.activeLines} lines active`;
+ if (elMiniLines.textContent !== text) elMiniLines.textContent = text;
+ }
+ }
+ }
+ }
+
+ // 2. Update Sector Summary Banner if viewing a single sector
+ if (selectedSector !== 'all') {
+ const stats = engine?.sectorStats?.[selectedSector];
+ if (stats) {
+ const elRev = document.getElementById('sec-sum-rev');
+ if (elRev) {
+ const text = `+$${fmtNum(stats.revenueRate, 2)}/s`;
+ if (elRev.textContent !== text) elRev.textContent = text;
+ }
+ const elUnits = document.getElementById('sec-sum-units');
+ if (elUnits) {
+ const text = `${fmtNum(stats.unitsRate, 1)} units/s`;
+ if (elUnits.textContent !== text) elUnits.textContent = text;
+ }
+ const elLines = document.getElementById('sec-sum-lines');
+ if (elLines) {
+ const text = `${stats.activeLines} active`;
+ if (elLines.textContent !== text) elLines.textContent = text;
+ }
+ const elTotal = document.getElementById('sec-sum-total');
+ if (elTotal) {
+ const text = `${fmtNum(stats.totalProduced, 0)} units`;
+ if (elTotal.textContent !== text) elTotal.textContent = text;
+ }
+ }
+ }
+
+ // 3. Update Facility Cards
for (const p of PRODUCTS) {
const pState = state.products[p.id];
if (!pState) continue;
- // If card is locked: only update unlock button disabled state
if (!pState.unlocked) {
const btnUnlock = document.getElementById(`btn-unlock-${p.id}`);
if (btnUnlock) {
@@ -264,14 +402,14 @@ export function updateProductionFloor(container, state) {
continue;
}
- // 1. Progress Bar (smooth width update)
+ // Progress Bar
const elProgress = document.getElementById(`progress-${p.id}`);
if (elProgress) {
const progressPct = Math.min(100, Math.floor((pState.cycleProgress || 0) * 100));
elProgress.style.width = `${progressPct}%`;
}
- // 2. Stockpile Text
+ // Stockpile Text
const elStock = document.getElementById(`stock-${p.id}`);
if (elStock) {
const stockText = fmtNum(pState.stock, 0);
@@ -280,7 +418,7 @@ export function updateProductionFloor(container, state) {
}
}
- // 3. Status Badge (only update if bottlenecked state changed)
+ // Status Badge
const elBadge = document.getElementById(`badge-${p.id}`);
if (elBadge) {
const isBottlenecked = pState.isBottlenecked;
@@ -295,7 +433,7 @@ export function updateProductionFloor(container, state) {
}
}
- // 4. Input Chips Stock
+ // Input Chips Stock
if (p.inputs && p.inputs.length > 0) {
for (const inp of p.inputs) {
const currentStock = state.products[inp.id]?.stock || 0;
@@ -315,7 +453,7 @@ export function updateProductionFloor(container, state) {
}
}
- // 5. Expand Button disabled state
+ // Expand Button disabled state
const calc = calculateMultiCost(p.baseFacilityCost, pState.lines, buyMode);
const elBtnExpand = document.getElementById(`btn-expand-${p.id}`);
if (elBtnExpand) {
@@ -325,7 +463,7 @@ export function updateProductionFloor(container, state) {
}
}
- // 6. Hire Manager disabled state
+ // Hire Manager disabled state
const elBtnHire = document.getElementById(`btn-hire-${p.id}`);
if (elBtnHire) {
const canAfford = cash >= p.baseManagerCost;
@@ -334,7 +472,7 @@ export function updateProductionFloor(container, state) {
}
}
- // 7. Logistics Button disabled state
+ // Logistics Button disabled state
const logisticsCost = p.baseLogisticsCost * Math.pow(1.15, pState.logistics || 0);
const elBtnLogistics = document.getElementById(`btn-logistics-${p.id}`);
if (elBtnLogistics) {
@@ -344,7 +482,7 @@ export function updateProductionFloor(container, state) {
}
}
- // 8. Selected Card class
+ // Selected Card class
const elCard = document.getElementById(`card-${p.id}`);
if (elCard) {
const isSelected = state.selectedProductId === p.id;