Initial autoframe support

creator/index.html

@@ -585,6 +585,11 @@
 								<option value="zht">Traditional Chinese</option>
 								<option value="ph">Phyrexian</option>
 							</select>
+							<h5 class='padding input-description margin-bottom'>Enable automatically setting card frames</h5>
+							<label class='checkbox-container input margin-bottom'>Automatically set frames
+								<input id='enableAutoFrame' type='checkbox' onchange='enableAutoFrame();'>
+								<span class='checkmark'></span>
+							</label>
 						</div>
 						<div class='readable-background margin-bottom padding'>
 							<h5 class='padding margin-bottom input-description'>Save your current card</h5>
@@ -629,6 +634,12 @@
 						</div>
 					</div>
 				</div>
+				<div class='readable-background padding'>
+					<h5 class='padding input-description'>Auto-set frames</h5>
+					<div class='padding input-grid'>
+						<button class='input' onclick='autoFrame("M15");'>M15</button>
+					</div>
+				</div>
 				<div class='readable-background padding'>
 					<h3 class='download padding' onclick='downloadCard();'>Download your card</h3>
 					<h5 onclick='downloadCard(true);' id='downloadAlt' href='' target='_blank' class='padding download input-description' style='text-align: left;'>Click here for an alternative download</h5>

js/creator-23.js

@@ -503,6 +503,258 @@ function doubleClick(event, maskOrFrame) {
 	}
 	return null;
 }
