kemoverse/web/templates/card_creator.html

{% extends "_base.html" %}

{% block content %}
<style>

  button {
    background: #6aa1ff;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
  }

  button:hover {
    background: #4c87e4;
  }

  input, textarea {
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  input[type="file"] {
    padding: 0;
  }
</style>
<div class="container" style="max-width: 1100px; margin: auto; padding: 2rem;">

  <h1 style="margin-bottom: 2rem;">Card Creator</h1>

  <div style="display: flex; gap: 2rem; align-items: flex-start;">
  
    <!-- Left: Inputs -->
    <div style="flex: 1;">


      <input type="text" id="nameInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
      <input type="text" id="packInput" placeholder="Card Name" style="width: 100%; margin-bottom: 0.5rem;"><br>
      <input type="number" id="powerInput" placeholder="⚡ Power" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
      <input type="number" id="charmInput" placeholder="❤️ Charm" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
      <input type="number" id="witInput" placeholder="💫 Wit" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
      <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>
      <button id="downloadBtn" onclick="generateCard()">✨ Create Card</button>
    </div>
 <!-- Right: SVG Card Output -->
    <div id="cardOutput" style="flex: 1; border: 1px solid #ccc; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
       <canvas id="cardCanvas" width="800" height="1120"></canvas>
    </div>
  <!-- Hidden SVG Template -->
  
</div>

<script>
  const canvas = document.getElementById("cardCanvas");
const ctx = canvas.getContext("2d");

const nameInput = document.getElementById("nameInput");
const packInput = document.getElementById("packInput");
const powerInput = document.getElementById("powerInput");
const charmInput = document.getElementById("charmInput");
const witInput = document.getElementById("witInput");
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) {
  const encoder = new TextEncoder();
  const data = encoder.encode(args.join(':'));
  const hashBuffer = await crypto.subtle.digest('SHA-1', data);

  // Convert hash to hex
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  const hex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');

  // Return first 12 characters
  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];
  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
  ctx.fillStyle = "#FFFFFF";
  ctx.font = "bold 40px sans-serif";
  ctx.textAlign = "center";
  ctx.fillText(nameInput.value, canvas.width / 2, 100);
  ctx.font = "20px sans-serif";
  ctx.fillText(packInput.value, canvas.width / 2, 160);
  ctx.textAlign = "left";

  // Stats
  ctx.font = "30px sans-serif";
  ctx.fillText(powerInput.value, 220, 823);
  ctx.fillText(charmInput.value, 373, 823);
  ctx.fillText(witInput.value, 512, 823);

  // Flavor
  ctx.font = "italic 24px serif";
  ctx.textAlign = "center";
  wrapText(flavorInput.value, canvas.width / 2, 965, 558, 30);

  // Artist
  ctx.font = "30px sans-serif";
  ctx.textAlign = "center";
  ctx.fillStyle = "#000000";
  ctx.fillText(artistInput.value, canvas.width / 2, 1060);

  // Defer ID drawing to a separate async step!
  drawCardId();
}

async function drawCardId() {
  const id = await generateCardId(packInput.value, nameInput.value, powerInput.value, charmInput.value, witInput.value, artistInput.value);
  ctx.font = "15px sans-serif";
  ctx.fillText("KC-" + id, canvas.width/2, canvas.height - 30);
}


function wrapText(text, x, y, maxWidth, lineHeight) {
  const lines = text.split('\n');
  for (let i = 0; i < lines.length; i++) {
    let words = lines[i].split(" ");
    let line = "";
    for (let n = 0; n < words.length; n++) {
      const testLine = line + words[n] + " ";
      const metrics = ctx.measureText(testLine);
      const testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        ctx.fillText(line, x, y);
        line = words[n] + " ";
        y += lineHeight;
      } else {
        line = testLine;
      }
    }
    ctx.fillText(line, x, y);
    y += lineHeight;
  }
}

// Update card live when inputs change
[nameInput, powerInput, charmInput, witInput, flavorInput,packInput,artistInput].forEach(input => {
  input.addEventListener("input", drawCard);
});

// Download button
downloadBtn.addEventListener("click", () => {
  const link = document.createElement("a");
  link.download = "kemoverse-card.webp";
  link.href = canvas.toDataURL("image/webp");
  link.click();
});
</script>
{% endblock %}