Add Pokemon frame

Makefile

@@ -1,2 +1,2 @@
 start:
-	docker build -f Dockerfile --target "prod" . -t "cardconjurer-client" && docker run -dit -h 127.0.0.1 -p 4242:4242 "cardconjurer-client"
+	docker build -f Dockerfile --target "prod" . -t "cardconjurer-client" && docker run -dit -h 127.0.0.1 -p 80:80 "cardconjurer-client"

creator/index.html

@@ -206,7 +206,10 @@
 						<div class='readable-background padding margin-bottom'>
 							<h5 class='margin-bottom padding input-description'>Enter card text</h5>
 							<textarea id='text-editor' class='input margin-bottom' oninput='textEdited();'></textarea>
-							<button class='input' onclick="toggleTextTag('i');">Italic</button>
+							<div class='padding input-grid'>
+								<button class='input' onclick="toggleTextTag('i');">Italic</button>
+								<button class='input' onclick="toggleTextTag('bold');">Bold</button>
+							</div>
 							<h5 class='margin-bottom padding input-description'>Edit the placement and size of the selected textbox</h5>
 							<button class='input' onclick='textboxEditor();'>Edit Bounds</button>
 							<h5 class='margin-bottom padding input-description'>Adjust font size</h5>

css/style-9.css

@@ -95,6 +95,22 @@
 	font-family: amanda;
 	src: url('../fonts/Amanda Std Regular.otf') format('opentype');
 }
