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

opacity

Browse Source
This commit is contained in:
Kyle
2019-09-15 16:54:17 -07:00
parent 7a8966ecdc
commit 856fc617ee
3 changed files with 56 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
new/data/site/main.js
View File

@@ -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 += "<option>" + version.typeOrder[i] + "</option>"
if (window[version.currentVersion + "Mask" + version.typeOrder[i]]) {
document.getElementById("inputImageTypeOpacity").innerHTML += "<option>" + version.typeOrder[i] + "</option>"
cardMasterOpacity[cardMasterOpacity.length] = version.typeOrder[i]
cardMasterOpacityValue[cardMasterOpacityValue.length] = 100
}
}
for (var i = 0; i < version.textList.length; i ++) {
document.getElementById("inputWhichText").innerHTML += "<option>" + version.textList[i][0] + "</option>"
}
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)
@@ -631,3 +656,16 @@ function checkCookies() {
document.getElementById("tooltipToggler").checked = false
}
}
/*To do list:
Opacity control
watermarks
possibly border color?
*/

1
new/data/site/styles.css
View File

@@ -129,6 +129,7 @@ canvas {
}
.input.file {
padding: 0px;
height: 1.26em;
}
.tooltip {
position: relative;

25
new/index.html
View File

@@ -32,6 +32,10 @@
<div class="tooltip"><img id="imgPreview" class="imgPreview"><span class="tooltiptext">Preview of the selected image</span></div>
</div>
</div>
<div class="autoGrid">
<div class="tooltip"><select class="select" id="inputImageTypeOpacity" onchange="loadOpacityValue()"></select><span class="tooltiptext">Select the part of the card frame</span></div>
<div class="tooltip"><input type="number" class="input number" id="inputOpacityValue" min="0" max="100" oninput="opacityValueUpdated()"><span class="tooltiptext">Enter the opacity for the selected part of the frame</span></div>
</div>
<div class="bar"></div>
</div>
<div>
@@ -80,11 +84,13 @@
<div>
Set Symbol
</div>
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)"><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" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)"><span class="tooltiptext">C, U, R, M, or S<br>(Not every set has every rarity)</span></div>
<div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div>
<div class="autoGrid">
<div class="tooltip"><input type="file" class="input file" accept="image/*" onchange="uploadImage(event, setSymbol)" placeholder="Via File Upload"><span class="tooltiptext">Upload an image for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" placeholder="Via URL" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/' + this.value)"><span class="tooltiptext">Enter a URL for the set symbol</span></div>
<div class="tooltip"><input type="text" class="input text" id="inputSetCode" placeholder="Via Set Code" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + this.value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)"><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" id="inputSetRarity" placeholder="Rarity" onchange="whiteToTransparent(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + this.value)"><span class="tooltiptext">C, U, R, M, or S<br>(Not every set has every rarity)</span></div>
<div class="tooltip"><button class="button" onclick="randomSet()">Random</button><span class="tooltiptext">Use a random set symbol and rarity</span></div>
</div>
<div class="bar"></div>
</div>
<div>
@@ -95,13 +101,12 @@
</div>
</div>
<div class="layer">
This is a layer!
<div class="title">Welcome to Card Conjurer!</div>
</div>
<div class="layer">
This is another layer!
</div>
<div class="layer">
This is yet another layer!
<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, but it can still do quite a bit!
</div>
</div>
</div>
</body>