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

style

Browse Source
This commit is contained in:
Kyle
2019-09-20 19:47:22 -07:00
parent b81c6a6ed2
commit 0ef1970159
9 changed files with 76 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/site/icons/izzetright.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

BIN
data/site/icons/massdrop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
data/site/icons/patreon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
data/site/icons/paypal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
data/site/icons/pucatrade.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
data/site/icons/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

17
data/site/main.js
View File

@@ -215,21 +215,30 @@ function updateWatermarkCanvas() {
watermarkY = version.watermarkY - watermarkHeight / 2 watermarkY = version.watermarkY - watermarkHeight / 2
} }
watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight) watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
watermarkContext.globalCompositeOperation = "source-atop" watermarkContext.globalCompositeOperation = "source-in"
if (document.getElementById("inputWatermarkPrimary").value != "default") {
watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value
watermarkContext.fillRect(0, 0, cardWidth, cardHeight) watermarkContext.fillRect(0, 0, cardWidth, cardHeight)
}
if (document.getElementById("inputWatermarkSecondary").value != "none") { if (document.getElementById("inputWatermarkSecondary").value != "none") {
watermarkContext.globalCompositeOperation = "source-atop"
tempContext.clearRect(0, 0, cardWidth, cardHeight) tempContext.clearRect(0, 0, cardWidth, cardHeight)
tempContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight) tempContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight)
tempContext.globalCompositeOperation = "source-atop" tempContext.globalCompositeOperation = "source-in"
if (document.getElementById("inputWatermarkSecondary").value == "default") {
tempContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight)
} else {
tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value
tempContext.fillRect(0, 0, cardWidth, cardHeight) tempContext.fillRect(0, 0, cardWidth, cardHeight)
}
tempContext.globalCompositeOperation = "source-over" tempContext.globalCompositeOperation = "source-over"
watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight) watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight)
} }
watermarkContext.globalCompositeOperation = "source-over" watermarkContext.globalCompositeOperation = "source-over"
updateCardCanvas() } else {
watermarkContext.clearRect(0, 0, cardWidth, cardHeight)
} }
updateCardCanvas()
} }
//Does the bottom info function! This can be different depending on the version. //Does the bottom info function! This can be different depending on the version.
function updateBottomInfoCanvas() { function updateBottomInfoCanvas() {
@@ -511,7 +520,7 @@ function changeWhichText() {
document.getElementById("inputText").value = version.textList[whichTextIndex][1] document.getElementById("inputText").value = version.textList[whichTextIndex][1]
} }
//Removes all the white pixels in an image //Removes all the white pixels in an image
var whiteThreshold = 240 var whiteThreshold = 250
function whiteToTransparent(targetImage, source = targetImage.src) { function whiteToTransparent(targetImage, source = targetImage.src) {
//Create image, size canvas, draw image //Create image, size canvas, draw image
var imgTempTarget = new Image() var imgTempTarget = new Image()

14
data/site/styles.css
View File

@@ -217,6 +217,20 @@ footer a:hover {
.leftMargin { .leftMargin {
margin-left: 2em; margin-left: 2em;
} }
.donate > div:hover {
text-decoration: underline;
}
.donate > div {
background-color: #1111;
border-radius: 2em;
font: 2em belerenbsc;
}
.donate > div > img {
height: 1em;
position: relative;
top: 0.15em;
left: 0.15em;
}
/*Controls the area taken by the canvas*/ /*Controls the area taken by the canvas*/
@media screen and (min-width: 888pt) { @media screen and (min-width: 888pt) {

59
index.html
View File

@@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<div class="mainDiv">
<div class="pageTitle"> <div class="pageTitle">
Card Conjurer Card Conjurer
</div> </div>
<div class="mainDiv">
<div class="mainGrid"> <div class="mainGrid">
<div class="canvasContainer"> <div class="canvasContainer">
<canvas id="mainCanvas" class="canvas"></canvas> <canvas id="mainCanvas" class="canvas"></canvas>
@@ -103,23 +103,25 @@
<div class="tooltip"><input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div> <div class="tooltip"><input type="text" class="input text" placeholder="Via Set Code" onchange="whiteToTransparent(watermark, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large')"><span class="tooltiptext">Use a set code<br>(2-3 letters, as seen on the bottom of cards)</span></div>
<div class="tooltip"><select class="select" id="inputWatermarkPrimary" onchange="updateWatermarkCanvas()"> <div class="tooltip"><select class="select" id="inputWatermarkPrimary" onchange="updateWatermarkCanvas()">
<option value="none">None</option> <option value="none">None</option>
<option value="#afa360" selected="selected">White</option> <option value="default">Default</option>
<option value="#04527c">Blue</option> <option value="#ccc8b1" selected="selected">White</option>
<option value="#494949">Black</option> <option value="#b0c3d5">Blue</option>
<option value="#a3280d">Red</option> <option value="#b3b3b3">Black</option>
<option value="#0f4f14">Green</option> <option value="#ddac9b">Red</option>
<option value="#7f5f00">Gold</option> <option value="#b9c8b5">Green</option>
<option value="#616b72">Artifact/Colorless</option> <option value="#e4d49b">Gold</option>
<option value="#cfc8be">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the watermark color</span></div> </select><span class="tooltiptext">Select the watermark color</span></div>
<div class="tooltip"><select class="select" id="inputWatermarkSecondary" onchange="updateWatermarkCanvas()"> <div class="tooltip"><select class="select" id="inputWatermarkSecondary" onchange="updateWatermarkCanvas()">
<option value="none">None</option> <option value="none">None</option>
<option value="#afa360">White</option> <option value="default">Default</option>
<option value="#04527c">Blue</option> <option value="#ccc8b1">White</option>
<option value="#494949">Black</option> <option value="#b0c3d5">Blue</option>
<option value="#a3280d">Red</option> <option value="#b3b3b3">Black</option>
<option value="#0f4f14">Green</option> <option value="#ddac9b">Red</option>
<option value="#7f5f00">Gold</option> <option value="#b9c8b5">Green</option>
<option value="#616b72">Artifact/Colorless</option> <option value="#e4d49b">Gold</option>
<option value="#cfc8be">Artifact/Colorless</option>
</select><span class="tooltiptext">Select the secondary watermark color</span></div> </select><span class="tooltiptext">Select the secondary watermark color</span></div>
</div> </div>
<div class="bar"></div> <div class="bar"></div>
@@ -131,14 +133,40 @@
</div> </div>
</div> </div>
</div> </div>
<div class="hidden"></div>
<div class="layer"> <div class="layer">
<div class="title">Welcome to Card Conjurer!</div> <div class="title">Welcome to Card Conjurer!</div>
<div class="paragraph indent">Card Conjurer is a free program that helps you create custom Magic: The Gathering cards. There are already plenty of custom card makers out there, but what sets Card Conjurer apart from the rest is its live-edit capabilities. You can immediatly see the effects of any change you make, which makes card customization easier and overall a better experience.</div>
</div>
<div class="layer">
<div class="title">About Me</div>
<div class="paragraph indent">
Hi! My name is Kyle Burton and I am currently a high school student. I used to play Pokemon, but when a friend introduced me to Magic in 2013 I sold my pocket monsters and bought an M14 Intro Pack. Ever since that day Magic has been my all time favorite game. In addition to playing games, I've always <a href="https://www.youtube.com/watch?v=ERCzN91JicA" target="blank">loved technology.</a> During the 2017-18 school year I tought myself how to code Javascript, and a little bit of HTML and CSS. The following summer I created Kyle's Card Imager. (<a href="https://scryfall.com/card/5dn/134/krark-clan-ironworks" target="blank">KCI</a>) It was pretty simple but I soon began to add more border images like Miracle or Nyx. After a few months I decided to share my creation, so I renamed it Card Conjurer and uploaded it to Github, and then in April of 2019 I bought the domain <a href="#header" onclick="alert('You\'re already there, silly!')">cardconjurer.com</a>.
</div>
</div> </div>
<div class="layer"> <div class="layer">
<div class="paragraph indent"> <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>. 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> </div>
</div> </div>
<div class="layer">
<div class="title">How You Can Help</div>
<div class="paragraph indent">
I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by using one of the following referral links:
</div>
<div class="autoGrid donate">
<!-- <div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="data/site/icons/paypal.png"></div> -->
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="data/site/icons/pucatrade.png"></div>
<!-- <div onclick="window.open('https://twitter.com/ImKyle4815', '_blank');" style="color:rgb(0,174,239);">@ImKyle4815<img src="data/site/icons/twitter.png"></div> -->
<div onclick="window.open('https://www.massdrop.com/?referer=LNWNLL', '_blank');" style="color:rgb(255,255,255);">Massdrop<img src="data/site/icons/massdrop.png"></div>
</div>
</div>
<div class="layer">
<div class="title">Have Any Questions?</div>
<div class="paragraph indent">
If you have any questions please don't hesitate to email me at <a href="https://mail.google.com/mail/u/0/?view=cm&fs=1&to=CardConjurerMTG@gmail.com&su=Card%20Conjurer&tf=1" target="_blank">CardConjurerMTG@gmail.com</a>. Even if you made a cool card and want to share, I'd love to see it!
</div>
</div>
</div> </div>
</body> </body>
<footer> <footer>
@@ -146,7 +174,6 @@
<div> <div>
Card Conjurer By Kyle Burton<br> Card Conjurer By Kyle Burton<br>
<input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br> <input type="checkbox" checked="true" onchange="toggleTooltips(this.checked)" id="tooltipToggler"> Display tooltips<br>
Happy Card Conjuring!
</div> </div>
<div> <div>
Navigation:<br> Navigation:<br>