+@font-face {
+	font-family: gillsans;
+	src: url('../fonts/Gill Sans Medium.otf') format('opentype');
+}
+@font-face {
+	font-family: gillsansbold;
+	src: url('../fonts/Gill Sans Condensed Bold.otf') format('opentype');
+}
+@font-face {
+	font-family: gillsansitalic;
+	src: url('../fonts/Gill Sans Medium Italic') format('opentype');
+}
+@font-face {
+	font-family: gillsansbolditalic;
+	src: url('../fonts/Gill Sans Bold Italic.otf') format('opentype');
+}
 /*Variables*/
 :root {
 	--site-background: url('../img/lowpolyBackground.svg');

js/creator-23.js

@@ -2324,7 +2324,9 @@ function writeText(textObject, targetContext) {
 	if (rawText.includes('//')) {
 		rawText = rawText.replace(/\/\//g, '{lns}');
 	}
-	if (autoFramePack == 'Seventh' || autoFramePack == '8th' || autoFramePack == 'Praetors' || card.version == 'invocation') {
+	if (card.version == 'pokemon') {
+		rawText = rawText.replace(/{flavor}/g, '{oldflavor}{fontsize-20}{fontgillsansbolditalic}');
+	} else if (autoFramePack == 'Seventh' || autoFramePack == '8th' || card.version == 'invocation') {
 		rawText = rawText.replace(/{flavor}/g, '{oldflavor}');
 	}
 	rawText = rawText.replace(/ - /g, ' — ');
@@ -2448,7 +2450,9 @@ function writeText(textObject, targetContext) {
 					}
 					lineContext.drawImage(getManaSymbol(barImageName).image, canvasMargin + (textWidth - barWidth) / 2, canvasMargin + barDistance * textSize, barWidth, barHeight);
 				} else if (possibleCode == 'i') {
-					if (textFont == 'mplantin') {
+					if (textFont == 'gilllsans') {
+						textFontExtension = 'italic';
+					} else if (textFont == 'mplantin') {
 						textFontExtension = 'i';
 						textFontStyle = textFontStyle.replace('italic ', '');
 					} else {
@@ -2461,10 +2465,18 @@ function writeText(textObject, targetContext) {
 					textFontStyle = textFontStyle.replace('italic ', '');
 					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
 				} else if (possibleCode == 'bold') {
-					if (!textFontStyle.includes('bold')) {textFontStyle += 'bold ';}
+					if (textFont == 'gillsans') {
+						textFontExtension = 'bold';
+					} else {
+						if (!textFontStyle.includes('bold')) {textFontStyle += 'bold ';}
+					}
 					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
 				} else if (possibleCode == '/bold') {
-					textFontStyle = textFontStyle.replace('bold ', '');
+					if (textFont == 'gillsans') {
+						textFontExtension = '';
+					} else {
+						textFontStyle = textFontStyle.replace('bold ', '');
+					}
 					lineContext.font = textFontStyle + textSize + 'px ' + textFont + textFontExtension;
 				} else if (possibleCode == 'left') {
 					textAlign = 'left';
@@ -2558,7 +2570,7 @@ function writeText(textObject, targetContext) {
 					if (word.includes('set')) {
 						var bottomTextSubstring = card.bottomInfo.midLeft.text.substring(0, card.bottomInfo.midLeft.text.indexOf('  {savex}')).replace('{elemidinfo-set}', document.querySelector('#info-set').value || '').replace('{elemidinfo-language}', document.querySelector('#info-language').value || '');
 						justifyWidth = lineContext.measureText(bottomTextSubstring).width;
-					} else if (word.includes('number') && wordToWrite.includes('/')) {
+					} else if (word.includes('number') && wordToWrite.includes('/') && card.version != 'pokemon') {
 						fillJustify = true;
 						wordToWrite = Array.from(wordToWrite).join(' ');
 					}
@@ -3155,8 +3167,12 @@ function fetchSetSymbol() {
 		if (setSymbolAliases.has(setCode.toLowerCase())) setCode = setSymbolAliases.get(setCode.toLowerCase());
 		uploadSetSymbol('http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + setCode + '&size=large&rarity=' + setRarity, 'resetSetSymbol');
 	} else {
+		var extension = 'svg';
+		if (['moc', 'ltr'].includes(setCode.toLowerCase())) {
+			extension = 'png';
+		}
 		if (setSymbolAliases.has(setCode.toLowerCase())) setCode = setSymbolAliases.get(setCode.toLowerCase());
-		uploadSetSymbol(fixUri(`/img/setSymbols/official/${setCode.toLowerCase()}-${setRarity}.svg`), 'resetSetSymbol');
+		uploadSetSymbol(fixUri(`/img/setSymbols/official/${setCode.toLowerCase()}-${setRarity}.` + extension), 'resetSetSymbol');
 	}
 }
 function lockSetSymbolCode() {
@@ -3540,7 +3556,35 @@ function changeCardIndex() {
 		});
 		rulesText = curlyQuotes(rulesText).replace(/{Q}/g, '{untap}').replace(/{\u221E}/g, "{inf}").replace(/• /g, '• {indent}');
 		rulesText = rulesText.replace('(If this card is your chosen companion, you may put it into your hand from outside the game for {3} any time you could cast a sorcery.)', '(If this card is your chosen companion, you may put it into your hand from outside the game for {3} as a sorcery.)')
-		card.text.rules.text = langFontCode + rulesText;
+		
+		if (card.version == 'pokemon') {
+			if (cardToImport.type_line.toLowerCase().includes('creature')) {
+				card.text.rules.text = langFontCode + rulesText;
+				card.text.rulesnoncreature.text = '';
+
+				card.text.middleStatTitle.text = 'power';
+				card.text.rightStatTitle.text = 'toughness';
+
+			} else if (cardToImport.type_line.toLowerCase().includes('planeswalker')) {
+				card.text.rules.text = langFontCode + rulesText;
+				card.text.rulesnoncreature.text = '';
+
+				card.text.pt.text = '{' + (cardToImport.loyalty || '' + '}');
+
+				card.text.middleStatTitle.text = '';
+				card.text.rightStatTitle.text = 'loyalty';
+			} else {
+				card.text.rulesnoncreature.text = langFontCode + rulesText;
+				card.text.rules.text = '';
+
+				card.text.middleStatTitle.text = '';
+				card.text.rightStatTitle.text = '';
+			}
+			
+		} else {
+			card.text.rules.text = langFontCode + rulesText;
+		}
+		
 		if (cardToImport.flavor_text) {
 			var flavorText = cardToImport.flavor_text;
 			var flavorTextCounter = 1;
@@ -3555,23 +3599,49 @@ function changeCardIndex() {
 				flavorTextCounter ++;
 			}
 
-			if (!cardToImport.oracle_text || cardToImport.oracle_text == '') {
-				card.text.rules.text += '{i}';
+			if (card.version == 'pokemon') {
+				if (cardToImport.type_line.toLowerCase().includes('creature')) {
+					if (!cardToImport.oracle_text || cardToImport.oracle_text == '') {
+						card.text.rules.text += '{i}';
+					} else {
+						card.text.rules.text += '{flavor}';
+					}
+				} else {
+					if (!cardToImport.oracle_text || cardToImport.oracle_text == '') {
+						card.text.rulesnoncreature.text += '{i}';
+					} else {
+						card.text.rulesnoncreature.text += '{flavor}';
+					}
+				}
+				card.text.rulesnoncreature.text += curlyQuotes(flavorText.replace('\n', '{lns}'));
 			} else {
-				card.text.rules.text += '{flavor}';
+				if (!cardToImport.oracle_text || cardToImport.oracle_text == '') {
+					card.text.rules.text += '{i}';
+				} else {
+					card.text.rules.text += '{flavor}';
+				}
+				card.text.rules.text += curlyQuotes(flavorText.replace('\n', '{lns}'));
 			}
-			card.text.rules.text += curlyQuotes(flavorText.replace('\n', '{lns}'));
+
+			
 		}
 	}
+
 	if (card.text.pt) {
 		if (card.version == 'invocation') {
 			card.text.pt.text = cardToImport.power + '\n' + cardToImport.toughness || '';
+		} else if (card.version == 'pokemon') {
+			card.text.middleStat.text = '{' + (cardToImport.power || '') + '}';
+			card.text.pt.text = '{' + (cardToImport.toughness || '') + '}';
+
+			if (card.text.middleStat && card.text.middleStat.text == '{}') {card.text.middleStat.text = '';}
 		} else {
 			card.text.pt.text = cardToImport.power + '/' + cardToImport.toughness || '';
 		}
 	}
 	if (card.text.pt && card.text.pt.text == undefined + '/' + undefined) {card.text.pt.text = '';}
 	if (card.text.pt && card.text.pt.text == undefined + '\n' + undefined) {card.text.pt.text = '';}
+	if (card.text.pt && card.text.pt.text == '{}') {card.text.pt.text = '';}
 	if (card.version.includes('planeswalker')) {
 		card.text.loyalty.text = cardToImport.loyalty || '';
 		var planeswalkerAbilities = cardToImport.oracle_text.split('\n');

js/frameSearch.js

@@ -200,6 +200,7 @@ const frameNames = new Map ([
 	['Kaldheim, Fullart - @feuer_ameise', 'FeuerAmeiseKaldheim'],
 	['Celid\'s Asap', 'CustomCelidAsap'],
 	['Magrao\'s Kaldheim', 'CustomMagraoKaldheim'],
+	['Pokemon', 'Pokemon'],
 ]);
 
 frameSearch = (str) => {

js/frames/groupCustom.js

@@ -34,5 +34,6 @@ loadFramePacks([
 	{name:'Ixalan - @feuer_ameise', value:'FeuerAmeiseIxalan'},
 	{name:'Kaldheim, Fullart - @feuer_ameise', value:'FeuerAmeiseKaldheim'},
 	{name:'Celid\'s Asap', value:'CustomCelidAsap'},
-	{name:'Magrao\'s Kaldheim', value:'CustomMagraoKaldheim'}
+	{name:'Magrao\'s Kaldheim', value:'CustomMagraoKaldheim'},
+	{name:'Pokemon', value:'Pokemon'}
 ])

js/frames/manaSymbolsPokemon.js

@@ -0,0 +1,36 @@
+//checks to see if it needs to run
+if (!card.manaSymbols.includes('/js/frames/manaSymbolsPokemon.js')) {
+	card.manaSymbols.push('/js/frames/manaSymbolsPokemon.js');
+}
+if (!mana.get('pokemonw')) {
+	loadManaSymbols([
+		'pokemon/pokemonw.png',
+		'pokemon/pokemonu.png',
+		'pokemon/pokemonb.png',
+		'pokemon/pokemonr.png',
+		'pokemon/pokemong.png',
+		'pokemon/pokemonc.png',
+		'pokemon/pokemont.png',
+		'pokemon/pokemon0.png',
+		'pokemon/pokemon1.png',
+		'pokemon/pokemon2.png',
+		'pokemon/pokemon3.png',
+		'pokemon/pokemon4.png',
+		'pokemon/pokemon5.png',
+		'pokemon/pokemon6.png',
+		'pokemon/pokemon7.png',
+		'pokemon/pokemon8.png',
+		'pokemon/pokemon9.png',
+		'pokemon/pokemon10.png',
+		'pokemon/pokemon11.png',
+		'pokemon/pokemon12.png',
+		'pokemon/pokemon13.png',
+		'pokemon/pokemon14.png',
+		'pokemon/pokemon15.png',
+		'pokemon/pokemon16.png',
+		'pokemon/pokemon17.png',
+		'pokemon/pokemon18.png',
+		'pokemon/pokemon19.png',
+		'pokemon/pokemon20.png',
+	]);
+}

js/frames/packMargin-1.js

@@ -14,7 +14,8 @@ availableFrames = [
 	{name:'Black Extension (Cornered)', src:'/img/frames/margins/blackCorners.png', bounds:bounds},
 	{name:'White Border Extension', src:'/img/frames/white.png', ogBounds:ogBounds, bounds:bounds, masks:masks, noDefaultMask:true},
 	{name:'Silver Border Extension', src:'/img/frames/silver.png', ogBounds:ogBounds, bounds:bounds, masks:masks, noDefaultMask:true},
-	{name:'Gold Border Extension', src:'/img/frames/gold.png', ogBounds:ogBounds, bounds:bounds, masks:masks, noDefaultMask:true}
+	{name:'Gold Border Extension', src:'/img/frames/gold.png', ogBounds:ogBounds, bounds:bounds, masks:masks, noDefaultMask:true},
+	{name:'Pokemon Border Extension', src:'/img/frames/custom/pokemon/extension.png', ogBounds:ogBounds, bounds:bounds, masks:masks, noDefaultMask:true}
 ];
 //disables/enables the "Load Frame Version" button
 document.querySelector('#loadFrameVersion').disabled = false;

js/frames/packPokemon.js

@@ -0,0 +1,75 @@
+//Create objects for common properties across available frames
+// var masks = [{src:'/img/frames/m15/regular/m15MaskPinline.png', name:'Pinline'}, {src:'/img/frames/m15/regular/m15MaskTitle.png', name:'Title'}, {src:'/img/frames/m15/regular/m15MaskType.png', name:'Type'}, {src:'/img/frames/m15/regular/m15MaskRules.png', name:'Rules'}, {src:'/img/frames/m15/regular/m15MaskFrame.png', name:'Frame'}, {src:'/img/frames/m15/regular/m15MaskBorder.png', name:'Border'}];
+var masks = [];
+var boomerangMasks = [{src:'/img/frames/custom/pokemon/boomerangs/div.png', name:'Divider'}, {src:'/img/frames/custom/pokemon/boomerangs/left.png', name:'Left'}, {src:'/img/frames/custom/pokemon/boomerangs/right.png', name:'Right'}];
+// var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
+//defines available frames
+availableFrames = [
+	{name: 'Psychic Frame', src:'/img/frames/custom/pokemon/psychic.png'},
+	{name: 'Water Frame', src:'/img/frames/custom/pokemon/water.png'},
+	{name: 'Lightning Frame', src:'/img/frames/custom/pokemon/lightning.png'},
+	{name: 'Metal Frame', src:'/img/frames/custom/pokemon/metal.png'},
+	{name: 'Fighting Frame', src:'/img/frames/custom/pokemon/fighting.png'},
+	{name: 'Fire Frame', src:'/img/frames/custom/pokemon/fire.png'},
+	{name: 'Grass Frame', src:'/img/frames/custom/pokemon/grass.png'},
+	{name: 'Colorless Frame', src:'/img/frames/custom/pokemon/colorless.png'},
+	{name: 'Darkness Frame', src:'/img/frames/custom/pokemon/dark.png'},
+
+	{name: 'Psychic Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/psychic.png', masks:boomerangMasks},
+	{name: 'Water Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/water.png', masks:boomerangMasks},
+	{name: 'Lightning Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/lightning.png', masks:boomerangMasks},
+	{name: 'Metal Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/metal.png', masks:boomerangMasks},
+	{name: 'Fighting Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/fighting.png', masks:boomerangMasks},
+	{name: 'Fire Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/fire.png', masks:boomerangMasks},
+	{name: 'Grass Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/grass.png', masks:boomerangMasks},
+	{name: 'Colorless Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/colorless.png', masks:boomerangMasks},
+	{name: 'Darkness Boomerangs', src:'/img/frames/custom/pokemon/boomerangs/dark.png', masks:boomerangMasks}
+];
+//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 = 'pokemon';
+	loadScript('/js/frames/manaSymbolsPokemon.js');
+	notify('Use the separate text entry for noncreature cards in order for the text to be spaced differently');
+	notify('Try making keyword abilities bold using {bold}!');
+	//art bounds
+	card.artBounds = {x:172/1500, y:259/2100, width:1156/1500, height:819/2100};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:1356/1500, y:1140/2100, width:116/1500, height:61/2100, 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:'', x:758/1500, y:142/2100, width:597/1500, height:102/2100, oneLine:true, size:64/1500, align:'right', manaCost:true, manaSpacing:0, manaPrefix:'pokemon'},
+		title: {name:'Title', text:'', x:146/1500, y:153/2100, width:1195/1500, height:71/2100, oneLine:true, font:'gillsansbold', size:71/1500},
+		type: {name:'Type', text:'', x:251/1500, y:1122/2100, width:1001/1500, height:42/2100, oneLine:true, font:'gillsansbolditalic', size:28/1500, align:'center'},
+		rules: {name:'Rules Text', text:'', x:150/1500, y:1185/2100, width:1205/1500, height:629/2100, size:47/1500, font:'gillsans', manaPrefix:'pokemon'},
+		rulesnoncreature: {name:'Rules Text (noncreature)', text:'', x:150/1500, y:1185/2100, width:1205/1500, height:785/2100, size:47/1500, font:'gillsans', manaPrefix:'pokemon'},
+		// leftStatTitle: {name:'Left Stat Title', text:'', x:139/1500, y:1817/2100, width: 228/1500, height: 43/2100, size: 79/1500, font:'gillsansbold', align:'center'},
+		middleStatTitle: {name:'Middle Stat Title', text:'power', x:629/1500, y:1817/2100, width: 228/1500, height: 43/2100, size: 79/1500, font:'gillsansbold', align:'center'},
+		rightStatTitle: {name:'Right Stat Title', text:'toughness', x:1135/1500, y:1817/2100, width: 228/1500, height: 43/2100, size: 79/1500, font:'gillsansbold', align:'center'},
+		// leftStat: {name:'Left Stat', text:'', x:139/1500, y:1880/2100, width: 228/1500, height: 61/2100, size: 61/1500, font:'gillsansbold', align:'center', manaPrefix:'pokemon'},
+		middleStat: {name:'Middle Stat', text:'', x:585/1500, y:1872/2100, width: 300/1500, height: 102/2100, size: 79/1500, font:'gillsansbold', align:'center', manaPrefix:'pokemon'},
+		pt: {name:'Right Stat', text:'', x:1098/1500, y:1872/2100, width: 300/1500, height: 102/2100, size: 79/1500, font:'gillsansbold', align:'center', manaPrefix:'pokemon'},
+		// pt: {name:'Power/Toughness', text:'', x:1189/1500, y:1894/2100, width:205/1500, height:78/2100, size:61/1500, font:'gillsansbold', oneLine:true, align:'center'}
+
+	});
+
+	loadBottomInfo({
+		top: {text:'Illus. {elemidinfo-artist}', x:85/1500, y:1969/2100, width:411/1500, height:25/2100, oneLine:true, font:'gillsansbold', size:25/1500, align:'left'},
+		bottom: {text:'{elemidinfo-number} {elemidinfo-rarity}', x:1005/1500, y:1969/2100, width:411/1500, height:25/2100, oneLine:true, font:'gillsansbold', size:25/1500, align:'right'},
+	});
+}
+//loads available frames
+loadFramePack();
+//Only for the main version as the webpage loads:
+if (!card.text) {
+	document.querySelector('#loadFrameVersion').click();
+}