*

author: elioat <elioat@tilde.institute> 2025-02-16 22:14:56 -0500
committer: elioat <elioat@tilde.institute> 2025-02-16 22:14:56 -0500
commit: af33663d8be0f19b319922bcf37cf0239ab2ed06 (patch)
tree: 7419843c16d3b02fac4d8eee0498e018bc021a9e /html
parent: 11248106343c50b43afefff232ff776b7b9192b7 (diff)
download: tour-af33663d8be0f19b319922bcf37cf0239ab2ed06.tar.gz
3 files changed, 66 insertions, 50 deletions
diff --git a/html/tower/index.html b/html/tower/index.html
index a5bfb4e..04c31e6 100644
--- a/html/tower/index.html
+++ b/html/tower/index.html
@@ -32,12 +32,12 @@
             padding: 10px;
             display: flex;
             flex-direction: column;
-            gap: 10px;
+            gap: 5px;
             flex-shrink: 0;
         }
         .tower-option {
-            width: 80px;
-            height: 80px;
+            width: 60px;
+            height: 75px;
             cursor: grab;
             position: relative;
             display: flex;
@@ -49,18 +49,23 @@
             cursor: grabbing;
         }
         .tower-preview {
-            width: 40px;
-            height: 40px;
+            width: 25px;
+            height: 25px;
             margin-bottom: 5px;
         }
         .tower-name {
-            font-size: 14px;
+            font-size: 12px;
             font-weight: bold;
             margin-bottom: 3px;
         }
         .tower-cost {
-            font-size: 12px;
+            font-size: 10px;
+            color: #666;
+        }
+        .tower-ammo {
+            font-size: 10px;
             color: #666;
+            margin-top: 2px;
         }
         .start-button {
             margin-top: 20px;
@@ -85,32 +90,7 @@
 <body>
     <div class="game-container">
         <div class="tower-palette">
-            <div class="tower-option" draggable="true" data-tower-type="BASIC">
-                <div class="tower-preview" style="background: #3498db;"></div>
-                <div class="tower-name">Basic</div>
-                <div class="tower-cost">$20</div>
-            </div>
-            <div class="tower-option" draggable="true" data-tower-type="SNIPER">
-                <div class="tower-preview" style="background: #8e44ad;"></div>
-                <div class="tower-name">Sniper</div>
-                <div class="tower-cost">$40</div>
-            </div>
-            <div class="tower-option" draggable="true" data-tower-type="RAPID">
-                <div class="tower-preview" style="background: #16a085;"></div>
-                <div class="tower-name">Rapid</div>
-                <div class="tower-cost">$35</div>
-            </div>
-            <div class="tower-option" draggable="true" data-tower-type="GOOP">
-                <div class="tower-preview" style="background: #27ae60;"></div>
-                <div class="tower-name">Goop</div>
-                <div class="tower-cost">$30</div>
-            </div>
-            <div class="tower-option" draggable="true" data-tower-type="AOE">
-                <div class="tower-preview" style="background: #d35400;"></div>
-                <div class="tower-name">AOE</div>
-                <div class="tower-cost">$45</div>
-            </div>
-            <button id="startCombat" class="start-button">Start Combat</button>
+            <!-- Tower options will be populated dynamically -->
         </div>
         <canvas id="gameCanvas" width="600" height="600"></canvas>
     </div>
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
diff --git a/html/tower/js/gameState.js b/html/tower/js/gameState.js
index ff64753..af5442a 100644
--- a/html/tower/js/gameState.js
+++ b/html/tower/js/gameState.js
@@ -5,53 +5,53 @@ const GamePhase = {
 
 const TowerTypes = {
     BASIC: {
-        name: 'Basic Tower',
-        cost: 20,
+        name: 'Basic',
+        cost: 5,
         range: 3,
         damage: 1,
         attackSpeed: 1,
         color: '#3498db',
-        maxAmmo: 15
+        maxAmmo: 100
     },
     SNIPER: {
-        name: 'Sniper Tower',
-        cost: 40,
+        name: 'Distance',
+        cost: 20,
         range: 6,
         damage: 2,
         attackSpeed: 0.5,
         color: '#8e44ad',
-        maxAmmo: 8
+        maxAmmo: 50
     },
     RAPID: {
-        name: 'Rapid Tower',
-        cost: 35,
+        name: 'Fast',
+        cost: 10,
         range: 2,
-        damage: 0.5,
-        attackSpeed: 2,
+        damage: 1,
+        attackSpeed: 3,
         color: '#16a085',
-        maxAmmo: 30
+        maxAmmo: 200
     },
     GOOP: {
-        name: 'Goop Tower',
-        cost: 30,
+        name: 'Goop',
+        cost: 20,
         range: 3,
         damage: 0,
         attackSpeed: 1,
         color: '#27ae60',
         special: 'slow',
         slowAmount: 0.75,
-        maxAmmo: 20
+        maxAmmo: 100
     },
     AOE: {
-        name: 'AOE Tower',
-        cost: 45,
+        name: 'AOE',
+        cost: 25,
         range: 2,
         damage: 3,
         attackSpeed: 0.3,
         color: '#d35400',
         special: 'aoe',
         aoeRadius: 4,
-        maxAmmo: 10
+        maxAmmo: 75
     }
 };
author	elioat <elioat@tilde.institute>	2025-02-16 22:14:56 -0500
committer	elioat <elioat@tilde.institute>	2025-02-16 22:14:56 -0500
commit	af33663d8be0f19b319922bcf37cf0239ab2ed06 (patch)
tree	7419843c16d3b02fac4d8eee0498e018bc021a9e /html
parent	11248106343c50b43afefff232ff776b7b9192b7 (diff)
download	tour-af33663d8be0f19b319922bcf37cf0239ab2ed06.tar.gz