Add frame selection dropdown to card creator for customizable card designs

web/templates/card_creator.html

@@ -47,6 +47,13 @@
       <textarea id="flavorInput" placeholder="Flavor text..." rows="4" style="width: 100%; margin-bottom: 0.5rem;"></textarea><br>
       <input type="text" id="artistInput" placeholder="Artist Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
       <input type="file" id="uploadArt" style="margin-bottom: 0.5rem;"><br>
+      <select id="frameSelect" style="width: 100%; margin-bottom: 0.5rem;">
+        <option value="v1_common.png" selected>Common</option>
+        <option value="v1_uncommon.png">Uncommon</option>
+        <option value="v1_rare.png">Rare</option>
+        <option value="v1_epic.png">Epic</option>
+        <option value="v1_legendary.png">Legendary</option>
+      </select>
       <button id="downloadBtn" onclick="generateCard()">✨ Create Card</button>
     </div>
  <!-- Right: SVG Card Output -->
@@ -71,6 +78,8 @@ const artistInput = document.getElementById("artistInput");
 
 const downloadBtn = document.getElementById("downloadBtn");
 const uploadArt = document.getElementById("uploadArt");
+const frameSelect = document.getElementById("frameSelect");
+let frameImage = new Image();
 let uploadedImage = null;
 
 // Generate a unique ID for the card based on pack and card name
@@ -87,13 +96,6 @@ async function generateCardId(...args) {
   return hex.slice(0, 12);
 }
 
-// Load the card frame image
-const frameImage = new Image();
-frameImage.src = "{{ url_for('static', filename='card-frame.png') }}"; // <-- replace with your transparent card frame PNG
-
-frameImage.onload = () => {
-  drawCard();
-};
 
 uploadArt.addEventListener("change", function(e) {
   const file = e.target.files[0];
@@ -107,6 +109,18 @@ uploadArt.addEventListener("change", function(e) {
   reader.readAsDataURL(file);
 });
 
+// Update frame image when selection changes
+function updateFrame() {
+  frameImage.src = "{{ url_for('static', filename='') }}" + frameSelect.value;
+  frameImage.onload = drawCard;
+}
+
+// Initial frame load
+updateFrame();
+
+// Change frame when dropdown changes
+frameSelect.addEventListener("change", updateFrame);
+
 function drawCard() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.fillStyle = "#f5f5f5";