Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

fix

Browse Source
This commit is contained in:
Kyle
2019-11-29 20:24:16 -08:00
parent 4e8f664300
commit 3933ca573a
3 changed files with 70 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
data/scripts/main.js
View File

@@ -3,9 +3,9 @@
//============================================// //============================================//
/* Test things! */ /* Test things! */
function testFunction() { function testFunction() {
cardMaster.appendChild(frameList[0].cardMasterElement("Full")); // cardMaster.appendChild(frameList[0].cardMasterElement("Full"));
cardMasterUpdated(); cardMasterUpdated();
console.log("First frame manually loaded") // console.log("First frame manually loaded")
} }
@@ -54,7 +54,8 @@ function initiate() {
setSymbol.crossOrigin = "anonymous"; setSymbol.crossOrigin = "anonymous";
watermark.crossOrigin = "anonymous"; watermark.crossOrigin = "anonymous";
cardArt.onload = function() { cardArt.onload = function() {
cardImageUpdated(); // cardImageUpdated();
cardMasterUpdated();
} }
setSymbol.onload = function() { setSymbol.onload = function() {
updateSetSymbol(); updateSetSymbol();
@@ -191,6 +192,13 @@ function deleteCardMasterElement(event) {
event.target.parentElement.parentElement.removeChild(event.target.parentElement); event.target.parentElement.parentElement.removeChild(event.target.parentElement);
cardMasterUpdated(); 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! */ /* Card Master Cool Stuff! */
@@ -199,32 +207,37 @@ function cardMasterUpdated() {
frameFinalContext.clearRect(0, 0, cardWidth, cardHeight); frameFinalContext.clearRect(0, 0, cardWidth, cardHeight);
for (var i = cardMaster.children.length - 1; i >= 0; i--) { for (var i = cardMaster.children.length - 1; i >= 0; i--) {
var targetChild = cardMaster.children[i]; var targetChild = cardMaster.children[i];
var opacityToDraw = targetChild.children[0].value / 100; if (parseInt(targetChild.id.replace("frameIndex", "")) == -1) {
var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))]; //The card art placeholder is manually set to -1 and cannot be removed :)
var maskName = targetChild.innerHTML.slice(targetChild.innerHTML.indexOf("(") + 1, targetChild.innerHTML.indexOf(")")); frameFinalContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100)
var rightHalf = false; } else {
if (maskName.includes(" - Right")) { var frameToDraw = frameList[parseInt(targetChild.id.replace("frameIndex", ""))];
maskName = maskName.replace(" - Right", ""); var opacityToDraw = targetChild.children[0].value / 100;
rightHalf = true; 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(); updateBottomInfoCanvas();
} }
@@ -237,7 +250,7 @@ function cardImageUpdated() {
cardFinalContext.fillRect(0, 0, cardWidth, cardHeight); cardFinalContext.fillRect(0, 0, cardWidth, cardHeight);
displayContext.clearRect(0, 0, cardWidth, cardHeight); displayContext.clearRect(0, 0, cardWidth, cardHeight);
//Draw the art, frame, text, bottom info, mana cost, watermark, and set symbol //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(frameFinalCanvas, 0, 0, cardWidth, cardHeight);
cardFinalContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight); cardFinalContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight);
cardFinalContext.drawImage(bottomInfoCanvas, 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) { function uploadImage(event, destination) {
var input = event.target var input = event.target;
var reader = new FileReader() var reader = new FileReader();
reader.onload = function() { reader.onload = function() {
var dataURL = reader.result var dataURL = reader.result;
destination.src = dataURL 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 = [] var savedArtList = [], cardArtUrlList = [], cardArtArtistList = []
function inputCardArtName(cardArtNameInput) { function inputCardArtName(cardArtNameInput) {

2
data/versions/m15.js
View File

@@ -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") 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; var copyrightShift = 0;
for (var i = 0; i < cardMaster.children.length; i++) { 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; copyrightShift = 19;
} }
} }

16
index.html
View File

@@ -36,7 +36,15 @@
<button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button> <button onclick="addFrameToCardMaster(' - Right')" class="button">Add To Right Half</button>
</div> </div>
<div id="selectedFramePreview">No frame selected</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>
<div class="tabContent mainEditor" id="text"> <div class="tabContent mainEditor" id="text">
<div id="inputWhichTextTabs" class="textTab"></div> <div id="inputWhichTextTabs" class="textTab"></div>
@@ -59,9 +67,9 @@
</div> </div>
<div> <div>
<div style="text-align: center; margin: 0.18em 0px">X, Y, &amp; Zoom:</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="inputCardArtX" oninput="cardMasterUpdated()">
<input type="number" class="input number" value="0" id="inputCardArtY" oninput="cardImageUpdated()"> <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="cardImageUpdated()"> <input type="number" class="input number" value="100" step="0.1" min="0" id="inputCardArtZoom" oninput="cardMasterUpdated()">
</div> </div>
</div> </div>
</div> </div>