Scryfall links/popups

.gitignore

@@ -1 +1,2 @@
 node_modules
+service-worker.js

css/style.css

@@ -30,6 +30,53 @@ a.tip:after {
   top: -.2em;
 }
 
+/*
+ * card popups
+ */
+
+a.cardname {
+  -webkit-text-decoration-skip: unset;
+  text-decoration: underline;
+  -webkit-text-decoration-style: dotted;
+  text-decoration-style: dotted;
+}
+
+div.tippy-tooltip.scryfall-theme {
+  padding: 0;
+  background-color: transparent;
+  height: 340px;
+}
+
+div.tippy-tooltip.error {
+  border-radius: 12px;
+  color: #fff;
+  text-shadow: 2px 2px 6px #000;
+}
+
+img.cardimage {
+  border-radius: 4.75% / 3.5%;
+  display: block;
+  overflow: hidden;
+}
+
+img.rotate-90cw {
+  -webkit-transform: rotate( 90deg );
+  -ms-transform: rotate( 90deg );
+  transform: rotate( 90deg );
+}
+
+img.rotate-90ccw {
+  -webkit-transform: rotate( -90deg );
+  -ms-transform: rotate( -90deg );
+  transform: rotate( -90deg );
+}
+
+img.rotate-180 {
+  -webkit-transform: rotate( 180deg );
+  -ms-transform: rotate( 180deg );
+  transform: rotate( 180deg );
+}
+
 /*
  * set list
  */

index.html

@@ -166,7 +166,8 @@ <h3 class="mt-5">Banlist</h3>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Kaladesh (KLD)"><i class="ss ss-kld"></i></span>
               <div>
-                <a href="https://deckbox.org/mtg/Aetherworks+Marvel" target="_blank">
+                <a href="https://scryfall.com/search?q=!“Aetherworks Marvel” set:KLD&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Aetherworks Marvel" data-card-set="KLD" target="_blank">
                   Aetherworks Marvel
                 </a>
               </div>
@@ -176,8 +177,9 @@ <h3 class="mt-5">Banlist</h3>
             </li>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Kaladesh (KLD)"><i class="ss ss-kld"></i></span>
-                <div>
-                <a href="https://deckbox.org/mtg/Attune+with+Aether" target="_blank">
+              <div>
+                <a href="https://scryfall.com/search?q=!“Attune with Aether” set:KLD&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Attune with Aether" data-card-set="KLD" target="_blank">
                   Attune with Aether
                 </a>
               </div>
@@ -188,7 +190,8 @@ <h3 class="mt-5">Banlist</h3>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Kaladesh (KLD)"><i class="ss ss-kld"></i></span>
               <div>
-                <a href="https://deckbox.org/mtg/Smuggler%27s+Copter" target="_blank">
+                <a href="https://scryfall.com/search?q=!“Smuggler's Copter” set:KLD&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Smuggler's Copter" data-card-set="KLD" target="_blank">
                   Smuggler's Copter
                 </a>
               </div>
@@ -199,19 +202,24 @@ <h3 class="mt-5">Banlist</h3>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Aether Revolt (AER)"><i class="ss ss-aer"></i></span>
               <div>
-                <a href="https://deckbox.org/mtg/Felidar+Guardian" target="_blank">
+                <a href="https://scryfall.com/search?q=!“Felidar Guardian” set:AER&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Felidar Guardian" data-card-set="AER" target="_blank">
                   Felidar Guardian
                 </a>
               </div>
               <small>
                 Banned for comboing too well with
-                <a href="https://deckbox.org/mtg/Saheeli+Rai" target="_blank">Saheeli Rai</a>.<sup><a target="_blank" href="https://magic.wizards.com/en/articles/archive/news/addendum-april-24-2017-banned-and-restricted-announcement-2017-04-26">2</a></sup>
+                <a href="https://scryfall.com/search?q=!“Saheeli Rai” set:KLD&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Saheeli Rai" data-card-set="KLD" target="_blank">
+                  Saheeli Rai
+                </a>.<sup><a target="_blank" href="https://magic.wizards.com/en/articles/archive/news/addendum-april-24-2017-banned-and-restricted-announcement-2017-04-26">2</a></sup>
               </small>
             </a>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Aether Revolt (AER)"><i class="ss ss-aer"></i></span>
               <div>
-                <a href="https://deckbox.org/mtg/Rogue+Refiner" target="_blank">
+                <a href="https://scryfall.com/search?q=!“Rogue Refiner” set:AER&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Rogue Refiner" data-card-set="AER" target="_blank">
                   Rogue Refiner
                 </a>
               </div>
@@ -222,7 +230,8 @@ <h3 class="mt-5">Banlist</h3>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Hour of Devastation (HOU)"><i class="ss ss-hou"></i></span>
               <div>
-                <a href="https://deckbox.org/mtg/Ramunap+Ruins" target="_blank">
+                <a href="https://scryfall.com/search?q=!“Ramunap Ruins” set:HOU&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Ramunap Ruins" data-card-set="HOU" target="_blank">
                   Ramunap Ruins
                 </a>
               </div>
@@ -233,7 +242,8 @@ <h3 class="mt-5">Banlist</h3>
             <li class="list-group-item">
               <span v-tippy class="icon tip" title="Ixalan (XLN)"><i class="ss ss-xln"></i></span>
               <div>
