From 856fc617ee785a3af7b2108f8d6689ca3a1e72d0 Mon Sep 17 00:00:00 2001
From: Kyle <41976328+ImKyle4815@users.noreply.github.com>
Date: Sun, 15 Sep 2019 16:54:17 -0700
Subject: [PATCH] opacity
---
new/data/site/main.js | 42 ++++++++++++++++++++++++++++++++++++++--
new/data/site/styles.css | 1 +
new/index.html | 25 ++++++++++++++----------
3 files changed, 56 insertions(+), 12 deletions(-)
diff --git a/new/data/site/main.js b/new/data/site/main.js
index d58e940e..90482ac9 100644
--- a/new/data/site/main.js
+++ b/new/data/site/main.js
@@ -21,6 +21,8 @@ for (var i = 0; i < canvasList.length; i++) {
//Create the arrays that keeps track of what parts of the card are what
var cardMasterTypes = []
var cardMasterImages = []
+var cardMasterOpacity = []
+var cardMasterOpacityValue = []
//Mana symbol Array setup
var manaSymbolCodeList = ["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", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar"]
var manaSymbolImageList = []
@@ -147,7 +149,15 @@ CanvasRenderingContext2D.prototype.mask = function(cardMasterIndex) {
}
//All the canvas functions
function updateImageCanvas() {
- //post processing?
+ imageContext.globalCompositeOperation = "destination-out"
+ for (var i = 0; i < cardMasterOpacity.length; i ++) {
+ imageContext.globalAlpha = 1 - cardMasterOpacityValue[i] / 100
+ //opacityc
+ opacityImage = window[version.currentVersion + "Mask" + cardMasterOpacity[i]].image
+ imageContext.drawImage(opacityImage, 0, 0, cardWidth, cardHeight)
+ }
+ imageContext.globalAlpha = 1
+ imageContext.globalCompositeOperation = "source-over"
updateBottomInfoCanvas()
}
function updateTextCanvas() {
@@ -248,13 +258,20 @@ function changeVersionTo(versionToChangeTo) {
}
function finishChangingVersion() {
document.getElementById("inputImageType").innerHTML = ""
+ document.getElementById("inputImageTypeOpacity").innerHTML = ""
for (var i = 0; i < version.typeOrder.length; i ++) {
document.getElementById("inputImageType").innerHTML += ""
+ if (window[version.currentVersion + "Mask" + version.typeOrder[i]]) {
+ document.getElementById("inputImageTypeOpacity").innerHTML += ""
+ cardMasterOpacity[cardMasterOpacity.length] = version.typeOrder[i]
+ cardMasterOpacityValue[cardMasterOpacityValue.length] = 100
+ }
}
for (var i = 0; i < version.textList.length; i ++) {
document.getElementById("inputWhichText").innerHTML += ""
}
hideShowColors(true)
+ loadOpacityValue()
updateText()
updateBottomInfoCanvas()
updateSetSymbolCanvas()
@@ -272,6 +289,14 @@ function hideShowColors(enter = false) {
}
userLoadImage()
}
+//Loads the opacity value
+function loadOpacityValue() {
+ document.getElementById("inputOpacityValue").value = cardMasterOpacityValue[cardMasterOpacity.indexOf(document.getElementById("inputImageTypeOpacity").value)]
+}
+function opacityValueUpdated() {
+ cardMasterOpacityValue[cardMasterOpacity.indexOf(document.getElementById("inputImageTypeOpacity").value)] = document.getElementById("inputOpacityValue").value
+ cardMasterUpdated()
+}
//Custom text function! This acts on any codes and makes things look nice :)
CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="") {
paragraphContext.clearRect(0, 0, cardWidth, cardHeight)
@@ -630,4 +655,17 @@ function checkCookies() {
toggleTooltips(false)
document.getElementById("tooltipToggler").checked = false
}
-}
\ No newline at end of file
+}
+
+
+
+/*To do list:
+Opacity control
+watermarks
+
+
+
+
+
+possibly border color?
+*/
\ No newline at end of file
diff --git a/new/data/site/styles.css b/new/data/site/styles.css
index aa7e2bd5..61e00aa4 100644
--- a/new/data/site/styles.css
+++ b/new/data/site/styles.css
@@ -129,6 +129,7 @@ canvas {
}
.input.file {
padding: 0px;
+ height: 1.26em;
}
.tooltip {
position: relative;
diff --git a/new/index.html b/new/index.html
index 394965c1..8e576d4e 100644
--- a/new/index.html
+++ b/new/index.html
@@ -32,6 +32,10 @@
Preview of the selected image
+
+
Select the part of the card frame
+
Enter the opacity for the selected part of the frame
+
@@ -80,11 +84,13 @@
Set Symbol
-
Upload an image for the set symbol
-
Enter a URL for the set symbol
-
Use a set code (2-3 letters, as seen on the bottom of cards)
-
C, U, R, M, or S (Not every set has every rarity)
-
Use a random set symbol and rarity
+
+
Upload an image for the set symbol
+
Enter a URL for the set symbol
+
Use a set code (2-3 letters, as seen on the bottom of cards)
+
C, U, R, M, or S (Not every set has every rarity)
+
Use a random set symbol and rarity
+
@@ -95,13 +101,12 @@
- This is a layer!
+
Welcome to Card Conjurer!
- This is another layer!
-
-
- This is yet another layer!
+
+ This version of the website is currently a work in progress, so it doesn't have all the features the original Card Conjurer had, but it can still do quite a bit!
+