97 lines
4.8 KiB
JavaScript
97 lines
4.8 KiB
JavaScript
// Production - The Idle Game: Corporate Milestones View
|
|
// Fine-grained DOM updates without innerHTML teardowns
|
|
|
|
import { ACHIEVEMENTS } from '../data/achievements.js';
|
|
import { fmtCurrency, fmtNum } from '../core/formatters.js';
|
|
|
|
export function mountAchievements(container, state, onAction) {
|
|
const achState = state.achievements || {};
|
|
|
|
let html = `
|
|
<div class="achievements-header-pane">
|
|
<h2 class="view-title">
|
|
<iconify-icon icon="lucide:trophy" class="title-icon"></iconify-icon>
|
|
Corporate Milestones & Accolades
|
|
</h2>
|
|
<p class="view-subtitle">
|
|
Track your corporate conglomerate's historical accomplishments across production, revenue, tenders, and stock market triumphs.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="achievements-grid">
|
|
`;
|
|
|
|
for (const ach of ACHIEVEMENTS) {
|
|
const currentTier = achState[ach.id] || 0;
|
|
let currentVal = 0;
|
|
if (ach.reqType === 'total_produced') currentVal = state.stats.totalProduced || 0;
|
|
else if (ach.reqType === 'total_revenue') currentVal = state.lifetimeRevenue || 0;
|
|
else if (ach.reqType === 'contracts_completed') currentVal = state.stats.contractsCompleted || 0;
|
|
else if (ach.reqType === 'ipo_count') currentVal = state.ipoCount || 0;
|
|
else if (ach.reqType === 'managers_hired') currentVal = state.stats.managersHired || 0;
|
|
|
|
const maxTier = ach.thresholds.length;
|
|
const isMaxed = currentTier >= maxTier;
|
|
const nextThreshold = !isMaxed ? ach.thresholds[currentTier] : ach.thresholds[maxTier - 1];
|
|
const progressPct = isMaxed ? 100 : Math.min(100, Math.floor((currentVal / nextThreshold) * 100));
|
|
|
|
html += `
|
|
<div class="achievement-card ${currentTier > 0 ? 'achieved' : ''}" id="ach-card-${ach.id}">
|
|
<div class="ach-icon-col">
|
|
<div class="ach-icon-circle ${currentTier > 0 ? 'ach-unlocked' : ''}" id="ach-icon-${ach.id}">
|
|
<iconify-icon icon="${ach.icon}"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ach-info-col">
|
|
<div class="ach-title-row">
|
|
<h4 class="ach-title">${ach.title}</h4>
|
|
<span class="ach-tier-badge" id="ach-tier-${ach.id}">Tier ${currentTier} / ${maxTier}</span>
|
|
</div>
|
|
<p class="ach-desc">${ach.description}</p>
|
|
<div class="ach-progress-bar-track">
|
|
<div class="ach-progress-bar-fill" id="ach-fill-${ach.id}" style="width: ${progressPct}%;"></div>
|
|
</div>
|
|
<div class="ach-progress-labels font-mono">
|
|
<span id="ach-curr-val-${ach.id}">${ach.reqType === 'total_revenue' ? fmtCurrency(currentVal) : fmtNum(currentVal, 0)}</span>
|
|
<span id="ach-next-val-${ach.id}">${isMaxed ? 'Completed!' : (ach.reqType === 'total_revenue' ? fmtCurrency(nextThreshold) : fmtNum(nextThreshold, 0))}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
export function updateAchievements(container, state) {
|
|
const achState = state.achievements || {};
|
|
|
|
for (const ach of ACHIEVEMENTS) {
|
|
const currentTier = achState[ach.id] || 0;
|
|
let currentVal = 0;
|
|
if (ach.reqType === 'total_produced') currentVal = state.stats.totalProduced || 0;
|
|
else if (ach.reqType === 'total_revenue') currentVal = state.lifetimeRevenue || 0;
|
|
else if (ach.reqType === 'contracts_completed') currentVal = state.stats.contractsCompleted || 0;
|
|
else if (ach.reqType === 'ipo_count') currentVal = state.ipoCount || 0;
|
|
else if (ach.reqType === 'managers_hired') currentVal = state.stats.managersHired || 0;
|
|
|
|
const maxTier = ach.thresholds.length;
|
|
const isMaxed = currentTier >= maxTier;
|
|
const nextThreshold = !isMaxed ? ach.thresholds[currentTier] : ach.thresholds[maxTier - 1];
|
|
const progressPct = isMaxed ? 100 : Math.min(100, Math.floor((currentVal / nextThreshold) * 100));
|
|
|
|
const elFill = document.getElementById(`ach-fill-${ach.id}`);
|
|
if (elFill) elFill.style.width = `${progressPct}%`;
|
|
|
|
const elCurr = document.getElementById(`ach-curr-val-${ach.id}`);
|
|
if (elCurr) elCurr.textContent = ach.reqType === 'total_revenue' ? fmtCurrency(currentVal) : fmtNum(currentVal, 0);
|
|
|
|
const elTier = document.getElementById(`ach-tier-${ach.id}`);
|
|
if (elTier) elTier.textContent = `Tier ${currentTier} / ${maxTier}`;
|
|
|
|
const elIcon = document.getElementById(`ach-icon-${ach.id}`);
|
|
if (elIcon) elIcon.classList.toggle('ach-unlocked', currentTier > 0);
|
|
}
|
|
}
|