1 files changed, 36 insertions, 0 deletions
diff --git a/html/tower/js/game.js b/html/tower/js/game.js
index 0e79e4e..34c225d 100644
--- a/html/tower/js/game.js
+++ b/html/tower/js/game.js
@@ -228,6 +228,9 @@ function startCombat() {
  * - Method decoration (towers.push)
  */
 function initializeEventListeners() {
+    // Add this at the beginning of the function
+    populateTowerPalette();
+    
     // Set up tower palette drag events
     document.querySelectorAll('.tower-option').forEach(option => {
         option.addEventListener('dragstart', (e) => {
@@ -367,4 +370,37 @@ function renderUI(ctx, gameState) {
     ctx.fillText(`Phase: ${gameState.phase}`, 10, 90);
     ctx.fillText(`Destroyed: ${gameState.enemiesDestroyed}`, 10, 120);
     ctx.fillText(`Escaped: ${gameState.enemiesEscaped}`, 10, 150);
+}
+
+/**
+ * Dynamically populates the tower palette based on TowerTypes
+ */
+function populateTowerPalette() {
+    const palette = document.querySelector('.tower-palette');
+    // Clear existing tower options
+    palette.innerHTML = '';
+    
+    // Create tower options dynamically
+    Object.entries(TowerTypes).forEach(([type, tower]) => {
+        const towerOption = document.createElement('div');
+        towerOption.className = 'tower-option';
+        towerOption.draggable = true;
+        towerOption.dataset.towerType = type;
+        
+        towerOption.innerHTML = `
+            <div class="tower-preview" style="background: ${tower.color};"></div>
+            <div class="tower-name">${tower.name}</div>
+            <div class="tower-cost">$${tower.cost}</div>
+            <div class="tower-ammo">Ammo: ${tower.maxAmmo}</div>
+        `;
+        
+        palette.appendChild(towerOption);
+    });
+    
+    // Add start combat button
+    const startButton = document.createElement('button');
+    startButton.id = 'startCombat';
+    startButton.className = 'start-button';
+    startButton.textContent = 'Start Combat';
+    palette.appendChild(startButton);
 } 
\ No newline at end of file