transform planeswalkers

img/frames/planeswalker/text.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path d="M198.367,1314.41L1365.63,1314.41C1376.77,1316.52 1383.02,1322.87 1384.6,1333.29C1384.6,1347.16 1384.6,1849.1 1384.6,1877.73C1374.81,1891.24 1359.68,1899.88 1340.39,1905.9C1309.58,1915.5 1268.41,1918.32 1220.85,1922C1207.85,1922 378.15,1922 365.154,1922C317.471,1918.31 268.337,1915.47 231.163,1905.84C207.892,1899.82 189.37,1891.26 179.406,1877.72C179.406,1877.72 179.406,1333.29 179.406,1333.29C180.98,1322.87 187.237,1316.53 198.363,1314.41L198.367,1314.41Z" style="fill:rgb(0,123,67);"/>
+</svg>

img/frames/planeswalker/transform/frame.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path id="Short" d="M91.012,1843.94C70.435,1820.25 60.538,1786.67 60,1765L60,85C62.855,71.038 71.263,62.781 85,60L1415,60C1428.74,62.781 1437.14,71.038 1440,85L1440,1765C1439.46,1786.67 1429.57,1820.25 1408.99,1843.94C1408.99,1843.63 1409,1843.31 1409,1843L1409,1330C1409.47,1316.05 1413.75,1308.65 1419.88,1300.22C1425.59,1294.26 1428.96,1286.37 1429,1278.79C1429,1278.71 1429,1236.98 1429,1236.98C1429.17,1217.3 1421.64,1198.82 1410.42,1185.47C1396.71,1165.39 1395.06,1152.39 1395.05,1141.28C1427.71,860.4 1420.53,462.268 1385.03,245.741C1382.52,230.445 1386.5,217.853 1405.76,206.626C1410.8,205.048 1415.51,202.178 1419.33,198.38C1425.38,192.36 1428.96,184.204 1429,176.386C1429,176.307 1429,134.571 1429,134.571C1429.2,111.674 1418.96,90.404 1404.65,76.956C1393.96,66.906 1381,61.192 1368.24,61.002C1368.09,61.001 507.217,61 144.043,61L144,61C103.71,61 71,93.71 71,134C71,160.301 84.939,183.372 105.828,196.223C123.706,209.217 116.974,231.98 114.718,245.741C79.218,462.268 72.038,860.4 104.697,1141.28C104.683,1152.8 102.91,1166.37 87.717,1187.78C86.814,1188.94 85.938,1190.14 85.093,1191.37C84.849,1191.7 84.599,1192.03 84.347,1192.36L84.446,1192.33C76.318,1204.55 71.093,1219.81 70.999,1236L71,1278.71C71,1278.74 71,1278.77 71,1278.79C71.038,1286.37 74.407,1294.27 80.124,1300.23C86.247,1308.65 90.53,1316.05 91,1330L91,1843C91.003,1843.31 91.007,1843.63 91.012,1843.94Z" style="fill:rgb(0,117,190);"/>
+</svg>

img/frames/planeswalker/transform/frameFront.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path id="front-face" serif:id="front face" d="M91.012,1843.94C70.435,1820.25 60.538,1786.67 60,1765L60,85C62.855,71.038 71.263,62.781 85,60L1415,60C1428.74,62.781 1437.14,71.038 1440,85L1440,1765C1439.85,1771.24 1438.91,1778.47 1437.17,1786.17L1409,1758L1409,1330C1409.47,1316.05 1413.75,1308.65 1419.88,1300.22C1425.59,1294.26 1428.96,1286.37 1429,1278.79C1429,1278.71 1429,1236.98 1429,1236.98C1429.17,1217.3 1421.64,1198.82 1410.42,1185.47C1396.71,1165.39 1395.06,1152.39 1395.05,1141.28C1427.71,860.4 1420.53,462.268 1385.03,245.741C1382.52,230.445 1386.5,217.853 1405.76,206.626C1410.8,205.048 1415.51,202.178 1419.33,198.38C1425.38,192.36 1428.96,184.204 1429,176.386C1429,176.307 1429,134.571 1429,134.571C1429.2,111.674 1418.96,90.404 1404.65,76.956C1393.96,66.906 1381,61.192 1368.24,61.002C1368.09,61.001 507.217,61 144.043,61L144,61C103.71,61 71,93.71 71,134C71,160.301 84.939,183.372 105.828,196.223C123.706,209.217 116.974,231.98 114.718,245.741C79.218,462.268 72.038,860.4 104.697,1141.28C104.683,1152.8 102.91,1166.37 87.717,1187.78C86.814,1188.94 85.938,1190.14 85.093,1191.37C84.849,1191.7 84.599,1192.03 84.347,1192.36L84.446,1192.33C76.318,1204.55 71.093,1219.81 70.999,1236L71,1278.71C71,1278.74 71,1278.77 71,1278.79C71.038,1286.37 74.407,1294.27 80.124,1300.23C86.247,1308.65 90.53,1316.05 91,1330L91,1843C91.003,1843.31 91.007,1843.63 91.012,1843.94Z" style="fill:rgb(0,117,190);"/>
+</svg>

