fang frame + color overlays

creator/index.php

@@ -44,12 +44,19 @@ include('../globalHTML/header-1.php');
 				</label>
 			</div>
 			<div>
-				<h5 class='input-description'>Overlay Mode</h5>
+				<h5 class='input-description'>Blending Mode</h5>
 				<label class='checkbox-container input'>Preserve Alpha
 					<input id='frame-editor-alpha' type='checkbox' placeholder='Preserve Alpha'>
 					<span class='checkmark'></span>
 				</label>
 			</div>
+			<div>
+				<label class='checkbox-container input'>Color Overlay
+					<input id='frame-editor-color-overlay-check' type='checkbox' placeholder='Color Overlay'>
+					<span class='checkmark'></span>
+				</label>
+				<input id='frame-editor-color-overlay' class='input' type='color' placeholder='Color' value='#000000'>
+			</div>
 			<div>
 				<h5 class='input-description'>Select and remove masks</h5>
 				<select id='frame-editor-masks' class='input margin-bottom'></select>

img/frames/m15/fang/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="Frame" d="M750,1913C713.508,1912.54 684.175,1924.87 662,1950L84,1950C44.704,1915.56 31.684,1891.24 49,1710L49,1613.09C39.164,1575.08 39.77,1544.81 49,1532.76L49,1441.94C38.425,1417.83 38.3,1390.87 43,1362.6C44.428,1370.7 46.183,1377.91 49,1382.2L49,1321.81C46.013,1321.64 43.028,1321.78 41.521,1322.06C54.165,1284.5 32.909,1267.12 44,1234.78C45.568,1236.44 47.145,1238.06 49,1238.43L49,1220.37C47.189,1216.39 44.647,1213.38 42,1210.51L49,1203.21L49,1132.61C41.113,1111.95 41.962,1095.15 49,1081.08L49,891.29C40.509,859.644 40.137,829.013 49,799.536L49,564.734C42.991,516.749 41.121,478.203 49,461.9L49,353C25.627,199.902 40.77,92.633 122,64C149.691,40.298 189.409,43.564 235,60C228.904,52.635 222.283,45.094 223,40C324.008,42.931 324.153,58.912 461,68L513,52C515.583,60.221 520.475,66.778 530,70C595.662,69.686 663.084,62.33 732,49C736.23,48.506 743.523,44.253 750,41L750.61,41.308C756.929,44.514 763.902,48.522 768,49C836.916,62.33 904.338,69.686 970,70C979.525,66.778 984.417,60.221 987,52L1039,68C1175.85,58.912 1175.99,42.931 1277,40C1277.72,45.094 1271.1,52.635 1265,60C1310.59,43.564 1350.31,40.298 1378,64C1459.23,92.633 1474.37,199.902 1451,353L1451,461.9C1458.88,478.203 1457.01,516.749 1451,564.734L1451,799.536C1459.86,829.013 1459.49,859.644 1451,891.29L1451,1081.08C1458.04,1095.15 1458.89,1111.95 1451,1132.61L1451,1203.21L1458,1210.51C1455.35,1213.38 1452.81,1216.39 1451,1220.37L1451,1238.43C1452.86,1238.06 1454.43,1236.44 1456,1234.78C1467.09,1267.12 1445.84,1284.5 1458.48,1322.06C1456.97,1321.78 1453.99,1321.64 1451,1321.81L1451,1382.2C1453.82,1377.91 1455.57,1370.7 1457,1362.6C1461.7,1390.87 1461.58,1417.83 1451,1441.94L1451,1532.76C1460.23,1544.81 1460.84,1575.08 1451,1613.09L1451,1710C1468.32,1891.24 1455.3,1915.56 1416,1950L838,1950C815.998,1925.06 786.949,1912.73 750.854,1912.99L750,1913ZM1338,1320C1355.79,1321.74 1371.52,1337.85 1375,1356C1365.89,1373.04 1369.07,1393.83 1380,1417L1380,1519.02C1367.02,1537.83 1368.42,1560.93 1380,1587.91L1380,1692.65C1371.01,1719.95 1370.08,1745.51 1380,1768.73L1380,1826C1378.79,1905.42 1352.32,1933.48 1307,1934L851,1934C819.938,1908.94 786.736,1895.29 750.848,1895.98L750,1896C713.786,1895.08 680.307,1908.75 649,1934L193,1934C147.678,1933.48 121.206,1905.42 120,1826L120,1768.73C129.921,1745.51 128.994,1719.95 120,1692.65L120,1587.91C131.577,1560.93 132.98,1537.83 120,1519.02L120,1417C130.932,1393.83 134.108,1373.04 125,1356C128.482,1337.85 144.213,1321.74 162,1320L1338,1320ZM153,1298C123.169,1297.23 104.409,1284.25 104,1257L104,1223C104.409,1195.75 123.169,1182.78 153,1182L1347,1182C1376.83,1182.78 1395.59,1195.75 1396,1223L1396,1257C1395.59,1284.25 1376.83,1297.23 1347,1298L153,1298ZM279,232C217.164,227.822 154.685,292.605 117,356L117,706.735C123.828,752.722 124.055,787.707 117,810.555L117,995.454C123.198,1019.24 122.368,1030.99 121.405,1043.08C121.332,1044 119.315,1044.94 118.976,1044.07C118.251,1042.22 117.534,1044.42 117,1045.03L117,1061C123.289,1118.42 156.205,1163.3 196,1164L1304,1164C1343.8,1163.3 1376.71,1118.42 1383,1061L1383,1045.03C1382.47,1044.42 1381.75,1042.22 1381.02,1044.07C1380.68,1044.94 1378.67,1044 1378.6,1043.08C1377.63,1030.99 1376.8,1019.24 1383,995.454L1383,810.555C1375.94,787.707 1376.17,752.722 1383,706.735L1383,356C1345.32,292.605 1282.84,227.822 1221,232L279,232ZM153,216C123.169,215.225 104.409,202.248 104,175L104,141C104.409,113.752 123.169,100.775 153,100L1347,100C1376.83,100.775 1395.59,113.752 1396,141L1396,175C1395.59,202.248 1376.83,215.225 1347,216L153,216Z" style="fill:rgb(0,123,67);"/>
+</svg>

