Concurrency.

static/js/components/BuildingToolbox.js

@@ -6,6 +6,7 @@ class BuildingToolbox extends HTMLElement {
     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 },
@@ -24,18 +25,30 @@ class BuildingToolbox extends HTMLElement {
     }
     
     connectedCallback() {
-        this.render();
+        // 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() {
-        this.render();
+        // When player stats change, run the lightweight update function
+        // instead of a full re-render.
+        if (this.buildingItems.length > 0) {
+            this.updateItemStates();
+        }
     }
-    
-    render() {
+
+    renderHTML() {
+        // This function generates the initial HTML string.
         const money = parseInt(this.getAttribute('player-money') || '0');
         const population = parseInt(this.getAttribute('player-population') || '0');
-        
-        this.innerHTML = `
+
+        return `
             <div style="font-weight: bold; margin-bottom: 10px; font-size: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px;">
                 Buildings
             </div>
@@ -44,7 +57,6 @@ class BuildingToolbox extends HTMLElement {
                     const canAfford = money >= building.cost;
                     const meetsReq = !building.req || population >= building.req;
                     const enabled = canAfford && meetsReq;
-                    
                     return `
                         <div 
                             class="building-item" 
@@ -55,8 +67,7 @@ class BuildingToolbox extends HTMLElement {
                                 background: var(--bg-light);
                                 border: 1px solid var(--border-color);
                                 cursor: ${enabled ? 'pointer' : 'not-allowed'};
-                                opacity: ${enabled ? '1' : '0.5'};
-                            "
+                                opacity: ${enabled ? '1' : '0.5'};"
                         >
                             <div style="font-weight: bold; margin-bottom: 4px;">
                                 ${building.name}
@@ -74,12 +85,15 @@ class BuildingToolbox extends HTMLElement {
                 }).join('')}
             </div>
         `;
-        
-        // Add click handlers
-        this.querySelectorAll('.building-item').forEach(item => {
+    }
+
+    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) {
@@ -89,6 +103,26 @@ class BuildingToolbox extends HTMLElement {
             });
         });
     }
+
+    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);