|
class BuildingToolbox extends HTMLElement {
|
|
static get observedAttributes() {
|
|
return ['player-money', 'player-population'];
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.app = null;
|
|
this.buildings = [
|
|
{ type: 'small_house', name: 'Small House', cost: 5000, income: -50, pop: 10 },
|
|
{ type: 'medium_house', name: 'Medium House', cost: 12000, income: -120, pop: 25 },
|
|
{ type: 'large_house', name: 'Large House', cost: 25000, income: -250, pop: 50 },
|
|
{ type: 'small_shop', name: 'Small Shop', cost: 8000, income: 100, pop: -5, req: 20 },
|
|
{ type: 'supermarket', name: 'Supermarket', cost: 25000, income: 300, pop: -15, req: 50 },
|
|
{ type: 'mall', name: 'Shopping Mall', cost: 80000, income: 800, pop: -40, req: 100 },
|
|
{ type: 'small_factory', name: 'Small Factory', cost: 15000, income: 200, pop: -20 },
|
|
{ type: 'large_factory', name: 'Large Factory', cost: 50000, income: 500, pop: -50 },
|
|
{ type: 'road', name: 'Road', cost: 500, income: 0, pop: 0 },
|
|
{ type: 'park', name: 'Park', cost: 3000, income: -20, pop: 5 },
|
|
{ type: 'plaza', name: 'Plaza', cost: 8000, income: -40, pop: 10 },
|
|
{ type: 'town_hall', name: 'Town Hall', cost: 50000, income: -100, pop: 100 },
|
|
{ type: 'power_plant', name: 'Power Plant', cost: 100000, income: -500, pop: -30 }
|
|
];
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
const money = parseInt(this.getAttribute('player-money') || '0');
|
|
const population = parseInt(this.getAttribute('player-population') || '0');
|
|
|
|
this.innerHTML = `
|
|
<div style="font-weight: bold; margin-bottom: 10px; font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px;">
|
|
Buildings
|
|
</div>
|
|
<div style="max-height: calc(100vh - 200px); overflow-y: auto;">
|
|
${this.buildings.map(building => {
|
|
const canAfford = money >= building.cost;
|
|
const meetsReq = !building.req || population >= building.req;
|
|
const enabled = canAfford && meetsReq;
|
|
|
|
return `
|
|
<div
|
|
class="building-item"
|
|
data-type="${building.type}"
|
|
style="
|
|
padding: 8px;
|
|
margin-bottom: 8px;
|
|
background: var(--bg-light);
|
|
border: 1px solid var(--border-color);
|
|
cursor: ${enabled ? 'pointer' : 'not-allowed'};
|
|
opacity: ${enabled ? '1' : '0.5'};
|
|
"
|
|
>
|
|
<div style="font-weight: bold; margin-bottom: 4px;">
|
|
${building.name}
|
|
</div>
|
|
<div style="font-size: 12px; color: #90EE90;">
|
|
Cost: $${building.cost.toLocaleString()}
|
|
</div>
|
|
<div style="font-size: 11px; margin-top: 2px;">
|
|
${building.income !== 0 ? `Income: $${building.income}/tick` : ''}
|
|
${building.pop !== 0 ? `Pop: ${building.pop > 0 ? '+' : ''}${building.pop}` : ''}
|
|
${building.req ? `(Req: ${building.req} pop)` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('')}
|
|
</div>
|
|
`;
|
|
|
|
// Add click handlers
|
|
this.querySelectorAll('.building-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const type = item.dataset.type;
|
|
const building = this.buildings.find(b => b.type === type);
|
|
|
|
if (money >= building.cost && (!building.req || population >= building.req)) {
|
|
if (this.app) {
|
|
this.app.selectBuilding(type);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define('building-toolbox', BuildingToolbox);
|