img/frames/planeswalker/transform/pinline.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path id="pinline" d="M105.828,196.223C84.939,183.372 71,160.301 71,134C71,93.71 103.71,61 144,61L144.043,61C507.217,61 1368.09,61.001 1368.24,61.002C1381,61.192 1393.96,66.906 1404.65,76.956C1418.96,90.404 1429.2,111.674 1429,134.571C1429,134.571 1429,176.307 1429,176.386C1428.96,184.204 1425.38,192.36 1419.33,198.38C1415.51,202.178 1410.8,205.048 1405.76,206.626C1386.5,217.853 1382.52,230.445 1385.03,245.741C1420.53,462.268 1427.71,860.4 1395.05,1141.28C1395.06,1152.39 1396.71,1165.39 1410.42,1185.47C1421.64,1198.82 1429.17,1217.3 1429,1236.98C1429,1236.98 1429,1278.71 1429,1278.79C1428.96,1286.37 1425.59,1294.26 1419.88,1300.22C1413.75,1308.65 1409.47,1316.05 1409,1330L1409,1843C1408.51,1899.1 1372.48,1913.09 1335.05,1922.87C1278.98,1937.53 1240.46,1946.63 1113,1957C1100.15,1944.05 1077.13,1937.61 1045,1937L455,1937C422.871,1937.61 399.847,1944.05 387,1957C259.54,1946.63 221.02,1937.53 164.951,1922.87C127.521,1913.09 91.487,1899.1 91,1843L91,1330C90.53,1316.05 86.247,1308.65 80.124,1300.23C74.407,1294.27 71.038,1286.37 71,1278.79C71,1278.77 71,1278.74 71,1278.71L70.999,1236C71.093,1219.81 76.318,1204.55 84.446,1192.33L84.347,1192.36C84.599,1192.03 84.849,1191.7 85.093,1191.37C85.938,1190.14 86.814,1188.94 87.717,1187.78C102.91,1166.37 104.683,1152.8 104.697,1141.28C72.038,860.4 79.218,462.268 114.718,245.741C116.974,231.98 123.706,209.217 105.828,196.223ZM198,1310.41L1366,1310.41C1379.41,1312.83 1386.81,1320.47 1388.6,1333L1388.6,1879C1363.02,1915.93 1300.97,1919.81 1221,1926L365,1926C285.033,1919.81 200.978,1915.93 175.406,1879L175.406,1333C177.187,1320.47 184.593,1312.83 198,1310.41ZM87,1278.71L86.999,1236C87.216,1205.88 109.603,1179.74 132,1179.41L1368,1179.41C1390.64,1179.74 1413.27,1206.44 1413,1236.98L1413,1278.71C1412.96,1286.4 1405.15,1294.4 1397,1294.41L103,1294.41C94.852,1294.4 87.038,1286.4 87,1278.71ZM168,208C143.083,212.287 142.57,231.851 142.57,231.851C96.847,407.216 82.857,940.144 136.443,1130.77C142.916,1143.71 138.575,1161.65 176,1163.41L176,1163.41L1323.75,1163.41L1323.75,1163.41C1361.17,1161.65 1356.83,1143.71 1363.3,1130.77C1416.89,940.144 1402.9,407.216 1357.18,231.851C1357.18,231.851 1356.66,212.287 1331.75,208L168,208ZM194.248,77C210.037,90.933 220,111.312 220,134C220,157.238 209.548,178.055 193.092,192L1397,192C1405.15,191.996 1412.96,183.999 1413,176.307L1413,134.571C1413.27,104.037 1390.64,77.337 1368,77L194.248,77ZM144,78.998C174.357,78.998 199.002,103.643 199.002,134C199.002,164.357 174.357,189.002 144,189.002C113.643,189.002 88.998,164.357 88.998,134C88.998,103.643 113.643,78.998 144,78.998Z" style="fill:rgb(239,56,39);"/>
+</svg>

