fix

data/images/imageCSV.csv

@@ -7,10 +7,59 @@ Green,m15GFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules
 Multicolored,m15MFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Artifact,m15AFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Colorless,m15CFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
+Vehicle,m15VFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 White Land,m15WLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Blue Land,m15ULFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Black Land,m15BLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Red Land,m15RLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Green Land,m15GLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
 Multicolored Land,m15MLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
-Colorless Land,m15CLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
+Colorless Land,m15CLFull.png,Full-0-0-750-1050;Title-0-0-750-1050;Type-0-0-750-1050;Rules Text-0-0-750-1050;Pinline-0-0-750-1050;Frame-0-0-750-1050
+White,m15WPT.png,Full-570-934-137-77
+Blue,m15UPT.png,Full-570-934-137-77
+Black,m15BPT.png,Full-570-934-137-77
+Red,m15RPT.png,Full-570-934-137-77
+Green,m15GPT.png,Full-570-934-137-77
+Multicolored,m15MPT.png,Full-570-934-137-77
+Artifact,m15APT.png,Full-570-934-137-77
+Colorless,m15CPT.png,Full-570-934-137-77
+Vehicle,m15VPT.png,Full-570-934-137-77
+White,m15WLegendary.png,Full-20-20-714-186
+Blue,m15ULegendary.png,Full-20-20-714-186
+Black,m15BLegendary.png,Full-20-20-714-186
+Red,m15RLegendary.png,Full-20-20-714-186
+Green,m15GLegendary.png,Full-20-20-714-186
+Multicolored,m15MLegendary.png,Full-20-20-714-186
+Artifact,m15ALegendary.png,Full-20-20-714-186
+Colorless,m15CLegendary.png,Full-20-20-714-186
+White,m15WRareStamp.png,Full-329-949-90-50
+Blue,m15URareStamp.png,Full-329-949-90-50
+Black,m15BRareStamp.png,Full-329-949-90-50
+Red,m15RRareStamp.png,Full-329-949-90-50
+Green,m15GRareStamp.png,Full-329-949-90-50
+Multicolored,m15MRareStamp.png,Full-329-949-90-50
+Artifact,m15ARareStamp.png,Full-329-949-90-50
+Colorless,m15CRareStamp.png,Full-329-949-90-50
+White,m15WMiracle.png,Full-30-30-690-511
+Blue,m15UMiracle.png,Full-30-30-690-511
+Black,m15BMiracle.png,Full-30-30-690-511
+Red,m15RMiracle.png,Full-30-30-690-511
+Green,m15GMiracle.png,Full-30-30-690-511
+Multicolored,m15MMiracle.png,Full-30-30-690-511
+Artifact,m15AMiracle.png,Full-30-30-690-511
+Colorless,m15CMiracle.png,Full-30-30-690-511
+White,m15WNyx.png,Full-30-30-690-586
+Blue,m15UNyx.png,Full-30-30-690-586
+Black,m15BNyx.png,Full-30-30-690-586
+Red,m15RNyx.png,Full-30-30-690-586
+Green,m15GNyx.png,Full-30-30-690-586
+Multicolored,m15MNyx.png,Full-30-30-690-586
+Artifact,m15ANyx.png,Full-30-30-690-586
+Colorless,m15CNyx.png,Full-30-30-690-586
+White Land,m15WLNyx.png,Full-30-30-690-586
+Blue Land,m15ULNyx.png,Full-30-30-690-586
+Black Land,m15BLNyx.png,Full-30-30-690-586
+Red Land,m15RLNyx.png,Full-30-30-690-586
+Green Land,m15GLNyx.png,Full-30-30-690-586
+Multicolored Land,m15MLNyx.png,Full-30-30-690-586
+Colorless Land,m15CLNyx.png,Full-30-30-690-586

data/scripts/main.js

