class cards

img/frames/class/border.svg

@@ -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>

img/frames/class/frame.svg

@@ -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>

img/frames/class/pinline.svg

@@ -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>

img/frames/class/text.svg

@@ -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>

js/creator-21.js

@@ -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);
-	}
+	} else if (card.version.includes('class') && typeof classCanvas !== "undefined") {
-	if (card.version.includes('dungeon') && typeof dungeonCanvas !== "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);

js/frames/groupStandard-3.js

@@ -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'},

js/frames/packClass.js

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

js/frames/versionClass.js

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