diff --git a/css/style-9.css b/css/style-9.css index ffa1c0e7..3f37c7d0 100644 --- a/css/style-9.css +++ b/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 { diff --git a/img/frames/planeswalker/sdcc15/abilityLineEven.svg b/img/frames/planeswalker/sdcc15/abilityLineEven.svg new file mode 100644 index 00000000..24a0d537 --- /dev/null +++ b/img/frames/planeswalker/sdcc15/abilityLineEven.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/frames/planeswalker/sdcc15/abilityLineOdd.svg b/img/frames/planeswalker/sdcc15/abilityLineOdd.svg new file mode 100644 index 00000000..24a0d537 --- /dev/null +++ b/img/frames/planeswalker/sdcc15/abilityLineOdd.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/frames/planeswalker/sdcc15/frame.svg b/img/frames/planeswalker/sdcc15/frame.svg new file mode 100644 index 00000000..2e3625c8 --- /dev/null +++ b/img/frames/planeswalker/sdcc15/frame.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/frames/planeswalker/sdcc15/frameThumb.png b/img/frames/planeswalker/sdcc15/frameThumb.png new file mode 100644 index 00000000..33a0478a Binary files /dev/null and b/img/frames/planeswalker/sdcc15/frameThumb.png differ diff --git a/img/frames/planeswalker/sdcc15/planeswalkerMinus.svg b/img/frames/planeswalker/sdcc15/planeswalkerMinus.svg new file mode 100644 index 00000000..18d37b2b --- /dev/null +++ b/img/frames/planeswalker/sdcc15/planeswalkerMinus.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/frames/planeswalker/sdcc15/planeswalkerNeutral.svg b/img/frames/planeswalker/sdcc15/planeswalkerNeutral.svg new file mode 100644 index 00000000..1dbed12a --- /dev/null +++ b/img/frames/planeswalker/sdcc15/planeswalkerNeutral.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/frames/planeswalker/sdcc15/planeswalkerPlus.svg b/img/frames/planeswalker/sdcc15/planeswalkerPlus.svg new file mode 100644 index 00000000..c445cb73 --- /dev/null +++ b/img/frames/planeswalker/sdcc15/planeswalkerPlus.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/frames/planeswalker/sdcc15/transform.svg b/img/frames/planeswalker/sdcc15/transform.svg new file mode 100644 index 00000000..99fe01da --- /dev/null +++ b/img/frames/planeswalker/sdcc15/transform.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/frames/planeswalker/sdcc15/transformThumb.png b/img/frames/planeswalker/sdcc15/transformThumb.png new file mode 100644 index 00000000..53a59001 Binary files /dev/null and b/img/frames/planeswalker/sdcc15/transformThumb.png differ diff --git a/img/tutorial/frame-tab.jpg b/img/tutorial/frame-tab.jpg new file mode 100644 index 00000000..cb35d17e Binary files /dev/null and b/img/tutorial/frame-tab.jpg differ diff --git a/img/tutorial/text-tab.jpg b/img/tutorial/text-tab.jpg new file mode 100644 index 00000000..cabc78f6 Binary files /dev/null and b/img/tutorial/text-tab.jpg differ diff --git a/js/frames/groupPlaneswalker.js b/js/frames/groupPlaneswalker.js index d1072e4b..9472a4ba 100644 --- a/js/frames/groupPlaneswalker.js +++ b/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.') \ No newline at end of file diff --git a/js/frames/packPlaneswalkerSDCC15.js b/js/frames/packPlaneswalkerSDCC15.js new file mode 100644 index 00000000..53b9d07b --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/js/frames/versionPlaneswalker.js b/js/frames/versionPlaneswalker.js index ec78be91..71863e2e 100644 --- a/js/frames/versionPlaneswalker.js +++ b/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 += '

Planeswalker

'; @@ -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,32 +98,34 @@ function planeswalkerEdited() { fixPlaneswalkerInputs(); var transitionHeight = scaleHeight(0.0048); planeswalkerContext.clearRect(0, 0, planeswalkerCanvas.width, planeswalkerCanvas.height); - for (var i = 0; i < card.planeswalker.count; i ++) { - var x = scaleX(card.planeswalker.x); - var y = scaleY(card.text['ability' + i].y); - var width = scaleWidth(card.planeswalker.width); - var height = scaleHeight(card.text['ability' + i].height); - if (i == 0) { - y -= scaleHeight(0.1); - height += scaleHeight(0.1); - } else if (i == card.planeswalker.count - 1) { - height += scaleHeight(0.5); - } - if (i % 2 == 0) { - planeswalkerContext.fillStyle = lightColor; - planeswalkerContext.globalAlpha = 0.608; - planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight); - planeswalkerContext.globalAlpha = 1; - if (lightToDark.complete) { - planeswalkerContext.drawImage(lightToDark, x, y + height - transitionHeight, width, 2 * transitionHeight); + 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); + var width = scaleWidth(card.planeswalker.width); + var height = scaleHeight(card.text['ability' + i].height); + if (i == 0) { + y -= scaleHeight(0.1); + height += scaleHeight(0.1); + } else if (i == card.planeswalker.count - 1) { + height += scaleHeight(0.5); } - } else { - planeswalkerContext.fillStyle = darkColor; - planeswalkerContext.globalAlpha = 0.706; - planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight); - planeswalkerContext.globalAlpha = 1; - if (darkToLight.complete) { - planeswalkerContext.drawImage(darkToLight, x, y + height - transitionHeight, width, 2 * transitionHeight); + if (i % 2 == 0) { + planeswalkerContext.fillStyle = lightColor; + planeswalkerContext.globalAlpha = 0.608; + planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight); + planeswalkerContext.globalAlpha = 1; + if (lightToDark.complete) { + planeswalkerContext.drawImage(lightToDark, x, y + height - transitionHeight, width, 2 * transitionHeight); + } + } else { + planeswalkerContext.fillStyle = darkColor; + planeswalkerContext.globalAlpha = 0.706; + planeswalkerContext.fillRect(x, y + transitionHeight, width, height - 2 * transitionHeight); + planeswalkerContext.globalAlpha = 1; + if (darkToLight.complete) { + planeswalkerContext.drawImage(darkToLight, x, y + height - transitionHeight, width, 2 * transitionHeight); + } } } } @@ -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; diff --git a/tutorial/index.php b/tutorial/index.php new file mode 100644 index 00000000..13dbd78b --- /dev/null +++ b/tutorial/index.php @@ -0,0 +1,57 @@ + +
+

Written Guides

+
+
+
+ +
+

Frame Tab

+
Frame Groups & Frame Packs
+

+ 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. +

+
Loading Frame Versions
+

+ 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. +

+
Adding images
+

+ 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). +

+
Removing/Reordering Images
+

+ 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. +

+
+
+
+
+
+ +
+

Text Tab

+
Selecting Textboxes
+

+ 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. +

+
Text Codes
+

+ 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). +

+
Adding Textboxes
+

+ If you'd like additional textboxes, you can add them by clicking the buttons at the bottom of the text tab. +

+
Custom Adjustments
+

+ 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. +

+
+
+
+ \ No newline at end of file