@@ -16,7 +16,7 @@ function initiate() {
 	window.cardWidth = 750;
 	window.cardHeight = 1050;
 	window.frameList = new Array();
-	window.maskNameList = ["Right Half", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame"];
+	window.maskNameList = ["Right Half", "Full", "Title", "Type", "Rules Text", "Pinline", "Frame", "Border"];
 	window.maskList = [];
 	window.selectedFrame = -1;
 	window.selectedMask = "";
@@ -88,12 +88,8 @@ class frameImage {
 			this.heightList[i] = scale(parseInt(splitIndividualMasks[4]));
 		}
 	}
-	cardMasterElement(targetMask, right) {
+	cardMasterElement(targetMask) {
-		var extraMask = ""
+		return "<div id='frameIndex" + frameList.indexOf(this) + "' class='cardMasterElement'>" + this.displayName + " (" + targetMask + ")<img class='cardMasterElementMaskImage' src=" + this.image.src + "><img src=" + maskList[maskNameList.indexOf(targetMask.replace(" - Right", ""))].src + "><span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>";
-		if (right) {
-			extraMask = " - Right"
-		}
-		return "<div id='frameIndex" + frameList.indexOf(this) + "' class='cardMasterElement'>" + this.displayName + " (" + targetMask + extraMask + ")<span class='closeCardMasterElement' onclick='deleteCardMasterElement(event)'>x</span></div>";
 	}
 	framePickerElement(targetElement) {
 		return "<div id='frameIndex" + frameList.indexOf(this) + "' class='frameOption' onclick='frameOptionClicked(event)'><img src=" + this.image.src + "></div>";
@@ -138,10 +134,10 @@ function maskOptionClicked(event) {
 	clickedElement.classList.add("maskOptionSelected");
 	selectedMask = clickedElement.id.replace("maskName", "");
 }
-function addFrameToCardMaster(right = false) {
+function addFrameToCardMaster(right = "") {
 	//Takes the stored selectedFrame and selectedMask to add the frame w/ mask to the card master!
 	if (selectedFrame > -1 && selectedMask != "") {
-		cardMaster.innerHTML = frameList[selectedFrame].cardMasterElement(selectedMask, right) + cardMaster.innerHTML;
+		cardMaster.innerHTML = frameList[selectedFrame].cardMasterElement(selectedMask + right) + cardMaster.innerHTML;
 		cardMasterUpdated();
 	}
 }

data/scripts/sortable.js

@@ -2155,6 +2155,9 @@ Sortable.prototype =
 
         if (moved && !awaitingDragStarted) {
           toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false);
+          //code added by me (Kyle) starts here!
+          cardMasterUpdated()
+          //code added by me (Kyle) ends here!
         }
 
         toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event

data/site/newStyles.css

@@ -194,7 +194,7 @@ footer a:hover {
 
 
 /*Controls the area taken by the canvas*/
-@media screen and (min-width: 888pt) {
+@media screen and (min-width: 905pt) {
 	/*Makes room for the canvas and controls to be side by side*/
 	.mainGrid {
 		padding: 1.5em;
@@ -266,9 +266,17 @@ footer a:hover {
 	background-color: var(--clear-light);
 	border: 1px solid var(--light-color);
 	border-radius: 0.25em;
-	padding: 0.25em;
+	padding: 0.5em;
 	margin-top: 0.25em;
 }
+.cardMasterElement img {
+	max-height: 2em;
+	position: absolute;
+	transform: translate(1em, -0.35em);
+}
+.cardmasterElement img.cardMasterElementMaskImage {
+	transform: translate(3em, -0.35em);
+}
 .cardMasterElementMoving {
 	background-color: var(--clear-dark);
 }
@@ -283,10 +291,16 @@ footer a:hover {
 
 
 
-
+#framePicker, #maskPicker {
+	max-height: 260pt;
+	overflow-y: auto;
+	overflow-x: hidden;
+	border: 1px solid var(--light-color);
+}
 .frameOption {
 	height: 4em;
 	text-align: center;
+	width: 100%;
 }
 .frameOption img {
 	max-width: 4em;
@@ -303,9 +317,9 @@ footer a:hover {
 	background-color: var(--clear-light);
 	border: 1px solid var(--light-color);
 	border-radius: 0.25em;
-	width: 100%;
 }
 .maskOption {
 	margin-left: 0.5em;
 	padding: 0.125em;
+	width: calc(100% - 1.4em);
 }

test.html

@@ -28,8 +28,8 @@
                 		<div id="framePicker" class="frameGrid"></div>
                 		<div id="maskPicker"></div>
                 	</div>
-                	<button onclick="addFrameToCardMaster()">Add</button><button onclick="addFrameToCardMaster(true)">Add To Right Half</button>
+                	<button onclick="addFrameToCardMaster()">Add</button><button onclick="addFrameToCardMaster(' - Right')">Add To Right Half</button>
-                	<div id="cardMaster" onchange="cardMasterUpdated()"></div>
+                	<div id="cardMaster"></div>
                 </div>
                 <div class="tabContent mainEditor" id="text">
                 	oh cool some text!
@@ -59,9 +59,9 @@
 		</div>
 		<div class="layer">
             <div class="title">Want More Customization?</div>
-			<div class="paragraph indent">
+			<!-- <div class="paragraph indent">
                 If you'd like to try out some more frames, scroll to the bottom of this page and check the box next to "Advanced Borders" - CardConjurer.com will remember this setting, so you only need to do this once per device.
-			</div>
+			</div> -->
             <div class="paragraph indent">
                 This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had. If you'd like to go back to the old version, <a href="old/index.html">click here</a>.
             </div>