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

fixes

Browse Source
This commit is contained in:
Kyle
2020-12-18 10:49:23 -08:00
parent 80907f14ba
commit 07cb9f6da4
6 changed files with 75 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.htaccess
View File

@@ -1,4 +1,4 @@
ErrorDocument 404 https://cardconjurer.com/404.php ErrorDocument 404 /404.php
<IfModule mod_headers.c> <IfModule mod_headers.c>
#YEAR #YEAR

2
css/style.css
View File

@@ -59,7 +59,7 @@
z-index: -1; z-index: -1;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: #35603E;/*url('/img/lowpolyBackground.svg');*/ background: url('/img/lowpolyBackground.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;

33
data/scripts/main.js
View File

@@ -23,6 +23,15 @@ var totalShift = [0, 0]
date = new Date() date = new Date()
var cornerCutout = new Image() var cornerCutout = new Image()
cornerCutout.src = '/data/images/cardImages/cornerCutout.png' cornerCutout.src = '/data/images/cardImages/cornerCutout.png'
//To save the server from being overloaded? Maybe?
function fixUri(input) {
var prefix = 'https://raw.githubusercontent.com/ImKyle4815/cardconjurer/master';
if (input.includes(prefix) || input.includes('http') || params.get('testing')) {
return input;
} else {
return prefix + input;
}
}
//URL Parameters //URL Parameters
var URLParams = new URLSearchParams(window.location.search) var URLParams = new URLSearchParams(window.location.search)
@@ -33,11 +42,11 @@ function addToManaSymbolList(folderPath, newManaSymbolList) {
if (newManaSymbolList[i].includes('.svg')) { if (newManaSymbolList[i].includes('.svg')) {
manaSymbolCodeList.push(newManaSymbolList[i].replace('.svg', '')) manaSymbolCodeList.push(newManaSymbolList[i].replace('.svg', ''))
manaSymbolImageList.push(new Image()) manaSymbolImageList.push(new Image())
manaSymbolImageList[manaSymbolImageList.length - 1].src = folderPath + newManaSymbolList[i] manaSymbolImageList[manaSymbolImageList.length - 1].src = fixUri(folderPath + newManaSymbolList[i])
} else { } else {
manaSymbolCodeList.push(newManaSymbolList[i]) manaSymbolCodeList.push(newManaSymbolList[i])
manaSymbolImageList.push(new Image()) manaSymbolImageList.push(new Image())
manaSymbolImageList[manaSymbolImageList.length - 1].src = folderPath + newManaSymbolList[i] + '.png' manaSymbolImageList[manaSymbolImageList.length - 1].src = fixUri(folderPath + newManaSymbolList[i] + '.png')
} }
} }
} }
@@ -76,11 +85,11 @@ var artWidth = cardWidth, artHeight = cardHeight
var setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight var setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight
var watermarkDrawX = 0, watermarkDrawY = 0, watermarkDrawWidth = 0, watermarkDrawHeight = 0 var watermarkDrawX = 0, watermarkDrawY = 0, watermarkDrawWidth = 0, watermarkDrawHeight = 0
var cardArt = new Image() var cardArt = new Image()
cardArt.src = '/data/images/cardImages/blank.png' cardArt.src = fixUri('/data/images/cardImages/blank.png')
var setSymbol = new Image() var setSymbol = new Image()
setSymbol.src = '/data/images/cardImages/blank.png' setSymbol.src = fixUri('/data/images/cardImages/blank.png')
var watermark = new Image() var watermark = new Image()
watermark.src = '/data/images/cardImages/blank.png' watermark.src = fixUri('/data/images/cardImages/blank.png')
cardArt.crossOrigin = "anonymous" cardArt.crossOrigin = "anonymous"
setSymbol.crossOrigin = "anonymous" setSymbol.crossOrigin = "anonymous"
watermark.crossOrigin = "anonymous" watermark.crossOrigin = "anonymous"
@@ -106,16 +115,16 @@ function setSymbolFromGatherer() {
if (document.getElementById('inputSetRarity').value == '') { if (document.getElementById('inputSetRarity').value == '') {
newSetSymbolSource += 'c' newSetSymbolSource += 'c'
} }
setSymbol.src = newSetSymbolSource + '.png' setSymbol.src = (newSetSymbolSource + '.png')
} else if (document.getElementById('inputSetCode').value.toLowerCase() == 'none') { } else if (document.getElementById('inputSetCode').value.toLowerCase() == 'none') {
setSymbol.src = '/data/images/cardImages/blank.png' setSymbol.src = ('/data/images/cardImages/blank.png')
} else { } else {
setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value
// autoCrop(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value) // autoCrop(setSymbol, 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value)
} }
} }
setSymbol.onerror = function () { setSymbol.onerror = function () {
this.src = '/data/images/cardImages/blank.png' this.src = fixUri('/data/images/cardImages/blank.png')
} }
setSymbol.onload = function() { setSymbol.onload = function() {
if (setSymbol.width / setSymbol.height > setSymbolWidth / setSymbolHeight) { if (setSymbol.width / setSymbol.height > setSymbolWidth / setSymbolHeight) {
@@ -199,8 +208,8 @@ class cardImage {
constructor(displayName = 'cardImage', imageSource = '/data/images/cardImages/blank.png', x = 0, y = 0, width = 1, height = 1, opacity = 1, masks = ['Full'], erase = false) { constructor(displayName = 'cardImage', imageSource = '/data/images/cardImages/blank.png', x = 0, y = 0, width = 1, height = 1, opacity = 1, masks = ['Full'], erase = false) {
this.name = displayName this.name = displayName
this.image = new Image() this.image = new Image()
this.image.src = imageSource this.image.src = fixUri(imageSource)
this.imageSource = imageSource this.imageSource = fixUri(imageSource)
this.x = x this.x = x
this.y = y this.y = y
this.width = width this.width = width
@@ -323,7 +332,7 @@ class frameImage {
if (this.name == 'custom') { if (this.name == 'custom') {
this.image.crossOrigin = 'anonymous' this.image.crossOrigin = 'anonymous'
} }
this.image.src = imageSource this.image.src = fixUri(imageSource)
this.x = x this.x = x
this.y = y this.y = y
this.width = width this.width = width
@@ -380,7 +389,7 @@ function loadMaskImages(listOfMasks) {
for (var i = 0; i < listOfMasks.length; i++) { for (var i = 0; i < listOfMasks.length; i++) {
if (!maskNameList.includes(listOfMasks[i][0])) { if (!maskNameList.includes(listOfMasks[i][0])) {
var maskImage = new Image() var maskImage = new Image()
maskImage.src = listOfMasks[i][1] maskImage.src = fixUri(listOfMasks[i][1])
maskImageList.push(maskImage) maskImageList.push(maskImage)
maskNameList.push(listOfMasks[i][0]) maskNameList.push(listOfMasks[i][0])
} }

60
js/creator.js
View File

@@ -1,22 +1,33 @@
//URL Params
var params = new URLSearchParams(window.location.search);
//To save the server from being overloaded? Maybe?
function fixUri(input) {
var prefix = 'https://raw.githubusercontent.com/ImKyle4815/cardconjurer/remake';
if (input.includes(prefix) || input.includes('http') || params.get('testing')) {
return input;
} else {
return prefix + input; //input.replace('/img/frames', prefix + '/img/frames');
}
}
//card object //card object
var card = {width:1500, height:2100, marginX:0, marginY:0, frames:[], artSource:'/img/blank.png', artX:0, artY:0, artZoom:1, setSymbolSource:'/img/blank.png', setSymbolX:0, setSymbolY:0, setSymbolZoom:1, watermarkSource:'/img/blank.png', watermarkX:0, watermarkY:0, watermarkZoom:1, watermarkLeft:'none', watermarkRight:'none', watermarkOpacity:0.4, version:'', manaSymbols:[]}; var card = {width:1500, height:2100, marginX:0, marginY:0, frames:[], artSource:'/img/blank.png', artX:0, artY:0, artZoom:1, setSymbolSource:'/img/blank.png', setSymbolX:0, setSymbolY:0, setSymbolZoom:1, watermarkSource:'/img/blank.png', watermarkX:0, watermarkY:0, watermarkZoom:1, watermarkLeft:'none', watermarkRight:'none', watermarkOpacity:0.4, version:'', manaSymbols:[]};
//art //art
art = new Image(); art = new Image();
art.src = '/img/blank.png'; art.src = fixUri('/img/blank.png');
art.crossOrigin = 'anonymous'; art.crossOrigin = 'anonymous';
art.onerror = function() {this.src = '/img/blank.png';} art.onerror = function() {this.src = fixUri('/img/blank.png');}
art.onload = artEdited; art.onload = artEdited;
//set symbol //set symbol
setSymbol = new Image() setSymbol = new Image()
setSymbol.src = '/img/blank.png'; setSymbol.src = fixUri('/img/blank.png');
setSymbol.crossOrigin = 'anonymous'; setSymbol.crossOrigin = 'anonymous';
setSymbol.onerror = function() {this.src = '/img/blank.png';} setSymbol.onerror = function() {this.src = fixUri('/img/blank.png');}
setSymbol.onload = setSymbolEdited; setSymbol.onload = setSymbolEdited;
//watermark //watermark
watermark = new Image() watermark = new Image()
watermark.src = '/img/blank.png'; watermark.src = fixUri('/img/blank.png');
watermark.crossOrigin = 'anonymous'; watermark.crossOrigin = 'anonymous';
watermark.onerror = function() {this.src = '/img/blank.png';} watermark.onerror = function() {this.src = fixUri('/img/blank.png');}
watermark.onload = watermarkEdited; watermark.onload = watermarkEdited;
//preview canvas //preview canvas
var previewCanvas = document.querySelector('#previewCanvas'); var previewCanvas = document.querySelector('#previewCanvas');
@@ -28,17 +39,16 @@ var selectedFrameIndex = 0;
var selectedMaskIndex = 0; var selectedMaskIndex = 0;
var selectedTextIndex = 0; var selectedTextIndex = 0;
//core images/masks //core images/masks
const black = new Image(); black.src = '/img/black.png'; const black = new Image(); black.src = fixUri('/img/black.png');
const blank = new Image(); blank.src = '/img/blank.png'; const blank = new Image(); blank.src = fixUri('/img/blank.png');
const right = new Image(); right.src = '/img/frames/maskRightHalf.png'; const right = new Image(); right.src = fixUri('/img/frames/maskRightHalf.png');
const middle = new Image(); middle.src = '/img/frames/maskMiddleThird.png'; const middle = new Image(); middle.src = fixUri('/img/frames/maskMiddleThird.png');
const corner = new Image(); corner.src = '/img/frames/cornerCutout.png'; const corner = new Image(); corner.src = fixUri('/img/frames/cornerCutout.png');
//for imports //for imports
var scryfallArt; var scryfallArt;
var scryfallCard; var scryfallCard;
//for text //for text
var savedTextXPosition = 0; var savedTextXPosition = 0;
var params = new URLSearchParams(window.location.search);
//for misc //for misc
var date = new Date(); var date = new Date();
//to avoid rerunning special scripts (planeswalker, saga, etc...) //to avoid rerunning special scripts (planeswalker, saga, etc...)
@@ -200,7 +210,7 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) {
if (!manaSymbolPath.includes('.png')) { if (!manaSymbolPath.includes('.png')) {
manaSymbolPath += '.svg'; manaSymbolPath += '.svg';
} }
manaSymbol.image.src = manaSymbolPath; manaSymbol.image.src = fixUri(manaSymbolPath);
manaSymbols.push(manaSymbol); manaSymbols.push(manaSymbol);
}); });
} }
@@ -260,9 +270,9 @@ function loadFramePack(frameOptions = availableFrames) {
this.parentElement.classList.remove('hidden'); this.parentElement.classList.remove('hidden');
} }
if (!item.noThumb && !item.src.includes('/img/black.png')) { if (!item.noThumb && !item.src.includes('/img/black.png')) {
frameOptionImage.src = item.src.replace('.png', 'Thumb.png'); frameOptionImage.src = fixUri(item.src.replace('.png', 'Thumb.png'));
} else { } else {
frameOptionImage.src = item.src; frameOptionImage.src = fixUri(item.src);
} }
document.querySelector('#frame-picker').appendChild(frameOption); document.querySelector('#frame-picker').appendChild(frameOption);
@@ -276,7 +286,7 @@ function frameOptionClicked(event) {
} }
clickedFrameOption.classList.add('selected'); clickedFrameOption.classList.add('selected');
selectedFrameIndex = getElementIndex(clickedFrameOption); selectedFrameIndex = getElementIndex(clickedFrameOption);
document.querySelector('#mask-picker').innerHTML = '<div class="mask-option selected" onclick="maskOptionClicked(event)"><img src="/img/black.png"><p>No Mask</p></div>'; document.querySelector('#mask-picker').innerHTML = '<div class="mask-option selected" onclick="maskOptionClicked(event)"><img src="' + fixUri('/img/black.png') + '"><p>No Mask</p></div>';
selectedMaskIndex = 0; selectedMaskIndex = 0;
document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)'; document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)';
if (availableFrames[selectedFrameIndex].masks) { if (availableFrames[selectedFrameIndex].masks) {
@@ -289,7 +299,7 @@ function frameOptionClicked(event) {
maskOptionImage.onload = function() { maskOptionImage.onload = function() {
this.parentElement.classList.remove('hidden'); this.parentElement.classList.remove('hidden');
} }
maskOptionImage.src = item.src.replace('.png', 'Thumb.png'); maskOptionImage.src = fixUri(item.src.replace('.png', 'Thumb.png'));
maskOptionLabel = document.createElement('p'); maskOptionLabel = document.createElement('p');
maskOptionLabel.innerHTML = item.name; maskOptionLabel.innerHTML = item.name;
maskOption.appendChild(maskOptionLabel); maskOption.appendChild(maskOptionLabel);
@@ -325,17 +335,17 @@ function addFrame(additionalMasks = [], loadingFrame = false) {
} }
frameToAdd.masks.forEach(item => { frameToAdd.masks.forEach(item => {
item.image = new Image(); item.image = new Image();
item.image.src = '/img/blank.png'; item.image.src = fixUri('/img/blank.png');
item.image.onload = drawFrames; item.image.onload = drawFrames;
item.image.src = item.src; item.image.src = fixUri(item.src);
}); });
frameToAdd.image = new Image(); frameToAdd.image = new Image();
if (frameToAdd.name == 'Uploaded Image') { if (frameToAdd.name == 'Uploaded Image') {
frameToAdd.image.crossOrigin = 'anonymous' frameToAdd.image.crossOrigin = 'anonymous'
} }
frameToAdd.image.src = '/img/blank.png'; frameToAdd.image.src = fixUri('/img/blank.png');
frameToAdd.image.onload = drawFrames; frameToAdd.image.onload = drawFrames;
frameToAdd.image.src = frameToAdd.src; frameToAdd.image.src = fixUri(frameToAdd.src);
if (!loadingFrame) { if (!loadingFrame) {
card.frames.unshift(frameToAdd); card.frames.unshift(frameToAdd);
} }
@@ -348,16 +358,16 @@ function addFrame(additionalMasks = [], loadingFrame = false) {
frameElement.onclick = frameElementClicked; frameElement.onclick = frameElementClicked;
var frameElementImage = document.createElement('img'); var frameElementImage = document.createElement('img');
if (frameToAdd.noThumb || frameToAdd.src.includes('/img/black.png')) { if (frameToAdd.noThumb || frameToAdd.src.includes('/img/black.png')) {
frameElementImage.src = frameToAdd.src; frameElementImage.src = fixUri(frameToAdd.src);
} else { } else {
frameElementImage.src = frameToAdd.src.replace('.png', 'Thumb.png'); frameElementImage.src = fixUri(frameToAdd.src.replace('.png', 'Thumb.png'));
} }
frameElement.appendChild(frameElementImage); frameElement.appendChild(frameElementImage);
var frameElementMask = document.createElement('img'); var frameElementMask = document.createElement('img');
if (maskThumbnail) { if (maskThumbnail) {
frameElementMask.src = frameToAdd.masks[0].src.replace('.png', 'Thumb.png'); frameElementMask.src = fixUri(frameToAdd.masks[0].src.replace('.png', 'Thumb.png'));
} else { } else {
frameElementMask.src = '/img/black.png'; frameElementMask.src = fixUri('/img/black.png');
} }
frameElement.appendChild(frameElementMask); frameElement.appendChild(frameElementMask);
var frameElementLabel = document.createElement('h4'); var frameElementLabel = document.createElement('h4');

32
js/frames/packCommanderLegends.js
View File

@@ -3,22 +3,22 @@ var masks = [{src:'/img/frames/m15/commanderLegends/m15CommanderLegendsMaskFrame
var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733}; var bounds = {x:0.7573, y:0.8848, width:0.188, height:0.0733};
//defines available frames //defines available frames
availableFrames = [ availableFrames = [
{name:'White Frame', src:'/img/frames/m15/commanderLegends/FrameW.png', masks:masks}, {name:'White Frame', src:'/img/frames/m15/commanderLegends/frameW.png', masks:masks},
{name:'Blue Frame', src:'/img/frames/m15/commanderLegends/FrameU.png', masks:masks}, {name:'Blue Frame', src:'/img/frames/m15/commanderLegends/frameU.png', masks:masks},
{name:'Black Frame', src:'/img/frames/m15/commanderLegends/FrameB.png', masks:masks}, {name:'Black Frame', src:'/img/frames/m15/commanderLegends/frameB.png', masks:masks},
{name:'Red Frame', src:'/img/frames/m15/commanderLegends/FrameR.png', masks:masks}, {name:'Red Frame', src:'/img/frames/m15/commanderLegends/frameR.png', masks:masks},
{name:'Green Frame', src:'/img/frames/m15/commanderLegends/FrameG.png', masks:masks}, {name:'Green Frame', src:'/img/frames/m15/commanderLegends/frameG.png', masks:masks},
{name:'Multicolored Frame', src:'/img/frames/m15/commanderLegends/FrameM.png', masks:masks}, {name:'Multicolored Frame', src:'/img/frames/m15/commanderLegends/frameM.png', masks:masks},
{name:'Artifact Frame', src:'/img/frames/m15/commanderLegends/FrameA.png', masks:masks}, {name:'Artifact Frame', src:'/img/frames/m15/commanderLegends/frameA.png', masks:masks},
{name:'Colorless Frame', src:'/img/frames/m15/commanderLegends/FrameC.png', masks:masks}, {name:'Colorless Frame', src:'/img/frames/m15/commanderLegends/frameC.png', masks:masks},
{name:'White Power/Toughness', src:'/img/frames/m15/commanderLegends/PTW.png', bounds:bounds}, {name:'White Power/Toughness', src:'/img/frames/m15/commanderLegends/ptW.png', bounds:bounds},
{name:'Blue Power/Toughness', src:'/img/frames/m15/commanderLegends/PTU.png', bounds:bounds}, {name:'Blue Power/Toughness', src:'/img/frames/m15/commanderLegends/ptU.png', bounds:bounds},
{name:'Black Power/Toughness', src:'/img/frames/m15/commanderLegends/PTB.png', bounds:bounds}, {name:'Black Power/Toughness', src:'/img/frames/m15/commanderLegends/ptB.png', bounds:bounds},
{name:'Red Power/Toughness', src:'/img/frames/m15/commanderLegends/PTR.png', bounds:bounds}, {name:'Red Power/Toughness', src:'/img/frames/m15/commanderLegends/ptR.png', bounds:bounds},
{name:'Green Power/Toughness', src:'/img/frames/m15/commanderLegends/PTG.png', bounds:bounds}, {name:'Green Power/Toughness', src:'/img/frames/m15/commanderLegends/ptG.png', bounds:bounds},
{name:'Multicolored Power/Toughness', src:'/img/frames/m15/commanderLegends/PTM.png', bounds:bounds}, {name:'Multicolored Power/Toughness', src:'/img/frames/m15/commanderLegends/ptM.png', bounds:bounds},
{name:'Artifact Power/Toughness', src:'/img/frames/m15/commanderLegends/PTA.png', bounds:bounds}, {name:'Artifact Power/Toughness', src:'/img/frames/m15/commanderLegends/ptA.png', bounds:bounds},
{name:'Colorless Power/Toughness', src:'/img/frames/m15/commanderLegends/PTC.png', bounds:bounds} {name:'Colorless Power/Toughness', src:'/img/frames/m15/commanderLegends/ptC.png', bounds:bounds}
]; ];
//disables/enables the "Load Frame Version" button //disables/enables the "Load Frame Version" button
document.querySelector('#loadFrameVersion').disabled = false; document.querySelector('#loadFrameVersion').disabled = false;

2
test.html
View File

@@ -42,7 +42,7 @@
<h4 class='padding'>Does it work?</h4> <h4 class='padding'>Does it work?</h4>
</div> </div>
<div class='layer center'> <div class='layer center'>
<h4 class='padding'>This is a test page that should only load: test.html, reset.css, style.css, and three ttf fonts.</h4> <h4 class='padding'>This is a test page that should only load a few files.</h4>
</div> </div>
<footer> <footer>
<div> <div>