diff --git a/creator/index.php b/creator/index.php index e71138c7..84e36ff3 100644 --- a/creator/index.php +++ b/creator/index.php @@ -99,7 +99,7 @@
Upload custom frame images
- +
@@ -159,7 +159,7 @@
Choose/upload your art
- +
Or enter a card name (and index)
@@ -188,7 +188,7 @@
Choose/upload your set symbol
- +
Or enter a set code/rarity
@@ -214,7 +214,7 @@
Choose/upload your watermark
- +
diff --git a/css/style-3.css b/css/style-4.css similarity index 95% rename from css/style-3.css rename to css/style-4.css index 734ed2d9..2784d699 100644 --- a/css/style-3.css +++ b/css/style-4.css @@ -264,8 +264,8 @@ a:hover { .circle { z-index: 5; position: fixed; - right: 2rem; - top: 2rem; + right: 0; + top: 0; padding: 0; background: var(--color-primary); border-radius: 100%; @@ -278,8 +278,8 @@ a:hover { } .hamburger.opened + .circle { padding: var(--window-diagonal-size); - right: calc(2rem - var(--window-diagonal-size)); - top: calc(2rem - var(--window-diagonal-size)); + right: calc(0px - var(--window-diagonal-size)); + top: calc(0px - var(--window-diagonal-size)); transition: 0.75s cubic-bezier(.53,.47,.76,-0.52); } /*Menus*/ @@ -311,6 +311,32 @@ a:hover { .main-menu > h2 { margin-top: 4rem; } +/*notifications*/ +.notification-container { + position: fixed; + z-index: 10; + bottom: 0; + left: 1.5rem; + width: calc(100vw - 3rem); + max-height: 75vh; + overflow-y: scroll; + transition: 0.5s; +} +.notification { + border-top: 0.25rem solid var(--color-selected); + background: var(--input-background); + display: grid; + grid-template-columns: auto 2rem; + transition: 0.5s; +} +.notification > h3 { + text-align: center; + user-select: none; + cursor: pointer; +} +.notification.hidden { + opacity: 0; +} /*Inputs*/ .input { box-sizing: border-box; @@ -354,7 +380,7 @@ a:hover { input[type=checkbox].input { /*nothing for now*/ } -.input:not([type=text]):not([type=number]) { +.input:not([type=text]):not([type=number]):not([type=url]) { cursor: pointer; } textarea.input { diff --git a/globalHTML/footer.php b/globalHTML/footer.php index d9836b7f..138fb4c5 100644 --- a/globalHTML/footer.php +++ b/globalHTML/footer.php @@ -1,4 +1,4 @@ -
\ No newline at end of file diff --git a/js/creator.js b/js/creator.js index d1de7d62..bab76f4a 100644 --- a/js/creator.js +++ b/js/creator.js @@ -217,7 +217,8 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) { var manaSymbol = {}; manaSymbol.name = item.split('.')[0]; if (manaSymbol.name.includes('/')) { - manaSymbol.name = manaSymbol.name.split('/')[1]; + manaSymbol.name = manaSymbol.name.split('/'); + manaSymbol.name = manaSymbol.name[manaSymbol.name.length - 1]; } manaSymbol.width = size[0]; manaSymbol.height = size[1]; @@ -226,9 +227,6 @@ function loadManaSymbols(manaSymbolPaths, size = [1, 1]) { var manaSymbolPath = '/img/manaSymbols/' + item; if (!manaSymbolPath.includes('.png')) { manaSymbolPath += '.svg'; - // manaSymbol.image.onload = function() { - // console.log(this); - // } } manaSymbol.image.src = fixUri(manaSymbolPath); manaSymbols.push(manaSymbol); @@ -939,8 +937,8 @@ function drawCard() { } //DOWNLOADING async function downloadCard() { - if (card.infoArtist.replace(/ /g, '') == '' && !card.artSource.includes('/img/blank.png')) { - alert('You must credit an artist before downloading!' + ' ' + card.artSource); + if (card.infoArtist.replace(/ /g, '') == '' && !card.artSource.includes('/img/blank.png') && !card.artZoom == 0) { + notify('You must credit an artist before downloading!'); } else { var download = document.createElement('a'); var imageName = card.text.title.text; @@ -1177,7 +1175,6 @@ function imageURL(url, destination, otherParams) { if (params.get('noproxy') != '') { imageurl = 'https://cors-anywhere.herokuapp.com/' + url; } - console.log(imageurl) destination(imageurl, otherParams); } async function imageLocal(event, destination, otherParams) { @@ -1206,7 +1203,7 @@ function fetchScryfallData(cardName, callback = console.log) { callback(JSON.parse(this.responseText)); // JSON.parse(this.responseText); } else if (this.readyState == 4 && this.status == 404) { - alert('No cards found for "' + cardName + '"'); + notify('No cards found for "' + cardName + '"'); } } xhttp.open('GET', 'https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D' + cardName.replace(/ /g, '_'), true); diff --git a/js/frames/groupPlaneswalker.js b/js/frames/groupPlaneswalker.js index eb730b8b..a53cf2de 100644 --- a/js/frames/groupPlaneswalker.js +++ b/js/frames/groupPlaneswalker.js @@ -2,4 +2,5 @@ loadFramePacks([ {name:'Regular Frames', value:'PlaneswalkerRegular'}, {name:'Nickname Frames', value:'PlaneswalkerNickname'}, {name:'Tall Frames', value:'PlaneswalkerTall'} -]) \ No newline at end of file +]) +notify('When you load a Planeswalker frame version, a "Planeswalker" tab will appear. This tab controls the placement and loyalty costs for Planeswalker abilities.') \ No newline at end of file diff --git a/js/frames/groupSaga.js b/js/frames/groupSaga.js index 4d81dff1..f36ae9d1 100644 --- a/js/frames/groupSaga.js +++ b/js/frames/groupSaga.js @@ -4,4 +4,5 @@ loadFramePacks([ {name:'Legend Crowns', value:'M15LegendCrowns'}, {name:'Inner Crowns', value:'M15InnerCrowns'}, {name:'Holo Stamps', value:'M15HoloStamps'} -]) \ No newline at end of file +]) +notify('When you load the Saga frame version, a "Saga" tab will appear. This tab controls the placement and chapter counts for Saga chapters.') \ No newline at end of file diff --git a/js/frames/manaSymbolsM21.js b/js/frames/manaSymbolsM21.js index ddbd71d9..93dfa225 100644 --- a/js/frames/manaSymbolsM21.js +++ b/js/frames/manaSymbolsM21.js @@ -2,6 +2,6 @@ if (!card.manaSymbols.includes('/js/frames/manaSymbolsM21.js')) { card.manaSymbols.push('/js/frames/manaSymbolsM21.js'); } -if (findManaSymbolIndex('fw') == -1) { +if (findManaSymbolIndex('m21w') == -1) { loadManaSymbols(['m21/m21w.png', 'm21/m21u.png', 'm21/m21b.png', 'm21/m21r.png', 'm21/m21g.png', 'm21/m210.png', 'm21/m211.png', 'm21/m212.png', 'm21/m213.png', 'm21/m214.png', 'm21/m215.png', 'm21/m216.png', 'm21/m217.png', 'm21/m218.png', 'm21/m219.png', 'm21/m21x.png', 'm21/dark/dm21w.png', 'm21/dark/dm21u.png', 'm21/dark/dm21b.png', 'm21/dark/dm21r.png', 'm21/dark/dm21g.png', 'm21/dark/dm210.png', 'm21/dark/dm211.png', 'm21/dark/dm212.png', 'm21/dark/dm213.png', 'm21/dark/dm214.png', 'm21/dark/dm215.png', 'm21/dark/dm216.png', 'm21/dark/dm217.png', 'm21/dark/dm218.png', 'm21/dark/dm219.png', 'm21/dark/dm21x.png']); } \ No newline at end of file diff --git a/js/frames/packFutureRegular.js b/js/frames/packFutureRegular.js index bde3716b..8f31e1a4 100644 --- a/js/frames/packFutureRegular.js +++ b/js/frames/packFutureRegular.js @@ -34,6 +34,7 @@ document.querySelector('#loadFrameVersion').onclick = async function() { //sets card version card.version = 'futureRegular'; loadScript('/js/frames/manaSymbolsFuture.js'); + notify('The Future version adds special mana symbols. To use them, place an "F" before the following mana symbols: wubrg, 0-20, x, and hybrid mana symbols.'); //art bounds card.artBounds = {x:0.086, y:0.0843, width:0.8714, height:0.5853}; autoFitArt(); diff --git a/js/frames/packM21.js b/js/frames/packM21.js index 20199cea..1561ac2d 100644 --- a/js/frames/packM21.js +++ b/js/frames/packM21.js @@ -29,6 +29,7 @@ document.querySelector('#loadFrameVersion').onclick = async function() { //sets card version card.version = 'm21'; loadScript('/js/frames/manaSymbolsM21.js'); + notify('The M21 version adds special mana symbols. To use them, place an "M21" or "DM21" before the following mana symbols: wubrg, 0-9, and x.'); //art bounds card.artBounds = {x:0.0767, y:0.1129, width:0.8476, height:0.4429}; autoFitArt(); diff --git a/js/frames/versionSaga.js b/js/frames/versionSaga.js index e098286b..a1cf221e 100644 --- a/js/frames/versionSaga.js +++ b/js/frames/versionSaga.js @@ -8,7 +8,7 @@ if (!loadedVersions.includes('/js/frames/versionSaga.js')) { newHTML.classList.add('hidden'); newHTML.innerHTML = `
-
Adjust the height (first input) and loyalty chapter count (second input) of each Saga ability
+
Adjust the height (first input) and chapter count (second input) of each Saga ability
First Ability:
diff --git a/js/main-1.js b/js/main-1.js new file mode 100644 index 00000000..93d5276a --- /dev/null +++ b/js/main-1.js @@ -0,0 +1,32 @@ +function toggleMenu() { + if (document.querySelector('.hamburger').classList.contains('opened')) { + document.querySelector('.hamburger').classList.remove('opened'); + Array.from(document.querySelectorAll('.menu-visible')).forEach(element => element.classList.remove('menu-visible')); + } else { + document.documentElement.style.setProperty('--window-diagonal-size', (Math.floor(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2)) + 100) + 'px'); + document.querySelector('.hamburger').classList.add('opened'); + document.querySelector('.menu').classList.add('menu-visible'); + } +} +function notify(message = '') { + var notification = document.createElement('div'); + notification.classList = 'notification padding'; + var notificationMessage = document.createElement('h4'); + notificationMessage.innerHTML = message; + notification.appendChild(notificationMessage); + var close = document.createElement('h3'); + close.innerHTML = 'X'; + close.onclick = closeNotification; + notification.appendChild(close); + document.querySelector('.notification-container').appendChild(notification); +} +function closeNotification(event) { + var target = event.target.closest('.notification'); + target.classList.add('hidden'); + setTimeout(function(){target.remove();}, 500); +} +window.onload = function() { + Array.from(document.querySelectorAll('input')).forEach(element => { + element.autocomplete = 'off'; + }); +} diff --git a/js/main.js b/js/main.js deleted file mode 100644 index b45848c5..00000000 --- a/js/main.js +++ /dev/null @@ -1,10 +0,0 @@ -function toggleMenu() { - if (document.querySelector('.hamburger').classList.contains('opened')) { - document.querySelector('.hamburger').classList.remove('opened'); - Array.from(document.querySelectorAll('.menu-visible')).forEach(element => element.classList.remove('menu-visible')); - } else { - document.documentElement.style.setProperty('--window-diagonal-size', (Math.floor(Math.sqrt(window.innerWidth ** 2 + window.innerHeight ** 2)) + 100) + 'px'); - document.querySelector('.hamburger').classList.add('opened'); - document.querySelector('.menu').classList.add('menu-visible'); - } -} \ No newline at end of file diff --git a/theme/index.php b/theme/index.php index 1a0b6f59..0ddce1df 100644 --- a/theme/index.php +++ b/theme/index.php @@ -15,7 +15,7 @@

Enter a background image (URL ONLY)

- +

Shift the Background's Hue

Enable Rainbow-Mode