borderless mdfcs

css/style-8.css

@@ -702,6 +702,9 @@ textarea.input {
 	align-items: center;
 	height: 6rem;
 }
+.mask-option > img {
+	max-height: 6rem;
+}
 /*Frame Elements*/
 .frame-element {
 	display: grid;

img/frames/modal/borderless/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="100%" height="100%" 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="Textbox--Regular-" serif:id="Textbox (Regular)" d="M100,1870L100,1308.21C88.362,1294.83 78.412,1270.28 78,1242C78.481,1208.95 91.996,1180.98 106,1170L1394,1170L1394.33,1170.26C1408.21,1181.42 1421.52,1209.21 1422,1242C1421.59,1270.28 1411.64,1294.83 1400,1308.21L1400,1948L654.25,1948C656.586,1944.06 659.121,1940.39 661.852,1937L1389,1937L1389,1314L111,1314L111,1870L100,1870ZM1388.24,1181.01C1389.44,1181.08 1390.56,1181.69 1391.26,1182.68C1405.33,1202.45 1410.29,1222.23 1410.29,1242C1410.29,1261.77 1405.33,1281.55 1391.26,1301.32C1390.51,1302.37 1389.29,1303 1388,1303L112,1303C110.706,1303 109.492,1302.37 108.741,1301.32C94.667,1281.55 89.714,1261.77 89.714,1242C89.714,1222.23 94.667,1202.45 108.741,1182.68C109.492,1181.63 110.706,1181 112,1181L1388,1181L1388.24,1181.01ZM1394,233L140,233C139.403,233 138.805,233.006 138.212,232.964C116.18,231.381 96.438,220.392 80.813,207.473C58.421,188.959 44.663,166.816 44.663,166.816L41.065,161.041L44.747,155.047C46.086,152.884 60.141,131.166 82.217,113.366C97.62,100.946 116.844,90.571 138.212,89.036C138.805,88.994 139.403,89 140,89L1394,89C1408,99.984 1421.52,127.948 1422,161C1421.52,194.052 1408,222.016 1394,233ZM54.101,160.835C56.185,157.467 91.329,103.433 139,100.008C139.332,99.984 139.666,100 140,100C173.667,100 201,127.333 201,161L200.999,161.394C200.787,194.88 173.536,222 140,222C139.666,222 139.332,222.016 139,221.992C89.794,218.457 54,161 54,161L54.101,160.835ZM178.43,100.117C198.599,112.885 212,135.395 212,161.017C212,161.017 211.999,161.429 211.999,161.464C211.837,186.961 198.394,209.332 178.244,222L1388,222C1389.29,222 1390.51,221.374 1391.26,220.32C1405.33,200.547 1410.29,180.773 1410.29,161C1410.29,141.227 1405.33,121.453 1391.26,101.68C1390.51,100.626 1389.29,100 1388,100L178.243,100L178.43,100.117Z" style="fill:rgb(239,56,39);"/>
+</svg>

img/frames/modal/nickname/cutout.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="100%" height="100%" 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="Cutout" d="M1317.14,245C1303.35,259.697 1294.82,275.721 1290,292L210,292C205.183,275.721 196.653,259.695 182.855,245L30,245L30,77L1470,77L1470,245L1317.14,245ZM54.101,160.835C56.185,157.467 91.329,103.433 139,100.008C139.332,99.984 139.666,100 140,100C173.667,100 201,127.333 201,161L200.999,161.394C200.787,194.88 173.536,222 140,222C139.666,222 139.332,222.016 139,221.992C89.794,218.457 54,161 54,161L54.101,160.835ZM178.43,100.117C198.599,112.885 212,135.395 212,161.017C212,161.017 211.999,161.429 211.999,161.464C211.837,186.961 198.394,209.332 178.244,222L1388,222C1389.29,222 1390.51,221.374 1391.26,220.32C1405.33,200.547 1410.29,180.773 1410.29,161C1410.29,141.227 1405.33,121.453 1391.26,101.68C1390.51,100.626 1389.29,100 1388,100L178.243,100L178.43,100.117Z"/>
+</svg>

img/frames/modal/nickname/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="100%" height="100%" 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="Textbox--Regular-" serif:id="Textbox (Regular)" d="M100,1870L100,1308.21C88.364,1294.83 78.412,1270.28 78,1242C78.481,1208.95 91.996,1180.98 106,1170L1394,1170L1394.33,1170.26C1408.21,1181.42 1421.52,1209.21 1422,1242C1421.59,1270.28 1411.64,1294.83 1400,1308.21L1400,1948L654.25,1948C656.586,1944.06 659.121,1940.39 661.852,1937L1389,1937L1389,1314L111,1314L111,1870L100,1870ZM1388.24,1181.01C1389.44,1181.08 1390.56,1181.69 1391.26,1182.68C1405.33,1202.45 1410.29,1222.23 1410.29,1242C1410.29,1261.77 1405.33,1281.55 1391.26,1301.32C1390.51,1302.37 1389.29,1303 1388,1303L112,1303C110.706,1303 109.492,1302.37 108.741,1301.32C94.667,1281.55 89.714,1261.77 89.714,1242C89.714,1222.23 94.667,1202.45 108.741,1182.68C109.492,1181.63 110.706,1181 112,1181L1388,1181L1388.24,1181.01ZM130.382,232C111.501,228.716 94.563,218.841 80.813,207.473C58.421,188.959 44.663,166.816 44.663,166.816L41.065,161.041L44.747,155.047C46.086,152.884 60.141,131.166 82.217,113.366C97.62,100.946 116.844,90.571 138.212,89.036C138.805,88.994 139.403,89 140,89L1394,89C1408,99.984 1421.52,127.948 1422,161C1421.53,193.45 1408.49,220.997 1394.76,232.384L1394.47,232.625L1394.46,232.636L1394.39,232.685L1394,233L1374.28,233C1330.98,233.384 1302.6,272.948 1298.26,301.353L201.736,301.353C197.948,276.516 175.77,243.147 141.307,234.898L130.38,232L130.382,232ZM1290,292C1296.16,271.166 1308.41,250.749 1330,233L170,233C191.591,250.749 203.835,271.166 210,292L1290,292ZM54.101,160.835C56.185,157.467 91.329,103.433 139,100.008C139.332,99.984 139.666,100 140,100C173.667,100 201,127.333 201,161L200.999,161.394C200.787,194.88 173.536,222 140,222C139.666,222 139.332,222.016 139,221.992C89.794,218.457 54,161 54,161L54.101,160.835ZM178.43,100.117C198.599,112.885 212,135.395 212,161.017C212,161.017 211.999,161.429 211.999,161.464C211.837,186.961 198.394,209.332 178.244,222L1388,222C1389.29,222 1390.51,221.374 1391.26,220.32C1405.33,200.547 1410.29,180.773 1410.29,161C1410.29,141.227 1405.33,121.453 1391.26,101.68C1390.51,100.626 1389.29,100 1388,100L178.243,100L178.43,100.117Z" style="fill:rgb(239,56,39);"/>
+</svg>

js/creator-20.js

@@ -329,6 +329,7 @@ function loadFramePacks(framePackOptions = []) {
 	loadScript("/js/frames/pack" + document.querySelector('#selectFramePack').value + ".js");
 }
 function loadFramePack(frameOptions = availableFrames) {
+	resetDoubleClick();
 	document.querySelector('#frame-picker').innerHTML = null;
 	frameOptions.forEach(item => {
 		var frameOption = document.createElement('div');
@@ -361,6 +362,7 @@ function frameOptionClicked(event) {
 	const clickedFrameOption = event.target.closest('.frame-option');
 	const newFrameIndex = getElementIndex(clickedFrameOption);
 	if (newFrameIndex != selectedFrameIndex || document.querySelector('#mask-picker').innerHTML == '') {
+		resetDoubleClick();
 		Array.from(document.querySelectorAll('.frame-option.selected')).forEach(element => element.classList.remove('selected'));
 		clickedFrameOption.classList.add('selected');
 		selectedFrameIndex = newFrameIndex;
@@ -390,12 +392,12 @@ function frameOptionClicked(event) {
 		const firstChild = document.querySelector('#mask-picker').firstChild;
 		firstChild.classList.add('selected');
 		firstChild.click();
-	} else if (button) { button.click(); lastFrameClick = null; }
+	} else if (button) { button.click(); resetDoubleClick(); }
 }
 function maskOptionClicked(event) {
 	var button = doubleClick(event, 'mask');
 	const clickedMaskOption = event.target.closest('.mask-option');
-	// (document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
+	(document.querySelector('.mask-option.selected').classList || document.querySelector('body').classList).remove('selected');
 	clickedMaskOption.classList.add('selected');
 	const newMaskIndex = getElementIndex(clickedMaskOption)
 	if (newMaskIndex != selectedMaskIndex) { button = null; }
@@ -403,7 +405,10 @@ function maskOptionClicked(event) {
 	var selectedMaskName = 'No Mask'
 	if (selectedMaskIndex > 0) {selectedMaskName = availableFrames[selectedFrameIndex].masks[selectedMaskIndex - 1].name;}
 	document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', ' + selectedMaskName + ')';
-	if (button) { button.click(); lastMaskClick = null; }
+	if (button) { button.click(); resetDoubleClick(); }
+}
+function resetDoubleClick() {
+	lastFrameClick, lastMaskClick = null, null;
 }
 function doubleClick(event, maskOrFrame) {
 	const currentClick = (new Date()).getTime();

js/frames/groupModal-1.js

@@ -1,5 +1,7 @@
 loadFramePacks([
 	{name:'Regular', value:'ModalRegular'},
+	{name:'Borderless', value:'ModalBorderless'},
+	{name:'Nickname', value:'ModalNickname'},
 	{name:'Short', value:'ModalShort'},
 	{name:'Short-Nickname', value:'ModalShortNickname'},
 	{name:'Addons', value:'disabled'},

js/frames/packModalBorderless.js

@@ -0,0 +1,57 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/modal/regular/reminder.svg', name:'Flipside'}, {src:'/img/frames/modal/borderless/pinline.svg', name:'Pinline'}, {src:'/img/frames/modal/modalMaskTitle.png', name:'Title'}, {src:'/img/frames/m15/regular/m15MaskType.png', name:'Type'}, {src:'/img/frames/modal/regular/textbox.svg', name:'Rules'}, {src:'/img/frames/modal/short/shortModalMaskBorder.png', name:'Border'}];
+var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
+//defines available frames
+availableFrames = [
+	{name:'White Frame (Front)', src:'/img/frames/modal/borderless/wf.png', masks:masks},
+	{name:'Blue Frame (Front)', src:'/img/frames/modal/borderless/uf.png', masks:masks},
+	{name:'Black Frame (Front)', src:'/img/frames/modal/borderless/bf.png', masks:masks},
+	{name:'Red Frame (Front)', src:'/img/frames/modal/borderless/rf.png', masks:masks},
+	{name:'Green Frame (Front)', src:'/img/frames/modal/borderless/gf.png', masks:masks},
+	{name:'Multicolored Frame (Front)', src:'/img/frames/modal/borderless/mf.png', masks:masks},
+	{name:'Artifact Frame (Front)', src:'/img/frames/modal/borderless/af.png', masks:masks},
+	{name:'White Frame (Back)', src:'/img/frames/modal/borderless/wb.png', masks:masks},
+	{name:'Blue Frame (Back)', src:'/img/frames/modal/borderless/ub.png', masks:masks},
+	{name:'Black Frame (Back)', src:'/img/frames/modal/borderless/bb.png', masks:masks},
+	{name:'Red Frame (Back)', src:'/img/frames/modal/borderless/rb.png', masks:masks},
+	{name:'Green Frame (Back)', src:'/img/frames/modal/borderless/gb.png', masks:masks},
+	{name:'Multicolored Frame (Back)', src:'/img/frames/modal/borderless/mb.png', masks:masks},
+	{name:'Artifact Frame (Back)', src:'/img/frames/modal/borderless/ab.png', masks:masks},
+	{name:'White Power/Toughness', src:'/img/frames/m15/regular/m15PTW.png', bounds:bounds},
+	{name:'Blue Power/Toughness', src:'/img/frames/m15/regular/m15PTU.png', bounds:bounds},
+	{name:'Black Power/Toughness', src:'/img/frames/m15/regular/m15PTB.png', bounds:bounds},
+	{name:'Red Power/Toughness', src:'/img/frames/m15/regular/m15PTR.png', bounds:bounds},
+	{name:'Green Power/Toughness', src:'/img/frames/m15/regular/m15PTG.png', bounds:bounds},
+	{name:'Multicolored Power/Toughness', src:'/img/frames/m15/regular/m15PTM.png', bounds:bounds},
+	{name:'Artifact Power/Toughness', src:'/img/frames/m15/regular/m15PTA.png', bounds:bounds}
+];
+//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 = 'modalBorderless';
+	//art bounds
+	card.artBounds = {x:0, y:0, width:1, height:0.9224};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, 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.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.1614, y:0.0522, width:0.7534, height:0.0543, oneLine:true, font:'belerenb', size:0.0381},
+		type: {name:'Type', text:'', x:0.0854, y:0.5664, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324},
+		rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2572, size:0.0362},
+		flipsideType: {name:'Flipside Type', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0234, color:'white', oneLine:true, font:'belerenb'},
+		flipSideReminder: {name:'Flipside Text', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0258, color:'white', oneLine:true, align:'right'},
+		pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center'}
+	});
+}
+//loads available frames
+loadFramePack();

js/frames/packModalLegendCrownsNickname.js

@@ -10,7 +10,7 @@ availableFrames = [
 	{name:'Multicolored Legend Crown', src:'/img/frames/modal/crowns/nickname/m.png', bounds:bounds, complementary:8},
 	{name:'Artifact Legend Crown', src:'/img/frames/modal/crowns/nickname/a.png', bounds:bounds, complementary:8},
 	{name:'Land Legend Crown', src:'/img/frames/modal/crowns/nickname/l.png', bounds:bounds, complementary:8},
-	{name:'Legend Crown Cutout', src:'/img/frames/modal/crowns/cutout.svg', erase:true}
+	{name:'Legend Crown Cutout', src:'/img/frames/modal/nickname/cutout.svg', erase:true}
 ];
 //disables/enables the "Load Frame Version" button
 document.querySelector('#loadFrameVersion').disabled = true;

js/frames/packModalNickname.js

@@ -0,0 +1,58 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/modal/regular/reminder.svg', name:'Flipside'}, {src:'/img/frames/modal/nickname/pinline.svg', name:'Pinline'}, {src:'/img/frames/modal/modalMaskTitle.png', name:'Title'}, {src:'/img/frames/m15/regular/m15MaskType.png', name:'Type'}, {src:'/img/frames/modal/regular/textbox.svg', name:'Rules'}, {src:'/img/frames/modal/short/shortModalMaskBorder.png', name:'Border'}];
+var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
+//defines available frames
+availableFrames = [
+	{name:'White Frame (Front)', src:'/img/frames/modal/nickname/wf.png', masks:masks},
+	{name:'Blue Frame (Front)', src:'/img/frames/modal/nickname/uf.png', masks:masks},
+	{name:'Black Frame (Front)', src:'/img/frames/modal/nickname/bf.png', masks:masks},
+	{name:'Red Frame (Front)', src:'/img/frames/modal/nickname/rf.png', masks:masks},
+	{name:'Green Frame (Front)', src:'/img/frames/modal/nickname/gf.png', masks:masks},
+	{name:'Multicolored Frame (Front)', src:'/img/frames/modal/nickname/mf.png', masks:masks},
+	{name:'Artifact Frame (Front)', src:'/img/frames/modal/nickname/af.png', masks:masks},
+	{name:'White Frame (Back)', src:'/img/frames/modal/nickname/wb.png', masks:masks},
+	{name:'Blue Frame (Back)', src:'/img/frames/modal/nickname/ub.png', masks:masks},
+	{name:'Black Frame (Back)', src:'/img/frames/modal/nickname/bb.png', masks:masks},
+	{name:'Red Frame (Back)', src:'/img/frames/modal/nickname/rb.png', masks:masks},
+	{name:'Green Frame (Back)', src:'/img/frames/modal/nickname/gb.png', masks:masks},
+	{name:'Multicolored Frame (Back)', src:'/img/frames/modal/nickname/mb.png', masks:masks},
+	{name:'Artifact Frame (Back)', src:'/img/frames/modal/nickname/ab.png', masks:masks},
+	{name:'White Power/Toughness', src:'/img/frames/m15/regular/m15PTW.png', bounds:bounds},
+	{name:'Blue Power/Toughness', src:'/img/frames/m15/regular/m15PTU.png', bounds:bounds},
+	{name:'Black Power/Toughness', src:'/img/frames/m15/regular/m15PTB.png', bounds:bounds},
+	{name:'Red Power/Toughness', src:'/img/frames/m15/regular/m15PTR.png', bounds:bounds},
+	{name:'Green Power/Toughness', src:'/img/frames/m15/regular/m15PTG.png', bounds:bounds},
+	{name:'Multicolored Power/Toughness', src:'/img/frames/m15/regular/m15PTM.png', bounds:bounds},
+	{name:'Artifact Power/Toughness', src:'/img/frames/m15/regular/m15PTA.png', bounds:bounds}
+];
+//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 = 'modalNickname';
+	//art bounds
+	card.artBounds = {x:0, y:0, width:1, height:0.9224};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, 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.0613, width:0.9292, height:71/2100, oneLine:true, size:71/1638, align:'right', shadowX:-0.001, shadowY:0.0029, manaCost:true, manaSpacing:0},
+		nickname: {name:'Nickname', text:'', x:0.1614, y:0.0522, width:0.7534, height:0.0543, oneLine:true, font:'belerenb', size:0.0381},
+		title: {name:'Title', text:'', x:0.14, y:0.1129, width:0.72, height:0.0243, oneLine:true, font:'mplantini', size:0.0229, color:'white', shadowX:0.0014, shadowY:0.001, align:'center'},
+		type: {name:'Type', text:'', x:0.0854, y:0.5664, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324},
+		rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2572, size:0.0362},
+		flipsideType: {name:'Flipside Type', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0234, color:'white', oneLine:true, font:'belerenb'},
+		flipSideReminder: {name:'Flipside Text', text:'', x:0.068, y:0.892, width:0.364, height:0.0391, size:0.0258, color:'white', oneLine:true, align:'right'},
+		pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center'}
+	});
+}
+//loads available frames
+loadFramePack();