added search bar

static/filterWeapons.js

@@ -401,6 +401,66 @@ function updateModifiedWeaponStats(damage, rpm, reloadTime) {
     `;
 }
 
+// Function to filter weapons in the dropdown based on search input
+function filterWeapons() {
+    const input = document.getElementById('weapon-search').value.toLowerCase();
+    const weaponSelect = document.getElementById('weapon-select');
+    const options = weaponSelect.getElementsByTagName('option');
+
+    let firstVisibleOption = null; // Variable to track the first matching option
+
+    for (let i = 0; i < options.length; i++) {
+        const optionText = options[i].textContent || options[i].innerText;
+
+        // Check if the option matches the search query
+        if (optionText.toLowerCase().indexOf(input) > -1) {
+            options[i].style.display = '';  // Show matching option
+            if (!firstVisibleOption) {
+                firstVisibleOption = options[i]; // Save the first visible option
+            }
+        } else {
+            options[i].style.display = 'none';  // Hide non-matching option
+        }
+    }
+
+    // Automatically select the first visible matching option
+    if (firstVisibleOption) {
+        weaponSelect.value = firstVisibleOption.value;
+    }
+}
+
+// Function to filter operatives in the dropdown based on search input
+function filterOperatives() {
+    const input = document.getElementById('operative-search').value.toLowerCase();
+    const operativeSelect = document.getElementById('operative-select');
+    const options = operativeSelect.getElementsByTagName('option');
+
+    let firstVisibleOption = null; // Track the first matching option
+
+    for (let i = 0; i < options.length; i++) {
+        const optionText = options[i].textContent || options[i].innerText;
+
+        // Check if the option matches the search query
+        if (optionText.toLowerCase().indexOf(input) > -1) {
+            options[i].style.display = '';  // Show matching option
+            if (!firstVisibleOption) {
+                firstVisibleOption = options[i]; // Save the first visible option
+            }
+        } else {
+            options[i].style.display = 'none';  // Hide non-matching option
+        }
+    }
+
+    // Automatically select the first visible matching option
+    if (firstVisibleOption) {
+        operativeSelect.value = firstVisibleOption.value;
+    }
+}
+
+// Attach event listeners to the search inputs
+document.getElementById('weapon-search').addEventListener('keyup', filterWeapons);
+document.getElementById('operative-search').addEventListener('keyup', filterOperatives);
+
 // Call the fetch function to load the data and populate the dropdown on page load
 fetchWeaponsData();
 fetchModifiers();

static/json/data.json

@@ -187,7 +187,7 @@
     "rpm": 850,
     "mag_size": 32,
     "reload_time": 2,
-    "guntype": "SMG"
+    "guntype": ["SMG", "SECONDARY"]
   },
   {
     "id": 23,
@@ -217,7 +217,7 @@
     "rpm": 750,
     "mag_size": 65,
     "reload_time": 2,
-    "guntype": "SMG"
+    "guntype": ["SMG", "SECONDARY"]
   },
   {
     "id": 26,
@@ -227,7 +227,7 @@
     "rpm": 780,
     "mag_size": 30,
     "reload_time": 2.65,
-    "guntype": "SMG"
+    "guntype": ["SMG", "SECONDARY"]
   },
   {
     "id": 27,
@@ -247,7 +247,7 @@
     "rpm": 800,
     "mag_size": 25,
     "reload_time": 2.5,
-    "guntype": "SMG"
+    "guntype": ["SMG", "SECONDARY"]
   },
   {
     "id": 29,
@@ -257,7 +257,7 @@
     "rpm": 800,
     "mag_size": 25,
     "reload_time": 2.5,
-    "guntype": "SMG"
+    "guntype": ["SMG", "SECONDARY"]
   },
   {
     "id": 30,

static/style.css

@@ -1,3 +1,11 @@
+input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    margin: 10px 0;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
 body {
     background-image: url("/static/img/trlbg1.jpg");
     background-repeat: no-repeat;

templates/calculator.html

@@ -70,16 +70,21 @@
 
 </header>
 <main>
-    <label for="weapon-select">Choose a weapon:</label>
+    <label for="weapon-search"></label>
+    <input type="text" id="weapon-search" placeholder="Search weapons..." onkeyup="filterWeapons()">
+    <br>
+    <label for="weapon-select"></label>
     <select id="weapon-select" name="weapons">
         <option value="">Select a Weapon</option> <!-- This is the placeholder option -->
     </select>
 
-    <label for="operative-select">Pick an Operative</label>
+    <label for="operative-search"></label>
+    <input type="text" id="operative-search" placeholder="Search operatives..." onkeyup="filterOperatives()">
+    <br>
+    <label for="operative-select"></label>
     <select id="operative-select">
         <option value="">Select an operative</option> <!-- This is the placeholder option -->
-    </select>
-
+    </select><br>
 
     <!-- Weapon Stats Display -->
     <div id="weapon-stats"></div>