-                <a href="https://deckbox.org/mtg/Rampaging+Ferocidon" target="_blank">
+                <a href="https://scryfall.com/search?q=!“Rampaging Ferocidon” set:XLN&utm_source=whatsinstandard"
+                class="cardname" data-card-name="Rampaging Ferocidon" data-card-set="XLN" target="_blank">
                   Rampaging Ferocidon
                 </a>
               </div>
@@ -250,17 +260,18 @@ <h3 class="mt-5">Banlist</h3>
         </div>
       </div>
     </div>
+    <div style="display:none" id="js--card-popup"></div>
     <script src="/node_modules/bootstrap-vue/dist/bootstrap-vue.min.js"></script>
     <script src="/node_modules/moment/moment.js"></script>
     <script src="/node_modules/underscore/underscore-min.js"></script>
     <script src="/node_modules/vue/dist/vue.min.js"></script>
     <script src="/node_modules/vue-tippy/dist/vue-tippy.min.js"></script>
 
     <script src="/js/app.js"></script>
+    <script src="/js/cardpopup.js"></script>
     <script src="/js/service-worker.js"></script>
     <script src="/js/tracking.js"></script>
 
-    <script src="https://deckbox.org/assets/external/tooltip.js"></script>
     <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
           (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

js/app.js

@@ -2,7 +2,7 @@ var apiURL = '/api/v5/sets.json'
 var code = Vue.component('set-image', {
   props: ['code'],
   template: `
-    <span v-tippy="{ position: 'left' }" class="icon tip" :title="code">
+    <span v-tippy="{ placement: 'left' }" class="icon tip" :title="code">
       <i class="ss" :class="imsym"></i>
     </span>
   `,

js/cardpopup.js

@@ -0,0 +1,97 @@
+const tip = Tippy( '.cardname', {
+	arrow: false,
+	animateFill: false,
+	followCursor: true,
+	html: '#js--card-popup',
+	placement: 'top',
+	touchHold: true,
+	delay: [ 50, 0 ],
+	animation: 'fade',
+	duration: 0,
+	performance: true,
+	theme: 'scryfall',
+	onShow() {
+		const thisPopper = this,
+			content = thisPopper.querySelector( '.tippy-content' ),
+			target = thisPopper._reference,
+			jsonURI = new URL( 'https://api.scryfall.com/cards/named' );
+		var rotationClass = 'rotate-0';
+		jsonURI.searchParams.set( 'exact', target.dataset.cardName );
+		jsonURI.searchParams.set( 'set', typeof target.dataset.cardSet === 'undefined' ? '' : target.dataset.cardSet );
+		if ( tip.loading || content.innerHTML !== '' ) { return; }
+		tip.loading = true;
+		// Hide the tooltip until we've finished loaded the image
+		thisPopper.style.display = 'none';
+		// fetch() only works on modern browsers
+		fetch( jsonURI )
+			.then( response => {
+				if ( !response.ok ) { throw Error( response.statusText ); }
+				{ return response; }
+			} )
+			.then( response => response.json() )
+			.then( data => {
+				const queryURI = new URL( target.href ),
+					directURI = new URL( data.scryfall_uri );
+				directURI.searchParams.set( 'utm_source', 'whatsinstandard' );
+				if ( data.hasOwnProperty( 'card_faces' ) ) {
+					const isSecondface = data.card_faces[ 0 ].name.replace( /[^a-z]/ig, '' ).toUpperCase() !==
+						decodeURIComponent( target.dataset.cardName ).replace( /[^a-z]/ig, '' ).toUpperCase();
+					if ( data.layout === 'transform' || data.layout === 'double_faced_token' ) {
+						if ( isSecondface ) {
+							target.href = directURI.href + '&back';
+							return data.card_faces[ 1 ].image_uris.normal;
+						} else {
+							return data.card_faces[ 0 ].image_uris.normal;
+						}
+					} else if ( data.layout === 'split' ) {
+						if ( data.card_faces[ 1 ].oracle_text.startsWith( 'Aftermath' ) ) {
+							if ( isSecondface ) { rotationClass = 'rotate-90ccw'; }
+						} else { rotationClass = 'rotate-90cw'; }
+					} else if ( data.layout === 'flip' ) {
+						if ( isSecondface ) { rotationClass = 'rotate-180'; }
+					}
+				}
+				target.href = directURI.href;
+				if ( data.layout === 'planar' ) { rotationClass = 'rotate-90cw'; }
+				return data.image_uris.normal;
+			} )
+			.then( imageURI => fetch( imageURI ) )
+			.then( response => response.blob() )
+			.then( blob => {
+				const url = URL.createObjectURL( blob ),
+					img = document.createElement( 'img' );
+				img.classList.add( 'cardimage', rotationClass );
+				img.src = url;
+				img.alt = target.text;
+				img.width = 244;
+				content.append( img );
+				// Show the tooltip by removing display:none
+				thisPopper.style.removeProperty( 'display' );
+				tip.loading = false;
+			} )
+			.catch( function () {
+				// TODO: This should be localized
+				content.innerHTML = 'Preview error';
+				content.parentNode.classList.remove( 'scryfall-theme' );
+				content.parentNode.classList.add( 'error' );
+				// Show the tooltip by removing display:none
+				thisPopper.style.removeProperty( 'display' );
+				tip.loading = false;
+			} );
+	},
+	onHidden() {
+		const content = this.querySelector( '.tippy-content' );
+		content.innerHTML = '';
+	},
+	// prevent tooltip from displaying over button
+	popperOptions: {
+		modifiers: {
+			preventOverflow: {
+				enabled: false
+			},
+			hide: {
+				enabled: false
+			}
+		}
+	}
+} );