adding new frames, withholding the ability to use them temporarily

gallery/index.php

@@ -3,13 +3,16 @@ $title = 'Card Conjurer - Gallery';
 $desc = 'See examples of available frames';
 include('../globalHTML/header-1.php');
 ?>
-	<h2 class='readable-background header-extension title center'>Gallery</h2>
-	<div class='layer center'>
-		<h3>Showcase Frames</h3>
-		<h4>What they're called, and where to find them</h4>
-	</div>
-	<div class='layer center galleryGrid' id="galleryGrid"></div>
-	<div class='layer center'></div>
+	<h2 class='readable-background header-extension title center'>Available Frames</h2>
+	<h4 class='readable-background header-extension center'>What they're called, and where to find them</h4>
+	<h3 class='layer center'>Showcase Frames</h3>
+	<div class='layer center galleryGrid' id="showcaseGrid"></div>
+	<h3 class='layer center'>Regular Frames</h3>
+	<div class='layer center galleryGrid' id="regularGrid"></div>
+	<h3 class='layer center'>Token Frames</h3>
+	<div class='layer center galleryGrid' id="tokenGrid"></div>
+	<h3 class='layer center'>Other Card Types</h3>
+	<div class='layer center galleryGrid' id="otherGrid"></div>
 	<style>
 		.galleryGrid {
 			display: grid;
@@ -29,6 +32,7 @@ include('../globalHTML/header-1.php');
 			padding: 0.5rem;
 		}
 		.galleryGridItem > img {
+			width: 100%;
 			aspect-ratio: 5 / 7;
 		}
 		.galleryGridItem > h4 {
@@ -40,7 +44,43 @@ include('../globalHTML/header-1.php');
 	</style>
 	<script>
 		//template data
-		const templates = [
+		//REGULAR FRAMES
+		const regularTemplates = [
+			{name: "Regular", location: "Regular > Regular Frames", image: "regular.png"},
+			{name: "Lands", location: "Regular > Lands", image: "land.png"},
+			{name: "Class", location: "Regular > Class (D&D)", image: "class.png"},
+			{name: "Snow", location: "Regular > Snow (Kaldheim)", image: "snow.png"},
+			{name: "Mutate", location: "Regular > Mutate (Ikoria)", image: "mutate.png"},
+			{name: "Nyx", location: "Regular > Nyx (Theros)", image: "nyx.png"},
+			{name: "Adventures", location: "Regular > Adventures (Eldraine)", image: "adventure.png"},
+			{name: "Devoid", location: "Regular > Devoid (Zendikar)", image: "devoid.png"},
+			{name: "Aftermath", location: "Regular > Aftermath (Amonkhet)", image: "aftermath.png"},
+			{name: "Flip", location: "Regular > Flip (Kamigawa)", image: "flip.png"},
+			{name: "Levelers", location: "Regular > Levelers (Zendikar)", image: "levelers.png"},
+			{name: "Split", location: "Regular > Split Cards", image: "split.png"},
+			{name: "Fuse", location: "Regular > Fuse Cards", image: "fuse.png"},
+			{name: "Conspiracies", location: "Regular > Conspiracies (Draft Matters)", image: "conspiracy.png"},
+			{name: "Colorshifted", location: "Regular > Colorshifted (Planar Chaos)", image: "colorshifted.png"},
+		];
+		//TOKEN FRAMES
+		const tokenTemplates = [
+			{name: "Regular Token", location: "Token > Regular", image: "tokenRegular.png"},
+			{name: "Textless Token", location: "Token > Textless", image: "tokenTextless.png"},
+			{name: "Tall Token", location: "Token > Tall", image: "tokenTall.png"},
+			{name: "Day/Night Marker", location: "Token > Day/Night Marker", image: "tokenDayNight.png"},
+			{name: "Jumpstart Front Cards", location: "Token > Jumpstart Front Cards", image: "tokenJumpstart.png"},
+			{name: "Planeswalker Emblems", location: "Token > Planeswalker Emblems", image: "emblem.png"},
+			{name: "Regular Token (Old)", location: "Token > Regular Token (Bordered M15)", image: "tokenOldRegular.png"},
+			{name: "Textless Token (Old)", location: "Token > Textless Token (Bordered M15)", image: "tokenOldTextless.png"},
+			{name: "Original Token", location: "Token > Original (Old Bordered)", image: "tokenOriginal.png"},
+			{name: "Unglued Token", location: "Token > Unglued", image: "tokenUnglued.png"},
+		];
+		//OTHER FRAMES
+		const otherTemplates = [
+			// {name: "TEMPLATENAME", location: "Token > DISPLAYNAME", image: "IMAGENAME.png"},
+		];
+		//SHOWCASE FRAMES
+		const showcaseTemplates = [
 			{name: "Gilded (SNC)", location: "Showcase Frames > Gilded (SNC)", image: "sncGilded.png"},
 			{name: "Ninja (NEO)", location: "Showcase Frames > Ninja (NEO)", image: "neoNinja.png"},
 			{name: "Samurai (NEO)", location: "Showcase Frames > Samurai (NEO)", image: "neoSamurai.png"},
@@ -72,6 +112,7 @@ include('../globalHTML/header-1.php');
 			{name: "FNM Inverted Promo", location: "Showcase Frames > FNM Promo (Inverted Promos)", image: "inverted.png"},
 			{name: "Universes Beyond", location: "Showcase Frames > Universes Beyond", image: "universesBeyond.png"},
 			{name: "Full Text", location: "Showcase Frames > Full Text", image: "fullText.png"},
+			{name: "Etched", location: "Showcase Frames > Etched (Commander Precons)", image: "etched.png"},
 			{name: "Expeditions (ZNR)", location: "Showcase Frames > ZNR Expeditions (2020)", image: "znrExpedition.png"},
 			{name: "Jace", location: "Showcase Frames > Signature Spellbook (Jace/Gideon)", image: "jace.png"},
 			{name: "Gideon", location: "Showcase Frames > Signature Spellbook (Jace/Gideon)", image: "gideon.png"},
@@ -84,6 +125,7 @@ include('../globalHTML/header-1.php');
 		];
 		//functions
 		getURL = (imageName) => {
+			return "img/" + imageName;
 			return "https://raw.githubusercontent.com/ImKyle4815/cardconjurer/master/gallery/img/" + imageName;
 		}
 		templateSample = (name, location, image) => {
@@ -91,8 +133,13 @@ include('../globalHTML/header-1.php');
 			shell.classList.add("galleryGridItem");
 			shell.classList.add("readable-background");
 			const img = document.createElement("img");
-			img.src = getURL(image);
+			img.src = getURL("loading.jpg");
 			shell.appendChild(img);
+			const actualImage = new Image();
+			actualImage.onload = () => {
+				img.src = getURL(image);
+			}
+			actualImage.src = getURL(image);
 			const title = document.createElement("h4");
 			title.innerHTML = name;
 			shell.appendChild(title);
@@ -101,10 +148,16 @@ include('../globalHTML/header-1.php');
 			shell.appendChild(loc);
 			return shell;
 		}
-		//main
-		const container = document.getElementById("galleryGrid");
-		for (t of templates) {
-			container.appendChild(templateSample(t.name, t.location, t.image));
+		populateGroup = (elementID, templates) => {
+			const elem = document.getElementById(elementID);
+			for (t of templates) {
+				elem.appendChild(templateSample(t.name, t.location, t.image));
+			}
 		}
+		//Populate everything
+		populateGroup("regularGrid", regularTemplates);
+		populateGroup("showcaseGrid", showcaseTemplates);
+		populateGroup("tokenGrid", tokenTemplates);
+		populateGroup("otherGrid", otherTemplates);
 	</script>
 <?php include('../globalHTML/footer.php'); ?>

js/frames/packEtched.js

@@ -0,0 +1,48 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/m15/commanderLegends/m15CommanderLegendsMaskFrame.png', name:'Frame'}, {src:'/img/frames/m15/commanderLegends/m15CommanderLegendsMaskTitle.png', name:'Title'}, {src:'/img/frames/m15/commanderLegends/m15CommanderLegendsMaskType.png', name:'Type'}, {src:'/img/frames/m15/commanderLegends/m15CommanderLegendsMaskRules.png', name:'Rules'}, {src:'/img/frames/m15/regular/m15MaskBorder.png', name:'Border'}];
+var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
+//defines available frames
+availableFrames = [
+	{name:'White Frame', src:'/img/frames/etched/legends/w.png', masks:masks},
+	{name:'Blue Frame', src:'/img/frames/etched/legends/u.png', masks:masks},
+	{name:'Black Frame', src:'/img/frames/etched/legends/b.png', masks:masks},
+	{name:'Red Frame', src:'/img/frames/etched/legends/r.png', masks:masks},
+	{name:'Green Frame', src:'/img/frames/etched/legends/g.png', masks:masks},
+	{name:'Multicolored Frame', src:'/img/frames/etched/legends/m.png', masks:masks},
+	{name:'Artifact Frame', src:'/img/frames/etched/legends/a.png', masks:masks},
+	{name:'White Power/Toughness', src:'/img/frames/m15/commanderLegends/ptW.png', bounds:bounds},
+	{name:'Blue Power/Toughness', src:'/img/frames/m15/commanderLegends/ptU.png', bounds:bounds},
+	{name:'Black Power/Toughness', src:'/img/frames/m15/commanderLegends/ptB.png', bounds:bounds},
+	{name:'Red Power/Toughness', src:'/img/frames/m15/commanderLegends/ptR.png', bounds:bounds},
+	{name:'Green Power/Toughness', src:'/img/frames/m15/commanderLegends/ptG.png', bounds:bounds},
+	{name:'Multicolored Power/Toughness', src:'/img/frames/m15/commanderLegends/ptM.png', bounds:bounds},
+	{name:'Artifact Power/Toughness', src:'/img/frames/m15/commanderLegends/ptA.png', bounds:bounds},
+];
+//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 = 'etched';
+	//art bounds
+	card.artBounds = {x:0.0767, y:0.1129, width:0.8476, height:0.4429};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, 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.0613, 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.0854, y:0.0522, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0381, color:'white'},
+		type: {name:'Type', text:'', x:0.0854, y:0.5664, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324, color:'white'},
+		rules: {name:'Rules Text', text:'', x:0.0927, y:0.6303, width:0.8147, height:0.2875, size:0.0362, color:'white'},
+		pt: {name:'Power/Toughness', text:'', x:0.7928, y:0.902, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
+	});
+}
+//loads available frames
+loadFramePack();

