65 lines
3 KiB
JavaScript
65 lines
3 KiB
JavaScript
// Production - The Idle Game: Corporate Milestones View
|
|
|
|
import { ACHIEVEMENTS } from '../data/achievements.js';
|
|
import { fmtCurrency, fmtNum } from '../core/formatters.js';
|
|
|
|
export function renderAchievements(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' : ''}">
|
|
<div class="ach-icon-col">
|
|
<div class="ach-icon-circle ${currentTier > 0 ? 'ach-unlocked' : ''}">
|
|
<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">Tier ${currentTier} / ${maxTier}</span>
|
|
</div>
|
|
<p class="ach-desc">${ach.description}</p>
|
|
<div class="ach-progress-bar-track">
|
|
<div class="ach-progress-bar-fill" style="width: ${progressPct}%;"></div>
|
|
</div>
|
|
<div class="ach-progress-labels font-mono">
|
|
<span>${ach.reqType === 'total_revenue' ? fmtCurrency(currentVal) : fmtNum(currentVal, 0)}</span>
|
|
<span>${isMaxed ? 'Completed!' : (ach.reqType === 'total_revenue' ? fmtCurrency(nextThreshold) : fmtNum(nextThreshold, 0))}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
container.innerHTML = html;
|
|
}
|