From 07cb9f6da4d4f3e34dae58d38f3d9be478f1fd03 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Fri, 18 Dec 2020 10:49:23 -0800 Subject: [PATCH] fixes --- .htaccess | 2 +- css/style.css | 2 +- data/scripts/main.js | 33 ++++++++++------- js/creator.js | 60 ++++++++++++++++++------------- js/frames/packCommanderLegends.js | 32 ++++++++--------- test.html | 2 +- 6 files changed, 75 insertions(+), 56 deletions(-) diff --git a/.htaccess b/.htaccess index 8c0722c5..494493d3 100644 --- a/.htaccess +++ b/.htaccess @@ -1,4 +1,4 @@ -ErrorDocument 404 https://cardconjurer.com/404.php +ErrorDocument 404 /404.php #YEAR diff --git a/css/style.css b/css/style.css index 27ee60e2..a147b557 100644 --- a/css/style.css +++ b/css/style.css @@ -59,7 +59,7 @@ z-index: -1; width: 100vw; height: 100vh; - background: #35603E;/*url('/img/lowpolyBackground.svg');*/ + background: url('/img/lowpolyBackground.svg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; diff --git a/data/scripts/main.js b/data/scripts/main.js index 83e5887c..daad5dfc 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -23,6 +23,15 @@ var totalShift = [0, 0] date = new Date() var cornerCutout = new Image() 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 var URLParams = new URLSearchParams(window.location.search) @@ -33,11 +42,11 @@ function addToManaSymbolList(folderPath, newManaSymbolList) { if (newManaSymbolList[i].includes('.svg')) { manaSymbolCodeList.push(newManaSymbolList[i].replace('.svg', '')) manaSymbolImageList.push(new Image()) - manaSymbolImageList[manaSymbolImageList.length - 1].src = folderPath + newManaSymbolList[i] + manaSymbolImageList[manaSymbolImageList.length - 1].src = fixUri(folderPath + newManaSymbolList[i]) } else { manaSymbolCodeList.push(newManaSymbolList[i]) 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 watermarkDrawX = 0, watermarkDrawY = 0, watermarkDrawWidth = 0, watermarkDrawHeight = 0 var cardArt = new Image() -cardArt.src = '/data/images/cardImages/blank.png' +cardArt.src = fixUri('/data/images/cardImages/blank.png') var setSymbol = new Image() -setSymbol.src = '/data/images/cardImages/blank.png' +setSymbol.src = fixUri('/data/images/cardImages/blank.png') var watermark = new Image() -watermark.src = '/data/images/cardImages/blank.png' +watermark.src = fixUri('/data/images/cardImages/blank.png') cardArt.crossOrigin = "anonymous" setSymbol.crossOrigin = "anonymous" watermark.crossOrigin = "anonymous" @@ -106,16 +115,16 @@ function setSymbolFromGatherer() { if (document.getElementById('inputSetRarity').value == '') { newSetSymbolSource += 'c' } - setSymbol.src = newSetSymbolSource + '.png' + setSymbol.src = (newSetSymbolSource + '.png') } else if (document.getElementById('inputSetCode').value.toLowerCase() == 'none') { - setSymbol.src = '/data/images/cardImages/blank.png' + setSymbol.src = ('/data/images/cardImages/blank.png') } 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 // 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 () { - this.src = '/data/images/cardImages/blank.png' + this.src = fixUri('/data/images/cardImages/blank.png') } setSymbol.onload = function() { 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) { this.name = displayName this.image = new Image() - this.image.src = imageSource - this.imageSource = imageSource + this.image.src = fixUri(imageSource) + this.imageSource = fixUri(imageSource) this.x = x this.y = y this.width = width @@ -323,7 +332,7 @@ class frameImage { if (this.name == 'custom') { this.image.crossOrigin = 'anonymous' } - this.image.src = imageSource + this.image.src = fixUri(imageSource) this.x = x this.y = y this.width = width @@ -380,7 +389,7 @@ function loadMaskImages(listOfMasks) { for (var i = 0; i < listOfMasks.length; i++) { if (!maskNameList.includes(listOfMasks[i][0])) { var maskImage = new Image() - maskImage.src = listOfMasks[i][1] + maskImage.src = fixUri(listOfMasks[i][1]) maskImageList.push(maskImage) maskNameList.push(listOfMasks[i][0]) } diff --git a/js/creator.js b/js/creator.js index 2c941975..c96d0ea1 100644 --- a/js/creator.js +++ b/js/creator.js @@ -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 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 = new Image(); -art.src = '/img/blank.png'; +art.src = fixUri('/img/blank.png'); art.crossOrigin = 'anonymous'; -art.onerror = function() {this.src = '/img/blank.png';} +art.onerror = function() {this.src = fixUri('/img/blank.png');} art.onload = artEdited; //set symbol setSymbol = new Image() -setSymbol.src = '/img/blank.png'; +setSymbol.src = fixUri('/img/blank.png'); setSymbol.crossOrigin = 'anonymous'; -setSymbol.onerror = function() {this.src = '/img/blank.png';} +setSymbol.onerror = function() {this.src = fixUri('/img/blank.png');} setSymbol.onload = setSymbolEdited; //watermark watermark = new Image() -watermark.src = '/img/blank.png'; +watermark.src = fixUri('/img/blank.png'); watermark.crossOrigin = 'anonymous'; -watermark.onerror = function() {this.src = '/img/blank.png';} +watermark.onerror = function() {this.src = fixUri('/img/blank.png');} watermark.onload = watermarkEdited; //preview canvas var previewCanvas = document.querySelector('#previewCanvas'); @@ -28,17 +39,16 @@ var selectedFrameIndex = 0; var selectedMaskIndex = 0; var selectedTextIndex = 0; //core images/masks -const black = new Image(); black.src = '/img/black.png'; -const blank = new Image(); blank.src = '/img/blank.png'; -const right = new Image(); right.src = '/img/frames/maskRightHalf.png'; -const middle = new Image(); middle.src = '/img/frames/maskMiddleThird.png'; -const corner = new Image(); corner.src = '/img/frames/cornerCutout.png'; +const black = new Image(); black.src = fixUri('/img/black.png'); +const blank = new Image(); blank.src = fixUri('/img/blank.png'); +const right = new Image(); right.src = fixUri('/img/frames/maskRightHalf.png'); +const middle = new Image(); middle.src = fixUri('/img/frames/maskMiddleThird.png'); +const corner = new Image(); corner.src = fixUri('/img/frames/cornerCutout.png'); //for imports var scryfallArt; var scryfallCard; //for text var savedTextXPosition = 0; -var params = new URLSearchParams(window.location.search); //for misc var date = new Date(); //to avoid rerunning special scripts (planeswalker, saga, etc...) @@ -200,7 +210,7 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) { if (!manaSymbolPath.includes('.png')) { manaSymbolPath += '.svg'; } - manaSymbol.image.src = manaSymbolPath; + manaSymbol.image.src = fixUri(manaSymbolPath); manaSymbols.push(manaSymbol); }); } @@ -260,9 +270,9 @@ function loadFramePack(frameOptions = availableFrames) { this.parentElement.classList.remove('hidden'); } 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 { - frameOptionImage.src = item.src; + frameOptionImage.src = fixUri(item.src); } document.querySelector('#frame-picker').appendChild(frameOption); @@ -276,7 +286,7 @@ function frameOptionClicked(event) { } clickedFrameOption.classList.add('selected'); selectedFrameIndex = getElementIndex(clickedFrameOption); - document.querySelector('#mask-picker').innerHTML = '

