christian/ProductionGame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): clarify logistics and facility lead effects on cards, prevent line breaks in liquidation and buttons

Browse source
This commit is contained in:
Christian 2026-10-15 23:22:15 +02:00
parent edc9a843b7
commit e5232c2af3
3 changed files with 64 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
frontend/css/style.css
View file

@ -615,7 +615,7 @@ body {
.production-grid { .production-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 16px; gap: 16px;
} }
@ -628,7 +628,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
min-height: 410px; min-height: 420px;
gap: 12px; gap: 12px;
cursor: pointer; cursor: pointer;
transition: border-color 0.2s, box-shadow 0.2s; transition: border-color 0.2s, box-shadow 0.2s;
@ -879,6 +879,7 @@ body {
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
white-space: nowrap;
transition: background 0.15s, opacity 0.15s; transition: background 0.15s, opacity 0.15s;
} }
@ -905,6 +906,7 @@ body {
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
white-space: nowrap;
} }
.btn-corp-action:hover { .btn-corp-action:hover {
@ -924,6 +926,7 @@ body {
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
cursor: pointer; cursor: pointer;
white-space: nowrap;
} }
.btn-corp-secondary:hover:not(:disabled) { .btn-corp-secondary:hover:not(:disabled) {
@ -945,6 +948,7 @@ body {
font-weight: 700; font-weight: 700;
padding: 6px 10px; padding: 6px 10px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
white-space: nowrap;
} }
/* ========================================================================== /* ==========================================================================
@ -1443,13 +1447,30 @@ body {
.liquidation-buttons { .liquidation-buttons {
display: flex; display: flex;
flex-direction: column;
gap: 8px; gap: 8px;
} }
.liquidation-buttons button { .liquidation-buttons button {
flex: 1; width: 100%;
font-size: 0.75rem; display: flex;
padding: 8px 6px; justify-content: space-between;
align-items: center;
font-size: 0.78rem;
padding: 8px 12px;
white-space: nowrap;
}
.liquidation-btn-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
}
.liquidation-btn-val {
font-family: var(--font-mono);
font-weight: 700;
} }
.chain-box { .chain-box {
@ -1478,7 +1499,7 @@ body {
.chain-items { .chain-items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 6px;
} }
.chain-item-row { .chain-item-row {
@ -1487,10 +1508,11 @@ body {
align-items: center; align-items: center;
background: var(--bg-surface); background: var(--bg-surface);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
padding: 6px 8px; padding: 8px 10px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
gap: 10px;
} }
.chain-item-row:hover { .chain-item-row:hover {
@ -1503,11 +1525,17 @@ body {
gap: 6px; gap: 6px;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 600; font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
} }
.chain-item-ratio { .chain-item-ratio {
font-size: 0.7rem; font-size: 0.72rem;
color: var(--text-muted); color: var(--text-muted);
white-space: nowrap;
flex-shrink: 0;
} }
.chain-badge { .chain-badge {

10
frontend/js/ui/inspectorView.js
View file

@ -60,10 +60,16 @@ export function mountInspector(container, state, onAction) {
<p class="section-subtext">Liquidate stockpiles immediately onto the wholesale spot market.</p> <p class="section-subtext">Liquidate stockpiles immediately onto the wholesale spot market.</p>
<div class="liquidation-buttons"> <div class="liquidation-buttons">
<button class="btn-corp-secondary" id="insp-btn-half" data-product="${product.id}" ${pState.stock >= 2 ? '' : 'disabled'}> <button class="btn-corp-secondary" id="insp-btn-half" data-product="${product.id}" ${pState.stock >= 2 ? '' : 'disabled'}>
Sell 50% (<span id="insp-val-half">${fmtCurrency(halfLiquidationValue)}</span>) <span class="liquidation-btn-label">
<iconify-icon icon="lucide:pie-chart"></iconify-icon> Sell 50%
</span>
<span class="liquidation-btn-val" id="insp-val-half">${fmtCurrency(halfLiquidationValue)}</span>
</button> </button>
<button class="btn-primary-corp" id="insp-btn-all" data-product="${product.id}" ${pState.stock >= 1 ? '' : 'disabled'}> <button class="btn-primary-corp" id="insp-btn-all" data-product="${product.id}" ${pState.stock >= 1 ? '' : 'disabled'}>
Sell 100% (<span id="insp-val-all">${fmtCurrency(totalLiquidationValue)}</span>) <span class="liquidation-btn-label">
<iconify-icon icon="lucide:check-circle-2"></iconify-icon> Sell 100%
</span>
<span class="liquidation-btn-val" id="insp-val-all">${fmtCurrency(totalLiquidationValue)}</span>
</button> </button>
</div> </div>
</div> </div>

32
frontend/js/ui/productionView.js
View file

@ -267,7 +267,7 @@ export function mountProductionFloor(container, state, onAction, engine) {
<span class="stat-value font-mono"><strong id="stock-${p.id}">${fmtNum(pState.stock, 0)}</strong> ${p.unit}</span> <span class="stat-value font-mono"><strong id="stock-${p.id}">${fmtNum(pState.stock, 0)}</strong> ${p.unit}</span>
</div> </div>
<div class="stat-cell"> <div class="stat-cell">
<span class="stat-label">Output Velocity:</span> <span class="stat-label">Production Output:</span>
<span class="stat-value font-mono ${rates.isBottlenecked ? 'text-warning' : 'text-profit'}" id="rate-units-${p.id}"> <span class="stat-value font-mono ${rates.isBottlenecked ? 'text-warning' : 'text-profit'}" id="rate-units-${p.id}">
${rates.isBottlenecked ? '0.0 (Paused)' : `${fmtNum(rates.prodRate, 1)}/s`} ${rates.isBottlenecked ? '0.0 (Paused)' : `${fmtNum(rates.prodRate, 1)}/s`}
</span> </span>
@ -280,9 +280,9 @@ export function mountProductionFloor(container, state, onAction, engine) {
<span class="stat-label">Wholesale Price:</span> <span class="stat-label">Wholesale Price:</span>
<span class="stat-value font-mono">${fmtCurrency(p.basePrice)}</span> <span class="stat-value font-mono">${fmtCurrency(p.basePrice)}</span>
</div> </div>
<div class="stat-cell"> <div class="stat-cell" title="Logistics fleets automatically sell stockpiled goods continuously onto the wholesale market (0.75 units/sec per fleet)">
<span class="stat-label">Logistics Fleet:</span> <span class="stat-label">Logistics Auto-Sell:</span>
<span class="stat-value font-mono" id="logistics-${p.id}">${pState.logistics || 0} fleets</span> <span class="stat-value font-mono" id="logistics-${p.id}">${pState.logistics || 0} fleets (${fmtNum((pState.logistics || 0) * 0.75, 2)}/s)</span>
</div> </div>
<div class="stat-cell"> <div class="stat-cell">
<span class="stat-label">Milestone Eff:</span> <span class="stat-label">Milestone Eff:</span>
@ -294,30 +294,30 @@ export function mountProductionFloor(container, state, onAction, engine) {
<!-- Facility Actions Bar --> <!-- Facility Actions Bar -->
<div class="facility-actions-row"> <div class="facility-actions-row">
<button class="btn-corp-action btn-cycle" data-product="${p.id}" title="Trigger manual batch"> <button class="btn-corp-action btn-cycle" data-product="${p.id}" title="Run 1 manual production cycle">
<iconify-icon icon="lucide:play"></iconify-icon> <iconify-icon icon="lucide:play"></iconify-icon>
<span>Run Batch</span> <span>Run Batch</span>
</button> </button>
<button class="btn-primary-corp btn-expand" id="btn-expand-${p.id}" data-product="${p.id}" ${canAffordBuy ? '' : 'disabled'}> <button class="btn-primary-corp btn-expand" id="btn-expand-${p.id}" data-product="${p.id}" ${canAffordBuy ? '' : 'disabled'} title="Add more production lines to increase output volume">
<iconify-icon icon="lucide:plus-circle"></iconify-icon> <iconify-icon icon="lucide:plus-circle"></iconify-icon>
<span id="btn-expand-text-${p.id}">+${calc.count} Lines (${fmtCurrency(calc.cost)})</span> <span id="btn-expand-text-${p.id}">+${calc.count} Lines (${fmtCurrency(calc.cost)})</span>
</button> </button>
${!pState.manager ? ` ${!pState.manager ? `
<button class="btn-corp-secondary btn-hire-mgr" id="btn-hire-${p.id}" data-product="${p.id}" ${canAffordManager ? '' : 'disabled'} title="Automates production continuously"> <button class="btn-corp-secondary btn-hire-mgr" id="btn-hire-${p.id}" data-product="${p.id}" ${canAffordManager ? '' : 'disabled'} title="Hires a Facility Lead who automatically runs production continuously without clicking">
<iconify-icon icon="lucide:user-check"></iconify-icon> <iconify-icon icon="lucide:user-check"></iconify-icon>
<span>Hire Lead (${fmtCurrency(managerCost)})</span> <span>Hire Lead (${fmtCurrency(managerCost)})</span>
</button> </button>
` : ` ` : `
<span class="mgr-hired-badge" title="Automated Lead Active"> <span class="mgr-hired-badge" title="Facility Lead hired: 100% automated continuous production active">
<iconify-icon icon="lucide:bot"></iconify-icon> Auto <iconify-icon icon="lucide:bot"></iconify-icon> <span>Lead Active (Auto)</span>
</span> </span>
`} `}
<button class="btn-corp-secondary btn-expand-logistics" id="btn-logistics-${p.id}" data-product="${p.id}" ${canAffordLogistics ? '' : 'disabled'} title="Increase passive sales capacity"> <button class="btn-corp-secondary btn-expand-logistics" id="btn-logistics-${p.id}" data-product="${p.id}" ${canAffordLogistics ? '' : 'disabled'} title="Deploys an automated distribution fleet (+0.75 units/sec passive wholesale sales)">
<iconify-icon icon="lucide:truck"></iconify-icon> <iconify-icon icon="lucide:truck"></iconify-icon>
<span id="btn-logistics-text-${p.id}">+Logistics (${fmtCurrency(logisticsCost)})</span> <span id="btn-logistics-text-${p.id}">+Fleet (${fmtCurrency(logisticsCost)})</span>
</button> </button>
</div> </div>
</div> </div>
@ -474,7 +474,8 @@ export function updateProductionFloor(container, state, engine) {
const elLogistics = document.getElementById(`logistics-${p.id}`); const elLogistics = document.getElementById(`logistics-${p.id}`);
if (elLogistics) { if (elLogistics) {
const logText = `${pState.logistics || 0} fleets`; const count = pState.logistics || 0;
const logText = `${count} fleets (${fmtNum(count * 0.75, 2)}/s)`;
if (elLogistics.textContent !== logText) { if (elLogistics.textContent !== logText) {
elLogistics.textContent = logText; elLogistics.textContent = logText;
} }
@ -556,6 +557,13 @@ export function updateProductionFloor(container, state, engine) {
if (elBtnLogistics.disabled !== !canAfford) { if (elBtnLogistics.disabled !== !canAfford) {
elBtnLogistics.disabled = !canAfford; elBtnLogistics.disabled = !canAfford;
} }
const elBtnLogisticsText = document.getElementById(`btn-logistics-text-${p.id}`);
if (elBtnLogisticsText) {
const text = `+Fleet (${fmtCurrency(logisticsCost)})`;
if (elBtnLogisticsText.textContent !== text) {
elBtnLogisticsText.textContent = text;
}
}
} }
// Selected Card class // Selected Card class