Spaces:
Running
Running
File size: 6,195 Bytes
9679277 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | class GameHeader extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.render();
// Listen to global state updates
document.addEventListener('state-update', () => this.render());
}
render() {
const isPlaying = state.personaId && !state.gameOver;
const persona = PERSONAS[state.personaId];
// Debt warning logic (Behavioral Nudge)
const isDebtCritical = isPlaying && state.stats.debt > 50;
const criticalClass = isDebtCritical ? 'debt-critical' : '';
// Dual Wallet Logic (Sunita - Woman)
const isDualWallet = isPlaying && PERSONAS[state.personaId].special === 'separation_wallets';
this.shadowRoot.innerHTML = `
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
.header-box {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #1e293b;
border-radius: 0.75rem;
border-bottom: 4px solid #f97316;
transition: all 0.3s ease;
}
.left-section { display: flex; flex-direction: column; }
.right-section { text-align: right; }
.time-display { font-size: 0.85rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.persona-info { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #f97316; }
.persona-name { font-size: 1.1rem; font-weight: 700; color: white; }
.money-display {
font-size: 1.5rem;
font-weight: 800;
color: #f97316;
line-height: 1.1;
}
.money-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; }
.debt-alert {
color: #ef4444;
font-size: 0.75rem;
font-weight: bold;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
}
/* Dual Wallet Styles */
.wallets-container { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.wallet-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wallet-amount { font-weight: bold; font-family: monospace; font-size: 1.1rem; }
.wallet-bar-bg { width: 80px; height: 4px; background: #334155; border-radius: 2px; overflow: hidden; }
.wallet-bar-fill { height: 100%; transition: width 0.5s ease; }
</style>
<div class="header-box ${criticalClass}">
<div class="left-section">
${isPlaying ? `
<div class="time-display">Year ${state.year} - Month ${state.month}</div>
<div class="persona-info">
<img src="${persona.img}" class="avatar">
<span class="persona-name">${persona.name}</span>
</div>
` : `
<div class="text-xl font-bold tracking-wider text-white" style="letter-spacing: 2px;">PAISA YUDDH 💰</div>
`}
</div>
<div class="right-section">
${isPlaying ? `
${isDualWallet ? this.renderDualWallets() : this.renderSingleWallet()}
${isDebtCritical ? `
<div class="debt-alert">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
DEBT TRAP WARNING
</div>
` : ''}
` : `<div class="text-slate-500 text-sm">Select Persona</div>`}
</div>
</div>
`;
}
renderSingleWallet() {
return `
<div class="money-label">Total Balance</div>
<div class="money-display neon-text">₹${state.money.toLocaleString()}</div>
`;
}
renderDualWallets() {
// Calculate max for bars (normalized for visuals)
const maxVal = Math.max(Math.abs(state.money), Math.abs(state.businessCash), 5000);
return `
<div class="wallets-container">
<!-- Home Wallet -->
<div class="wallet-row">
<div class="wallet-amount text-orange-400">₹${state.money.toLocaleString()}</div>
<div class="wallet-bar-bg">
<div class="wallet-bar-fill" style="width: ${Math.min(100, (Math.max(0, state.money) / maxVal) * 100)}%; background: #f97316;"></div>
</div>
</div>
<!-- Business Wallet -->
<div class="wallet-row">
<div class="wallet-amount text-green-400">₹${state.businessCash.toLocaleString()}</div>
<div class="wallet-bar-bg">
<div class="wallet-bar-fill" style="width: ${Math.min(100, (Math.max(0, state.businessCash) / maxVal) * 100)}%; background: #22c55e;"></div>
</div>
</div>
<div class="text-[0.6rem] text-slate-500 mt-1">HOME vs BUSINESS</div>
</div>
`;
}
}
customElements.define('game-header', GameHeader); |