feat(sectors): add total output metrics per industry across sidebar, tabs, summary banner, and all-sectors grid
This commit is contained in:
Christian
parent
d038cd1879
commit
67e13a40b1
5 changed files with 478 additions and 55 deletions
|
|
@ -346,19 +346,212 @@ body {
|
|||
gap: 4px;
|
||||
}
|
||||
|
||||
.sidebar-sector-item {
|
||||
.sidebar-sector-btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 7px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.15s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-sector-btn:hover {
|
||||
background: var(--bg-surface);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.sidebar-sector-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sidebar-sector-left iconify-icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.sidebar-sector-rate {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
color: var(--emerald-dark);
|
||||
}
|
||||
|
||||
.sector-pill-rate {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: var(--emerald-dark);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* Sector Output Summary Banner */
|
||||
.sector-summary-banner {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.sector-summary-main {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sector-summary-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sector-summary-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sector-summary-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.sector-summary-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sector-metrics-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 10px;
|
||||
background: var(--bg-surface-sub);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.sector-metric-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sec-metric-label {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.sec-metric-val {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.text-profit {
|
||||
color: var(--emerald-dark);
|
||||
}
|
||||
|
||||
/* All Sectors Overview Grid */
|
||||
.all-sectors-summary-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sector-mini-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.sector-mini-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: #cbd5e1;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.mini-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mini-card-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mini-card-title-wrap {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mini-card-name {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mini-card-sub {
|
||||
font-size: 0.7rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.mini-card-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 6px;
|
||||
background: var(--bg-surface-sub);
|
||||
padding: 6px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.sidebar-sector-item iconify-icon {
|
||||
font-size: 1rem;
|
||||
.mini-stat-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mini-stat-label {
|
||||
font-size: 0.65rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.mini-stat-cell strong {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* Center Main Viewport */
|
||||
|
|
|
|||
|
|
@ -112,30 +112,48 @@
|
|||
|
||||
<div class="sidebar-section-title">Industry Sectors</div>
|
||||
<div class="sidebar-sectors-list">
|
||||
<div class="sidebar-sector-item">
|
||||
<button class="sidebar-sector-btn" data-sector="agriculture">
|
||||
<div class="sidebar-sector-left">
|
||||
<iconify-icon icon="lucide:wheat" style="color: #16a34a;"></iconify-icon>
|
||||
<span>Agriculture & Food</span>
|
||||
<span>Agriculture</span>
|
||||
</div>
|
||||
<div class="sidebar-sector-item">
|
||||
<span class="sidebar-sector-rate font-mono" id="sb-rate-agriculture">+$0.00/s</span>
|
||||
</button>
|
||||
<button class="sidebar-sector-btn" data-sector="materials">
|
||||
<div class="sidebar-sector-left">
|
||||
<iconify-icon icon="lucide:trees" style="color: #ca8a04;"></iconify-icon>
|
||||
<span>Forestry & Materials</span>
|
||||
<span>Forestry</span>
|
||||
</div>
|
||||
<div class="sidebar-sector-item">
|
||||
<span class="sidebar-sector-rate font-mono" id="sb-rate-materials">+$0.00/s</span>
|
||||
</button>
|
||||
<button class="sidebar-sector-btn" data-sector="mining">
|
||||
<div class="sidebar-sector-left">
|
||||
<iconify-icon icon="lucide:pickaxe" style="color: #475569;"></iconify-icon>
|
||||
<span>Mining & Metallurgy</span>
|
||||
<span>Mining</span>
|
||||
</div>
|
||||
<div class="sidebar-sector-item">
|
||||
<span class="sidebar-sector-rate font-mono" id="sb-rate-mining">+$0.00/s</span>
|
||||
</button>
|
||||
<button class="sidebar-sector-btn" data-sector="chemicals">
|
||||
<div class="sidebar-sector-left">
|
||||
<iconify-icon icon="lucide:flask-conical" style="color: #0284c7;"></iconify-icon>
|
||||
<span>Chemicals & Polymers</span>
|
||||
<span>Chemicals</span>
|
||||
</div>
|
||||
<div class="sidebar-sector-item">
|
||||
<span class="sidebar-sector-rate font-mono" id="sb-rate-chemicals">+$0.00/s</span>
|
||||
</button>
|
||||
<button class="sidebar-sector-btn" data-sector="electronics">
|
||||
<div class="sidebar-sector-left">
|
||||
<iconify-icon icon="lucide:cpu" style="color: #7c3aed;"></iconify-icon>
|
||||
<span>High-Tech Electronics</span>
|
||||
<span>Electronics</span>
|
||||
</div>
|
||||
<div class="sidebar-sector-item">
|
||||
<span class="sidebar-sector-rate font-mono" id="sb-rate-electronics">+$0.00/s</span>
|
||||
</button>
|
||||
<button class="sidebar-sector-btn" data-sector="heavy_industry">
|
||||
<div class="sidebar-sector-left">
|
||||
<iconify-icon icon="lucide:truck" style="color: #ea580c;"></iconify-icon>
|
||||
<span>Heavy Industry</span>
|
||||
</div>
|
||||
<span class="sidebar-sector-rate font-mono" id="sb-rate-heavy_industry">+$0.00/s</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
import { GState } from './core/state.js';
|
||||
import { SimulationEngine } from './core/engine.js';
|
||||
import { SyncManager } from './core/sync.js';
|
||||
import { fmtCurrency, fmtNum, fmtRate, getNotation, setNotation } from './core/formatters.js';
|
||||
import { PRODUCTS, getProduct } from './data/products.js';
|
||||
import { PRODUCTS, SECTORS, getProduct } from './data/products.js';
|
||||
import { mountProductionFloor, updateProductionFloor, calculateMultiCost } from './ui/productionView.js';
|
||||
import { mountContractsBoard, updateContractsBoard } from './ui/contractsView.js';
|
||||
import { mountBoardroom, updateBoardroom } from './ui/boardroomView.js';
|
||||
|
|
@ -100,6 +99,19 @@ class ProductionApp {
|
|||
};
|
||||
});
|
||||
|
||||
// Sidebar Sector Buttons
|
||||
document.querySelectorAll('.sidebar-sector-btn').forEach(btn => {
|
||||
btn.onclick = () => {
|
||||
const sector = btn.dataset.sector;
|
||||
this.sm.state.activeTab = 'production';
|
||||
this.sm.state.selectedSector = sector;
|
||||
document.querySelectorAll('.nav-btn, .nav-tab').forEach(b => {
|
||||
b.classList.toggle('active', b.dataset.tab === 'production');
|
||||
});
|
||||
this.mountActiveView();
|
||||
};
|
||||
});
|
||||
|
||||
// User Profile & Settings
|
||||
const userBadge = document.getElementById('user-badge');
|
||||
if (userBadge) {
|
||||
|
|
@ -338,6 +350,20 @@ class ProductionApp {
|
|||
if (userBadge) {
|
||||
userBadge.textContent = this.sync.isLoggedIn() ? `[${this.sync.getUsername()}]` : `[GUEST]`;
|
||||
}
|
||||
|
||||
// Update sidebar sector rate badges
|
||||
if (this.engine.sectorStats) {
|
||||
for (const s of SECTORS) {
|
||||
const stats = this.engine.sectorStats[s.id];
|
||||
if (stats) {
|
||||
const elRate = document.getElementById(`sb-rate-${s.id}`);
|
||||
if (elRate) {
|
||||
const val = `+$${fmtNum(stats.revenueRate, 2)}/s`;
|
||||
if (elRate.textContent !== val) elRate.textContent = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -353,7 +379,7 @@ class ProductionApp {
|
|||
this.currentMountedSector = sector;
|
||||
|
||||
if (tab === 'production') {
|
||||
mountProductionFloor(container, this.sm.state, (a) => this.handleAction(a));
|
||||
mountProductionFloor(container, this.sm.state, (a) => this.handleAction(a), this.engine);
|
||||
} else if (tab === 'contracts') {
|
||||
mountContractsBoard(container, this.sm.state, (a) => this.handleAction(a));
|
||||
} else if (tab === 'boardroom') {
|
||||
|
|
@ -388,7 +414,7 @@ class ProductionApp {
|
|||
}
|
||||
|
||||
if (tab === 'production') {
|
||||
updateProductionFloor(container, this.sm.state);
|
||||
updateProductionFloor(container, this.sm.state, this.engine);
|
||||
} else if (tab === 'contracts') {
|
||||
updateContractsBoard(container, this.sm.state, (a) => this.handleAction(a));
|
||||
} else if (tab === 'boardroom') {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
// Production - The Idle Game: Core Simulation Engine
|
||||
|
||||
import { PRODUCTS, getUnitMilestoneMultiplier } from '../data/products.js';
|
||||
import { PRODUCTS, SECTORS, getUnitMilestoneMultiplier } from '../data/products.js';
|
||||
import { CONTRACT_TEMPLATES } from '../data/contracts.js';
|
||||
import { ACHIEVEMENTS } from '../data/achievements.js';
|
||||
|
||||
|
|
@ -10,6 +8,18 @@ export class SimulationEngine {
|
|||
this.cashRate = 0.0;
|
||||
this._rateAccumulator = 0.0;
|
||||
this._rateTimer = 0.0;
|
||||
this.sectorStats = {};
|
||||
this._sectorAccumulators = {};
|
||||
for (const s of SECTORS) {
|
||||
this.sectorStats[s.id] = {
|
||||
revenueRate: 0.0,
|
||||
unitsRate: 0.0,
|
||||
totalProduced: 0,
|
||||
activeLines: 0,
|
||||
bottlenecks: 0
|
||||
};
|
||||
this._sectorAccumulators[s.id] = { rev: 0.0, units: 0.0 };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -52,6 +62,9 @@ export class SimulationEngine {
|
|||
pState.stock += produced;
|
||||
pState.totalProduced = (pState.totalProduced || 0) + produced;
|
||||
state.stats.totalProduced = (state.stats.totalProduced || 0) + produced;
|
||||
if (this._sectorAccumulators[p.sector]) {
|
||||
this._sectorAccumulators[p.sector].units += produced;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Check if we have required input stock
|
||||
|
|
@ -90,6 +103,9 @@ export class SimulationEngine {
|
|||
pState.stock += produced;
|
||||
pState.totalProduced = (pState.totalProduced || 0) + produced;
|
||||
state.stats.totalProduced = (state.stats.totalProduced || 0) + produced;
|
||||
if (this._sectorAccumulators[p.sector]) {
|
||||
this._sectorAccumulators[p.sector].units += produced;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -108,6 +124,9 @@ export class SimulationEngine {
|
|||
state.cash += earned;
|
||||
state.lifetimeRevenue += earned;
|
||||
tickRevenue += earned;
|
||||
if (this._sectorAccumulators[p.sector]) {
|
||||
this._sectorAccumulators[p.sector].rev += earned;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,6 +136,35 @@ export class SimulationEngine {
|
|||
if (this._rateTimer >= 0.5) {
|
||||
this.cashRate = this._rateAccumulator / this._rateTimer;
|
||||
this._rateAccumulator = 0.0;
|
||||
|
||||
for (const s of SECTORS) {
|
||||
const acc = this._sectorAccumulators[s.id] || { rev: 0, units: 0 };
|
||||
const sec = this.sectorStats[s.id];
|
||||
if (sec) {
|
||||
sec.revenueRate = acc.rev / this._rateTimer;
|
||||
sec.unitsRate = acc.units / this._rateTimer;
|
||||
acc.rev = 0.0;
|
||||
acc.units = 0.0;
|
||||
|
||||
let totalProd = 0;
|
||||
let activeLines = 0;
|
||||
let bottlenecks = 0;
|
||||
for (const prod of PRODUCTS) {
|
||||
if (prod.sector === s.id) {
|
||||
const ps = state.products[prod.id];
|
||||
if (ps && ps.unlocked) {
|
||||
totalProd += ps.totalProduced || 0;
|
||||
activeLines += ps.lines || 0;
|
||||
if (ps.isBottlenecked) bottlenecks++;
|
||||
}
|
||||
}
|
||||
}
|
||||
sec.totalProduced = totalProd;
|
||||
sec.activeLines = activeLines;
|
||||
sec.bottlenecks = bottlenecks;
|
||||
}
|
||||
}
|
||||
|
||||
this._rateTimer = 0.0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Production - The Idle Game: Production Floor View
|
||||
// High-performance fine-grained DOM mounting & updating without innerHTML teardowns
|
||||
// High-performance fine-grained DOM mounting & updating with comprehensive sector output metrics
|
||||
|
||||
import { PRODUCTS, SECTORS, getProduct, getNextMilestone, getUnitMilestoneMultiplier } from '../data/products.js';
|
||||
import { fmtCurrency, fmtNum } from '../core/formatters.js';
|
||||
|
|
@ -28,9 +28,10 @@ export function calculateMultiCost(baseCost, currentCount, multiplier) {
|
|||
/**
|
||||
* Mounts the production floor DOM structure ONCE
|
||||
*/
|
||||
export function mountProductionFloor(container, state, onAction) {
|
||||
export function mountProductionFloor(container, state, onAction, engine) {
|
||||
const selectedSector = state.selectedSector || 'all';
|
||||
const buyMode = state.buyMode || '1';
|
||||
const currentSectorObj = SECTORS.find(s => s.id === selectedSector);
|
||||
|
||||
const filteredProducts = PRODUCTS.filter(p => {
|
||||
if (selectedSector === 'all') return true;
|
||||
|
|
@ -44,17 +45,92 @@ export function mountProductionFloor(container, state, onAction) {
|
|||
<iconify-icon icon="lucide:layout-grid"></iconify-icon>
|
||||
<span>All Sectors</span>
|
||||
</button>
|
||||
${SECTORS.map(s => `
|
||||
${SECTORS.map(s => {
|
||||
const stats = engine?.sectorStats?.[s.id] || { revenueRate: 0 };
|
||||
return `
|
||||
<button class="sector-pill ${selectedSector === s.id ? 'active' : ''}" data-sector="${s.id}">
|
||||
<iconify-icon icon="${s.icon}" style="color: ${s.color};"></iconify-icon>
|
||||
<span>${s.name}</span>
|
||||
<span class="sector-pill-rate font-mono" id="pill-rate-${s.id}">+$${fmtNum(stats.revenueRate, 2)}/s</span>
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="production-grid">
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 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 += `
|
||||
<div class="sector-summary-banner" style="border-left: 4px solid ${currentSectorObj.color};">
|
||||
<div class="sector-summary-main">
|
||||
<div class="sector-summary-icon" style="background: ${currentSectorObj.color}15; color: ${currentSectorObj.color};">
|
||||
<iconify-icon icon="${currentSectorObj.icon}" class="icon-lg"></iconify-icon>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sector-summary-badge" style="color: ${currentSectorObj.color};">INDUSTRY OUTPUT OVERVIEW</div>
|
||||
<h2 class="sector-summary-title">${currentSectorObj.name}</h2>
|
||||
<p class="sector-summary-desc">${currentSectorObj.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sector-metrics-strip">
|
||||
<div class="sector-metric-cell">
|
||||
<span class="sec-metric-label">Wholesale Output Rate:</span>
|
||||
<strong class="sec-metric-val font-mono text-profit" id="sec-sum-rev">+$${fmtNum(stats.revenueRate, 2)}/s</strong>
|
||||
</div>
|
||||
<div class="sector-metric-cell">
|
||||
<span class="sec-metric-label">Production Velocity:</span>
|
||||
<strong class="sec-metric-val font-mono" id="sec-sum-units">${fmtNum(stats.unitsRate, 1)} units/s</strong>
|
||||
</div>
|
||||
<div class="sector-metric-cell">
|
||||
<span class="sec-metric-label">Operating Lines:</span>
|
||||
<strong class="sec-metric-val font-mono" id="sec-sum-lines">${stats.activeLines} active</strong>
|
||||
</div>
|
||||
<div class="sector-metric-cell">
|
||||
<span class="sec-metric-label">Lifetime Sector Output:</span>
|
||||
<strong class="sec-metric-val font-mono" id="sec-sum-total">${fmtNum(stats.totalProduced, 0)} units</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 2. If 'All Sectors' is selected: Render the Industry Output Grid summarizing all sectors
|
||||
if (selectedSector === 'all') {
|
||||
html += `
|
||||
<div class="all-sectors-summary-grid">
|
||||
${SECTORS.map(s => {
|
||||
const stats = engine?.sectorStats?.[s.id] || { revenueRate: 0, unitsRate: 0, activeLines: 0 };
|
||||
return `
|
||||
<div class="sector-mini-card" data-sector="${s.id}" style="border-top: 3px solid ${s.color};">
|
||||
<div class="mini-card-header">
|
||||
<div class="mini-card-icon" style="background: ${s.color}15; color: ${s.color};">
|
||||
<iconify-icon icon="${s.icon}"></iconify-icon>
|
||||
</div>
|
||||
<div class="mini-card-title-wrap">
|
||||
<h4 class="mini-card-name">${s.name}</h4>
|
||||
<span class="mini-card-sub" id="all-sec-lines-${s.id}">${stats.activeLines} lines active</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mini-card-stats">
|
||||
<div class="mini-stat-cell">
|
||||
<span class="mini-stat-label">Output Rate</span>
|
||||
<strong class="font-mono text-profit" id="all-sec-rev-${s.id}">+$${fmtNum(stats.revenueRate, 2)}/s</strong>
|
||||
</div>
|
||||
<div class="mini-stat-cell">
|
||||
<span class="mini-stat-label">Velocity</span>
|
||||
<strong class="font-mono" id="all-sec-units-${s.id}">${fmtNum(stats.unitsRate, 1)} u/s</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
html += `<div class="production-grid">`;
|
||||
|
||||
for (const p of filteredProducts) {
|
||||
const pState = state.products[p.id] || { unlocked: false, lines: 0, stock: 0, cycleProgress: 0, isBottlenecked: false };
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue