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

Add Pack Index input and update card ID generation in card creator

Browse source
This commit is contained in:
w 2025-07-20 01:39:01 -03:00
parent 98c36f913f
commit a248eb4864
1 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/templates/card_creator.html
View file

@ -40,6 +40,8 @@
<p>Use this tool to create custom Kemoverse cards! Fill in the details below, upload your art, and generate a card image.</p> <p>Use this tool to create custom Kemoverse cards! Fill in the details below, upload your art, and generate a card image.</p>
<p>Note: The card ID is generated based on the details, so make sure to fill them out!</p> <p>Note: The card ID is generated based on the details, so make sure to fill them out!</p>
<div style="margin-bottom: 0.5rem;"> <div style="margin-bottom: 0.5rem;">
<input type="checkbox" id="restrictStatsToggle" checked> <input type="checkbox" id="restrictStatsToggle" checked>
@ -51,6 +53,7 @@
<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="witInput" placeholder="💫 Wit" 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>
<input type="number" id="packIdInput" placeholder="Pack Index" min="0" max="9999" 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="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>
@ -62,6 +65,8 @@
<option value="v1_legendary.png">Legendary (250)</option> <option value="v1_legendary.png">Legendary (250)</option>
</select> </select>
<button id="downloadBtn" onclick="generateCard()">✨ Create Card</button> <button id="downloadBtn" onclick="generateCard()">✨ Create Card</button>
<p>PI: Pack Index is used to identify the card within a pack.</p>
<p>SHA: Secure Hash Algorithm is used to generate a unique ID for the card based on its attributes.</p>
<p>All the processing is done in your browser, no data is sent to the server.</p> <p>All the processing is done in your browser, no data is sent to the server.</p>
</div> </div>
<!-- Right: SVG Card Output --> <!-- Right: SVG Card Output -->
@ -209,9 +214,9 @@ function drawCard() {
} }
async function drawCardId() { 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.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);
} }
@ -238,7 +243,7 @@ function wrapText(text, x, y, maxWidth, lineHeight) {
} }
// Update card live when inputs change // 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); input.addEventListener("input", drawCard);
}); });
@ -306,13 +311,14 @@ jsonBtn.onclick = () => {
const cardData = { const cardData = {
name: nameInput.value, name: nameInput.value,
pack: packInput.value, pack: packInput.value,
pack_id: packIdInput.value,
power: powerInput.value, power: powerInput.value,
charm: charmInput.value, charm: charmInput.value,
wit: witInput.value, wit: witInput.value,
flavor: flavorInput.value, flavor: flavorInput.value,
artist: artistInput.value, artist: artistInput.value,
frame: frameSelect.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 safeName = (nameInput.value || "card").replace(/[^a-z0-9_\-]/gi, "_");
const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_"); const safePack = (packInput.value || "pack").replace(/[^a-z0-9_\-]/gi, "_");
@ -335,6 +341,7 @@ zipBtn.onclick = async () => {
const cardData = { const cardData = {
name: nameInput.value, name: nameInput.value,
pack: packInput.value, pack: packInput.value,
pack_id: packIdInput.value,
power: powerInput.value, power: powerInput.value,
charm: charmInput.value, charm: charmInput.value,
wit: witInput.value, wit: witInput.value,