1st commit

static/filterTable.js

@@ -0,0 +1,18 @@
+function filterTable() {
+    const input = document.getElementById('search');
+    const filter = input.value.toLowerCase();
+    const table = document.getElementById('gun-stats');
+    const tr = table.getElementsByTagName('tr');
+
+    for (let i = 1; i < tr.length; i++) {
+        const td = tr[i].getElementsByTagName('td')[1];
+        if (td) {
+            const txtValue = td.textContent || td.innerText;
+            if (txtValue.toLowerCase().indexOf(filter) > -1) {
+                tr[i].style.display = '';
+            } else {
+                tr[i].style.display = 'none';
+            }
+        }
+    }
+}

static/populateTable.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+    fetch('/api/guns')
+        .then(response => response.json())
+        .then(data => {
+            populateTable(data);
+        });
+});
+
+function populateTable(data) {
+    const table = document.getElementById('gun-stats').getElementsByTagName('tbody')[0];
+    table.innerHTML = ''; // Clear existing table data
+    data.forEach(gun => {
+        const row = table.insertRow();
+        row.insertCell(0).innerText = gun.id;
+        row.insertCell(1).innerText = gun.name;
+        row.insertCell(2).innerText = gun.damage;
+        row.insertCell(3).innerText = gun.damage_multiplier;
+        row.insertCell(4).innerText = gun.rpm;
+        row.insertCell(5).innerText = gun.mag_size;
+        row.insertCell(6).innerText = gun.reload_time;
+        row.insertCell(7).innerText = gun.guntype;
+        row.insertCell(8).innerText = gun.rps.toFixed(2);
+        row.insertCell(9).innerText = gun.dps.toFixed(2);
+        row.insertCell(10).innerText = gun.dpm.toFixed(2);
+        row.insertCell(11).innerText = gun.avg_dps.toFixed(2);
+    });
+}

static/style.css

@@ -0,0 +1,61 @@
+.background_image {
+    background-image: url("img/trlbg1.jpg");
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+
+h1 {
+    color: #333;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+}
+
+th, td {
+    padding: 8px;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+button {
+    padding: 5px 10px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+input {
+    padding: 5px;
+    margin-bottom: 20px;
+}
+
+#result {
+    margin-top: 20px;
+}
+
+#search {
+    width: 33%;
+    padding: 6px;
+    border: 2px black solid;
+    margin-top: 8px;
+    margin-right: 16px;
+    font-size: 17px;
+}