img/frames/planeswalker/transform/pinlineFront.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path id="pinline--front-" serif:id="pinline (front)" d="M1408.06,1856.94C1402.12,1901.55 1369.16,1913.95 1335.05,1922.87C1278.98,1937.53 1240.46,1946.63 1113,1957C1100.15,1944.05 1077.13,1937.61 1045,1937L455,1937C422.871,1937.61 399.847,1944.05 387,1957C259.54,1946.63 221.02,1937.53 164.951,1922.87C127.521,1913.09 91.487,1899.1 91,1843L91,1330C90.53,1316.05 86.247,1308.65 80.124,1300.23C74.407,1294.27 71.038,1286.37 71,1278.79C71,1278.77 71,1278.74 71,1278.71L70.999,1236C71.093,1219.81 76.318,1204.55 84.446,1192.33L84.347,1192.36C84.599,1192.03 84.849,1191.7 85.093,1191.37C85.938,1190.14 86.814,1188.94 87.717,1187.78C102.91,1166.37 104.683,1152.8 104.697,1141.28C72.038,860.4 79.218,462.268 114.718,245.741C116.974,231.98 123.706,209.217 105.828,196.223C84.939,183.372 71,160.301 71,134C71,93.71 103.71,61 144,61L144.043,61C507.217,61 1368.09,61.001 1368.24,61.002C1381,61.192 1393.96,66.906 1404.65,76.956C1418.96,90.404 1429.2,111.674 1429,134.571C1429,134.571 1429,176.307 1429,176.386C1428.96,184.204 1425.38,192.36 1419.33,198.38C1415.51,202.178 1410.8,205.048 1405.76,206.626C1386.5,217.853 1382.52,230.445 1385.03,245.741C1420.53,462.268 1427.71,860.4 1395.05,1141.28C1395.06,1152.39 1396.71,1165.39 1410.42,1185.47C1421.64,1198.82 1429.17,1217.3 1429,1236.98C1429,1236.98 1429,1278.71 1429,1278.79C1428.96,1286.37 1425.59,1294.26 1419.88,1300.22C1413.75,1308.65 1409.47,1316.05 1409,1330L1409,1758L1458,1807L1408.06,1856.94ZM1388.6,1848.12L1388.6,1879C1363.02,1915.93 1300.97,1919.81 1221,1926L365,1926C285.033,1919.81 200.978,1915.93 175.406,1879L175.406,1333C177.187,1320.47 184.593,1312.83 198,1310.41L1366,1310.41C1379.41,1312.83 1386.81,1320.47 1388.6,1333L1388.6,1765.88L1429.72,1807L1388.6,1848.12ZM87,1278.71L86.999,1236C87.216,1205.88 109.603,1179.74 132,1179.41L1368,1179.41C1390.64,1179.74 1413.27,1206.44 1413,1236.98L1413,1278.71C1412.96,1286.4 1405.15,1294.4 1397,1294.41L103,1294.41C94.852,1294.4 87.038,1286.4 87,1278.71ZM168,208C143.083,212.287 142.57,231.851 142.57,231.851C96.847,407.216 82.857,940.144 136.443,1130.77C142.916,1143.71 138.575,1161.65 176,1163.41L176,1163.41L1323.75,1163.41L1323.75,1163.41C1361.17,1161.65 1356.83,1143.71 1363.3,1130.77C1416.89,940.144 1402.9,407.216 1357.18,231.851C1357.18,231.851 1356.66,212.287 1331.75,208L168,208ZM194.248,77C210.037,90.933 220,111.312 220,134C220,157.238 209.548,178.055 193.092,192L1397,192C1405.15,191.996 1412.96,183.999 1413,176.307L1413,134.571C1413.27,104.037 1390.64,77.337 1368,77L194.248,77ZM144,78.998C174.357,78.998 199.002,103.643 199.002,134C199.002,164.357 174.357,189.002 144,189.002C113.643,189.002 88.998,164.357 88.998,134C88.998,103.643 113.643,78.998 144,78.998Z" style="fill:rgb(239,56,39);"/>
+</svg>