js/frames/packSNCGildedColored.js

@@ -0,0 +1,54 @@
+//Create objects for common properties across available frames
+var masks = [{src:'/img/frames/snc/gilded/frame.svg', name:'Frame'}];
+var bounds = {x:0.05, y:0.0177, width:0.9, height:0.0958};
+//defines available frames
+availableFrames = [
+	{name:'White Frame', src:'/img/frames/snc/gilded/colored/w.png', masks:masks},
+	{name:'Blue Frame', src:'/img/frames/snc/gilded/colored/u.png', masks:masks},
+	{name:'Black Frame', src:'/img/frames/snc/gilded/colored/b.png', masks:masks},
+	{name:'Red Frame', src:'/img/frames/snc/gilded/colored/r.png', masks:masks},
+	{name:'Green Frame', src:'/img/frames/snc/gilded/colored/g.png', masks:masks},
+	{name:'Multicolored Frame', src:'/img/frames/snc/gilded/colored/m.png', masks:masks},
+	{name:'Artifact Frame', src:'/img/frames/snc/gilded/colored/a.png', masks:masks},
+	{name:'Power/Toughness', src:'/img/frames/snc/gilded/colored/pt.png', bounds:{x:0.7707, y:0.8843, width:0.1694, height:0.0639}},
+	{name:'White Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/w.png', bounds:bounds},
+	{name:'Blue Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/u.png', bounds:bounds},
+	{name:'Black Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/b.png', bounds:bounds},
+	{name:'Red Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/r.png', bounds:bounds},
+	{name:'Green Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/g.png', bounds:bounds},
+	{name:'Multicolored Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/m.png', bounds:bounds},
+	{name:'Artifact Legend Crown', src:'/img/frames/snc/gilded/colored/crowns/a.png', bounds:bounds},
+
+];
+//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 = 'sncGildedColored';
+	//art bounds
+	card.artBounds = {x:0.078, y:0.1124, width:0.844, height:0.4448};
+	autoFitArt();
+	//set symbol bounds
+	card.setSymbolBounds = {x:0.9213, y:0.5910, width:0.12, height:0.0410, 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.0629, width:0.928, 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.0854, y:0.0522, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0381, color:'white', shadowX:0.002, shadowY:0.0015},
+		type: {name:'Type', text:'', x:0.0854, y:0.5664, width:0.8292, height:0.0543, oneLine:true, font:'belerenb', size:0.0324, color:'white', shadowX:0.002, shadowY:0.0015},
+		rules: {name:'Rules Text', text:'', x:0.086, y:0.6303, width:0.828, height:0.2875, size:0.0362, color:'white', shadowX:0.002, shadowY:0.0015},
+		pt: {name:'Power/Toughness', text:'', x:0.788, y:0.9, width:0.1367, height:0.0372, size:0.0372, font:'belerenbsc', oneLine:true, align:'center', color:'white'}
+	});
+}
+//loads available frames
+loadFramePack();
+//Only for the main version as the webpage loads:
+if (!card.text) {
+	document.querySelector('#loadFrameVersion').click();
+}