img/frames/m15/fang/rules.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="Rules" d="M1338,1320C1355.79,1321.74 1371.52,1337.85 1375,1356C1365.89,1373.04 1369.07,1393.83 1380,1417L1380,1519.02C1367.02,1537.83 1368.42,1560.93 1380,1587.91L1380,1692.65C1371.01,1719.95 1370.08,1745.51 1380,1768.73L1380,1826C1378.79,1905.42 1352.32,1933.48 1307,1934L851,1934C819.938,1908.94 786.736,1895.29 750.848,1895.98L750,1896C713.786,1895.08 680.307,1908.75 649,1934L193,1934C147.678,1933.48 121.206,1905.42 120,1826L120,1768.73C129.921,1745.51 128.994,1719.95 120,1692.65L120,1587.91C131.577,1560.93 132.98,1537.83 120,1519.02L120,1417C130.932,1393.83 134.108,1373.04 125,1356C128.482,1337.85 144.213,1321.74 162,1320L1338,1320Z" style="fill:rgb(0,117,190);"/>
+</svg>

img/frames/m15/fang/title.svg

@@ -0,0 +1,7 @@
+<?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;">
+    <g id="Title" transform="matrix(1,0,0,1,0,-1082)">
+        <path d="M153,1298C123.169,1297.23 104.409,1284.25 104,1257L104,1223C104.409,1195.75 123.169,1182.78 153,1182L1347,1182C1376.83,1182.78 1395.59,1195.75 1396,1223L1396,1257C1395.59,1284.25 1376.83,1297.23 1347,1298L153,1298Z" style="fill:rgb(239,56,39);"/>
+    </g>
+</svg>

img/frames/m15/fang/type.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="Type" d="M153,1298C123.169,1297.23 104.409,1284.25 104,1257L104,1223C104.409,1195.75 123.169,1182.78 153,1182L1347,1182C1376.83,1182.78 1395.59,1195.75 1396,1223L1396,1257C1395.59,1284.25 1376.83,1297.23 1347,1298L153,1298Z" style="fill:rgb(239,56,39);"/>
+</svg>

js/creator-23.js

@@ -346,10 +346,10 @@ function drawFrames() {
 				frameContext.putImageData(existingData, 0, 0);
 			} else {
 				frameMaskingContext.drawImage(item.image, frameX, frameY, frameWidth, frameHeight);
+				if (item.colorOverlayCheck) {frameMaskingContext.globalCompositeOperation = 'source-in'; frameMaskingContext.fillStyle = item.colorOverlay; frameMaskingContext.fillRect(0, 0, frameMaskingCanvas.width, frameMaskingCanvas.height);}
 				if (item.erase) {frameContext.globalCompositeOperation = 'destination-out';}
 				frameContext.drawImage(frameMaskingCanvas, 0, 0, frameCanvas.width, frameCanvas.height);
 			}
