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");

// Generate a unique ID for the card based on pack and card name
async function generateCardId(packName, cardName) {
  const encoder = new TextEncoder();
  const data = encoder.encode(packName + ':' + cardName);
  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();
};

function drawCard() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#f5f5f5";
  ctx.fillRect(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, 230, 823);
  ctx.fillText(charmInput.value, 370, 823);
  ctx.fillText(witInput.value, 515, 823);

  // Flavor
  ctx.font = "italic 24px serif";
  wrapText(flavorInput.value, 60, 950, 680, 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);
  ctx.font = "20px sans-serif";
  ctx.fillText("KC-" + id, canvas.width - 350, canvas.height - 60);
}


function wrapText(text, x, y, maxWidth, lineHeight) {
  const words = text.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);
}

// 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.png";
  link.href = canvas.toDataURL("image/png");
  link.click();
});

</script>
{% endblock %}