diff --git a/data/site/icons/izzetright.png b/data/site/icons/izzetright.png new file mode 100644 index 00000000..b533b395 Binary files /dev/null and b/data/site/icons/izzetright.png differ diff --git a/data/site/icons/massdrop.png b/data/site/icons/massdrop.png new file mode 100644 index 00000000..00920675 Binary files /dev/null and b/data/site/icons/massdrop.png differ diff --git a/data/site/icons/patreon.png b/data/site/icons/patreon.png new file mode 100644 index 00000000..36c0fca7 Binary files /dev/null and b/data/site/icons/patreon.png differ diff --git a/data/site/icons/paypal.png b/data/site/icons/paypal.png new file mode 100644 index 00000000..0f36713d Binary files /dev/null and b/data/site/icons/paypal.png differ diff --git a/data/site/icons/pucatrade.png b/data/site/icons/pucatrade.png new file mode 100644 index 00000000..a55f8079 Binary files /dev/null and b/data/site/icons/pucatrade.png differ diff --git a/data/site/icons/twitter.png b/data/site/icons/twitter.png new file mode 100644 index 00000000..885ba87e Binary files /dev/null and b/data/site/icons/twitter.png differ diff --git a/data/site/main.js b/data/site/main.js index cc5d2ecf..e1984aec 100644 --- a/data/site/main.js +++ b/data/site/main.js @@ -215,21 +215,30 @@ function updateWatermarkCanvas() { watermarkY = version.watermarkY - watermarkHeight / 2 } watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight) - watermarkContext.globalCompositeOperation = "source-atop" - watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value - watermarkContext.fillRect(0, 0, cardWidth, cardHeight) + watermarkContext.globalCompositeOperation = "source-in" + if (document.getElementById("inputWatermarkPrimary").value != "default") { + watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value + watermarkContext.fillRect(0, 0, cardWidth, cardHeight) + } if (document.getElementById("inputWatermarkSecondary").value != "none") { + watermarkContext.globalCompositeOperation = "source-atop" tempContext.clearRect(0, 0, cardWidth, cardHeight) tempContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight) - tempContext.globalCompositeOperation = "source-atop" - tempContext.fillStyle = document.getElementById("inputWatermarkSecondary").value - tempContext.fillRect(0, 0, cardWidth, cardHeight) + 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.fillRect(0, 0, cardWidth, cardHeight) + } tempContext.globalCompositeOperation = "source-over" watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight) } 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. function updateBottomInfoCanvas() { @@ -511,7 +520,7 @@ function changeWhichText() { document.getElementById("inputText").value = version.textList[whichTextIndex][1] } //Removes all the white pixels in an image -var whiteThreshold = 240 +var whiteThreshold = 250 function whiteToTransparent(targetImage, source = targetImage.src) { //Create image, size canvas, draw image var imgTempTarget = new Image() diff --git a/data/site/styles.css b/data/site/styles.css index 61e00aa4..6025e549 100644 --- a/data/site/styles.css +++ b/data/site/styles.css @@ -217,6 +217,20 @@ footer a:hover { .leftMargin { 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*/ @media screen and (min-width: 888pt) { diff --git a/index.html b/index.html index ce99cd44..204ea2fc 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,10 @@ -
- Card Conjurer -
+
+ Card Conjurer +
@@ -103,23 +103,25 @@
Use a set code
(2-3 letters, as seen on the bottom of cards)
Select the watermark color
Select the secondary watermark color
@@ -131,14 +133,40 @@
+
Welcome to Card Conjurer!
+
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.
+
+
+
About Me
+
+ 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 loved technology. 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. (KCI) 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 cardconjurer.com. +
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, click here.
+
+
How You Can Help
+
+ 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: +
+ +
+
+
Have Any Questions?
+
+ If you have any questions please don't hesitate to email me at CardConjurerMTG@gmail.com. Even if you made a cool card and want to share, I'd love to see it! +
+