Load plugin from CDN

public/ui/animations.js

@@ -1,13 +1,17 @@
 import gsap from './../web_modules/gsap.js'
 import {Draggable} from './../web_modules/gsap/Draggable.js'
-import {Flip} from './../web_modules/gsap/Flip.js'
+// import {Flip} from './../web_modules/gsap/Flip.js'
+import Flip from 'https://slaytheweb-assets.netlify.app/gsap/Flip.js'
 
 // This file contains some resuable animations/effects.
 // https://greensock.com/cheatsheet/
 
 // Don't forget to register plugins.
 gsap.registerPlugin(Draggable)
-gsap.registerPlugin(Flip)
+
+if (typeof Flip !== 'undefined') {
+	gsap.registerPlugin(Flip)
+}
 
 // Fly in the cards from the left (draw pile) to your hand.
 gsap.registerEffect({
@@ -69,24 +73,25 @@ gsap.registerEffect({
 	name: 'playCard',
 	effect: (targets, config) => {
 		const tl = gsap.timeline()
-		return tl.to(targets, {
-			duration: 0.6,
-			y: '-=100',
-			// x: 0,
-			rotation: 50,
-			scale: 0.8,
-			ease: 'power3.out',
-			onComplete: config.onComplete,
-		})
-		.to(targets, {
-			delay: -0.3,
-			duration: 0.8,
-			scale: 0.5,
-			rotation: 90,
-			x: window.innerWidth,
-			y: window.innerHeight,
-			ease: 'power3.inOut',
-		})
+		return tl
+			.to(targets, {
+				duration: 0.6,
+				y: '-=100',
+				// x: 0,
+				rotation: 50,
+				scale: 0.8,
+				ease: 'power3.out',
+				onComplete: config.onComplete,
+			})
+			.to(targets, {
+				delay: -0.3,
+				duration: 0.8,
+				scale: 0.5,
+				rotation: 90,
+				x: window.innerWidth,
+				y: window.innerHeight,
+				ease: 'power3.inOut',
+			})
 	},
 })
 

public/ui/app.js

@@ -1,7 +1,7 @@
 // Third party dependencies
 import {html, Component} from '../../web_modules/htm/preact/standalone.module.js'
 import gsap from './animations.js'
-import {Flip} from './../web_modules/gsap/Flip.js'
+import Flip from 'https://slaytheweb-assets.netlify.app/gsap/Flip.js'
 
 // Game logic
 import createNewGame from '../game/index.js'
@@ -70,25 +70,35 @@ stw.dealCards()
 		// Play the card.
 		const card = this.state.hand.find((c) => c.id === cardId)
 		this.game.enqueue({type: 'playCard', card, target})
+
+		const supportsFlip = typeof Flip !== 'undefined'
+		let flip
+
 		// For the hand animation later.
-		const flip = Flip.getState('.Hand .Card')
+		if (supportsFlip) flip = Flip.getState('.Hand .Card')
+
 		// Create a clone on top of the card to animate.
 		const clone = cardElement.cloneNode(true)
 		document.body.appendChild(clone)
-		Flip.fit(clone, cardElement, {absolute: true})
+		if (supportsFlip) Flip.fit(clone, cardElement, {absolute: true})
+
 		// Update state and re-enable dragdrop
 		this.update(() => {
 			enableDragDrop(this.base, this.playCard)
+
 			// Animate cloned card away
 			gsap.effects.playCard(clone).then(() => {
 				clone.parentNode.removeChild(clone)
 			})
+
 			// Reposition hand
-			Flip.from(flip, {
-				duration: 0.3,
-				ease: 'power3.inOut',
-				absolute: true
-			})
+			if (supportsFlip) {
+				Flip.from(flip, {
+					duration: 0.3,
+					ease: 'power3.inOut',
+					absolute: true,
+				})
+			}
 		})
 	}
 	endTurn() {