fix

2025-07-27 05:14:53 -05:00 · 2019-11-29 20:24:16 -08:00
parent 4e8f664300
commit 3933ca573a
3 changed files with 70 additions and 40 deletions
--- a/data/scripts/main.js
+++ b/data/scripts/main.js
@@ -3,9 +3,9 @@
 //============================================//
 /* Test things! */
 function testFunction() {
-	cardMaster.appendChild(frameList[0].cardMasterElement("Full"));
+	// cardMaster.appendChild(frameList[0].cardMasterElement("Full"));
 	cardMasterUpdated();
-	console.log("First frame manually loaded")
+	// console.log("First frame manually loaded")
 }


@@ -54,7 +54,8 @@ function initiate() {
 	setSymbol.crossOrigin = "anonymous";
 	watermark.crossOrigin = "anonymous";
 	cardArt.onload = function() {
-		cardImageUpdated();
+		// cardImageUpdated();
+		cardMasterUpdated();
 	}
 	setSymbol.onload = function() {
 		updateSetSymbol();
@@ -191,6 +192,13 @@ function deleteCardMasterElement(event) {
 	event.target.parentElement.parentElement.removeChild(event.target.parentElement);
 	cardMasterUpdated();
 }
+function addNewFrameOption(imageSource) {
+	frameList[frameList.length] = new frameImage("Custom", imageSource, "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;Border-0-0-750-1050");
+	frameList[frameList.length - 1].image.customVar = frameList.length - 1
+	frameList[frameList.length - 1].image.onload = function() {
+		document.getElementById("framePicker").appendChild(frameList[this.customVar].framePickerElement());
+	}
+}


 /* Card Master Cool Stuff! */
@@ -199,32 +207,37 @@ function cardMasterUpdated() {
 	frameFinalContext.clearRect(0, 0, cardWidth, cardHeight);
 	for (var i = cardMaster.children.length - 1; i >= 0; i--) {
 		var targetChild = cardMaster.children[i];
-		var opacityToDraw = targetChild.children[0].value / 100;
-		var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))];
-		var maskName = targetChild.innerHTML.slice(targetChild.innerHTML.indexOf("(") + 1, targetChild.innerHTML.indexOf(")"));
-		var rightHalf = false;
-		if (maskName.includes(" - Right")) {
-			maskName = maskName.replace(" - Right", "");
-			rightHalf = true;
+		if (parseInt(targetChild.id.replace("frameIndex", "")) == -1) {
+			//The card art placeholder is manually set to -1 and cannot be removed :)
+			frameFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
+		} else {
+			var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))];
+			var opacityToDraw = targetChild.children[0].value / 100;
+			var maskName = targetChild.innerHTML.slice(targetChild.innerHTML.indexOf("(") + 1, targetChild.innerHTML.indexOf(")"));
+			var rightHalf = false;
+			if (maskName.includes(" - Right")) {
+				maskName = maskName.replace(" - Right", "");
+				rightHalf = true;
+			}
+			var maskIndex = frameToDraw.maskOptionList.indexOf(maskName);
+			var maskImageIndex = maskNameList.indexOf(maskName)
+			//Clears the temporary mask canvas, draws the mask, draws the image over it, then copies it to the final frame canvas
+			frameMaskContext.globalCompositeOperation = "source-over";
+			frameMaskContext.clearRect(0, 0, cardWidth, cardHeight);
+			frameMaskContext.drawImage(maskList[maskImageIndex], 0, 0, cardWidth, cardHeight);
+			frameMaskContext.globalCompositeOperation = "source-in";
+			if (rightHalf) {
+				frameMaskContext.drawImage(maskList[0], 0, 0, cardWidth, cardHeight)
+			}
+			frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]);
+			if (targetChild.children[1].checked == true) {
+				frameFinalContext.globalCompositeOperation = "destination-out";
+			}
+			frameFinalContext.globalAlpha = opacityToDraw;
+			frameFinalContext.drawImage(frameMaskCanvas, 0, 0, cardWidth, cardHeight);
+			frameFinalContext.globalAlpha = 1;
+			frameFinalContext.globalCompositeOperation = "source-over";
 		}
