From 08476e055276a98d2423303b265f4172bf09b1a2 Mon Sep 17 00:00:00 2001 From: Kyle <41976328+ImKyle4815@users.noreply.github.com> Date: Sun, 23 Jun 2019 17:10:45 -0700 Subject: [PATCH] alerts --- data/main.js | 31 +++++++++++++++---------- data/other/setCodeList.js | 6 ++--- data/site/main.js | 21 +++++++++++++++++ data/site/styles.css | 49 ++++++++++++++++++++++++++++----------- index.html | 10 +++++++- 5 files changed, 88 insertions(+), 29 deletions(-) diff --git a/data/main.js b/data/main.js index ccf1e3b3..1e7bba81 100644 --- a/data/main.js +++ b/data/main.js @@ -20,6 +20,7 @@ function textAreaKeyPressed() { // Anything I Like to Change Often :) // //============================================// randomizeSampleCards(8) +var cookieUpdate = "1" //============================================// // Setup Variables/Canvases // @@ -973,9 +974,9 @@ if (isSafari == true) { textBaselineShift = [-0.17, 0] } } -function setCookie(cookieName, cookieValue) { +function setCookie(cookieName, cookieValue, cookieTime = (5 * 365 * 24 * 60 * 60 * 1000)) { //years*days*hours*minutes*seconds*milliseconds var tempDate = new Date(); - tempDate.setTime(tempDate.getTime() + (5 * 365 * 24 * 60 * 60 * 1000)); //years*days*hours*minutes*seconds*milliseconds + tempDate.setTime(tempDate.getTime() + cookieTime); var expires = "expires=" + tempDate.toUTCString(); document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/"; } @@ -994,25 +995,31 @@ function getCookie(cookieName) { return ""; } function checkCookies() { - if (getCookie("visited") != "true") { + if (getCookie("visits") == "") { if (isMobile == true) { - alert("Thanks for using Card Conjurer! Unfortunately some users have been experiencing difficulty on mobile devices when uploading pictures they took on that mobile device. An easy solution is to quickly edit that picture by cropping it slightly. Otherwise, images from URLs and other sources should work normally.") + createAlert("warning", "Card Conjurer is optimized for computers. Your mobile device should work fine, but if you notice any problems try switching to another device.") } else if (isChrome == false) { - alert("Thanks for using Card Conjurer! Unfortunately different browsers treat custom fonts differently and it appears that you are using a browser other than Chrome. Everything may work perfectly, but if you notice that the text looks odd try switching to Chrome.") + createAlert("warning", "Unfortunately different browsers treat custom fonts differently and it appears that you are using a browser other than Chrome. Everything may work perfectly, but if you notice that the text looks odd try switching to Chrome.") } - setCookie("visited", "true") - setCookie("cookieUpdated5", "true") + setCookie("visits", "1") + setCookie("cookieUpdated", cookieUpdate) } else { - console.log("Welcome back to Card Conjurer!") - if (getCookie("cookieUpdated5") != "true") { - alert("Card Conjurer has been updated since your last visit. Feel free to contact me at CardConjurerMTG@gmail.com if you would like to request a border style or have any questions. \r\n\r\nNewest border style: Old") - setCookie("cookieUpdated5", "true") + var visitCount = parseInt(getCookie("visits")) + visitCount += 1 + setCookie("visits", "" + visitCount) + if (getCookie("cookieUpdated") != cookieUpdate) { + createAlert("info", "Card Conjurer has been updated since your last visit and now features old borders! Feel free to contact me at CardConjurerMTG@gmail.com if you would like to request a border style or have any questions.") + setCookie("cookieUpdated", cookieUpdate) } else { - console.log("There are no new updates since your last visit.") + if (visitCount % 50 == 0) { + //every 50 visits: + createAlert("info", "Thanks for using Card Conjurer! I would love to see some of the custom cards you've made, feel free send some over to CardConjurerMTG@gmail.com") + } } } } + //============================================// // OTHER // //============================================// diff --git a/data/other/setCodeList.js b/data/other/setCodeList.js index 130b0e1e..d642a1a3 100644 --- a/data/other/setCodeList.js +++ b/data/other/setCodeList.js @@ -5,8 +5,8 @@ Duplicates found and removed: ORI, W17, CED Sets not found: Astral, Deckmasters, Duels of the Planeswalkers The codes have been resourced from the following: https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets -Last updated: 5-13-19 -Last set added: WAR +Last updated: 6-23-19 +Last set added: MH1 */ //Common through Rare var setCodeListPreMythic = ['1E', '2E', '2U', '3E', '4E', '5E', '6E', '7E', '8ED', '9ED', '10E', 'AN', @@ -18,7 +18,7 @@ var setCodeListPreMythic = ['1E', '2E', '2U', '3E', '4E', '5E', '6E', '7E', '8ED var setCodeListPostMythic = ['M10', 'M11', 'M12', 'M13', 'M14', 'M15', 'ORI', 'M19', 'ALA', 'CON', 'ARB', 'ZEN', 'WWK', 'ROE', 'SOM', 'MBS', 'NPH', 'ISD', 'DKA', 'AVR', 'RTR', 'GTC', 'DGM', 'THS', 'BNG', 'JOU', 'KTK', 'FRF', 'DTK', 'BFZ', 'OGW', 'SOI', 'EMN', 'KLD', 'AER', 'AKH', 'HOU', 'XLN', 'RIX', 'DOM', -'GRN', 'RNA', /*'MH1',*/ 'GS1', 'MD1', 'DD2', 'DDC', 'DDD', 'DDE', 'DDF', 'DDG', 'DDH', 'DDI', 'DDJ', 'DDK', +'GRN', 'RNA', 'MH1', 'GS1', 'MD1', 'DD2', 'DDC', 'DDD', 'DDE', 'DDF', 'DDG', 'DDH', 'DDI', 'DDJ', 'DDK', 'DDL', 'DDM', 'DDN', 'DDP', 'DDQ', 'DDR', 'DDS', 'DDT', 'DDU', 'SS1', 'H09', 'PD2', 'PD3', 'MMA', 'MM2', 'EMA', 'MM3', 'IMA', 'A25', 'UMA', 'PC2', 'PCA', 'ARC', 'E01', 'CMD', 'CM1', 'C13', 'C14', 'C15', 'C16', 'CMA', 'C17', 'CM2', 'C18', 'CNS', 'CN2', 'E02', 'BBD', 'UST', 'VMA', 'TPR', 'W16', 'W17', diff --git a/data/site/main.js b/data/site/main.js index af48a210..8d28d883 100644 --- a/data/site/main.js +++ b/data/site/main.js @@ -49,5 +49,26 @@ function loadImage(event, destination) { reader.readAsDataURL(input.files[0]) } +//closes alerts +var close = document.getElementsByClassName("closebtn") +for (var i = 0; i < close.length; i++) { + close[i].onclick = function() { + parentDiv = this.parentElement + parentDiv.style.opacity = "0" + setTimeout(function() {parentDiv.style.display = "none"}, 250) + } +} + +function createAlert(type, message) { + var newAlert = document.createElement("DIV") + newAlert.innerHTML = message + newAlert.classList.add("alert", type) + document.getElementById("alertMenu").appendChild(newAlert) + newAlert.onclick = function() { + this.style.opacity = "0" + setTimeout(function() {newAlert.classList.add("hidden")}, 250) + } +} + //things to run at the end: scrollFunction() \ No newline at end of file diff --git a/data/site/styles.css b/data/site/styles.css index 7b4d6cc1..6b891bbf 100644 --- a/data/site/styles.css +++ b/data/site/styles.css @@ -230,6 +230,9 @@ a { width: 100%; z-index: 1000; } + footer > #alertMenu { + position: static; + } #header { max-height: 100px; width: auto; @@ -256,27 +259,23 @@ a { } } -/*Text and stuff :)*/ -.info > * { - font-size: inherit; -} -.info { - font-size: 0.7em; - border-top: 1px solid var(--color-primary); -} -/*Title*/ +/*Header and Footer*/ #header { width: auto; } -header { - border-bottom: 1px solid var(--color-primary); -} -header, .info { +header, .footer { text-align: center; background-color: black; padding: 5px 0px; } +footer * { + font-size: inherit; + padding: 0.25em +} +footer { + font-size: 0.8em; +} /*symbol grid*/ .manaSymbol > img { @@ -316,4 +315,28 @@ header, .info { top: 0.25em; left: 0.5em; height: 1.7em; +} + + + +#alertMenu { + position: fixed; + bottom: 0; +} +.alert { + opacity: 1; + padding: 0.25em; + cursor: pointer; + transition: 0.25s; + border: 0px solid var(--color-select); +} +.alert:hover { + border-width: 0.15em; + padding: 0.1em; +} +.alert.info {background-color: var(--color-primary);} +.alert.warning {background-color: #3b0000;} + +.hidden { + display: none; } \ No newline at end of file diff --git a/index.html b/index.html index eeb00ce2..7969c199 100644 --- a/index.html +++ b/index.html @@ -447,7 +447,15 @@ - + + +