better calculator design on PC

static/filterWeapons.js

@@ -167,10 +167,14 @@ function fetchModifiers() {
 
 // Function to dynamically populate modifiers into the HTML
 function populateModifiers(modifiers) {
-    const modifiersContainer = document.getElementById('modifiers');
+    const modifiersContainer = document.getElementById('modifiers-container');
+    modifiersContainer.innerHTML = ''; // Clear existing modifiers
 
-    const createModifierSection = (title, modifierList) => {
+    const createModifierSection = (title, modifierList, sectionId) => {
         const section = document.createElement('div');
+        section.id = sectionId; // Set an ID for the section
+        section.className = sectionId === 'abilities' ? 'abilities' : ''; // Only for abilities
+
         const header = document.createElement('h3');
         header.textContent = title;
         section.appendChild(header);
@@ -183,32 +187,37 @@ function populateModifiers(modifiers) {
 
             // Check if the modifier has multiple buffs
             if (mod.buffs) {
-                input.dataset.buffs = JSON.stringify(mod.buffs);  // Store buffs data as a string in data-buffs
+                input.dataset.buffs = JSON.stringify(mod.buffs);
             } else {
                 input.value = mod.value;
-                input.dataset.type = mod.type;  // Store if it's additive or multiplicative
+                input.dataset.type = mod.type;
             }
 
             label.appendChild(input);
             label.appendChild(document.createTextNode(mod.label));
-            section.appendChild(label);
+
-            section.appendChild(document.createElement('br'));
+            // Create a container for each modifier item
+            const modifierItem = document.createElement('div');
+            modifierItem.className = 'modifier-item'; // Add the class for styling
+            modifierItem.appendChild(label);
+            section.appendChild(modifierItem); // Append the modifier item to the section
         });
 
         return section;
     };
 
-    // Clear any existing modifiers
+    // Create a container for all modifiers
-    modifiersContainer.innerHTML = '';
+    const container = document.createElement('div');
+    container.id = 'modifiers';
 
-    // Add Item Buffs
+    // Populate sections
-    modifiersContainer.appendChild(createModifierSection('Item Buffs', modifiers.itemBuffs));
+    container.appendChild(createModifierSection('Item Buffs', modifiers.itemBuffs, 'items'));
+    container.appendChild(createModifierSection('Perks', modifiers.operativePerks, 'perks'));
+    modifiersContainer.appendChild(container); // Append item and perks container
 
-    // Add Operative Perks
+    // Create and append abilities section
-    modifiersContainer.appendChild(createModifierSection('Perks', modifiers.operativePerks));
+    const abilitiesSection = createModifierSection('Abilities', modifiers.abilityPerks, 'abilities');
-
+    modifiersContainer.appendChild(abilitiesSection); // Append abilities section
-    // Add Ability Perks
-    modifiersContainer.appendChild(createModifierSection('Abilities', modifiers.abilityPerks));
 
     // Add event listener to recalculate DPS/DPM when modifiers are toggled
     modifiersContainer.addEventListener('change', applyModifiers);

static/style.css

@@ -6,6 +6,23 @@ input[type="text"] {
     font-size: 16px;
 }
 
+#modifiers-container {
+    display: flex;
+    justify-content: space-between; /* Distribute space between the items */
+    flex-wrap: wrap; /* Allow wrapping to avoid overflow */
+}
+
+/* Style for the modifiers section */
+#modifiers {
+    display: flex; /* Use flexbox for alignment */
+    flex-direction: column; /* Stack items vertically */
+    width: 50%; /* Adjust this percentage to control the width */
+}
+
+#abilities {
+    width: 42.5%; /* Adjust this value as needed */
+}
+
 body {
     background-image: url("/static/img/trlbg1.jpg");
     background-repeat: no-repeat;
@@ -323,4 +340,26 @@ textarea {
     .suggestion-title {
         font-size: 1.2em;
     }
+
+    #modifiers {
+        width: 100%; /* Adjust this percentage to control the width */
+    }
+
+    #abilities {
+        width: 100%;
+    }
+
+    /* Adjust spacing between different ability modifiers */
+    #abilities label {
+        display: block; /* Ensures each label takes up its own line */
+        margin-bottom: 10px; /* Adds space between each ability checkbox */
+        line-height: 1.2; /* Keeps the spacing between wrapped lines consistent */
+        white-space: normal; /* Allows text to wrap normally */
+    }
+
+    /* Optional: Adjust margin between checkbox and text */
+    #abilities input[type="checkbox"] {
+        margin-right: 5px; /* Adjust the spacing between the checkbox and the label */
+    }
+
 }

templates/calculator.html

@@ -90,11 +90,15 @@
     <div id="weapon-stats"></div>
     <div id="calculated-stats"></div>
 
-    <!-- Modifiers Display -->
-    <div id="modifiers"></div>
     <h3>Operative Specific Modifiers</h3>
     <div id="operative-modifiers"></div>
 
+    <!-- Modifiers Display -->
+    <div id="modifiers-container">
+        <div id="modifiers"></div> <!-- Items and Perks go here -->
+        <div id="abilities"></div> <!-- Abilities go here -->
+    </div>
+
     <script src="{{ url_for('static', filename='filterWeapons.js') }}"></script>
 </main>
 </body>