waifu/kemoverse
waifu/kemoverse
3
2
Fork 3
Code Issues 13 Pull requests 1 Projects 1 Releases Packages Wiki Activity

Add Wit and Artist fields to card creation; update drawing logic

Browse source
This commit is contained in:
w 2025-07-16 22:19:07 -03:00
parent 84fc17398d
commit 05711c22f2
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
web/templates/card_creator.html
View file

@ -43,8 +43,9 @@
<input type="text" id="packInput" 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="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="charmInput" placeholder="❤️ Charm" min="0" max="999" style="width: 100%; margin-bottom: 0.5rem;"><br>
<input type="number" id="popularityInput" placeholder="💫 Popularity" 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> <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> <input type="file" id="uploadArt" style="margin-bottom: 0.5rem;"><br>
<button id="downloadBtn" onclick="generateCard()">✨ Create Card</button> <button id="downloadBtn" onclick="generateCard()">✨ Create Card</button>
</div> </div>
@ -64,8 +65,9 @@ const nameInput = document.getElementById("nameInput");
const packInput = document.getElementById("packInput"); const packInput = document.getElementById("packInput");
const powerInput = document.getElementById("powerInput"); const powerInput = document.getElementById("powerInput");
const charmInput = document.getElementById("charmInput"); const charmInput = document.getElementById("charmInput");
const popularityInput = document.getElementById("popularityInput"); const witInput = document.getElementById("witInput");
const flavorInput = document.getElementById("flavorInput"); const flavorInput = document.getElementById("flavorInput");
const artistInput = document.getElementById("artistInput");
const downloadBtn = document.getElementById("downloadBtn"); const downloadBtn = document.getElementById("downloadBtn");
@ -103,19 +105,25 @@ function drawCard() {
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.fillText(nameInput.value, canvas.width / 2, 100); ctx.fillText(nameInput.value, canvas.width / 2, 100);
ctx.font = "20px sans-serif"; ctx.font = "20px sans-serif";
ctx.fillText(packInput.value, canvas.width / 2, 140); ctx.fillText(packInput.value, canvas.width / 2, 160);
ctx.textAlign = "left"; ctx.textAlign = "left";
// Stats // Stats
ctx.font = "30px sans-serif"; ctx.font = "30px sans-serif";
ctx.fillText("Power: " + powerInput.value, 60, 1050); ctx.fillText(powerInput.value, 230, 823);
ctx.fillText("Charm: " + charmInput.value, 300, 1050); ctx.fillText(charmInput.value, 370, 823);
ctx.fillText("Popularity: " + popularityInput.value, 540, 1050); ctx.fillText(witInput.value, 515, 823);
// Flavor // Flavor
ctx.font = "italic 24px serif"; ctx.font = "italic 24px serif";
wrapText(flavorInput.value, 60, 950, 680, 30); 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! // Defer ID drawing to a separate async step!
drawCardId(); drawCardId();
} }
@ -146,7 +154,7 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
} }
// Update card live when inputs change // Update card live when inputs change
[nameInput, powerInput, charmInput, popularityInput, flavorInput,packInput].forEach(input => { [nameInput, powerInput, charmInput, witInput, flavorInput,packInput,artistInput].forEach(input => {
input.addEventListener("input", drawCard); input.addEventListener("input", drawCard);
}); });