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

BIN
img/frames/class/a.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
img/frames/class/aThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/frames/class/b.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
img/frames/class/bThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
<clipPath id="_clip1">
<rect id="Card1" serif:id="Card" x="0" y="0" width="1500" height="2100"/>
</clipPath>
<g clip-path="url(#_clip1)">
<path id="Classic" d="M0,2100L0,0L1500,0L1500,2100L0,2100ZM1421.56,1826.2C1433.64,1805.36 1439.59,1781.66 1440,1765L1440,85C1437.14,71.038 1428.74,62.781 1415,60L85,60C71.263,62.781 62.855,71.038 60,85L60,1765C60.414,1781.66 66.359,1805.36 78.439,1826.2C78.192,1829.09 78.043,1832.02 78,1835C78.481,1868.05 91.996,1896.02 106,1907L189.087,1907C238.414,1925.01 299.902,1934.58 370,1933L1130,1933C1200.1,1934.58 1261.59,1925.01 1310.91,1907L1394,1907C1408,1896.02 1421.52,1868.05 1422,1835C1421.96,1832.02 1421.81,1829.09 1421.56,1826.2Z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 944 B

View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
<g id="Card1" serif:id="Card">
<path d="M1309.76,1907.42L1310.91,1907L189.087,1907C238.414,1925.01 299.902,1934.58 370,1933L1130,1933C1199.55,1934.57 1260.63,1925.16 1309.76,1907.42ZM78.439,1826.2C66.359,1805.36 60.414,1781.66 60,1765L60,85C62.855,71.038 71.263,62.781 85,60L1415,60C1428.74,62.781 1437.14,71.038 1440,85L1440,1765C1439.59,1781.66 1433.64,1805.36 1421.56,1826.2C1419.47,1801.67 1410.41,1780.76 1400,1768.79L1400,227.213C1411.64,213.828 1421.59,189.276 1422,161C1421.52,127.948 1408,99.984 1394,89L106,89C91.996,99.984 78.481,127.948 78,161C78.412,189.278 88.364,213.833 100,227.213L100,1768.79C89.587,1780.76 80.526,1801.68 78.439,1826.2Z" style="fill:rgb(0,123,67);"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/frames/class/g.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
img/frames/class/gThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/frames/class/header.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
img/frames/class/l.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1001 KiB

BIN
img/frames/class/lThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/frames/class/m.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
img/frames/class/mThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
<g id="Card1" serif:id="Card">
<path id="Type--Regular-" serif:id="Type (Regular)" d="M100,227.213C88.364,213.833 78.412,189.278 78,161C78.481,127.948 91.996,99.984 106,89L1394,89C1408,99.984 1421.52,127.948 1422,161C1421.59,189.276 1411.64,213.828 1400,227.213L1400,1768.79C1411.64,1782.17 1421.59,1806.72 1422,1835C1421.52,1868.05 1408,1896.02 1394,1907L106,1907C91.996,1896.02 78.481,1868.05 78,1835C78.412,1806.72 88.362,1782.17 100,1768.79L100,227.213ZM1388.24,1774.01C1389.44,1774.08 1390.56,1774.69 1391.26,1775.68C1405.33,1795.45 1410.29,1815.23 1410.29,1835C1410.29,1854.77 1405.33,1874.55 1391.26,1894.32C1390.51,1895.37 1389.29,1896 1388,1896L112,1896C110.706,1896 109.492,1895.37 108.741,1894.32C94.667,1874.55 89.714,1854.77 89.714,1835C89.714,1815.23 94.667,1795.45 108.741,1775.68C109.492,1774.63 110.706,1774 112,1774L1388,1774L1388.24,1774.01ZM111,233L111,1763L1389,1763L1389,233L111,233ZM112,100L1388,100C1389.29,100 1390.51,100.626 1391.26,101.68C1405.33,121.453 1410.29,141.227 1410.29,161C1410.29,180.773 1405.33,200.547 1391.26,220.32C1390.51,221.374 1389.29,222 1388,222L112,222C110.706,222 109.492,221.374 108.741,220.32C94.667,200.547 89.714,180.773 89.714,161C89.714,141.227 94.667,121.453 108.741,101.68C109.492,100.626 110.706,100 112,100Z" style="fill:rgb(239,56,39);"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/frames/class/r.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
img/frames/class/rThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

10
img/frames/class/text.svg Normal file
View File

@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1500" height="2100" viewBox="0 0 1500 2100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
<g id="Card1" serif:id="Card">
<g id="Textbox--Regular-" serif:id="Textbox (Regular)" transform="matrix(0.423333,0,0,0.725714,751,236)">
<rect x="0" y="0" width="1500" height="2100" style="fill:rgb(0,117,190);"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 793 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 860 B

BIN
img/frames/class/u.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
img/frames/class/uThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/frames/class/w.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
img/frames/class/wThumb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1422,8 +1422,9 @@ function drawCard() {
cardContext.drawImage(watermarkCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
if (card.version.includes('saga') && typeof sagaCanvas !== "undefined") {
cardContext.drawImage(sagaCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
}
if (card.version.includes('dungeon') && typeof dungeonCanvas !== "undefined") {
} else if (card.version.includes('class') && typeof classCanvas !== "undefined") {
cardContext.drawImage(classCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
} else if (card.version.includes('dungeon') && typeof dungeonCanvas !== "undefined") {
cardContext.drawImage(dungeonCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
}
cardContext.drawImage(textCanvas, 0, 0, cardCanvas.width, cardCanvas.height);

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();
}
}