-			
 		}
 	});
 	if (!haveDrawnPrePTCanvas && drawTextBetweenFrames) {
@@ -603,6 +603,10 @@ function frameElementClicked(event) {
 		document.querySelector('#frame-editor-erase').onchange = (event) => {selectedFrame.erase = event.target.checked; drawFrames();}
 		document.querySelector('#frame-editor-alpha').checked = selectedFrame.preserveAlpha || false;
 		document.querySelector('#frame-editor-alpha').onchange = (event) => {selectedFrame.preserveAlpha = event.target.checked; drawFrames();}
+		document.querySelector('#frame-editor-color-overlay-check').checked = selectedFrame.colorOverlayCheck || false;
+		document.querySelector('#frame-editor-color-overlay-check').onchange = (event) => {selectedFrame.colorOverlayCheck = event.target.checked; drawFrames();}
+		document.querySelector('#frame-editor-color-overlay').value = selectedFrame.colorOverlay || false;
+		document.querySelector('#frame-editor-color-overlay').onchange = (event) => {selectedFrame.colorOverlay = event.target.value; drawFrames();}
 		// Removing masks
 		const selectMaskElement = document.querySelector('#frame-editor-masks');
 		selectMaskElement.innerHTML = null;

js/frames/packFang.js

@@ -0,0 +1,54 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/m15/fang/frame.svg', name:'Frame'}, {src:'/img/frames/m15/fang/title.svg', name:'Title'}, {src:'/img/frames/m15/fang/type.svg', name:'Type'}, {src:'/img/frames/m15/fang/rules.svg', name:'Rules'}];
+var bounds = {x:0.76, y:0.8762, width:0.204, height:0.0781};
+//defines available frames
+availableFrames = [
+	{name:'White Frame', src:'/img/frames/m15/fang/w.png', masks:masks},
+	{name:'Blue Frame', src:'/img/frames/m15/fang/u.png', masks:masks},
+	{name:'Black Frame', src:'/img/frames/m15/fang/b.png', masks:masks},
+	{name:'Red Frame', src:'/img/frames/m15/fang/r.png', masks:masks},
+	{name:'Green Frame', src:'/img/frames/m15/fang/g.png', masks:masks},
+	{name:'Multicolored Frame', src:'/img/frames/m15/fang/m.png', masks:masks},
+	{name:'Artifact Frame', src:'/img/frames/m15/fang/a.png', masks:masks},
+	{name:'Land Frame', src:'/img/frames/m15/fang/l.png', masks:masks},
+	{name:'White Power/Toughness', src:'/img/frames/m15/fang/pt/w.png', bounds:bounds},
+	{name:'Blue Power/Toughness', src:'/img/frames/m15/fang/pt/u.png', bounds:bounds},
+	{name:'Black Power/Toughness', src:'/img/frames/m15/fang/pt/b.png', bounds:bounds},
+	{name:'Red Power/Toughness', src:'/img/frames/m15/fang/pt/r.png', bounds:bounds},
+	{name:'Green Power/Toughness', src:'/img/frames/m15/fang/pt/g.png', bounds:bounds},
+	{name:'Multicolored Power/Toughness', src:'/img/frames/m15/fang/pt/m.png', bounds:bounds},
+	{name:'Artifact Power/Toughness', src:'/img/frames/m15/fang/pt/a.png', bounds:bounds},
+	{name:'Land Power/Toughness', src:'/img/frames/m15/fang/pt/l.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 = 'm15Fang';
+	//art bounds
+	card.artBounds = {x:0.078, y:0.1105, width:0.844, height:0.4439};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.92, y:0.59, width:0.12, height:0.04, 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.0591, width:0.9234, 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.0867, y:0.05, width:0.8267, height:0.0543, oneLine:true, font:'belerenb', size:0.0381},
+		type: {name:'Type', text:'', x:0.0867, y:0.5653, width:0.8267, height:0.0543, oneLine:true, font:'belerenb', size:0.0324},
+		rules: {name:'Rules Text', text:'', x:0.096, y:0.6303, width:0.808, height:0.2875, size:0.0362},
+		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();
+//Only for the main version as the webpage loads:
+if (!card.text) {
+	document.querySelector('#loadFrameVersion').click();
+}