tutorial & sdcc15 planeswalkers

css/style-9.css

@@ -579,6 +579,30 @@ textarea.input {
 
 
 
+
+/*Tutorial Page only*/
+.tutorial-grid {
+	display: grid;
+	grid-gap: 1rem;
+	grid-template-columns: 1fr;
+}
+.tutorial-grid > img {
+	display: block;
+	width: 100%;
+	height: auto;
+	margin: 1rem auto;
+}
+.readable-background > .tutorial-grid > img {
+	border: 0.1rem solid gray;
+}
+@media only screen and (min-width: 750px) {
+	.tutorial-grid {
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+
+
 /*Creator related only*/
 /*Creator Grid/Canvas/Menu*/
 .creator-grid {

img/frames/planeswalker/sdcc15/abilityLineEven.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;">
+    <rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
+</svg>

img/frames/planeswalker/sdcc15/abilityLineOdd.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;">
+    <rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
+</svg>

img/frames/planeswalker/sdcc15/planeswalkerMinus.svg

@@ -0,0 +1,24 @@
+<?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="203" height="142" viewBox="0 0 203 142" 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-linecap:round;">
+    <g transform="matrix(1,0,0,1,-640.744,-1001.17)">
+        <rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
+        <g id="Card1" serif:id="Card">
+            <g id="loyalty-icons" serif:id="loyalty icons" transform="matrix(0.253844,0,0,0.253844,582.614,890.711)">
+                <g transform="matrix(-3.93943,-4.82441e-16,4.82441e-16,-3.93943,1230.67,6899.05)">
+                    <path d="M229,1631C215.714,1616.01 211.291,1595.17 221,1565L150,1536L77,1565C85.555,1588.61 84.874,1610.86 70,1631C121.714,1640.43 174.683,1640.66 229,1631Z"/>
+                    <g transform="matrix(0.773585,0,0,0.73722,34.8491,418.553)">
+                        <path d="M227.707,1631C219.777,1612.51 218.226,1595.78 223.585,1565L150,1536L74.415,1565C78.115,1588.93 80.755,1611.13 70,1631C121.714,1640.43 173.391,1640.66 227.707,1631Z" style="stroke:rgb(96,96,96);stroke-width:5.29px;"/>
+                    </g>
+                    <path d="M229.35,1632.97L232.864,1632.34L230.497,1629.67C217.606,1615.13 213.483,1594.89 222.904,1565.61L223.458,1563.89L150.011,1528.82L74.474,1563.9L75.12,1565.68C83.431,1588.62 82.842,1610.24 68.391,1629.81L66.486,1632.39L69.641,1632.97C121.585,1642.44 174.791,1642.67 229.35,1632.97ZM225.248,1629.62C173.443,1638.45 122.869,1638.24 73.448,1629.59C86.608,1610.08 87.284,1588.72 79.512,1566.11C79.511,1566.11 149.989,1539.18 149.989,1539.18C149.989,1539.18 218.553,1566.11 218.553,1566.11C209.817,1594.5 213.567,1614.71 225.248,1629.62L225.248,1629.62Z" style="fill:rgb(96,96,96);"/>
+                </g>
+                <g>
+                    <circle cx="1006" cy="570" r="19.189" style="fill:rgb(96,96,96);"/>
+                    <g transform="matrix(1,0,0,1,0,102.297)">
+                        <circle cx="1006" cy="570" r="19.189" style="fill:rgb(96,96,96);"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

img/frames/planeswalker/sdcc15/planeswalkerNeutral.svg

@@ -0,0 +1,25 @@
+<?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="203" height="123" viewBox="0 0 203 123" 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-linecap:round;">
+    <g transform="matrix(1,0,0,1,-640.744,-1001.17)">
+        <rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
+        <g id="Card1" serif:id="Card">
+            <g id="loyalty-icons" serif:id="loyalty icons" transform="matrix(0.253844,0,0,0.253844,582.614,890.711)">
+                <g transform="matrix(0.90625,0,0,0.90625,74.6625,40.3589)">
+                    <g transform="matrix(3.93943,0,0,3.93943,31.7064,-6376.77)">
+                        <path d="M230,1742C208.667,1767.75 209.105,1794.09 230,1821C177.495,1828.43 124.819,1828.61 70,1821C88.962,1794.95 89.795,1768.63 70,1742C123.962,1732.84 176.616,1733.23 230,1742Z" style="stroke:rgb(96,96,96);stroke-width:4.41px;"/>
+                    </g>
+                    <g transform="matrix(3.1023,0,0,3.1023,157.276,-4885.87)">
+                        <path d="M230,1742C217.465,1768.9 217.202,1795.15 230,1821C177.495,1828.43 124.819,1828.61 70,1821C81.182,1794.95 81.415,1768.63 70,1742C123.962,1732.84 176.616,1733.23 230,1742Z" style="stroke:rgb(96,96,96);stroke-width:5.6px;"/>
+                    </g>
+                </g>
+                <g>
+                    <circle cx="1006" cy="570" r="19.189" style="fill:rgb(96,96,96);"/>
+                    <g transform="matrix(1,0,0,1,0,102.297)">
+                        <circle cx="1006" cy="570" r="19.189" style="fill:rgb(96,96,96);"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

img/frames/planeswalker/sdcc15/planeswalkerPlus.svg

@@ -0,0 +1,24 @@
+<?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="201" height="145" viewBox="0 0 201 145" 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-linecap:round;">
+    <g transform="matrix(1,0,0,1,-642.651,-980.355)">
+        <rect id="Card" x="0" y="0" width="1500" height="2100" style="fill:none;"/>
+        <g id="Card1" serif:id="Card">
+            <g id="loyalty-icons" serif:id="loyalty icons" transform="matrix(0.253844,0,0,0.253844,582.614,890.711)">
+                <g transform="matrix(3.93943,0,0,3.93943,59.2824,-5667.67)">
+                    <path d="M229,1631C215.714,1616.01 211.291,1595.17 221,1565L150,1536L77,1565C85.555,1588.61 84.874,1610.86 70,1631C121.714,1640.43 174.683,1640.66 229,1631Z"/>
+                    <g transform="matrix(0.773585,0,0,0.73722,34.8491,418.553)">
+                        <path d="M227.707,1631C219.777,1612.51 218.226,1595.78 223.585,1565L150,1536L74.415,1565C78.115,1588.93 80.755,1611.13 70,1631C121.714,1640.43 173.391,1640.66 227.707,1631Z" style="stroke:rgb(96,96,96);stroke-width:5.29px;"/>
+                    </g>
+                    <path d="M229.35,1632.97L232.864,1632.34L230.497,1629.67C217.606,1615.13 213.483,1594.89 222.904,1565.61L223.458,1563.89L150.011,1528.82L74.474,1563.9L75.12,1565.68C83.431,1588.62 82.842,1610.24 68.391,1629.81L66.486,1632.39L69.641,1632.97C121.585,1642.44 174.791,1642.67 229.35,1632.97ZM225.248,1629.62C173.443,1638.45 122.869,1638.24 73.448,1629.59C86.608,1610.08 87.284,1588.72 79.512,1566.11C79.511,1566.11 149.989,1539.18 149.989,1539.18C149.989,1539.18 218.553,1566.11 218.553,1566.11C209.817,1594.5 213.567,1614.71 225.248,1629.62L225.248,1629.62Z" style="fill:rgb(96,96,96);"/>
+                </g>
+                <g>
+                    <circle cx="1006" cy="570" r="19.189" style="fill:rgb(96,96,96);"/>
+                    <g transform="matrix(1,0,0,1,0,102.297)">
+                        <circle cx="1006" cy="570" r="19.189" style="fill:rgb(96,96,96);"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

js/frames/groupPlaneswalker.js

@@ -4,6 +4,8 @@ loadFramePacks([
 	{name:'Extended Art Frames', value:'PlaneswalkerBoxTopper'},
 	{name:'Nickname Frames', value:'PlaneswalkerNickname'},
 	{name:'Tall Frames', value:'PlaneswalkerTall'},
-	{name:'MDFC Frames', value:'PlaneswalkerMDFC'}
+	{name:'MDFC Frames', value:'PlaneswalkerMDFC'},
+	{name:'Special Frames', value:'disabled'},
+	{name:'Blackout (SDCC15)', value:'PlaneswalkerSDCC15'}
 ])
 notify('When you load a Planeswalker frame version, a "Planeswalker" tab will appear. This tab controls the placement and loyalty costs for Planeswalker abilities.')

js/frames/packPlaneswalkerSDCC15.js

@@ -0,0 +1,40 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/planeswalker/regular/planeswalkerMaskPinline.png', name:'Pinline'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskTitle.png', name:'Title'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskType.png', name:'Type'}, {src:'/img/frames/planeswalker/regular/planeswalkerMaskBorder.png', name:'Border'}, {src:'/img/frames/planeswalker/maskLoyalty.png', name:'Loyalty'}];
+//defines available frames
+availableFrames = [
+	{name:'Frame', src:'/img/frames/planeswalker/sdcc15/frame.svg', masks:masks},
+	{name:'Transform Frame', src:'/img/frames/planeswalker/sdcc15/transform.svg', 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 = 'planeswalkerSDCC15';
+	card.onload = '/js/frames/versionPlaneswalker.js';
+	loadScript('/js/frames/versionPlaneswalker.js');
+	//art bounds
+	card.artBounds = {x:0.0394, y:0.0281, width:0.9214, height:0.8929};
+	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.0867, y:0.0372, width:0.8267, height:0.0548, oneLine:true, font:'belerenb', size:0.0381, color:'#aaa'},
+		type: {name:'Type', text:'', x:0.0867, y:0.5625, width:0.8267, height:0.0548, oneLine:true, font:'belerenb', size:0.0324, color:'#aaa'},
+		ability0: {name:'Ability 1', text:'', x:0.18, y:0.6239, width:0.7467, height:0.0972, size:0.0353, color:'#aaa'},
+		ability1: {name:'Ability 2', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353, color:'#aaa'},
+		ability2: {name:'Ability 3', text:'', x:0.18, y:0, width:0.7467, height:0.0972, size:0.0353, color:'#aaa'},
+		ability3: {name:'Ability 4', text:'', x:0.18, y:0, width:0.7467, height:0, size:0.0353, color:'#aaa'},
+		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:'#aaa'}
+	});
+}
+//loads available frames
+loadFramePack();

js/frames/versionPlaneswalker.js

@@ -1,6 +1,5 @@
 //checks to see if it needs to run
 if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
-	console.log('LOADING PLANESWALKER VERSION SCRIPT')
 	loadedVersions.push('/js/frames/versionPlaneswalker.js');
 	sizeCanvas('planeswalker');
 	document.querySelector('#creator-menu-tabs').innerHTML += '<h3 class="selectable readable-background" onclick="toggleCreatorTabs(event, `planeswalker`)">Planeswalker</h3>';
@@ -53,12 +52,12 @@ if (!loadedVersions.includes('/js/frames/versionPlaneswalker.js')) {
 	var darkToLight = new Image();
 	setImageUrl(darkToLight, '/img/frames/planeswalker/abilityLineEven.png');
 	var planeswalkerTextMask = new Image();
-	planeswalkerTextMask.onload = function(){fixPlaneswalkerInputs(planeswalkerEdited);}
+	planeswalkerTextMask.onload = function(){resetPlaneswalkerImages(fixPlaneswalkerInputs(planeswalkerEdited));}
 	setImageUrl(planeswalkerTextMask, '/img/frames/planeswalker/planeswalkerMaskText.png');
 	var lightColor = 'white';
 	var darkColor = '#a4a4a4';
 } else {
-	fixPlaneswalkerInputs(planeswalkerEdited);
+	resetPlaneswalkerImages(fixPlaneswalkerInputs(planeswalkerEdited));
 }
 
 function planeswalkerEdited() {
@@ -99,6 +98,7 @@ function planeswalkerEdited() {
 	fixPlaneswalkerInputs();
 	var transitionHeight = scaleHeight(0.0048);
 	planeswalkerContext.clearRect(0, 0, planeswalkerCanvas.width, planeswalkerCanvas.height);
+	if (card.version != 'planeswalkerSDCC15') {
 		for (var i = 0; i < card.planeswalker.count; i ++) {
 			var x = scaleX(card.planeswalker.x);
 			var y = scaleY(card.text['ability' + i].y);
@@ -128,6 +128,7 @@ function planeswalkerEdited() {
 				}
 			}
 		}
+	}
 	planeswalkerContext.globalCompositeOperation = 'destination-in';
 	if (planeswalkerTextMask.complete) {
 		planeswalkerContext.drawImage(planeswalkerTextMask, scaleX(0), scaleY(0), scaleWidth(1), scaleHeight(1));
@@ -178,6 +179,26 @@ function fixPlaneswalkerInputs(callback) {
 	}
 }
 
+function resetPlaneswalkerImages(callback) {
+	var planeswalkerImageFolder = '';
+	var planeswalkerImageExtension = 'png';
+	if (card.version == 'planeswalkerSDCC15') {
+		planeswalkerImageFolder = '/sdcc15';
+		planeswalkerImageExtension = 'svg';
+	}
+	setImageUrl(plusIcon, `/img/frames/planeswalker${planeswalkerImageFolder}/planeswalkerPlus.${planeswalkerImageExtension}`);
+	setImageUrl(minusIcon, `/img/frames/planeswalker${planeswalkerImageFolder}/planeswalkerMinus.${planeswalkerImageExtension}`);
+	setImageUrl(neutralIcon, `/img/frames/planeswalker${planeswalkerImageFolder}/planeswalkerNeutral.${planeswalkerImageExtension}`);
+	setImageUrl(lightToDark, `/img/frames/planeswalker${planeswalkerImageFolder}/abilityLineOdd.${planeswalkerImageExtension}`);
+	setImageUrl(darkToLight, `/img/frames/planeswalker${planeswalkerImageFolder}/abilityLineEven.${planeswalkerImageExtension}`);
+	if (!darkToLight.onload) {
+		darkToLight.onload = function() {planeswalkerEdited();}
+	}
+	if (callback) {
+		callback();
+	}
+}
+
 function invertPlaneswalkerColors(reverse = false) {
 	if (reverse) {
 		document.querySelector('#planeswalker-invert').checked = card.planeswalker.invert;

tutorial/index.php

@@ -0,0 +1,57 @@
+<?php
+$title = 'Card Conjurer - Tutorials';
+$desc = 'Written guides on how to create a variety of custom Magic: The Gathering cards on Card Conjurer';
+include('../globalHTML/header-1.php');
+?>
+	<div class='layer center'>
+		<h2>Written Guides</h2>
+	</div>
+	<div class='readable-background layer margin-bottom-large'>
+		<div class='tutorial-grid'>
+			<img src='/img/tutorial/frame-tab.jpg'>
+			<div>
+				<h3 class='padding center margin-bottom-large'>Frame Tab</h3>
+				<h5 class='padding'>Frame Groups & Frame Packs</h5>
+				<p class='padding margin-bottom'>
+					The dropdown menus are used to navigate through frame packs. Frame groups (left, currently "Regular") organize frame packs into general groups, whereas frame packs (right, currently "Regular Frames") contain the actual images and settings you'll use to create cards.
+				</p>
+				<h5 class='padding'>Loading Frame Versions</h5>
+				<p class='padding margin-bottom'>
+					Clicking "Load Frame Version", or selecting a frame pack when "Auto load" is checked, will set up the layouts associated with the current frame pack. These layouts include textbox placement, art placement, etc... If you wish to use a combination of images from different frame packs, I recommend un-checking "Auto load", and using the "Load Frame Version" button.
+				</p>
+				<h5 class='padding'>Adding images</h5>
+				<p class='padding margin-bottom'>
+					Once you select a frame image (left) and an image mask (right), you can click "Add Frame to Card" or "Add Frame to Card (Right Half)" to add the selected image. Image masks control which part of the image is displayed, and are useful for creating colored artifacts, multicolored cards, and much more. For more image-adding options, click on the dropdown menu "More options", which is located directly below the "Add Frame to Card" button. You can also double click images to add them, and can add them to the right/middle/left sections by holding certain keys (shift, ctrl, or alt).
+				</p>
+				<h5 class='padding'>Removing/Reordering Images</h5>
+				<p class='padding margin-bottom'>
+					When you add images, they're displayed below the frame/mask selection area. You can click the X to remove images, or click and drag on them to change the order in which they're drawn. You can also click on the images to bring up the "Frame Image Editor" for more customized adjustments.
+				</p>
+			</div>
+		</div>
+	</div>
+	<div class='readable-background layer margin-bottom-large'>
+		<div class='tutorial-grid'>
+			<img src='/img/tutorial/text-tab.jpg'>
+			<div>
+				<h3 class='padding center margin-bottom'>Text Tab</h3>
+				<h5 class='padding'>Selecting Textboxes</h5>
+				<p class='padding margin-bottom'>
+					Depending on which frame version is currently loaded, you'll have several textboxes to choose from. Simply click on them, then enter the card text.
+				</p>
+				<h5 class='padding'>Text Codes</h5>
+				<p class='padding margin-bottom'>
+					Text codes are used to display mana symbols, change font size, etc... Near the bottom of the text tab, click on "Text Code / Mana Symbol Code Reference" to view all the available text codes and their descriptions. Make sure to always surround your text codes with curly brackets, as seen in the example (see image).
+				</p>
+				<h5 class='padding'>Adding Textboxes</h5>
+				<p class='padding margin-bottom'>
+					If you'd like additional textboxes, you can add them by clicking the buttons at the bottom of the text tab.
+				</p>
+				<h5 class='padding'>Custom Adjustments</h5>
+				<p class='padding margin-bottom'>
+					Below the "Enter card text" area, there's an "Edit Bounds" button. Clicking this will reveal the "Textbox Editor", where you can adjust the size and placement of your currently selected textbox.
+				</p>
+			</div>
+		</div>
+	</div>
+<?php include('../globalHTML/footer.php'); ?>