117 lines
5.5 KiB
JavaScript
117 lines
5.5 KiB
JavaScript
// Production - The Idle Game: Corporate IPO & Boardroom Perks View
|
|
|
|
import { BOARDROOM_PERKS, calculateSharesEarned, IPO_MIN_VALUATION } from '../data/boardroom.js';
|
|
import { fmtCurrency, fmtNum } from '../core/formatters.js';
|
|
|
|
export function renderBoardroom(container, state, onAction) {
|
|
const earnedShares = calculateSharesEarned(state.lifetimeRevenue);
|
|
const canIPO = state.lifetimeRevenue >= IPO_MIN_VALUATION;
|
|
const perks = state.boardroomPerks || {};
|
|
|
|
let html = `
|
|
<div class="boardroom-header-pane">
|
|
<div class="boardroom-hero">
|
|
<div class="hero-left">
|
|
<span class="executive-tag">
|
|
<iconify-icon icon="lucide:building-2"></iconify-icon> Executive Boardroom
|
|
</span>
|
|
<h2 class="boardroom-title">Corporate IPO & Venture Capital</h2>
|
|
<p class="boardroom-desc">
|
|
Take your manufacturing conglomerate public on the global securities exchange.
|
|
Liquidate current factories to secure permanent <strong>Venture Shares ($V-Shares)</strong>, funding cutting-edge R&D and boardroom privileges.
|
|
</p>
|
|
</div>
|
|
<div class="hero-valuation-card">
|
|
<div class="val-label">Corporate Enterprise Valuation</div>
|
|
<div class="val-number font-mono">${fmtCurrency(state.valuation)}</div>
|
|
<div class="val-lifetime">Lifetime Gross Revenue: <strong>${fmtCurrency(state.lifetimeRevenue)}</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ipo-action-banner ${canIPO ? 'ready-ipo' : 'locked-ipo'}">
|
|
<div class="ipo-banner-info">
|
|
<div class="ipo-shares-badge font-mono">
|
|
<iconify-icon icon="lucide:gem"></iconify-icon>
|
|
<span>+${fmtNum(earnedShares, 0)} $V-Shares</span>
|
|
</div>
|
|
<div>
|
|
<h4 class="ipo-banner-title">Initial Public Offering (IPO) Ready</h4>
|
|
<p class="ipo-banner-sub">
|
|
${canIPO
|
|
? `Execute corporate IPO now to claim ${fmtNum(earnedShares, 0)} Venture Shares and restart with permanent bonuses.`
|
|
: `Requires minimum ${fmtCurrency(IPO_MIN_VALUATION)} in lifetime revenue to file for IPO.`}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button class="btn-primary-corp btn-ipo-trigger" ${canIPO ? '' : 'disabled'}>
|
|
<iconify-icon icon="lucide:trending-up"></iconify-icon>
|
|
<span>Launch IPO</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="boardroom-shares-summary">
|
|
<div class="shares-pill">
|
|
<span class="shares-label">Available $V-Shares:</span>
|
|
<strong class="shares-val font-mono"><iconify-icon icon="lucide:gem"></iconify-icon> ${fmtNum(state.ventureShares, 0)}</strong>
|
|
</div>
|
|
<div class="shares-pill">
|
|
<span class="shares-label">IPOs Completed:</span>
|
|
<strong class="shares-val font-mono">${state.ipoCount || 0}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="perks-section-title">
|
|
<h3><iconify-icon icon="lucide:shield-check"></iconify-icon> Boardroom R&D Tech Tree</h3>
|
|
<span>Permanent corporate privileges that persist across all future IPO expansions</span>
|
|
</div>
|
|
|
|
<div class="perks-grid">
|
|
`;
|
|
|
|
for (const perk of BOARDROOM_PERKS) {
|
|
const currentLvl = perks[perk.id] || 0;
|
|
const isMaxed = currentLvl >= perk.maxLevel;
|
|
const nextCost = !isMaxed ? perk.costShares[currentLvl] : 0;
|
|
const canAfford = state.ventureShares >= nextCost && !isMaxed;
|
|
|
|
html += `
|
|
<div class="perk-card ${isMaxed ? 'perk-maxed' : ''}">
|
|
<div class="perk-header">
|
|
<div class="perk-icon-wrap" style="background: ${perk.color}15; color: ${perk.color};">
|
|
<iconify-icon icon="${perk.icon}" class="icon-lg"></iconify-icon>
|
|
</div>
|
|
<div>
|
|
<div class="perk-tier-badge">Level ${currentLvl} / ${perk.maxLevel}</div>
|
|
<h4 class="perk-name">${perk.name}</h4>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="perk-desc">${perk.description}</p>
|
|
<div class="perk-effect-box">
|
|
<iconify-icon icon="lucide:zap" style="color: ${perk.color};"></iconify-icon>
|
|
<span>${perk.effectDesc}</span>
|
|
</div>
|
|
|
|
<div class="perk-footer">
|
|
<button class="btn-corp-perk btn-buy-perk" data-perk="${perk.id}" ${canAfford ? '' : 'disabled'}>
|
|
<iconify-icon icon="lucide:gem"></iconify-icon>
|
|
<span>${isMaxed ? 'Max Tier Acquired' : `Upgrade (${fmtNum(nextCost, 0)} $V-Shares)`}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
html += `</div>`;
|
|
container.innerHTML = html;
|
|
|
|
const ipoBtn = container.querySelector('.btn-ipo-trigger');
|
|
if (ipoBtn) {
|
|
ipoBtn.onclick = () => onAction({ type: 'TRIGGER_IPO' });
|
|
}
|
|
|
|
container.querySelectorAll('.btn-buy-perk').forEach(btn => {
|
|
btn.onclick = () => onAction({ type: 'BUY_PERK', perkId: btn.dataset.perk });
|
|
});
|
|
}
|