Add stat restriction feature based on rarity caps in card creator

web/templates/card_creator.html

@@ -41,8 +41,10 @@
       <p>Use this tool to create custom Kemoverse cards! Fill in the details below, upload your art, and generate a card image.</p>
       <p>Note: The card ID is generated based on the details, so make sure to fill them out!</p>
 
-    
-
+      <div style="margin-bottom: 0.5rem;">
+        <input type="checkbox" id="restrictStatsToggle" checked>
+        <label for="restrictStatsToggle">Restrict stats by rarity</label>
+      </div>
 
       <input type="text" id="nameInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
       <input type="text" id="packInput" placeholder="Pack name" style="width: 100%; margin-bottom: 0.5rem;"><br>
@@ -86,9 +88,19 @@ const artistInput = document.getElementById("artistInput");
 const downloadBtn = document.getElementById("downloadBtn");
 const uploadArt = document.getElementById("uploadArt");
 const frameSelect = document.getElementById("frameSelect");
+const restrictStatsToggle = document.getElementById("restrictStatsToggle");
 let frameImage = new Image();
 let uploadedImage = null;
 
+// Rarity caps for stats
+const rarityCaps = {
+  "v1_common.png": 100,
+  "v1_uncommon.png": 140,
+  "v1_rare.png": 180,
+  "v1_epic.png": 220,
+  "v1_legendary.png": 250
+};
+
 // Generate a unique ID for the card based on pack and card name
 async function generateCardId(...args) {
   const encoder = new TextEncoder();
@@ -226,6 +238,50 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
   input.addEventListener("input", drawCard);
 });
 
+// Enforce stat caps based on rarity and frame
+function enforceStatCap(changedInput) {
+  if (!restrictStatsToggle.checked) return;
+  const cap = rarityCaps[frameSelect.value] || 9999;
+  let power = parseInt(powerInput.value) || 0;
+  let charm = parseInt(charmInput.value) || 0;
+  let wit = parseInt(witInput.value) || 0;
+  let total = power + charm + wit;
+  if (total > cap) {
+    // Reduce the changed input to fit the cap
+    const excess = total - cap;
+    if (changedInput === powerInput) {
+      power = Math.max(0, power - excess);
+      powerInput.value = power;
+    } else if (changedInput === charmInput) {
+      charm = Math.max(0, charm - excess);
+      charmInput.value = charm;
+    } else if (changedInput === witInput) {
+      wit = Math.max(0, wit - excess);
+      witInput.value = wit;
+    }
+  }
+}
+
+[powerInput, charmInput, witInput].forEach(input => {
+  input.addEventListener("input", function() {
+    enforceStatCap(this);
+    drawCard();
+  });
+});
+
+frameSelect.addEventListener("change", function() {
+  if (restrictStatsToggle.checked) {
+    enforceStatCap();
+  }
+  updateFrame();
+});
+
+restrictStatsToggle.addEventListener("change", function() {
+  if (this.checked) {
+    enforceStatCap();
+  }
+});
+
 // Download button
 downloadBtn.addEventListener("click", () => {
   // Sanitize file name