-
+
@@ -80,9 +93,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();
@@ -124,6 +147,10 @@ frameSelect.addEventListener("change", updateFrame);
function drawCard() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
+ // Place a white background
+ ctx.fillStyle = "#FFFFFF"; // white background
+ // make it smaller than the size of the canvas
+ ctx.fillRect(30, 30, canvas.width - 60, canvas.height - 60);
// Draw uploaded art as cropped and centered background if present
if (uploadedImage) {
@@ -187,9 +214,9 @@ function drawCard() {
}
async function drawCardId() {
- const id = await generateCardId(packInput.value, nameInput.value, powerInput.value, charmInput.value, witInput.value, artistInput.value);
+ const id = await generateCardId(packInput.value, nameInput.value, powerInput.value, charmInput.value, witInput.value, artistInput.value,packIdInput.value);
ctx.font = "15px sans-serif";
- ctx.fillText("Kemoverse - " + id, canvas.width/2, canvas.height - 30);
+ ctx.fillText("Kemoverse - SHA: " + id + " - PI:" + packIdInput.value, canvas.width/2, canvas.height - 30);
}
@@ -216,10 +243,54 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
}
// Update card live when inputs change
-[nameInput, powerInput, charmInput, witInput, flavorInput,packInput,artistInput].forEach(input => {
+[nameInput, powerInput, charmInput, witInput, flavorInput, packInput, artistInput, packIdInput].forEach(input => {
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
@@ -240,13 +311,14 @@ jsonBtn.onclick = () => {
const cardData = {
name: nameInput.value,
pack: packInput.value,
+ pack_id: packIdInput.value,
power: powerInput.value,
charm: charmInput.value,
wit: witInput.value,
flavor: flavorInput.value,
artist: artistInput.value,
frame: frameSelect.value,
- id: generateCardId(packInput.value, nameInput.value, powerInput.value, charmInput.value, witInput.value, artistInput.value)
+ id: generateCardId(packInput.value, nameInput.value, powerInput.value, charmInput.value, witInput.value, artistInput.value, packIdInput.value)
};
const safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
@@ -269,6 +341,7 @@ zipBtn.onclick = async () => {
const cardData = {
name: nameInput.value,
pack: packInput.value,
+ pack_id: packIdInput.value,
power: powerInput.value,
charm: charmInput.value,
wit: witInput.value,
@@ -281,6 +354,7 @@ zipBtn.onclick = async () => {
const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
const imgFileName = `kemoverse_${safePack}_${safeName}.webp`;
const jsonFileName = `kemoverse_${safePack}_${safeName}.json`;
+ const zipFileName = `kemoverse_${safePack}_${safeName}.zip`;
// Create ZIP
const zip = new JSZip();
@@ -294,7 +368,7 @@ zipBtn.onclick = async () => {
const content = await zip.generateAsync({type: "blob"});
const link = document.createElement("a");
link.href = URL.createObjectURL(content);
- link.download = `kemoverse_${safePack}_${safeName}.zip`;
+ link.download = zipFileName;
link.click();
};