No Mask

'; + document.querySelector('#mask-picker').innerHTML = '

No Mask

'; selectedMaskIndex = 0; document.querySelector('#selectedPreview').innerHTML = '(Selected: ' + availableFrames[selectedFrameIndex].name + ', No Mask)'; if (availableFrames[selectedFrameIndex].masks) { @@ -289,7 +299,7 @@ function frameOptionClicked(event) { maskOptionImage.onload = function() { 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.innerHTML = item.name; maskOption.appendChild(maskOptionLabel); @@ -325,17 +335,17 @@ function addFrame(additionalMasks = [], loadingFrame = false) { } frameToAdd.masks.forEach(item => { item.image = new Image(); - item.image.src = '/img/blank.png'; + item.image.src = fixUri('/img/blank.png'); item.image.onload = drawFrames; - item.image.src = item.src; + item.image.src = fixUri(item.src); }); frameToAdd.image = new Image(); if (frameToAdd.name == 'Uploaded Image') { frameToAdd.image.crossOrigin = 'anonymous' } - frameToAdd.image.src = '/img/blank.png'; + frameToAdd.image.src = fixUri('/img/blank.png'); frameToAdd.image.onload = drawFrames; - frameToAdd.image.src = frameToAdd.src; + frameToAdd.image.src = fixUri(frameToAdd.src); if (!loadingFrame) { card.frames.unshift(frameToAdd); } @@ -348,16 +358,16 @@ function addFrame(additionalMasks = [], loadingFrame = false) { frameElement.onclick = frameElementClicked; var frameElementImage = document.createElement('img'); if (frameToAdd.noThumb || frameToAdd.src.includes('/img/black.png')) { - frameElementImage.src = frameToAdd.src; + frameElementImage.src = fixUri(frameToAdd.src); } else { - frameElementImage.src = frameToAdd.src.replace('.png', 'Thumb.png'); + frameElementImage.src = fixUri(frameToAdd.src.replace('.png', 'Thumb.png')); } frameElement.appendChild(frameElementImage); var frameElementMask = document.createElement('img'); if (maskThumbnail) { - frameElementMask.src = frameToAdd.masks[0].src.replace('.png', 'Thumb.png'); + frameElementMask.src = fixUri(frameToAdd.masks[0].src.replace('.png', 'Thumb.png')); } else { - frameElementMask.src = '/img/black.png'; + frameElementMask.src = fixUri('/img/black.png'); } frameElement.appendChild(frameElementMask); var frameElementLabel = document.createElement('h4'); diff --git a/js/frames/packCommanderLegends.js b/js/frames/packCommanderLegends.js index dedd8131..936e9f42 100644 --- a/js/frames/packCommanderLegends.js +++ b/js/frames/packCommanderLegends.js @@ -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}; //defines available frames availableFrames = [ - {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:'Black Frame', src:'/img/frames/m15/commanderLegends/FrameB.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:'Multicolored Frame', src:'/img/frames/m15/commanderLegends/FrameM.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:'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:'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:'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:'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:'White Frame', src:'/img/frames/m15/commanderLegends/frameW.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:'Red Frame', src:'/img/frames/m15/commanderLegends/frameR.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:'Artifact Frame', src:'/img/frames/m15/commanderLegends/frameA.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:'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:'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:'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:'Colorless Power/Toughness', src:'/img/frames/m15/commanderLegends/ptC.png', bounds:bounds} ]; //disables/enables the "Load Frame Version" button document.querySelector('#loadFrameVersion').disabled = false; diff --git a/test.html b/test.html index 1f18a40c..2fbc9afe 100644 --- a/test.html +++ b/test.html @@ -42,7 +42,7 @@

Does it work?

-

This is a test page that should only load: test.html, reset.css, style.css, and three ttf fonts.

+

This is a test page that should only load a few files.