Add image upload functionality to card creator and draw uploaded art

web/templates/card_creator.html

@@ -70,6 +70,8 @@ const flavorInput = document.getElementById("flavorInput");
 const artistInput = document.getElementById("artistInput");
 
 const downloadBtn = document.getElementById("downloadBtn");
+const uploadArt = document.getElementById("uploadArt");
+let uploadedImage = null;
 
 // Generate a unique ID for the card based on pack and card name
 async function generateCardId(...args) {
@@ -93,10 +95,28 @@ frameImage.onload = () => {
   drawCard();
 };
 
+uploadArt.addEventListener("change", function(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = function(event) {
+    uploadedImage = new Image();
+    uploadedImage.onload = drawCard;
+    uploadedImage.src = event.target.result;
+  };
+  reader.readAsDataURL(file);
+});
+
 function drawCard() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.fillStyle = "#f5f5f5";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // Draw uploaded art as background if present
+  if (uploadedImage) {
+    ctx.drawImage(uploadedImage, 0, 0, canvas.width, canvas.height);
+  }
+
   ctx.drawImage(frameImage, 0, 0, canvas.width, canvas.height);
 
   // Name & pack
@@ -170,6 +190,5 @@ downloadBtn.addEventListener("click", () => {
   link.href = canvas.toDataURL("image/png");
   link.click();
 });
-
 </script>
 {% endblock %}