38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
|
class StatsDisplay extends HTMLElement {
|
||
|
|
static get observedAttributes() {
|
||
|
|
return ['money', 'population', 'nickname'];
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
|
||
|
|
attributeChangedCallback() {
|
||
|
|
this.render();
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const money = this.getAttribute('money') || '0';
|
||
|
|
const population = this.getAttribute('population') || '0';
|
||
|
|
const nickname = this.getAttribute('nickname') || 'Player';
|
||
|
|
|
||
|
|
const formattedMoney = parseInt(money).toLocaleString();
|
||
|
|
|
||
|
|
this.innerHTML = `
|
||
|
|
<div style="font-size: 14px;">
|
||
|
|
<div style="font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #FFD700;">
|
||
|
|
${nickname}
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom: 5px;">
|
||
|
|
<span style="color: #90EE90;">$</span> ${formattedMoney}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span style="color: #87CEEB;">👥</span> ${population}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('stats-display', StatsDisplay);
|