class cards

This commit is contained in:
Kyle
2021-07-10 16:49:25 -07:00
parent 70979fa63e
commit 3b4e023f27
31 changed files with 186 additions and 2 deletions

View File

@@ -9,6 +9,7 @@ loadFramePacks([
{name:'Colored Borders', value:'M15Borders'},
{name:'Other Frames', value:'disabled'},
{name:'Lands', value:'M15Lands'},
{name:'Class (D&D)', value:'Class'},
{name:'Snow (Kaldheim)', value:'M15Snow'},
{name:'Mutate (Ikoria)', value:'M15Mutate'},
{name:'Nyx (Theros)', value:'M15Nyx'},

51
js/frames/packClass.js Normal file
View File

@@ -0,0 +1,51 @@
//Create objects for common properties across available frames
var masks = [{src:'/img/frames/class/pinline.svg', name:'Pinline'}, {src:'/img/frames/m15/regular/m15MaskTitle.png', name:'Title'}, {src:'/img/frames/saga/sagaMaskType.png', name:'Type'}, {src:'/img/frames/class/frame.svg', name:'Frame'}, {src:'/img/frames/class/text.svg', name:'Text'}, {src:'/img/frames/class/textRight.png', name:'Text, Right Half'}, {src:'/img/frames/class/border.svg', name:'Border'}];
//defines available frames
availableFrames = [
{name:'White Frame', src:'/img/frames/class/w.png', masks:masks},
{name:'Blue Frame', src:'/img/frames/class/u.png', masks:masks},
{name:'Black Frame', src:'/img/frames/class/b.png', masks:masks},
{name:'Red Frame', src:'/img/frames/class/r.png', masks:masks},
{name:'Green Frame', src:'/img/frames/class/g.png', masks:masks},
{name:'Multicolored Frame', src:'/img/frames/class/m.png', masks:masks},
{name:'Artifact Frame', src:'/img/frames/class/a.png', masks:masks},
{name:'Land Frame', src:'/img/frames/class/l.png', masks:masks}
];
//disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = false;
//defines process for loading this version, if applicable
document.querySelector('#loadFrameVersion').onclick = async function() {
//resets things so that every frame doesn't have to
await resetCardIrregularities();
//sets card version
card.version = 'class';
card.onload = '/js/frames/versionClass.js';
loadScript('/js/frames/versionClass.js');
//art bounds
card.artBounds = {x:0.0753, y:0.1124, width:0.4247, height:0.7253};
autoFitArt();
//set symbol bounds
card.setSymbolBounds = {x:0.9227, y:0.8739, width:0.12, height:0.0381, vertical:'center', horizontal: 'right'};
resetSetSymbol();
//watermark bounds
card.watermarkBounds = {x:0.5214, y:0.4748, width:0.38, height:0.6767};
resetWatermark();
//text
loadTextOptions({
mana: {name:'Mana Cost', text:'', y:0.0613, width:0.9292, height:71/2100, oneLine:true, size:71/1638, align:'right', shadowX:-0.001, shadowY:0.0029, manaCost:true, manaSpacing:0},
title: {name:'Title', text:'', x:0.0854, y:0.0522, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0381},
type: {name:'Type', text:'', x:0.0854, y:0.8481, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324},
level0c: {name:'1 - Text', text:'{i}(Gain the next level as a sorcery to add its ability.){/i}{lns}{bar}{lns}', x:0.5093, y:0.1129, width:0.404, height:0.2096, size:0.0305},
level1a: {name:'2 - Cost', text:'{2}:', x:0.5093, y:0, width:0.3967, height:0.0277, size:0.0277},
level1b: {name:'2 - Name', text:'Level 2', x:0.5093, y:0, width:0.3967, height:0.0281, size:0.0281, align:'right'},
level1c: {name:'2 - Text', text:'', x:0.5093, y:0, width:0.404, height:0.2091, size:0.0305},
level2a: {name:'3 - Cost', text:'{3}:', x:0.5093, y:0, width:0.3967, height:0.0277, size:0.0277},
level2b: {name:'3 - Name', text:'Level 3', x:0.5093, y:0, width:0.3967, height:0.0281, size:0.0281, align:'right'},
level2c: {name:'3 - Text', text:'', x:0.5093, y:0, width:0.404, height:0.2091, size:0.0305},
level3a: {name:'4 - Cost', text:'{4}:', x:0.5093, y:0, width:0.3967, height:0.0277, size:0.0277},
level3b: {name:'4 - Name', text:'Level 4', x:0.5093, y:0, width:0.3967, height:0.0281, size:0.0281, align:'right'},
level3c: {name:'4 - Text', text:'', x:0.5093, y:0, width:0.404, height:0, size:0.0305}
});
}
//loads available frames
loadFramePack();

94
js/frames/versionClass.js Normal file
View File

@@ -0,0 +1,94 @@
//checks to see if it needs to run
if (!loadedVersions.includes('/js/frames/versionClass.js')) {
loadedVersions.push('/js/frames/versionClass.js');
sizeCanvas('class');
document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `class`)">Class</h3>';
var newHTML = document.createElement('div');
newHTML.id = 'creator-menu-class';
newHTML.classList.add('hidden');
newHTML.innerHTML = `
<div class='readable-background padding'>
<h5 class='padding margin-bottom input-description'>Adjust the height of each Class level</h5>
<h5 class='padding margin-bottom input-description'>First Level:</h5>
<div class='padding input-grid margin-bottom'>
<input id='class-height-0' type='number' class='input' oninput='classEdited();' min='0'>
</div>
<h5 class='padding margin-bottom input-description'>Second Level:</h5>
<div class='padding input-grid margin-bottom'>
<input id='class-height-1' type='number' class='input' oninput='classEdited();' min='0'>
</div>
<h5 class='padding margin-bottom input-description'>Third Level:</h5>
<div class='padding input-grid margin-bottom'>
<input id='class-height-2' type='number' class='input' oninput='classEdited();' min='0'>
</div>
<h5 class='padding margin-bottom input-description'>Fourth Level:</h5>
<div class='padding input-grid margin-bottom'>
<input id='class-height-3' type='number' class='input' oninput='classEdited();' min='0'>
</div>
</div>`;
if (!card.class) {
card.class = {x:0.5014 , width:0.422, count:0}
}
document.querySelector('#creator-menu-sections').appendChild(newHTML);
var classHeader = new Image();
classHeader.src = '/img/frames/class/header.png';
classHeader.onload = classEdited;
fixClassInputs(classEdited);
} else {
fixClassInputs(classEdited);
}
function classEdited() {
//gather data
card.class.count = 0;
var lastY = card.text.level0c.y;
for (var i = 0; i < 4; i ++) {
var height = parseFloat((parseInt(document.querySelector('#class-height-' + i).value) / card.height).toFixed(4));
card.text['level' + i + 'c'].height = height || 1;
if (i > 0) {
if (height > 0) {
card.class.count ++;
card.text['level' + i + 'a'].y = lastY - 0.0361;
card.text['level' + i + 'b'].y = lastY - 0.0361;
card.text['level' + i + 'c'].y = lastY;
} else {
card.text['level' + i + 'a'].y = 2;
card.text['level' + i + 'b'].y = 2;
card.text['level' + i + 'c'].y = 2;
}
} else {
card.text['level0c'].height;
}
lastY += height + 0.0481;
}
//draw to class canvas
classContext.clearRect(0, 0, classCanvas.width, classCanvas.height);
for (var i = 1; i <= card.class.count; i ++) {
if (i == card.class.count) {
finalHeight = 0.8368 - card.text['level' + i + 'c'].y;
if (finalHeight <= 0) {
finalHeight = 0.05;
}
card.text['level' + i + 'c'].height = finalHeight;
}
var x = scaleX(card.class.x);
var y = scaleY(card.text['level' + i + 'c'].y);
var width = scaleWidth(card.class.width);
var height = scaleHeight(card.text['level' + i + 'c'].height);
if (classHeader.complete) {
classContext.drawImage(classHeader, x, y - scaleHeight(0.0481), width, scaleHeight(0.0481));
}
}
drawTextBuffer();
drawCard();
}
function fixClassInputs(callback) {
document.querySelector('#class-height-0').value = scaleHeight(card.text.level0c.height);
document.querySelector('#class-height-1').value = scaleHeight(card.text.level1c.height);
document.querySelector('#class-height-2').value = scaleHeight(card.text.level2c.height);
document.querySelector('#class-height-3').value = scaleHeight(card.text.level3c.height);
if (callback) {
callback();
}
}