Update versionPlaneswalker.js

This commit is contained in:
Kyle
2021-06-07 17:15:06 -07:00
parent 3a339470b7
commit 23e9e2c170

View File

@@ -8,33 +8,36 @@ if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
newHTML.classList.add('hidden'); newHTML.classList.add('hidden');
newHTML.innerHTML = ` newHTML.innerHTML = `
<div class='readable-background padding'> <div class='readable-background padding'>
<h5 class='padding margin-bottom input-description'>Adjust the height (first input) and loyalty cost (second input) of each Planeswalker ability</h5> <h5 class='padding margin-bottom input-description'>Adjust the height (first input), loyalty cost (second input), and loyalty placement (third input) of each Planeswalker ability</h5>
<h5 class='padding margin-bottom input-description'>First Ability:</h5> <h5 class='padding margin-bottom input-description'>First Ability:</h5>
<div class='padding input-grid margin-bottom'> <div class='padding input-grid margin-bottom'>
<input id='planeswalker-height-0' type='number' class='input' oninput='planeswalkerEdited();' min='0'> <input id='planeswalker-height-0' type='number' class='input' oninput='planeswalkerEdited();' min='0'>
<input id='planeswalker-cost-0' type='text' class='input' oninput='planeswalkerEdited();'> <input id='planeswalker-cost-0' type='text' class='input' oninput='planeswalkerEdited();'>
<input id='planeswalker-shift-0' type='number' class='input' oninput='planeswalkerEdited();'>
</div> </div>
<h5 class='padding margin-bottom input-description'>Second Ability:</h5> <h5 class='padding margin-bottom input-description'>Second Ability:</h5>
<div class='padding input-grid margin-bottom'> <div class='padding input-grid margin-bottom'>
<input id='planeswalker-height-1' type='number' class='input' oninput='planeswalkerEdited();' min='0'> <input id='planeswalker-height-1' type='number' class='input' oninput='planeswalkerEdited();' min='0'>
<input id='planeswalker-cost-1' type='text' class='input' oninput='planeswalkerEdited();'> <input id='planeswalker-cost-1' type='text' class='input' oninput='planeswalkerEdited();'>
<input id='planeswalker-shift-1' type='number' class='input' oninput='planeswalkerEdited();'>
</div> </div>
<h5 class='padding margin-bottom input-description'>Third Ability:</h5> <h5 class='padding margin-bottom input-description'>Third Ability:</h5>
<div class='padding input-grid margin-bottom'> <div class='padding input-grid margin-bottom'>
<input id='planeswalker-height-2' type='number' class='input' oninput='planeswalkerEdited();' min='0'> <input id='planeswalker-height-2' type='number' class='input' oninput='planeswalkerEdited();' min='0'>
<input id='planeswalker-cost-2' type='text' class='input' oninput='planeswalkerEdited();'> <input id='planeswalker-cost-2' type='text' class='input' oninput='planeswalkerEdited();'>
<input id='planeswalker-shift-2' type='number' class='input' oninput='planeswalkerEdited();'>
</div> </div>
<h5 class='padding margin-bottom input-description'>Fourth Ability:</h5> <h5 class='padding margin-bottom input-description'>Fourth Ability:</h5>
<div class='padding input-grid margin-bottom'> <div class='padding input-grid margin-bottom'>
<input id='planeswalker-height-3' type='number' class='input' oninput='planeswalkerEdited();' min='0'> <input id='planeswalker-height-3' type='number' class='input' oninput='planeswalkerEdited();' min='0'>
<input id='planeswalker-cost-3' type='text' class='input' oninput='planeswalkerEdited();'> <input id='planeswalker-cost-3' type='text' class='input' oninput='planeswalkerEdited();'>
<input id='planeswalker-shift-3' type='number' class='input' oninput='planeswalkerEdited();'>
</div> </div>
<h5 class='padding margin-bottom input-description'>Invert textbox colors:</h5> <h5 class='padding margin-bottom input-description'>Invert textbox colors:</h5>
<input id='planeswalker-invert' class='input margin-bottom' type='checkbox' onchange='invertPlaneswalkerColors();'> <input id='planeswalker-invert' class='input margin-bottom' type='checkbox' onchange='invertPlaneswalkerColors();'>
<h5 class='padding margin-bottom input-description'>For two-ability planeswalkers only:</h5>
</div>`; </div>`;
if (!card.planeswalker) { if (!card.planeswalker) {
card.planeswalker = {abilities:['+1', '0', '-7', ''], count:3, x:0.1167, width:0.8094}; card.planeswalker = {abilities:['+1', '0', '-7', ''], abilityAdjust:[0, 0, 0, 0], count:3, x:0.1167, width:0.8094};
} }
window.planeswalkerAbilityLayout = [[[0.7467], [0.6953, 0.822], [0.6639, 0.7467, 0.8362], [0.6505, 0.72, 0.7905, 0.861]],[[0.72], [0.6391, 0.801], [0.5986, 0.72, 0.8415], [0.5986, 0.6796, 0.7605, 0.8415]]]; window.planeswalkerAbilityLayout = [[[0.7467], [0.6953, 0.822], [0.6639, 0.7467, 0.8362], [0.6505, 0.72, 0.7905, 0.861]],[[0.72], [0.6391, 0.801], [0.5986, 0.72, 0.8415], [0.5986, 0.6796, 0.7605, 0.8415]]];
document.querySelector('#creator-menu-sections').appendChild(newHTML); document.querySelector('#creator-menu-sections').appendChild(newHTML);
@@ -77,6 +80,10 @@ function planeswalkerEdited() {
card.planeswalker.abilities[1] = document.querySelector('#planeswalker-cost-1').value; card.planeswalker.abilities[1] = document.querySelector('#planeswalker-cost-1').value;
card.planeswalker.abilities[2] = document.querySelector('#planeswalker-cost-2').value; card.planeswalker.abilities[2] = document.querySelector('#planeswalker-cost-2').value;
card.planeswalker.abilities[3] = document.querySelector('#planeswalker-cost-3').value; card.planeswalker.abilities[3] = document.querySelector('#planeswalker-cost-3').value;
card.planeswalker.abilityAdjust[0] = document.querySelector('#planeswalker-shift-0').value / card.height;
card.planeswalker.abilityAdjust[1] = document.querySelector('#planeswalker-shift-1').value / card.height;
card.planeswalker.abilityAdjust[2] = document.querySelector('#planeswalker-shift-2').value / card.height;
card.planeswalker.abilityAdjust[3] = document.querySelector('#planeswalker-shift-3').value / card.height;
card.planeswalker.count = 0; card.planeswalker.count = 0;
var lastY = card.text.ability0.y; var lastY = card.text.ability0.y;
for (var i = 0; i < 4; i ++) { for (var i = 0; i < 4; i ++) {
@@ -130,7 +137,7 @@ function planeswalkerEdited() {
planeswalkerContext.textAlign = 'center'; planeswalkerContext.textAlign = 'center';
for (var i = 0; i < card.planeswalker.count; i ++) { for (var i = 0; i < card.planeswalker.count; i ++) {
var planeswalkerIconValue = card.planeswalker.abilities[i]; var planeswalkerIconValue = card.planeswalker.abilities[i];
var planeswalkerPlacement = scaleY(planeswalkerAbilityLayout[planeswalkerTall][card.planeswalker.count - 1][i]) var planeswalkerPlacement = scaleY(planeswalkerAbilityLayout[planeswalkerTall][card.planeswalker.count - 1][i] + card.planeswalker.abilityAdjust[i])
if (planeswalkerIconValue.includes('+')) { if (planeswalkerIconValue.includes('+')) {
if (plusIcon.complete) { if (plusIcon.complete) {
planeswalkerContext.drawImage(plusIcon, scaleX(0.0294), planeswalkerPlacement - scaleHeight(0.0258), scaleWidth(0.14), scaleHeight(0.0724)); planeswalkerContext.drawImage(plusIcon, scaleX(0.0294), planeswalkerPlacement - scaleHeight(0.0258), scaleWidth(0.14), scaleHeight(0.0724));
@@ -155,12 +162,16 @@ function planeswalkerEdited() {
function fixPlaneswalkerInputs(callback) { function fixPlaneswalkerInputs(callback) {
document.querySelector('#planeswalker-height-0').value = scaleHeight(card.text.ability0.height); document.querySelector('#planeswalker-height-0').value = scaleHeight(card.text.ability0.height);
document.querySelector('#planeswalker-cost-0').value = card.planeswalker.abilities[0]; document.querySelector('#planeswalker-cost-0').value = card.planeswalker.abilities[0];
document.querySelector('#planeswalker-shift-0').value = scaleHeight(card.planeswalker.abilityAdjust[0]);
document.querySelector('#planeswalker-height-1').value = scaleHeight(card.text.ability1.height); document.querySelector('#planeswalker-height-1').value = scaleHeight(card.text.ability1.height);
document.querySelector('#planeswalker-cost-1').value = card.planeswalker.abilities[1]; document.querySelector('#planeswalker-cost-1').value = card.planeswalker.abilities[1];
document.querySelector('#planeswalker-shift-1').value = scaleHeight(card.planeswalker.abilityAdjust[1]);
document.querySelector('#planeswalker-height-2').value = scaleHeight(card.text.ability2.height); document.querySelector('#planeswalker-height-2').value = scaleHeight(card.text.ability2.height);
document.querySelector('#planeswalker-cost-2').value = card.planeswalker.abilities[2]; document.querySelector('#planeswalker-cost-2').value = card.planeswalker.abilities[2];
document.querySelector('#planeswalker-shift-2').value = scaleHeight(card.planeswalker.abilityAdjust[2]);
document.querySelector('#planeswalker-height-3').value = scaleHeight(card.text.ability3.height); document.querySelector('#planeswalker-height-3').value = scaleHeight(card.text.ability3.height);
document.querySelector('#planeswalker-cost-3').value = card.planeswalker.abilities[3]; document.querySelector('#planeswalker-cost-3').value = card.planeswalker.abilities[3];
document.querySelector('#planeswalker-shift-3').value = scaleHeight(card.planeswalker.abilityAdjust[3]);
if (callback) { if (callback) {
callback(); callback();
} }