GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Kyle
2018-08-25 17:07:16 -07:00
committed by GitHub
parent a3d13e8bb6
commit 35c8789246
1 changed files with 267 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
KCI/KylesCardImager.html
View File

@@ -1,19 +1,21 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>Kyle's Card Imager</title> <title>Card Conjurer</title>
<script src="data/scripts/loadScript.js"></script> <script src="data/scripts/loadScript.js"></script>
<script src="data/scripts/loadImage.js"></script> <script src="data/scripts/loadImage.js"></script>
<script src="data/scripts/loadColors.js"></script> <script src="data/scripts/loadColors.js"></script>
<script src="data/scripts/mask.js"></script> <script src="data/scripts/mask.js"></script>
<div class="title">Kyle's Card Imager</div> <div class="title">Card Conjurer</div>
</head> </head>
<!-- <img src="data/background.png"></img> -->
<body> <body>
<div class="row"> <div class="row">
<div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div> <div class="column"><canvas id="canvas" width="749" height="1044"></canvas></div>
<!--OPTIONS--> <!--OPTIONS-->
<div class="column"> <div class="column">
<br> <br/>
<div style="width: 375px">
<div class="toggle" onclick="toggleVisibility('cardBorder', this, 'toggleShown', 'hidden', 'shown')">Card Border</div> <div class="toggle" onclick="toggleVisibility('cardBorder', this, 'toggleShown', 'hidden', 'shown')">Card Border</div>
<div class="cardBorder hidden"> <div class="cardBorder hidden">
Border Border
@@ -32,32 +34,34 @@
<input type="checkbox" id="checkboxThirdColor" onchange="updateColor()">Third Color <select id="thirdColorSelection" onchange="updateColor()"></select></input> <input type="checkbox" id="checkboxThirdColor" onchange="updateColor()">Third Color <select id="thirdColorSelection" onchange="updateColor()"></select></input>
<br/> <br/>
<input type="checkbox" id="creatureCheckbox" onchange="updateColor()">Power/Toughness <input type="checkbox" id="creatureCheckbox" onchange="updateColor()">Power/Toughness
<input id="inputPowerToughness" value=""></input></input> <input id="inputPowerToughness" value="" type="text"></input>
<br/> <br/>
<input type="checkbox" id="legendaryCheckbox" onchange="updateColor()">Legendary</input> <input type="checkbox" id="legendaryCheckbox" onchange="updateColor()">Legendary</input>
<br/> <br/>
<input type="checkbox" id="rareStampCheckbox" onchange="updateColor()">Rare Stamp</input> <input type="checkbox" id="rareStampCheckbox" onchange="updateColor()">Rare Stamp</input>
<br/> <br/>
<input type="checkbox" id="silverBorderCheckbox">Silver Border</input>
<br/>
<input type="checkbox" id="foilCheckbox">Foil</input> <input type="checkbox" id="foilCheckbox">Foil</input>
<br/> <br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('nameCostType', this, 'toggleShown', 'hidden', 'shown')">Name, Mana Cost, Type</div> <div class="toggle" onclick="toggleVisibility('nameCostType', this, 'toggleShown', 'hidden', 'shown')">Name, Mana Cost, Type</div>
<div class="nameCostType hidden"> <div class="nameCostType hidden">
Name Name
<input id="inputName"></input> <input id="inputName" type="text"></input>
<br/> <br/>
Mana Cost Mana Cost
<input id="inputCost"></input> <input id="inputCost" type="text"></input>
<br/> <br/>
Type Type
<input id="inputType"></input> <input id="inputType" type="text"></input>
<br/> <br/>
</div> </div>
<div class="toggle" onclick="toggleVisibility('rulesText', this, 'toggleShown', 'hidden', 'shown')">Rules Text</div> <div class="toggle" onclick="toggleVisibility('rulesText', this, 'toggleShown', 'hidden', 'shown')">Rules Text</div>
<div class="rulesText hidden"> <div class="rulesText hidden">
Rules Text Rules Text
<br/> <br/>
<textarea id="inputText" rows="5" cols="40"></textarea> <textarea id="inputText" rows="5" cols="40" style="width: 99%; resize: vertical; height: 100px"></textarea>
<br/> <br/>
Rules Text Font Size Rules Text Font Size
<input id="textSize" type="number" min="0" max="100" value="37" step="0.5"></input> <input id="textSize" type="number" min="0" max="100" value="37" step="0.5"></input>
@@ -87,22 +91,22 @@
<div class="toggle" onclick="toggleVisibility('otherInfo', this, 'toggleShown', 'hidden', 'shown')">Other Information</div> <div class="toggle" onclick="toggleVisibility('otherInfo', this, 'toggleShown', 'hidden', 'shown')">Other Information</div>
<div class="otherInfo hidden"> <div class="otherInfo hidden">
Other Info Other Info
<input id="inputInfo" value="Not A Real Card"></input> <input id="inputInfo" value="Not A Real Card" type="text"></input>
<br/> <br/>
Card Number Card Number
<input id="inputNumber" value="001/001"></input> <input id="inputNumber" value="001/001" type="text"></input>
<br/> <br/>
Rarity Rarity
<input id="inputRarity" value="C"></input> <input id="inputRarity" value="C" type="text"></input>
<br/> <br/>
Set Abbreviation Set Abbreviation
<input id="inputSet" value="MTG"></input> <input id="inputSet" value="MTG" type="text"></input>
<br/> <br/>
Language Language
<input id="inputLanguage" value="EN"></input> <input id="inputLanguage" value="EN" type="text"></input>
<br/> <br/>
Artist Credit Artist Credit
<input id="inputArtist" value=""></input> <input id="inputArtist" value="" type="text"></input>
<br/> <br/>
<input id="artistColor" type="checkbox">Make Artist Credit font black</input> <input id="artistColor" type="checkbox">Make Artist Credit font black</input>
<br/> <br/>
@@ -136,6 +140,89 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row text">
Use the following codes to get the respective symbol in the card's mana cost and rules text. In the mana cost, make sure to include spaces in between the codes, and in the rules text include '<' before each code and '>' after.<br/>
<div class="column" style="width: 100px">
w - <img id="w"><br/>
u - <img id="u"><br/>
b - <img id="b"><br/>
r - <img id="r"><br/>
g - <img id="g"><br/>
</div>
<div class="column" style="width: 100px">
pw - <img id="pw"><br/>
pu - <img id="pu"><br/>
pb - <img id="pb"><br/>
pr - <img id="pr"><br/>
pg - <img id="pg"><br/>
</div>
<div class="column" style="width: 100px">
2w - <img id="2w"><br/>
2u - <img id="2u"><br/>
2b - <img id="2b"><br/>
2r - <img id="2r"><br/>
2g - <img id="2g"><br/>
</div>
<div class="column" style="width: 100px">
w - <img id="wu"><br/>
u - <img id="wb"><br/>
b - <img id="ub"><br/>
r - <img id="ur"><br/>
g - <img id="br"><br/>
</div>
<div class="column" style="width: 100px">
w - <img id="bg"><br/>
u - <img id="rg"><br/>
b - <img id="rw"><br/>
r - <img id="gw"><br/>
g - <img id="gu"><br/>
</div>
<div class="column" style="width: 100px">
0 - <img id="0"><br/>
1 - <img id="1"><br/>
2 - <img id="2"><br/>
3 - <img id="3"><br/>
4 - <img id="4"><br/>
</div>
<div class="column" style="width: 100px">
5 - <img id="5"><br/>
6 - <img id="6"><br/>
7 - <img id="7"><br/>
8 - <img id="8"><br/>
9 - <img id="9"><br/>
</div>
<div class="column" style="width: 100px">
10 - <img id="10"><br/>
11 - <img id="11"><br/>
12 - <img id="12"><br/>
13 - <img id="13"><br/>
14 - <img id="14"><br/>
</div>
<div class="column" style="width: 100px">
15 - <img id="15"><br/>
16 - <img id="16"><br/>
17 - <img id="17"><br/>
18 - <img id="18"><br/>
19 - <img id="19"><br/>
</div>
<div class="column" style="width: 120px">
20 - <img id="20"><br/>
c - <img id="c"><br/>
x - <img id="x"><br/>
t - <img id="t"><br/>
untap - <img id="untap"><br/>
</div>
<div class="column" style="width: 120px">
snow - <img id="snow"><br/>
e - <img id="e"><br/>
<br/>
<br/>
<br/>
</div>
<br/><br/><br/><br/><br/><br/><br/> <!-- Not quite sure why I needed so many linebreaks here! -->
When selecting the card's color, use 'Second Color' for hybrid cards, and 'Third Color' for non-hybrid two-colored cards.
</div>
<div class="info">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/Kyles-Card-Imager" target="_blank">the Github page</a>.</div> <div class="info">For Terms of Use and Disclaimer, see <a href="https://github.com/ImKyle4815/Kyles-Card-Imager" target="_blank">the Github page</a>.</div>
</body> </body>
@@ -192,7 +279,7 @@
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-family: belerenbsc; font-family: belerenbsc;
font-size: 20px; font-size: 20px;
width: 408px; width: 100%;
padding: 5px; padding: 5px;
border: 1px solid rgb(128, 255, 128); border: 1px solid rgb(128, 255, 128);
} }
@@ -209,16 +296,27 @@
font-size: 100px; font-size: 100px;
} }
.shown { .shown {
width: 100%;
padding: 5px; padding: 5px;
border-width: 1px; border-width: 1px;
border-color: rgb(128, 255, 128); border-color: rgb(128, 255, 128);
border-style: dashed solid solid solid; border-style: dashed solid solid solid;
} font-size: 20px;
color: rgb(255,255,255);
font-family: belerenbsc;
} }
.shown * { .shown * {
color: rgb(255,255,255);
font-family: mplantin; font-family: mplantin;
font-size: 15px; font-size: 20px;
}
input[type="text"] {
width: 99%;
}
input[type="number"] {
width: 99%;
}
select {
width: 100%;
} }
.column { .column {
float: left; float: left;
@@ -228,11 +326,31 @@
display: table; display: table;
clear: both; clear: both;
} }
.text {
padding: 10px;
text-align: left;
color: rgb(128, 128, 128);
font-family: beleren;
font-size: 25px;
}
.text img {
position: relative;
top: 8px;
width: 30px;
padding: 0px 0px 0px 0px !important;
margin: 0px;
}
body { body {
color: rgb(255,255,255); color: rgb(255,255,255);
font-family: mplantin; font-family: mplantin;
font-size: 18px; font-size: 18px;
background-color: rgb(56,56,56); }
html {
background:url(data/background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} }
canvas { canvas {
float: left; float: left;
@@ -266,13 +384,13 @@ var m15Info = true
var canvas = document.getElementById("canvas") var canvas = document.getElementById("canvas")
var card = canvas.getContext("2d") var card = canvas.getContext("2d")
//Load dynamic images //Load dynamic images
var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "secondBorderCreature", "thirdBorderCreature", "borderLegendary", "secondBorderLegendary", "thirdBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "artMask", "setSymbol", "watermark", "multiMask", "LegendMultiMask"] var dynamicImageList = ["borderColor", "secondBorderColor", "thirdBorderColor", "borderCreature", "secondBorderCreature", "thirdBorderCreature", "borderLegendary", "secondBorderLegendary", "thirdBorderLegendary", "borderRareStamp", "secondBorderRareStamp", "art", "artMask", "setSymbol", "watermark", "multiMask", "LegendMultiMask", "legendSilver"]
for (i = 0; i < dynamicImageList.length; i ++) { for (i = 0; i < dynamicImageList.length; i ++) {
var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1) var imgName = "img" + dynamicImageList[i].charAt(0).toUpperCase() + dynamicImageList[i].slice(1)
window[imgName] = new Image() window[imgName] = new Image()
} }
//Load static images //Load static images
var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask"] var staticImageList = ["artistBrush", "foil", "stampGradient", "multiGradient", "rareStamp", "cardMask", "silverBorder", "borderEdge"]
for (i = 0; i < staticImageList.length; i ++) { for (i = 0; i < staticImageList.length; i ++) {
var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1) var imgName = "img" + staticImageList[i].charAt(0).toUpperCase() + staticImageList[i].slice(1)
window[imgName] = new Image() window[imgName] = new Image()
@@ -284,6 +402,10 @@ var manaSymbolImages = new Array()
for (var i = 0; i < manaSymbolCode.length; i++) { for (var i = 0; i < manaSymbolCode.length; i++) {
manaSymbolImages[i] = new Image() manaSymbolImages[i] = new Image()
manaSymbolImages[i].src = "data/manaSymbols/" + i + ".png" manaSymbolImages[i].src = "data/manaSymbols/" + i + ".png"
//alert(document.getElementById(manaSymbolImages[i]))
if (document.getElementById(manaSymbolCode[i]) != null) {
document.getElementById(manaSymbolCode[i]).src = "data/manaSymbols/" + i + ".png"
}
} }
//fill second watermark dropdown menu //fill second watermark dropdown menu
document.getElementById("secondWatermarkColorSelection").innerHTML = document.getElementById("watermarkColorSelection").innerHTML document.getElementById("secondWatermarkColorSelection").innerHTML = document.getElementById("watermarkColorSelection").innerHTML
@@ -337,6 +459,7 @@ function updateBorder() {
imgArtMask.src = "data/borders/" + document.getElementById("borderSelection").value + "artMask.png" imgArtMask.src = "data/borders/" + document.getElementById("borderSelection").value + "artMask.png"
imgMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "multiMask.png" imgMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "multiMask.png"
imgLegendMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "legendMultiMask.png" imgLegendMultiMask.src = "data/borders/" + document.getElementById("borderSelection").value + "legendMultiMask.png"
imgLegendSilver.src = "data/borders/" + document.getElementById("borderSelection").value + "legendSilver.png"
updateColor() updateColor()
} }
//Loads the images for the card frame, power toughness box, and rare stamp //Loads the images for the card frame, power toughness box, and rare stamp
@@ -394,6 +517,17 @@ function drawBorder() {
card.drawImage(imgRareStamp, 340, rareStampY, 70, 37) card.drawImage(imgRareStamp, 340, rareStampY, 70, 37)
} }
} }
if(document.getElementById("legendaryCheckbox").checked == true) {
card.drawImage(imgBorderEdge, 0, 0, canvas.width, canvas.height)
if (document.getElementById("silverBorderCheckbox").checked == true) {
drawMask(imgLegendSilver, 0, 0, canvas.width, canvas.height, imgCardMask, imgLegendMultiMask, false)
}
} else {
card.drawImage(imgBorderEdge, 0, 0, canvas.width, canvas.height)
if (document.getElementById("silverBorderCheckbox").checked == true) {
card.drawImage(imgSilverBorder, 0, 0, canvas.width, canvas.height)
}
}
} }
//Draw Set Symbol //Draw Set Symbol
function drawSetSymbol() { function drawSetSymbol() {