city - Molodetz Institute

 class BuildingToolbox extends HTMLElement {
     static get observedAttributes() {
         return ['player-money', 'player-population'];
     }
     constructor() {
         super();
         this.app = null;
         this.buildingItems = []; // A cache for the building DOM elements
         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() {
         // 1. Initial full render happens only once
         this.innerHTML = this.renderHTML();
         // 2. Cache the DOM elements for efficient future updates
         this.buildingItems = this.querySelectorAll('.building-item');
         // 3. Add click handlers only once
         this.addClickHandlers();
     }
     attributeChangedCallback() {
         // When player stats change, run the lightweight update function
         // instead of a full re-render.
         if (this.buildingItems.length > 0) {
             this.updateItemStates();
         }
     }
     renderHTML() {
         // This function generates the initial HTML string.
         const money = parseInt(this.getAttribute('player-money') || '0');
         const population = parseInt(this.getAttribute('player-population') || '0');
         return `
             <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>
         `;
     }
     addClickHandlers() {
         this.buildingItems.forEach(item => {
             item.addEventListener('click', () => {
                 const type = item.dataset.type;
                 const building = this.buildings.find(b => b.type === type);
                 const money = parseInt(this.getAttribute('player-money') || '0');
                 const population = parseInt(this.getAttribute('player-population') || '0');
                 if (money >= building.cost && (!building.req || population >= building.req)) {
                     if (this.app) {
                         this.app.selectBuilding(type);
                     }
                 }
             });
         });
     }
     updateItemStates() {
         // This lightweight function only updates styles, preserving the DOM and scroll position.
         const money = parseInt(this.getAttribute('player-money') || '0');
         const population = parseInt(this.getAttribute('player-population') || '0');
         this.buildingItems.forEach(item => {
             const type = item.dataset.type;
             const building = this.buildings.find(b => b.type === type);
             if (!building) return;
             const canAfford = money >= building.cost;
             const meetsReq = !building.req || population >= building.req;
             const enabled = canAfford && meetsReq;
             // Directly update only the styles that change
             item.style.opacity = enabled ? '1' : '0.5';
             item.style.cursor = enabled ? 'pointer' : 'not-allowed';
         });
     }
 }
 customElements.define('building-toolbox', BuildingToolbox);