mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
better border loading
This commit is contained in:
83
index.html
83
index.html
@@ -20,9 +20,9 @@
|
||||
<div class="togglee shown">
|
||||
Border
|
||||
<select id="borderSelection" onchange="changeTemplate()">
|
||||
<option value="plane/">Plane</option>
|
||||
<option value="m15/">M15</option>
|
||||
<option value="map/">Map (Ixalan)</option>
|
||||
<option value="plane/">Plane</option>
|
||||
<option value="8th/">8th</option>
|
||||
</select>
|
||||
<br/>
|
||||
@@ -35,7 +35,7 @@
|
||||
<br/>
|
||||
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()">Third Color <select id="thirdColorSelection" onchange="updateBorder()"></select></input>
|
||||
<br/>
|
||||
<input type="checkbox" id="checkboxCreature" onchange="updateBorder()">Power/Toughness
|
||||
<input type="checkbox" id="checkboxCreature">Power/Toughness
|
||||
<input id="inputPowerToughness" value="" type="text"></input>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,7 +151,7 @@
|
||||
<input type="checkbox" id="checkboxSetSymbol" checked="true">Set Symbol</input>
|
||||
<br>
|
||||
Set Code
|
||||
<input type="text" onchange="loadSetSymbol()" value="pca" id="setSymbolCode"></input>
|
||||
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode"></input>
|
||||
<br>
|
||||
Set Symbol Rarity
|
||||
<input type="text" onchange="loadSetSymbol()" value="C" id="setSymbolRarity"></input>
|
||||
@@ -433,7 +433,7 @@ a:active {
|
||||
var borderCanvas = document.createElement("canvas")
|
||||
borderCanvas.width = 749; borderCanvas.height = 1044
|
||||
var border = borderCanvas.getContext("2d")
|
||||
document.body.appendChild(borderCanvas)
|
||||
//document.body.appendChild(borderCanvas)
|
||||
//Load the initial border (m15)
|
||||
changeTemplate()
|
||||
//set up initial variables
|
||||
@@ -442,24 +442,47 @@ var secondColor
|
||||
var thirdColor
|
||||
var titleRightShift = 0
|
||||
var typeRightShift = 0
|
||||
var imagesToLoad
|
||||
//set up canvas
|
||||
var canvas = document.getElementById("canvas")
|
||||
var card = canvas.getContext("2d")
|
||||
//Load dynamic images
|
||||
var dynamicImageList = ["art", "setSymbol", "watermark", "multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "border", "borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark", "artMask"]
|
||||
for (i = 0; i < dynamicImageList.length; i ++) {
|
||||
var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1)
|
||||
//load template images (images that may change based off of the selected template)
|
||||
var imgListTemplate = ["multiMask", "rareStampMask", "frameMask", "legendFrameMask", "borderMask", "artMask"]
|
||||
for (i = 0; i < imgListTemplate.length; i ++) {
|
||||
var imgName = "img" + imgListTemplate[i].charAt(0).toUpperCase() + imgListTemplate[i].slice(1)
|
||||
window[imgName] = new Image()
|
||||
}
|
||||
//Load border images (images that are determined by border settings)
|
||||
var imgListBorder = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "borderLegendary", "secondBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "borderNyx", "secondBorderNyx", "borderMiracle", "secondBorderMiracle", "borderFlipIcon", "borderFlipCircle", "borderFlipTip", "borderFlippedDark", "secondBorderFlippedDark"]
|
||||
for (i = 0; i < imgListBorder.length; i ++) {
|
||||
var imgName = "img" + imgListBorder[i].charAt(0).toUpperCase() + imgListBorder[i].slice(1)
|
||||
window[imgName] = new Image()
|
||||
imgListBorder[i] = window[imgName]
|
||||
imgListBorder[i].onload = function() {
|
||||
if (this.hasToLoad == true) {
|
||||
this.hasToLoad = false
|
||||
imagesToLoad --
|
||||
if (imagesToLoad == 0) {
|
||||
createBorder()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Load dynamic images (images that are input by the user)
|
||||
var imgListUser = ["art", "setSymbol", "watermark", "border"]
|
||||
for (i = 0; i < imgListUser.length; i ++) {
|
||||
var imgName = "img" + imgListUser[i].charAt(0).toUpperCase() + imgListUser[i].slice(1)
|
||||
window[imgName] = new Image()
|
||||
}
|
||||
//Load static images
|
||||
var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
|
||||
for (i = 0; i < staticImageList.length; i ++) {
|
||||
var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
|
||||
var imgListStatic = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "bar", "identity"]
|
||||
for (i = 0; i < imgListStatic.length; i ++) {
|
||||
var imgName = "img" + imgListStatic[i].charAt(0).toUpperCase() + imgListStatic[i].slice(1)
|
||||
window[imgName] = new Image()
|
||||
window[imgName].src = "data/borders/" + staticImageList[i] + ".png"
|
||||
window[imgName].src = "data/borders/" + imgListStatic[i] + ".png"
|
||||
}
|
||||
//Mana symbol Array setup
|
||||
var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "snow", "c", "t","untap", "e", "y", "z", "half", "infinity"]
|
||||
var manaSymbolCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "snow", "c", "t","untap", "e", "y", "z", "half", "infinity", "chaos"]
|
||||
var manaSymbolImages = new Array()
|
||||
for (var i = 0; i < manaSymbolCode.length; i++) {
|
||||
manaSymbolImages[i] = new Image()
|
||||
@@ -518,9 +541,9 @@ function cardClock() {
|
||||
}
|
||||
//Sets up the initial clock
|
||||
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
//The two following functions load border images
|
||||
function changeTemplate() {
|
||||
//the loadScript function is located in data/scripts/loadScript.js. It sets values to variables such as set symbol coordinates or title font
|
||||
@@ -606,9 +629,18 @@ function updateBorder() {
|
||||
imgBorderFlipCircle.src = firstColorPath + "/flipCircle.png"
|
||||
imgBorderFlipIcon.src = "data/borders/icons/" + document.getElementById("inputFlipIcon").value
|
||||
}
|
||||
//This creates a short pause in order to allow all images to finish loading
|
||||
imgBorderColor.onload = function() {
|
||||
setTimeout(createBorder, 50)
|
||||
//This allows all the images to be loaded
|
||||
imagesToLoad = 0
|
||||
//Makes a count of all images that are loading, also tags them
|
||||
for (i = 0; i < imgListBorder.length; i++) {
|
||||
if (imgListBorder[i].complete == false) {
|
||||
imagesToLoad ++
|
||||
imgListBorder[i].hasToLoad = true
|
||||
}
|
||||
}
|
||||
//If no images needed to be loaded, runs the createBorder function anyways
|
||||
if (imagesToLoad == 0) {
|
||||
createBorder()
|
||||
}
|
||||
}
|
||||
//Once the border images have finished loading, they are all drawn into a temporary canvas then saved to a single image
|
||||
@@ -998,7 +1030,16 @@ function drawText(text, xCoord, yCoord) {
|
||||
card.drawImage(imgBar, canvas.width / 2 - imgBar.width / 2, y + textSize + lineSpace + 5)
|
||||
textXShift = 0
|
||||
y += 2 * lineSpace + textSize + 3
|
||||
} else if (megaSplit[0] == "chaos") {
|
||||
//The chaos symbol (on planar cards) needs to be a bit bigger
|
||||
card.drawImage(manaSymbolImages[56], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize, manaSymbolImages[56].height * textSize / manaSymbolImages[56].width)
|
||||
textXShift += textSize * 1
|
||||
} else if (megaSplit[0] == "plane") {
|
||||
//This draws the large chaos symbol found on planar cards and permenantly shifts the text over
|
||||
card.drawImage(manaSymbolImages[56], x, y + 6, 48, 42)
|
||||
x += 58
|
||||
} else {
|
||||
//It's an image (mana symbol, tap, etc...)
|
||||
card.drawImage(manaSymbolImages[manaSymbolCode.indexOf(megaSplit[0])], x + textXShift + textSize * 0.054, y + textSize * 0.17, textSize * 0.77, textSize * 0.77)
|
||||
textXShift += textSize * 0.84
|
||||
}
|
||||
@@ -1055,7 +1096,7 @@ function resizeThings() {
|
||||
}
|
||||
}
|
||||
|
||||
//runs the autocrop function for the chosen set symbol
|
||||
//Loads the set symbol from my seperate repository
|
||||
function loadSetSymbol() {
|
||||
imgSetSymbol.crossOrigin = "Anonymous"
|
||||
imgSetSymbol.src = "https://raw.githubusercontent.com/ImKyle4815/MTG-Set-Symbols/master/setSymbols/" + document.getElementById("setSymbolCode").value.toUpperCase() + "_" + document.getElementById("setSymbolRarity").value.toUpperCase() + ".png"
|
||||
@@ -1065,7 +1106,7 @@ function loadSetSymbol() {
|
||||
function downloadCardImage(linkElement) {
|
||||
var cardImageData = canvas.toDataURL()
|
||||
if (cardImageData == undefined) {
|
||||
alert("Sorry, it seems that you cannot download your card. Please try using a different browser.")
|
||||
alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.")
|
||||
}
|
||||
linkElement.href = cardImageData
|
||||
}
|
||||
|
Reference in New Issue
Block a user