From 8f5ca38d88580f3165d547274bff3923366db8a2 Mon Sep 17 00:00:00 2001 From: IM23a-spirgif Date: Thu, 26 Sep 2024 14:08:49 +0200 Subject: [PATCH] weapon stats are shown in a table, horizontally --- static/filterWeapons.js | 102 ++++++++++++++++++++++++++++------------ static/style.css | 25 +++++++++- 2 files changed, 95 insertions(+), 32 deletions(-) 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}

+ + + + + + + + + + + + + + + + + + + +
NameDamageRPMMag SizeReload TimeDPSDPM
${weapon.name}${(weapon.damage * weapon.damage_multiplier).toFixed(2)}${weapon.rpm}${weapon.mag_size}${weapon.reload_time.toFixed(2)} seconds
`; // Store values for further calculations @@ -154,6 +172,48 @@ function updateWeaponStats(weapon) { calculateDPSAndDPM(damage, rpm, magSize, reloadTime); } +// Function to calculate DPS and DPM and update the values in the table +function calculateDPSAndDPM(damage, rpm, magSize, reloadTime) { + const rps = rpm / 60; // Rounds per second + let dps = damage * rps; + const reloadTimeMin = reloadTime / 60; + let dpm = (magSize * damage) / (reloadTimeMin + (magSize / rpm)); + + // Update DPS and DPM values in the table + document.getElementById('dps-value').innerText = dps.toFixed(2); + document.getElementById('dpm-value').innerText = dpm.toFixed(2); +} + +// Function to display the modified weapon's stats in the table format +function updateModifiedWeaponStats(damage, rpm, reloadTime) { + const statsElement = document.getElementById('weapon-stats'); + statsElement.innerHTML = ` + + + + + + + + + + + + + + + + + + + +
NameModified DamageModified RPMMag SizeModified Reload TimeDPSDPM
${selectedWeapon.name}${damage.toFixed(2)}${rpm.toFixed(2)}${selectedWeapon.mag_size}${reloadTime.toFixed(2)} seconds
+ `; + + // Recalculate and update DPS and DPM values with modifiers applied + calculateDPSAndDPM(damage, rpm, selectedWeapon.mag_size, reloadTime); +} + // Function to fetch and populate modifiers from the JSON file function fetchModifiers() { fetch('static/json/modifiers.json') // Adjust the path to your JSON file @@ -322,6 +382,12 @@ function applyModifiers() { // Clear out listeners and avoid re-adding + // Process ability modifiers + const abilitiesSection = document.getElementById('abilities'); + abilitiesSection.querySelectorAll('input:checked').forEach(mod => { + processModifier(mod); // Process the ability modifier the same way as global modifiers + }); + const modifiersContainer = document.getElementById('modifiers'); modifiersContainer.removeEventListener('change', applyModifiers); @@ -391,32 +457,6 @@ function applyBuff(buff, rpmModifier, reloadTimeModifier, damageModifier = null) } } -// Function to calculate DPS and DPM with optional modifiers -function calculateDPSAndDPM(damage, rpm, magSize, reloadTime) { - const rps = rpm / 60; // Rounds per second - let dps = damage * rps; - const reloadTimeMin = reloadTime / 60; - let dpm = (magSize * damage) / (reloadTimeMin + (magSize / rpm)); - - // Display the calculated stats - const resultElement = document.getElementById('calculated-stats'); - resultElement.innerHTML = ` -

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; }