QR Codes

creator/index.php

@@ -216,6 +216,7 @@ include('../globalHTML/header-1.php');
 									<h5>{bold}</h5><h5>Bolds text</h5>
 									<h5>{/bold}</h5><h5>Removes bold</h5>
 									<h5>{lns}</h5><h5>Moves to the next line without an extra space (stands for line-no-space)</h5>
+									<h5>{divider}</h5><h5>Moves to the next line and draws the flavor text bar</h5>
 									<h5>{flavor}</h5><h5>Moves to the next line, draws the flavor text bar, and italicizes</h5>
 									<h5>{fontsize#}</h5><h5>Changes the font size by # pixels (relative - use negative integers to shrink text - ie '{fontsize-12}')</h5>
 									<h5>{fontcolor___}</h5><h5>Changes the font color to ___ (ie '{fontcolor#00FF00}')</h5>

js/creator-23.js

@@ -706,6 +706,31 @@ function hsl(canvas, inputH, inputS, inputL) {
 	//then put the new image data back
 	context.putImageData(imageData, 0, 0);
 }
+function croppedCanvas(oldCanvas, sensitivity = 0) {
+	var oldContext = oldCanvas.getContext('2d');
+	var newCanvas = document.createElement('canvas');
+	var newContext = newCanvas.getContext('2d');
+	var pixels = oldContext.getImageData(0, 0, oldCanvas.width, oldCanvas.height).data;
+	var pixX = [];
+	var pixY = [];
+	for (var x = 0; x < oldCanvas.width; x += 1) {
+		for (var y = 0; y < oldCanvas.height; y += 1) {
+			if (pixels[(y * oldCanvas.width + x) * 4 + 3] > sensitivity) {
+				pixX.push(x);
+				pixY.push(y);
+			}
+		}
+	}
+	pixX.sort(function(a, b) { return a - b });
+	pixY.sort(function(a, b) { return a - b });
+	var n = pixX.length - 1;
+	var newWidth = 1 + pixX[n] - pixX[0];
+	var newHeight = 1 + pixY[n] - pixY[0];
+	newCanvas.width = newWidth;
+	newCanvas.height = newHeight;
+	newContext.putImageData(oldCanvas.getContext('2d').getImageData(pixX[0], pixY[0], newWidth, newHeight), 0, 0);
+	return newCanvas;
+}
 /*
 shoutout to https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion for providing the hsl-rgb conversion algorithms
 */
@@ -854,7 +879,7 @@ function writeText(textObject, targetContext) {
 	if (rawText.toLowerCase().includes('{cardname}')) {
 		rawText = rawText.replace(/{cardname}/ig, getCardName());
 	}
-	var splitText = rawText.replace(/\n/g, '{line}').replace(/{flavor}/g, '{lns}{bar}{lns}{fixtextalign}{i}').replace(/{/g, splitString + '{').replace(/}/g, '}' + splitString).replace(/ /g, splitString + ' ' + splitString).split(splitString);
+	var splitText = rawText.replace(/\n/g, '{line}').replace(/{divider}/g, '{lns}{bar}{lns}{fixtextalign}').replace(/{flavor}/g, '{lns}{bar}{lns}{fixtextalign}{i}').replace(/{/g, splitString + '{').replace(/}/g, '}' + splitString).replace(/ /g, splitString + ' ' + splitString).split(splitString);
 	splitText = splitText.filter(item => item);
 	if (textObject.vertical) {
 		newSplitText = [];
@@ -1682,7 +1707,9 @@ function drawCard() {
 		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
+	} else if (card.version.includes('QRCode') && typeof qrCodeCanvas !== "undefined") {
+		cardContext.drawImage(qrCodeCanvas, 0, 0, cardCanvas.width, cardCanvas.height);
+	} // REMOVE/DELETE PLANESWALKERCANVAS 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/groupCustom.js

@@ -1,5 +1,6 @@
 loadFramePacks([
 	{name:'Misc. Custom Frames', value:'MiscCustom'},
+	{name:'Deck Covers', value:'CustomDeckCover'},
 	{name:'Classicshifted', value:'Classicshifted'},
 	{name:'Classicshifted Lands', value:'ClassicshiftedLands'},
 	{name:'Classicshifted Planeswalkers', value:'ClassicshiftedPlaneswalker'},

js/frames/packCustomDeckCover.js

@@ -0,0 +1,49 @@
+//defines available frames
+availableFrames = [
+	{name:'White Frame', src:'/img/frames/custom/deckCover/w.png'},
+	{name:'Blue Frame', src:'/img/frames/custom/deckCover/u.png'},
+	{name:'Black Frame', src:'/img/frames/custom/deckCover/b.png'},
+	{name:'Red Frame', src:'/img/frames/custom/deckCover/r.png'},
+	{name:'Green Frame', src:'/img/frames/custom/deckCover/g.png'},
+	{name:'Multicolored Frame', src:'/img/frames/custom/deckCover/m.png'},
+	{name:'Colorless Frame', src:'/img/frames/custom/deckCover/c.png'},
+	{name:'White Mana Symbol', src:'/img/manaSymbols/w.svg', bounds:{x:0.1594, y:0.7529, width:0.06, height:0.0429}},
+	{name:'Blue Mana Symbol', src:'/img/manaSymbols/u.svg', bounds:{x:0.23, y:0.7896, width:0.06, height:0.0429}},
+	{name:'Black Mana Symbol', src:'/img/manaSymbols/b.svg', bounds:{x:0.2027, y:0.8486, width:0.06, height:0.0429}},
+	{name:'Red Mana Symbol', src:'/img/manaSymbols/r.svg', bounds:{x:0.116, y:0.8486, width:0.06, height:0.0429}},
+	{name:'Green Mana Symbol', src:'/img/manaSymbols/g.svg', bounds:{x:0.0887, y:0.7896, width:0.06, height:0.0429}}
+];
+//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 = 'customQRCodeDeckCover';
+	card.onload = '/js/frames/versionQRCode.js';
+	loadScript('/js/frames/versionQRCode.js');
+	//art bounds
+	card.artBounds = {x:0, y:0, width:1, height:0.7162};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.5, y:0.9681, width:0.12, height:0.0410, vertical:'center', horizontal: 'center'};
+	resetSetSymbol();
+	//watermark bounds
+	card.watermarkBounds = {x:0.5, y:0.7762, width:0.75, height:0.2305};
+	resetWatermark();
+	//text
+	loadTextOptions({
+		title: {name:'Title', text:'', x:0.0474, y:0.0234, width:0.9054, height:0.0534, oneLine:true, font:'beleren', size:0.0534, color:'white', align:'center', shadowX:0.0027, shadowY:0.002},
+		notes: {name:'Description', text:'', x:0.69, y:0.7358, width:0.27, height:0.18, font:'beleren', size:0.0362, color:'white', align:'center', shadowX:0.002, shadowY:0.0015}
+	});
+	//bottom info
+	await loadBottomInfo({
+		midLeft: {text:'{elemidinfo-set}*{elemidinfo-language}  {fontbelerenbsc}{fontsize' + scaleHeight(0.001) + '}{upinline' + scaleHeight(0.0005) + '}\uFFEE{elemidinfo-artist}', x:0.0647, y:0.9548, width:0.8707, height:0.0171, oneLine:true, font:'gothammedium', size:0.0171, color:'white', outlineWidth:0.003},
+		bottomLeft: {text:'NOT FOR SALE', x:0.0647, y:0.9719, width:0.8707, height:0.0143, oneLine:true, font:'gothammedium', size:0.0143, color:'white', outlineWidth:0.003},
+		wizards: {name:'wizards', text:'\u2122 & \u00a9 ' + date.getFullYear() + ' Wizards of the Coast', x:0.0647, y:0.9549, width:0.8707, height:0.0167, oneLine:true, font:'mplantin', size:0.0162, color:'white', align:'right', outlineWidth:0.003},
+		bottomRight: {text:'CardConjurer.com', x:0.0647, y:0.972, width:0.8707, height:0.0143, oneLine:true, font:'mplantin', size:0.0143, color:'white', align:'right', outlineWidth:0.003}
+	});
+}
+//loads available frames
+loadFramePack();

js/frames/versionQRCode.js

@@ -0,0 +1,47 @@
+//checks to see if it needs to run
+if (!loadedVersions.includes('/js/frames/versionQRCode.js')) {
+	loadedVersions.push('/js/frames/versionQRCode.js');
+	card.qrCode = {
+		x:0.35,
+		y:0.7224,
+		size:0.2143,
+		fgColor:'#fff',
+		fgAlpha:1,
+		bgColor:'#000',
+		bgAlpha:0,
+		padding:0,
+		url:'https://cardconjurer.com/'
+	}
+	sizeCanvas('qrious');
+	sizeCanvas('qrCode');
+	document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `qrCode`)">QR Code</h3>';
+	var newHTML = document.createElement('div');
+	newHTML.id = 'creator-menu-qrCode';
+	newHTML.classList.add('hidden');
+	newHTML.innerHTML = `
+	<div class='readable-background padding'>
+		<h5 class='padding margin-bottom input-description'>Enter the URL of your decklist:</h5>
+		<input id='qr-code-url' class='input' type='URL' oninput='updateQRCode(this.value);'>
+	</div>
+	`;
+	document.querySelector('#creator-menu-sections').appendChild(newHTML);
+	loadScript('/js/qrious.min.js');
+}
+
+function updateQRCode(url = card.qrCode.url) {
+	//generate qr code
+	var qr = new QRious({
+		background: card.qrCode.bgColor,
+		backgroundAlpha: card.qrCode.bgAlpha,
+		foreground: card.qrCode.fgColor,
+		foregroundAlpha: card.qrCode.fgAlpha,
+		padding: scaleHeight(card.qrCode.padding),
+		size: scaleHeight(card.qrCode.size),
+		element: qriousCanvas,
+		value: url
+	});
+	//draw cropped qr code to correct location
+	qrCodeCanvas.getContext('2d').drawImage(croppedCanvas(qriousCanvas), scaleWidth(card.qrCode.x), scaleHeight(card.qrCode.y), scaleHeight(card.qrCode.size), scaleHeight(card.qrCode.size));
+	//draw the card
+	drawCard();
+}