diff --git a/static/filterWeapons.js b/static/filterWeapons.js index 9d57f59..dad567d 100644 --- a/static/filterWeapons.js +++ b/static/filterWeapons.js @@ -133,15 +133,33 @@ function populateWeapons() { }); } +// Function to display the selected weapon's stats in the UI +// Function to display the selected weapon's stats in a table-like format +// Function to display the selected weapon's stats in a table-like format // Function to display the selected weapon's stats in the UI function updateWeaponStats(weapon) { const statsElement = document.getElementById('weapon-stats'); statsElement.innerHTML = ` -
Name: ${weapon.name}
-Damage: ${weapon.damage * weapon.damage_multiplier}
-RPM: ${weapon.rpm}
-Mag Size: ${weapon.mag_size}
-Reload Time: ${weapon.reload_time}
+| Name | +Damage | +RPM | +Mag Size | +Reload Time | +DPS | +DPM | +
|---|---|---|---|---|---|---|
| ${weapon.name} | +${(weapon.damage * weapon.damage_multiplier).toFixed(2)} | +${weapon.rpm} | +${weapon.mag_size} | +${weapon.reload_time.toFixed(2)} seconds | ++ | + |
| Name | +Modified Damage | +Modified RPM | +Mag Size | +Modified Reload Time | +DPS | +DPM | +
|---|---|---|---|---|---|---|
| ${selectedWeapon.name} | +${damage.toFixed(2)} | +${rpm.toFixed(2)} | +${selectedWeapon.mag_size} | +${reloadTime.toFixed(2)} seconds | ++ | + |
DPS: ${dps.toFixed(2)}
-DPM: ${dpm.toFixed(2)}
- `; -} - -// Function to display the modified weapon's stats in the UI -function updateModifiedWeaponStats(damage, rpm, reloadTime) { - const statsElement = document.getElementById('weapon-stats'); - statsElement.innerHTML = ` -Modified Damage: ${damage.toFixed(2)}
-Modified RPM: ${rpm.toFixed(2)}
-Mag Size: ${selectedWeapon.mag_size}
-Modified Reload Time: ${reloadTime.toFixed(2)} seconds
- `; -} - function filterWeapons() { const input = document.getElementById('weapon-search').value.toLowerCase(); const weaponSelect = document.getElementById('weapon-select'); diff --git a/static/style.css b/static/style.css index c948074..8fff33a 100644 --- a/static/style.css +++ b/static/style.css @@ -361,5 +361,28 @@ textarea { #abilities input[type="checkbox"] { margin-right: 5px; /* Adjust the spacing between the checkbox and the label */ } - +} + +/* Styling for horizontal table */ +.weapon-stats-table { + width: 100%; + border-collapse: collapse; + margin: 10px 0; +} + +.weapon-stats-table th, .weapon-stats-table td { + border: 1px solid #ddd; + padding: 8px; + text-align: center; /* Center the text */ +} + +.weapon-stats-table th { + background-color: #f2f2f2; + color: black; +} + +/* Horizontal styling specifically for the table */ +.horizontal-table tr:first-child th { + text-align: center; + font-weight: bold; }