+function cardFrameProperties(colors, manaCost, typeLine, power) {
+	var colors = colors.map(color => color.toUpperCase())
+	if ([
+			['U', 'W'],
+			['B', 'W'],
+			['R', 'B'],
+			['G', 'B'],
+			['B', 'U'],
+			['R', 'U'],
+			['G', 'R'],
+			['W', 'R'],
+			['W', 'G'],
+			['U', 'G']
+		].map(arr => JSON.stringify(arr) === JSON.stringify(colors)).includes(true)) {
+		colors.reverse();
+	}
+
+	var land = 'L';
+
+	var landRight;
+
+	var isHybrid = manaCost.includes('/');
+
+	var pinlineRules;
+	if (colors.length > 2) {
+		pinlineRules = 'M';
+	} else if (colors.length != 0) {
+		pinlineRules = colors[0];
+	} else if (typeLine.includes('Land')) {
+		pinlineRules = land;
+	} else {
+		pinlineRules = 'A';
+	}
+
+	var pinelineRulesRight;
+	if (typeLine.includes('Land')) {
+		pinelineRulesRight = landRight;
+	} else if (colors.length == 2) {
+		pinelineRulesRight = colors[1];
+	}
+
+	var typeTitle;
+	if (colors.length >= 2) {
+		if (colors.length > 2) {
+			typeTitle = 'M'
+		} else if (isHybrid) {
+			typeTitle = 'L';
+		} else {
+			typeTitle = 'M';
+		}
+	} else if (colors.length == 1) {
+		typeTitle = colors[0];
+	} else if (typeLine.includes('Land')) {
+		typeTitle = land;
+	} else {
+		typeTitle = 'A';
+	}
+
+	var pt;
+	if (power) {
+		if (typeLine.includes('Vehicle')) {
+			pt = 'V';
+		} else if (typeTitle == 'L') {
+			pt = 'C';
+		} else {
+			pt = typeTitle;
+		}
+	}
+	
+	var frame;
+	if (typeLine.includes('Land')) {
+		frame = 'L';
+	} else if (typeLine.includes('Vehicle')) {
+		frame = 'V';
+	} else if (typeLine.includes('Artifact')) {
+		frame = 'A';
+	} else if (colors.length > 2) {
+		frame = 'M';
+	} else if (colors.length == 2) {
+		if (isHybrid) {
+			frame = colors[0];
+		} else {
+			frame = 'M';
+		}
+	} else if (colors.length == 1) {
+		frame = colors[0];
+	} else {
+		frame = 'L';
+	}
+
+	var frameRight;
+	if (typeLine.includes('Land')) {
+		frameRight = landRight;
+	} else if (colors.length == 2 && isHybrid) {
+		frameRight = colors[1];
+	}
+
+	return {
+		'land': land,
+		'landRight': landRight,
+		'pinlineRules': pinlineRules,
+		'pinlineRulesRight': pinelineRulesRight,
+		'typeTitle': typeTitle,
+		'pt': pt,
+		'frame': frame,
+		'frameRight': frameRight,
+	}
+}
+function autoFrame(frame) {
+	var colors = [...new Set(card.text.mana.text.toUpperCase().split('').filter(char => ['W', 'U', 'B', 'R', 'G'].includes(char)))];
+
+	if (frame == 'M15') {
+		autoM15Frame(colors, card.text.mana.text, card.text.type.text, card.text.pt.text);
+	}	
+}
+async function autoM15Frame(colors, mana_cost, type_line, power) {
+	var frames = card.frames.filter(frame => frame.name.includes('Extension'));
+
+	//clear the draggable frames
+	card.frames = [];
+	document.querySelector('#frame-list').innerHTML = null;
+
+	var properties = cardFrameProperties(colors, mana_cost, type_line, power);
+
+	// Set frames
+
+	if (type_line.includes('Legendary')) {
+		if (properties.pinlineRulesRight) {
+			frames.push(makeM15FrameByLetter(properties.pinlineRulesRight, 'Crown', true));
+		}
+		frames.push(makeM15FrameByLetter(properties.pinlineRules, "Crown", false));
+		frames.push(makeM15FrameByLetter(properties.pinlineRules, "Crown Border Cover", false));
+	}
+	if (properties.pt) {
+		frames.push(makeM15FrameByLetter(properties.pt, 'PT', false));
+	}
+	if (properties.pinlineRulesRight) {
+		frames.push(makeM15FrameByLetter(properties.pinlineRulesRight, 'Pinline', true));
+	}
+	frames.push(makeM15FrameByLetter(properties.pinlineRules, 'Pinline', false));
+	frames.push(makeM15FrameByLetter(properties.typeTitle, 'Type', false));
+	frames.push(makeM15FrameByLetter(properties.typeTitle, 'Title', false));
+	if (properties.pinlineRulesRight) {
+		frames.push(makeM15FrameByLetter(properties.pinlineRulesRight, 'Rules', true));
+	}
+	frames.push(makeM15FrameByLetter(properties.pinlineRules, 'Rules', false));
+	if (properties.frameRight) {
+		frames.push(makeM15FrameByLetter(properties.frameRight, 'Frame', true));
+	}
+	frames.push(makeM15FrameByLetter(properties.frame, 'Frame', false));
+	frames.push(makeM15FrameByLetter(properties.frame, 'Border', false));
+
+	if (card.text.pt && type_line.includes('Vehicle') && !card.text.pt.text.includes('fff')) {
+		card.text.pt.text = '{fontcolor#fff}' + card.text.pt.text;
+	}
+
+	card.frames = frames;
+	card.frames.reverse();
+	await card.frames.forEach(item => addFrame([], item));
+	card.frames.reverse();
+}
+function makeM15FrameByLetter(letter, mask = false, maskToRightHalf = false) {
+	letter = letter.toUpperCase();
+	var frameNames = {
+		'W': 'White',
+		'U': 'Blue',
+		'B': 'Black',
+		'R': 'Red',
+		'G': 'Green',
+		'M': 'Multicolored',
+		'A': 'Artifact',
+		'L': 'Land',
+		'C': 'Colorless',
+		'V': 'Vehicle'
+	}
+
+	var frameName = frameNames[letter];
+
+	if (mask == "Crown Border Cover") {
+		return {
+			'name': 'Legend Crown Border Cover',
+			'src': '/img/black.png',
+			'masks': [],
+			'bounds': {
+				'height': 0.0177,
+				'width': 0.9214,
+				'x': 0.0394,
+				'y': 0.0277
+			}
+		}
+	}
+
+	if (mask == "Crown") {
+		var frame = {
+			'name': frameName + ' Legend Crown',
+			'src': '/img/frames/m15/crowns/m15Crown' + letter + '.png',
+			'masks': [],
+			'bounds': {
+				'height': 0.1667,
+				'width': 0.9454,
+				'x': 0.0274,
+				'y': 0.0191
+			}
+		}
+		if (maskToRightHalf) {
+			frame.masks.push({
+				'src': '/img/frames/maskRightHalf.png',
+				'name': 'Right Half'
+			});
+		}
+		return frame;
+	}
+
+	if (mask == 'PT') {
+		return {
+			'name': frameName + ' Power/Toughness',
+			'src': '/img/frames/m15/regular/m15PT' + letter + '.png',
+			'masks': [],
+			'bounds': {
+				'height': 0.0733,
+				'width': 0.188,
+				'x': 0.7573,
+				'y': 0.8848
+			}
+		}
+	}
+
+	var frame = {
+		'name': frameName + ' Frame',
+		'src': '/img/frames/m15/regular/m15Frame' + letter + '.png',
+	}
+
+	if (mask) {
+		frame.masks = [
+			{
+				'src': '/img/frames/m15/regular/m15Mask' + mask + '.png',
+				'name': mask
+			}
+		]
+		
+		if (maskToRightHalf) {
+			frame.masks.push({
+				'src': '/img/frames/maskRightHalf.png',
+				'name': 'Right Half'
+			});
+		}
+	} else {
+		frame.masks = [];
+	}
+
+	return frame;
+}
 async function addFrame(additionalMasks = [], loadingFrame = false) {
 	var frameToAdd = JSON.parse(JSON.stringify(availableFrames[selectedFrameIndex]));
 	var maskThumbnail = true;
@@ -1740,6 +1992,9 @@ function toggleStarDot() {
 function enableImportCollectorInfo() {
 	localStorage.setItem('enableImportCollectorInfo', document.querySelector('#enableImportCollectorInfo').checked);
 }
+function enableAutoFrame() {
+	localStorage.setItem('enableAutoFrame', document.querySelector('#enableAutoFrame').checked);
+}
 function removeDefaultCollector() {
 	defaultCollector = {}; //{number: year, rarity:'P', setCode:'MTG', lang:'EN', starDot:false};
 	localStorage.removeItem('defaultCollector'); //localStorage.setItem('defaultCollector', JSON.stringify(defaultCollector));
@@ -1955,6 +2210,10 @@ function changeCardIndex() {
 	if (!document.querySelector('#lockSetSymbolURL').checked) {
 		fetchSetSymbol();
 	}
+	//autoframe
+	if (localStorage.getItem('enableAutoFrame') == 'true') {
+		autoM15Frame(cardToImport.colors, cardToImport.mana_cost, cardToImport.type_line, cardToImport.power);
+	}
 	//font size
 	Object.keys(card.text).forEach(key => {
 			card.text[key].fontSize = 0;
@@ -2348,6 +2607,11 @@ if (!localStorage.getItem('enableImportCollectorInfo')) {
 } else {
 	document.querySelector('#enableImportCollectorInfo').checked = (localStorage.getItem('enableImportCollectorInfo') == 'true');
 }
+if (!localStorage.getItem('enableAutoFrame')) {
+	localStorage.setItem('enableAutoFrame', 'false');
+} else {
+	document.querySelector('#enableAutoFrame').checked = (localStorage.getItem('enableAutoFrame') == 'true');
+}
 
 // lock set symbol code (user defaults)
 if (!localStorage.getItem('lockSetSymbolCode')) {