diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/tower/index.html | 46 | ||||
| -rw-r--r-- | html/tower/js/game.js | 36 | ||||
| -rw-r--r-- | html/tower/js/gameState.js | 34 |
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 } }; |