-		var maskIndex = frameToDraw.maskOptionList.indexOf(maskName);
-		var maskImageIndex = maskNameList.indexOf(maskName)
-		//Clears the temporary mask canvas, draws the mask, draws the image over it, then copies it to the final frame canvas
-		frameMaskContext.globalCompositeOperation = "source-over";
-		frameMaskContext.clearRect(0, 0, cardWidth, cardHeight);
-		frameMaskContext.drawImage(maskList[maskImageIndex], 0, 0, cardWidth, cardHeight);
-		frameMaskContext.globalCompositeOperation = "source-in";
-		if (rightHalf) {
-			frameMaskContext.drawImage(maskList[0], 0, 0, cardWidth, cardHeight)
-		}
-		frameMaskContext.drawImage(frameToDraw.image, frameToDraw.xList[maskIndex], frameToDraw.yList[maskIndex], frameToDraw.widthList[maskIndex], frameToDraw.heightList[maskIndex]);
-		if (targetChild.children[1].checked == true) {
-			frameFinalContext.globalCompositeOperation = "destination-out";
-		}
-		frameFinalContext.globalAlpha = opacityToDraw;
-		frameFinalContext.drawImage(frameMaskCanvas, 0, 0, cardWidth, cardHeight);
-		frameFinalContext.globalAlpha = 1;
-		frameFinalContext.globalCompositeOperation = "source-over";
 	}
 	updateBottomInfoCanvas();
 }
@@ -237,7 +250,7 @@ function cardImageUpdated() {
 	cardFinalContext.fillRect(0, 0, cardWidth, cardHeight);
 	displayContext.clearRect(0, 0, cardWidth, cardHeight);
 	//Draw the art, frame, text, bottom info, mana cost, watermark, and set symbol
-	cardFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
+	// cardFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
 	cardFinalContext.drawImage(frameFinalCanvas, 0, 0, cardWidth, cardHeight);
 	cardFinalContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight);
 	cardFinalContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight);
@@ -676,15 +689,24 @@ function autocrop(targetImage, source = targetImage.src) {
        }
    }
 }
-// //The next several functions are all about loading images!
+//The next several functions are all about loading images!
 function uploadImage(event, destination) {
-	var input = event.target
-	var reader = new FileReader()
+	var input = event.target;
+	var reader = new FileReader();
 	reader.onload = function() {
-		var dataURL = reader.result
-		destination.src = dataURL
+		var dataURL = reader.result;
+		destination.src = dataURL;
 	}
-	reader.readAsDataURL(input.files[0])
+	reader.readAsDataURL(input.files[0]);
+}
+function retrieveLocalURL(event) {
+	var input = event.target;
+	var reader = new FileReader();
+	reader.onload = function() {
+		addNewFrameOption(reader.result)
+		// return reader.result;
+	}
+	reader.readAsDataURL(input.files[0]);
 }
 var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
 function inputCardArtName(cardArtNameInput) {
--- a/data/versions/m15.js
+++ b/data/versions/m15.js
@@ -37,7 +37,7 @@ function m15BottomInfo() {
 	bottomInfoContext.writeText(document.getElementById("inputInfoSet").value + " \u00b7 " + document.getElementById("inputInfoLanguage").value + "  {fontsize1}{font:belerenbsc}{artistBrush}" + document.getElementById("inputInfoArtist").value, scale(46), scale(1012), scale(375), 0, "gothammedium", 17, "white", "oneLine=true")
 	var copyrightShift = 0;
 	for (var i = 0; i < cardMaster.children.length; i++) {
-		if (frameList[parseInt(cardMaster.children[i].id.replace("frameIndex", ""))].image.src.includes("PT")) {
+		if (parseInt(cardMaster.children[i].id.replace("frameIndex", "")) != -1 && frameList[parseInt(cardMaster.children[i].id.replace("frameIndex", ""))].image.src.includes("PT")) {
 			copyrightShift = 19;
 		}
 	}
--- a/index.html
+++ b/index.html
@@ -36,7 +36,15 @@
 		            	<button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
                	</div>
                	<div id="selectedFramePreview">No frame selected</div>
-                	<div id="cardMaster"></div>
+                	<div id="cardMaster">
+                		<div id="frameIndex-1" class="cardMasterElement">Card Art Placeholder <img src="file:///C:/Users/Kyle%20Burton/Documents/GitHub/CardConjurer/data/images/m15WFull.png"></div>
+                	</div>
+                	<div class="bar"></div>
+                	<div>Upload your own frame images:</div>
+                	<div class="autoGrid">
+                		<input type="file" class="input file" accept="image/*" onchange="retrieveLocalURL(event)" placeholder="Via File Upload">
+						<input type="text" class="input text" placeholder="Via URL" onchange="addNewFrameOption(this.value)">
+                	</div>
                </div>
                <div class="tabContent mainEditor" id="text">
                	<div id="inputWhichTextTabs" class="textTab"></div>
@@ -59,9 +67,9 @@
 						</div>
 						<div>
                            <div style="text-align: center; margin: 0.18em 0px">X, Y, &amp; Zoom:</div>
-							<input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardImageUpdated()">
-							<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardImageUpdated()">
-							<input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardImageUpdated()">
+							<input type="number" class="input number" value="0" id="inputCardArtX" oninput="cardMasterUpdated()">
+							<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardMasterUpdated()">
+							<input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardMasterUpdated()">
 						</div>
 					</div>
                </div>