web/templates/card_creator.html

@@ -64,6 +64,7 @@
   
 </div>
 
+<script src="{{ url_for('static', filename='js/jszip.min.js') }}"></script>
 <script>
   const canvas = document.getElementById("cardCanvas");
 const ctx = canvas.getContext("2d");
@@ -259,5 +260,43 @@ jsonBtn.onclick = () => {
 
 // Place the button below the downloadBtn
 downloadBtn.parentNode.insertBefore(jsonBtn, downloadBtn.nextSibling);
+
+const zipBtn = document.createElement("button");
+zipBtn.textContent = "Download Card ZIP";
+zipBtn.style.marginTop = "0.5rem";
+zipBtn.onclick = async () => {
+  const cardData = {
+    name: nameInput.value,
+    pack: packInput.value,
+    power: powerInput.value,
+    charm: charmInput.value,
+    wit: witInput.value,
+    flavor: flavorInput.value,
+    artist: artistInput.value,
+    frame: frameSelect.value
+  };
+  const safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
+  const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
+  const imgFileName = `kemoverse_${safePack}_${safeName}.webp`;
+  const jsonFileName = `kemoverse_${safePack}_${safeName}.json`;
+
+  // Create ZIP
+  const zip = new JSZip();
+  // Add image
+  const imgData = canvas.toDataURL("image/webp", 0.95).split(',')[1];
+  zip.file(imgFileName, imgData, {base64: true});
+  // Add JSON
+  zip.file(jsonFileName, JSON.stringify(cardData, null, 2));
+
+  // Generate and download
+  const content = await zip.generateAsync({type: "blob"});
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(content);
+  link.download = `kemoverse_${safePack}_${safeName}.zip`;
+  link.click();
+};
+
+// Place the button below the downloadBtn
+downloadBtn.parentNode.insertBefore(zipBtn, downloadBtn.nextSibling);
 </script>
 {% endblock %}