Added clipboard functionality for weapon stats and improved weapon type selection UX

static/filterWeapons.js

@@ -587,6 +587,54 @@ modal.addEventListener('click', e => {
     }
 });
 
+document.getElementById('copy-stats').addEventListener('click', async () => {
+  const statsTable = document.querySelector('#weapon-stats table tr + tr');
+  if (!statsTable) {
+    showCopyMessage('No weapon selected to copy.', 'error');
+    return;
+  }
+  const cells = Array.from(statsTable.querySelectorAll('td')).map(td => td.innerText.trim());
+  const [ name, dmg, rpm, mag, reload, dps, dpm, avgDps ] = cells;
+  const globalMods = Array.from(
+    document.querySelectorAll('#modifiers label input:checked')
+  ).map(cb => cb.parentNode.textContent.trim());
+  const opMods = Array.from(
+    document.querySelectorAll('#operative-modifiers label input:checked')
+  ).map(cb => cb.parentNode.textContent.trim());
+  const allMods = globalMods.concat(opMods);
+  const modsString = allMods.length
+    ? allMods.join(', ')
+    : 'None';
+  const payload = [
+    `Weapon: ${name}`,
+    `Damage: ${dmg}`,
+    `RPM: ${rpm}`,
+    `Mag Size: ${mag}`,
+    `Reload Time: ${reload}`,
+    `DPS: ${dps}`,
+    `DPM: ${dpm}`,
+    `Average DPS: ${avgDps}`,
+    `Modifiers used for this calculation: ${modsString}`
+  ].join('\n');
+  try {
+    await navigator.clipboard.writeText(payload);
+    showCopyMessage('✅ Stats copied to clipboard!', 'success');
+  } catch (err) {
+    console.error(err);
+    showCopyMessage('Failed to copy.', 'error');
+  }
+});
+
+function showCopyMessage(text, type) {
+  const msg = document.getElementById('copy-message');
+  msg.textContent = text;
+  msg.className = type;
+  setTimeout(() => {
+    msg.textContent = '';
+    msg.className = '';
+  }, 3000);
+}
+
 
 // Initialize
 fetchWeaponsData();

static/style.css

@@ -596,4 +596,53 @@ body.menu-open {
 
 #weapon-create:hover {
     background-color: red;
+}
+
+#copy-stats {
+  background: darkred;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  padding: 10px 16px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+#copy-stats:hover {
+  background: red;
+}
+
+#copy-message {
+  margin-top: 8px;
+  font-size: 0.95rem;
+  min-height: 1.2em;
+}
+
+#copy-message.success {
+  color: green;
+}
+
+#copy-message.error {
+  color: crimson;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 16px;
+  border: none;
+  padding: 0;
+}
+.checkbox-group legend {
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+.checkbox-group label {
+  display: flex;
+  align-items: center;
+  font-size: 0.95em;
+}
+.checkbox-group input {
+  margin-right: 6px;
 }

templates/calculator.html

@@ -61,31 +61,28 @@
 
                 <label>
                     Reload Time:<br>
-                    <input type="number" name="reload-time" min="0" required>
+                    <input type="number" step="0.01" name="reload-time" min="0" required>
                 </label><br><br>
 
                 <label>
-                    Damage Multiplier:<br>
+                    Damage Multiplier (Amount of bullets per shot):<br>
                     <input type="number" name="multiplier" min="0" required>
                 </label><br><br>
 
-                <div class="select-wrapper">
-                    <label for="gun-type">Weapon Type:</label>
-                    <select id="gun-type" name="gun-type" multiple required>
-                        <option value="">Select a type</option>
-                        <option value="PRIMARY">Primary</option>
-                        <option value="SECONDARY">Secondary</option>
-                        <option value="WW2">WW2</option>
-                        <option value="RIFLE">Rifle</option>
-                        <option value="SOVIET">Soviet</option>
-                        <option value="SMG">SMG</option>
-                        <option value="SHOTGUN">Shotgun</option>
-                        <option value="LMG">LMG</option>
-                        <option value="PISTOL">Pistol</option>
-                        <option value="SPECIAL">Special</option>
-                        <option value="SEMI-AUTO">Semi-Auto</option>
-                    </select>
-                </div>
+                <fieldset class="checkbox-group">
+                    <legend>Weapon Type<span class="required">*</span></legend>
+                    <label><input type="checkbox" name="gun-type" value="PRIMARY"> Primary</label>
+                    <label><input type="checkbox" name="gun-type" value="SECONDARY"> Secondary</label>
+                    <label><input type="checkbox" name="gun-type" value="WW2"> WW2</label>
+                    <label><input type="checkbox" name="gun-type" value="RIFLE"> Rifle</label>
+                    <label><input type="checkbox" name="gun-type" value="SOVIET"> Soviet</label>
+                    <label><input type="checkbox" name="gun-type" value="SMG"> SMG</label>
+                    <label><input type="checkbox" name="gun-type" value="SHOTGUN"> Shotgun</label>
+                    <label><input type="checkbox" name="gun-type" value="LMG"> LMG</label>
+                    <label><input type="checkbox" name="gun-type" value="PISTOL"> Pistol</label>
+                    <label><input type="checkbox" name="gun-type" value="SPECIAL"> Special</label>
+                    <label><input type="checkbox" name="gun-type" value="SEMI-AUTO"> Semi-Auto</label>
+                </fieldset>
 
 
                 <button type="submit">Create</button>
@@ -119,6 +116,8 @@
     <br>
     <div id="weapon-stats"></div>
     <div id="calculated-stats"></div>
+    <button id="copy-stats">Copy to Clipboard</button>
+    <div id="copy-message" aria-live="polite"></div>
     <h3>Operative Specific Modifiers</h3>
     <div id="operative-modifiers"></div>
     <div id="modifiers-container">
@@ -156,6 +155,13 @@
                 });
             }
         });
+        document.getElementById('weaponForm').addEventListener('submit', function (event) {
+            const checkboxes = document.querySelectorAll('input[name="gun-type"]:checked');
+            if (checkboxes.length === 0) {
+                event.preventDefault();
+                alert('Please select at least one weapon type.');
+            }
+        });
     </script>
 </main>
 </body>