img/frames/planeswalker/transform/textFront.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path d="M1388.6,1848.12L1388.6,1879C1363.02,1915.93 1300.97,1919.81 1221,1926L365,1926C285.033,1919.81 200.978,1915.93 175.406,1879L175.406,1333C177.187,1320.47 184.593,1312.83 198,1310.41L1366,1310.41C1379.41,1312.83 1386.81,1320.47 1388.6,1333L1388.6,1765.88L1429.72,1807L1388.6,1848.12Z" style="fill:rgb(0,123,67);"/>
+</svg>

img/frames/planeswalker/transform/title.svg

@@ -0,0 +1,5 @@
+<?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;">
+    <path id="twins" d="M194.248,77L1368,77C1390.64,77.337 1413.27,104.037 1413,134.571L1413,176.307C1412.96,183.999 1405.15,191.996 1397,192L193.092,192C209.548,178.054 220,157.238 220,134C220,111.312 210.037,90.932 194.248,77Z" style="fill:rgb(0,123,67);"/>
+</svg>

js/creator-23.js

@@ -119,10 +119,10 @@ function sizeCanvas(name, width = Math.round(card.width * (1 + 2 * card.marginX)
 	}
 	window[name + 'Canvas'].width = width;
 	window[name + 'Canvas'].height = height;
-	if (name == 'line') { //force true to view all canvases
+	if (name == 'line') { //force true to view all canvases - must restore to name == 'line' for proper kerning adjustments
 		window[name + 'Canvas'].style = 'width: 20rem; height: 28rem; border: 1px solid red;';
 		const label = document.createElement('div');
-		label.innerHTML = name + '<br>If you can see this and don\'t want to, please clear you cache.';
+		label.innerHTML = name + '<br>If you can see this and don\'t want to, please clear your cache.';
 		label.appendChild(window[name + 'Canvas']);
 		label.classList = 'fake-hidden'; //Comment this out to view canvases
 		document.body.appendChild(label);
@@ -1502,10 +1502,15 @@ function drawCard() {
 	cardContext.drawImage(art, 0, 0, art.width * card.artZoom, art.height * card.artZoom);
 	cardContext.restore();
 	// frame elements
-	cardContext.drawImage(frameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	if (card.version.includes('planeswalker') && typeof planeswalkerPreFrameCanvas !== "undefined") {
-	if (card.version.includes('planeswalker') && typeof planeswalkerCanvas !== "undefined") {
+		cardContext.drawImage(planeswalkerPreFrameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
-		cardContext.drawImage(planeswalkerCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
 	}
+	cardContext.drawImage(frameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	if (card.version.includes('planeswalker') && typeof planeswalkerPostFrameCanvas !== "undefined") {
+		cardContext.drawImage(planeswalkerPostFrameCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	} else if (card.version.includes('planeswalker') && typeof planeswalkerCanvas !== "undefined") {
+		cardContext.drawImage(planeswalkerCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	} // REMOVE/DELETE ME AFTER A FEW WEEKS
 	// guidelines
 	if (document.querySelector('#show-guidelines').checked) {
 		cardContext.drawImage(guidelinesCanvas, scaleX(card.marginX) / 2, scaleY(card.marginY) / 2, cardCanvas.width, cardCanvas.height);

js/frames/groupPlaneswalker.js

@@ -1,11 +1,16 @@
 loadFramePacks([
-	{name:'Regular Frames', value:'PlaneswalkerRegular'},
+	{name:'Regular', value:'PlaneswalkerRegular'},
-	{name:'Borderless Frames', value:'PlaneswalkerBorderless'},
+	{name:'Borderless', value:'PlaneswalkerBorderless'},
-	{name:'Extended Art Frames', value:'PlaneswalkerBoxTopper'},
+	{name:'Extended Art', value:'PlaneswalkerBoxTopper'},
-	{name:'Nickname Frames', value:'PlaneswalkerNickname'},
+	{name:'Tall', value:'PlaneswalkerTall'},
-	{name:'Tall Frames', value:'PlaneswalkerTall'},
-	{name:'MDFC Frames', value:'PlaneswalkerMDFC'},
 	{name:'Special Frames', value:'disabled'},
-	{name:'Blackout (SDCC15)', value:'PlaneswalkerSDCC15'}
+	{name:'Nickname', value:'PlaneswalkerNickname'},
+	{name:'Blackout (SDCC15)', value:'PlaneswalkerSDCC15'},
+	{name:'DFC Frames', value:'disabled'},
+	{name:'MDFC', value:'PlaneswalkerMDFC'},
+	{name:'Transform (Front)', value:'PlaneswalkerTransformFront'},
+	{name:'Transform (Back)', value:'PlaneswalkerTransformBack'},
+	{name:'Color Identity Pips', value:'M15CIPips'},
+	{name:'Transform Icons', value:'PlaneswalkerTransformIcons'}
 ])
-notify('When you load a Planeswalker frame version, a "Planeswalker" tab will appear. This tab controls the placement and loyalty costs for Planeswalker abilities.')
+notify('When you load a Planeswalker frame version, a "Planeswalker" tab will appear. This tab controls the placement and loyalty costs for Planeswalker abilities.', 10)

js/frames/packPlaneswalkerTransformBack.js

@@ -0,0 +1,45 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/planeswalker/transform/pinline.svg', name:'Pinline'}, {src:'/img/frames/planeswalker/transform/title.svg', name:'Title'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskType.png', name:'Type'}, {src:'/img/frames/planeswalker/transform/frame.svg', name:'Frame'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskBorder.png', name:'Border'}];
+//defines available frames
+availableFrames = [
+	{name:'White Frame (Back)', src:'/img/frames/planeswalker/transform/wb.png', masks:masks},
+	{name:'Blue Frame (Back)', src:'/img/frames/planeswalker/transform/ub.png', masks:masks},
+	{name:'Black Frame (Back)', src:'/img/frames/planeswalker/transform/bb.png', masks:masks},
+	{name:'Red Frame (Back)', src:'/img/frames/planeswalker/transform/rb.png', masks:masks},
+	{name:'Green Frame (Back)', src:'/img/frames/planeswalker/transform/gb.png', masks:masks},
+	{name:'Multicolored Frame (Back)', src:'/img/frames/planeswalker/transform/mb.png', masks:masks},
+	{name:'Loyalty Box', src:'/img/frames/planeswalker/transform/loyalty.png', bounds:{x:0.8, y:0.8796, width:0.152, height:0.0677}}
+];
+//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 = 'planeswalkerTransformBack';
+	card.onload = '/js/frames/versionPlaneswalker.js';
+	loadScript('/js/frames/versionPlaneswalker.js');
+	//art bounds
+	card.artBounds = {x:0.068, y:0.101, width:0.864, height:0.8143};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.9227, y:0.5891, width:0.12, height:0.0381, vertical:'center', horizontal: 'right'};
+	resetSetSymbol();
+	//watermark bounds
+	card.watermarkBounds = {x:0.5, y:0.7762, width:0.75, height:0.2305};
+	resetWatermark();
+	//text
+	loadTextOptions({
+		mana: {name:'Mana Cost', text:'', y:0.0481, 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.16, y:0.0372, width:0.8292, height:0.0548, oneLine:true, font:'belerenb', size:0.0381, color:'white'},
+		type: {name:'Type', text:'', x:0.1307, y:0.5625, width:0.7827, height:0.0548, oneLine:true, font:'belerenb', size:0.0324, color:'white'},
+		ability0: {name:'Ability 1', text:'', x:0.18, y:0.6239, width:0.7467, height:0.0972, size:0.0353},
+		ability1: {name:'Ability 2', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353},
+		ability2: {name:'Ability 3', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353},
+		ability3: {name:'Ability 4', text:'', x:0.18, y:0, width:0.7467, height:0, size:0.0353},
+		loyalty: {name:'Loyalty', text:'', x:0.806, y:0.902, width:0.14, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
+	});
+}
+//loads available frames
+loadFramePack();

js/frames/packPlaneswalkerTransformFront.js

@@ -0,0 +1,44 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/planeswalker/transform/pinlineFront.svg', name:'Pinline'}, {src:'/img/frames/planeswalker/transform/title.svg', name:'Title'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskType.png', name:'Type'}, {src:'/img/frames/planeswalker/transform/frameFront.svg', name:'Frame'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskBorder.png', name:'Border'}, {src:'/img/frames/planeswalker/maskLoyalty.png', name:'Loyalty'}];
+//defines available frames
+availableFrames = [
+	{name:'White Frame (Front)', src:'/img/frames/planeswalker/transform/wf.png', masks:masks},
+	{name:'Blue Frame (Front)', src:'/img/frames/planeswalker/transform/uf.png', masks:masks},
+	{name:'Black Frame (Front)', src:'/img/frames/planeswalker/transform/bf.png', masks:masks},
+	{name:'Red Frame (Front)', src:'/img/frames/planeswalker/transform/rf.png', masks:masks},
+	{name:'Green Frame (Front)', src:'/img/frames/planeswalker/transform/gf.png', masks:masks},
+	{name:'Multicolored Frame (Front)', src:'/img/frames/planeswalker/transform/mf.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 = 'planeswalkerTransformFront';
+	card.onload = '/js/frames/versionPlaneswalker.js';
+	loadScript('/js/frames/versionPlaneswalker.js');
+	//art bounds
+	card.artBounds = {x:0.068, y:0.101, width:0.864, height:0.8143};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.9227, y:0.5891, width:0.12, height:0.0381, vertical:'center', horizontal: 'right'};
+	resetSetSymbol();
+	//watermark bounds
+	card.watermarkBounds = {x:0.5, y:0.7762, width:0.75, height:0.2305};
+	resetWatermark();
+	//text
+	loadTextOptions({
+		mana: {name:'Mana Cost', text:'', y:0.0481, 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.16, y:0.0372, width:0.8292, height:0.0548, oneLine:true, font:'belerenb', size:0.0381},
+		type: {name:'Type', text:'', x:0.0867, y:0.5625, width:0.8267, height:0.0548, oneLine:true, font:'belerenb', size:0.0324},
+		ability0: {name:'Ability 1', text:'', x:0.18, y:0.6239, width:0.7467, height:0.0972, size:0.0353},
+		ability1: {name:'Ability 2', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353},
+		ability2: {name:'Ability 3', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353},
+		ability3: {name:'Ability 4', text:'', x:0.18, y:0, width:0.7467, height:0, size:0.0353},
+		loyalty: {name:'Loyalty', text:'', x:0.806, y:0.902, width:0.14, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
+	});
+}
+//loads available frames
+loadFramePack();

js/frames/packPlaneswalkerTransformIcons.js

@@ -0,0 +1,19 @@
+//Create objects for common properties across available frames
+var bounds = {x:0.0594, y:0.0377, width:0.0734, height:0.0524};
+//defines available frames
+availableFrames = [
+	{name:'Sun', src:'/img/frames/m15/transform/icons/sun.svg', bounds:bounds},
+	{name:'Crescent Moon', src:'/img/frames/m15/transform/icons/moon.svg', bounds:bounds},
+	{name:'Full Moon', src:'/img/frames/m15/transform/icons/fullmoon.svg', bounds:bounds},
+	{name:'Emrakul', src:'/img/frames/m15/transform/icons/emrakul.svg', bounds:bounds},
+	{name:'Compass', src:'/img/frames/m15/transform/icons/compass.svg', bounds:bounds},
+	{name:'Land', src:'/img/frames/m15/transform/icons/land.svg', bounds:bounds},
+	{name:'Planeswalker Ember', src:'/img/frames/m15/transform/icons/spark.svg', bounds:bounds},
+	{name:'Planeswalker Spark', src:'/img/frames/m15/transform/icons/planeswalker.svg', bounds:bounds}
+];
+//disables/enables the "Load Frame Version" button
+document.querySelector('#loadFrameVersion').disabled = true;
+//defines process for loading this version, if applicable
+document.querySelector('#loadFrameVersion').onclick = null;
+//loads available frames
+loadFramePack();

js/frames/versionPlaneswalker.js

@@ -1,7 +1,8 @@
 //checks to see if it needs to run
 if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
 	loadedVersions.push('/js/frames/versionPlaneswalker.js');
-	sizeCanvas('planeswalker');
+	sizeCanvas('planeswalkerPreFrame');
+	sizeCanvas('planeswalkerPostFrame');
 	document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `planeswalker`)">Planeswalker</h3>';
 	var newHTML = document.createElement('div');
 	newHTML.id = 'creator-menu-planeswalker';
@@ -53,7 +54,7 @@ if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
 	setImageUrl(darkToLight, '/img/frames/planeswalker/abilityLineEven.png');
 	var planeswalkerTextMask = new Image();
 	planeswalkerTextMask.onload = function(){resetPlaneswalkerImages(fixPlaneswalkerInputs(planeswalkerEdited));}
-	setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/planeswalkerMaskText.png');
+	setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/text.svg');
 	var lightColor = 'white';
 	var darkColor = '#a4a4a4';
 } else {
@@ -61,21 +62,30 @@ if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
 }
 
 function planeswalkerEdited() {
+	// manage text masks
 	var planeswalkerTall = 0;
 	if (card.version == 'planeswalkerTall') {
 		planeswalkerTall = 1;
 		if (!planeswalkerTextMask.src.includes('tall')) {
 			setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/tall/planeswalkerTallMaskRules.png');
 		}
-	} else if (card.version == 'planeswalkerMDFC') {
+	} else if (card.version == 'planeswalkerTransformFront') {
-		if (!planeswalkerTextMask.src.includes('mdfc')) {
+		if (!planeswalkerTextMask.src.includes('transform/textFront')) {
-			setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/mdfc/text.svg');
+			setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/transform/textFront.svg');
 		}
 	} else {
-		if (planeswalkerTextMask.src.includes('tall') || planeswalkerTextMask.src.includes('mdfc')) {
+		if (!planeswalkerTextMask.src.includes('planeswalker/text.svg')) {
-			setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/planeswalkerMaskText.png');
+			setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/text.svg');
 		}
 	}
+	// manage textbox size
+	if (card.version == 'planeswalkerTransformFront') {
+		card.planeswalker.x = 0.1167;
+		card.planeswalker.width = 0.8334;
+	} else {
+		card.planeswalker.x = 0.1167;
+		card.planeswalker.width = 0.8094;
+	}
 	card.planeswalker.abilities[0] = document.querySelector('#planeswalker-cost-0').value;
 	card.planeswalker.abilities[1] = document.querySelector('#planeswalker-cost-1').value;
 	card.planeswalker.abilities[2] = document.querySelector('#planeswalker-cost-2').value;
@@ -97,7 +107,9 @@ function planeswalkerEdited() {
 	}
 	fixPlaneswalkerInputs();
 	var transitionHeight = scaleHeight(0.0048);
-	planeswalkerContext.clearRect(0, 0, planeswalkerCanvas.width, planeswalkerCanvas.height);
+	planeswalkerPreFrameContext.clearRect(0, 0, planeswalkerPreFrameCanvas.width, planeswalkerPreFrameCanvas.height);
+	planeswalkerPreFrameContext.globalCompositeOperation = 'source-over';
+	planeswalkerPostFrameContext.clearRect(0, 0, planeswalkerPostFrameCanvas.width, planeswalkerPostFrameCanvas.height);
 	if (card.version != 'planeswalkerSDCC15') {
 		for (var i = 0; i < card.planeswalker.count; i ++) {
 			var x = scaleX(card.planeswalker.x);
@@ -111,50 +123,50 @@ function planeswalkerEdited() {
 				height += scaleHeight(0.5);
 			}
 			if (i % 2 == 0) {
-				planeswalkerContext.fillStyle = lightColor;
+				planeswalkerPreFrameContext.fillStyle = lightColor;
-				planeswalkerContext.globalAlpha = 0.608;
+				planeswalkerPreFrameContext.globalAlpha = 0.608;
-				planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
+				planeswalkerPreFrameContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
-				planeswalkerContext.globalAlpha = 1;
+				planeswalkerPreFrameContext.globalAlpha = 1;
 				if (lightToDark.complete) {
-					planeswalkerContext.drawImage(lightToDark, x, y + height - transitionHeight, width, 2 * transitionHeight);
+					planeswalkerPreFrameContext.drawImage(lightToDark, x, y + height - transitionHeight, width, 2 * transitionHeight);
 				}
 			} else {
-				planeswalkerContext.fillStyle = darkColor;
+				planeswalkerPreFrameContext.fillStyle = darkColor;
-				planeswalkerContext.globalAlpha = 0.706;
+				planeswalkerPreFrameContext.globalAlpha = 0.706;
-				planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
+				planeswalkerPreFrameContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight);
-				planeswalkerContext.globalAlpha = 1;
+				planeswalkerPreFrameContext.globalAlpha = 1;
 				if (darkToLight.complete) {
-					planeswalkerContext.drawImage(darkToLight, x, y + height - transitionHeight, width, 2 * transitionHeight);
+					planeswalkerPreFrameContext.drawImage(darkToLight, x, y + height - transitionHeight, width, 2 * transitionHeight);
 				}
 			}
 		}
 	}
-	planeswalkerContext.globalCompositeOperation = 'destination-in';
+	planeswalkerPreFrameContext.globalCompositeOperation = 'destination-in';
 	if (planeswalkerTextMask.complete) {
-		planeswalkerContext.drawImage(planeswalkerTextMask, scaleX(0), scaleY(0), scaleWidth(1), scaleHeight(1));
+		planeswalkerPreFrameContext.drawImage(planeswalkerTextMask, scaleX(0), scaleY(0), scaleWidth(1), scaleHeight(1));
 	}
-	planeswalkerContext.globalCompositeOperation = 'source-over';
+	planeswalkerPostFrameContext.globalCompositeOperation = 'source-over';
-	planeswalkerContext.fillStyle = 'white'
+	planeswalkerPostFrameContext.fillStyle = 'white'
-	planeswalkerContext.font = scaleHeight(0.0286) + 'px belerenbsc';
+	planeswalkerPostFrameContext.font = scaleHeight(0.0286) + 'px belerenbsc';
-	planeswalkerContext.textAlign = 'center';
+	planeswalkerPostFrameContext.textAlign = 'center';
 	for (var i = 0; i < card.planeswalker.count; i ++) {
 		var planeswalkerIconValue = card.planeswalker.abilities[i];
 		var planeswalkerPlacement = scaleY(planeswalkerAbilityLayout[planeswalkerTall][card.planeswalker.count - 1][i] + card.planeswalker.abilityAdjust[i])
 		if (planeswalkerIconValue.includes('+')) {
 			if (plusIcon.complete) {
-				planeswalkerContext.drawImage(plusIcon, scaleX(0.0294), planeswalkerPlacement - scaleHeight(0.0258), scaleWidth(0.14), scaleHeight(0.0724));
+				planeswalkerPostFrameContext.drawImage(plusIcon, scaleX(0.0294), planeswalkerPlacement - scaleHeight(0.0258), scaleWidth(0.14), scaleHeight(0.0724));
 			}
-			planeswalkerContext.fillText(planeswalkerIconValue, scaleX(0.1027), planeswalkerPlacement + scaleHeight(0.0172));
+			planeswalkerPostFrameContext.fillText(planeswalkerIconValue, scaleX(0.1027), planeswalkerPlacement + scaleHeight(0.0172));
 		} else if (planeswalkerIconValue.includes('-')) {
 			if (minusIcon.complete) {
-				planeswalkerContext.drawImage(minusIcon, scaleX(0.028), planeswalkerPlacement - scaleHeight(0.0153), scaleWidth(0.1414), scaleHeight(0.0705));
+				planeswalkerPostFrameContext.drawImage(minusIcon, scaleX(0.028), planeswalkerPlacement - scaleHeight(0.0153), scaleWidth(0.1414), scaleHeight(0.0705));
 			}
-			planeswalkerContext.fillText(planeswalkerIconValue, scaleX(0.1027), planeswalkerPlacement + scaleHeight(0.0181));
+			planeswalkerPostFrameContext.fillText(planeswalkerIconValue, scaleX(0.1027), planeswalkerPlacement + scaleHeight(0.0181));
 		} else if (planeswalkerIconValue != '') {
 			if (neutralIcon.complete) {
-				planeswalkerContext.drawImage(neutralIcon, scaleX(0.028), planeswalkerPlacement - scaleHeight(0.0153), scaleWidth(0.1414), scaleHeight(0.061));
+				planeswalkerPostFrameContext.drawImage(neutralIcon, scaleX(0.028), planeswalkerPlacement - scaleHeight(0.0153), scaleWidth(0.1414), scaleHeight(0.061));
 			}
-			planeswalkerContext.fillText(planeswalkerIconValue, scaleX(0.1027), planeswalkerPlacement + scaleHeight(0.0191));
+			planeswalkerPostFrameContext.fillText(planeswalkerIconValue, scaleX(0.1027), planeswalkerPlacement + scaleHeight(0.0191));
 		}
 	}
 	drawTextBuffer();