Add animation for discarding a card

oskarrough · Jun 22, 2020 · 7f65904 · 7f65904
1 parent 89271d6
commit 7f65904
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 20 deletions.
diff --git a/public/ui/animations.js b/public/ui/animations.js
@@ -1,7 +1,21 @@
 import gsap from './../web_modules/gsap.js'
 
+//
+export default gsap
+
+// So we can use it in the browser.
 window.gsap = gsap
 
+// or get other plugins:
+// import Draggable from 'gsap/Draggable'
+// import ScrollTrigger from 'gsap/ScrollTrigger'
+
+// or all tools are exported from the "all" file (excluding bonus plugins):
+// import {gsap, ScrollTrigger, Draggable, MotionPathPlugin} from 'gsap/all'
+
+// don't forget to register plugins
+// gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin)
+
 gsap.registerEffect({
 	name: 'dealCards',
 	effect: (targets, config) => {
@@ -13,7 +27,6 @@ gsap.registerEffect({
 			y: 100,
 			scale: 0.5
 		})
-		console.log('dealCards')
 		return gsap.to(targets, {
 			duration: config.duration,
 			delay: config.delay,
@@ -56,4 +69,23 @@ gsap.registerEffect({
 	}
 })
 
-export default gsap
+
+gsap.registerEffect({
+	name: 'discardCard',
+	effect: (targets, config) => {
+		// debugger
+		// gsap.killTweensOf(targets)
+		// const x = window.innerWidth
+		return gsap.fromTo(targets, {
+			autoAlpha: 1},{
+			duration: 0.8,
+			x: window.innerWidth,
+			y: window.innerHeight,
+			rotation: 90,
+			scale: 0.5,
+			ease: 'power2.inOut',
+			onComplete: config.onComplete
+		})
+	}
+})
+
diff --git a/public/ui/app.js b/public/ui/app.js
@@ -56,10 +56,13 @@ export default class App extends Component {
 		this.game.undo()
 		this.setState(this.game.state)
 	}
-	playCard(cardId, target) {
-		const card = this.state.hand.find((c) => c.id === cardId)
-		this.game.enqueue({type: 'playCard', card, target})
-		this.dequeue()
+	playCard(cardId, target, cardElement) {
+		const onComplete = () => {
+			const card = this.state.hand.find(c => c.id === cardId)
+			this.game.enqueue({type: 'playCard', card, target})
+			this.dequeue()
+		}
+		gsap.effects.discardCard(cardElement, {onComplete})
 	}
 	endTurn() {
 		gsap.effects.discardHand('.Hand .Card', {

diff --git a/public/ui/dragdrop.js b/public/ui/dragdrop.js
@@ -46,9 +46,11 @@ export default class App extends Component {
 				onAdd(event) {
 					const {item, to} = event
 					const index = Array.from(to.parentNode.children).indexOf(to)
-					let target = to.dataset.type + index
+					const target = to.dataset.type + index
+					// Remove active class from any other targets.
 					targets.forEach((t) => t.classList.remove(overClass))
-					onAdd(item.dataset.id, target)
+					// Callback
+					onAdd(item.dataset.id, target, item)
 				},
 			})
 		})

diff --git a/public/ui/index.css b/public/ui/index.css
@@ -421,11 +421,13 @@ h2 {
 }
 
 .Card.sortable-drag {
-	opacity: 1;
+	opacity: 0.5;
 }
 /* Don't show copy of the dragged card on target */
 .Target .Card {
-	display: none;
+	position: absolute;
+	right: 20%;
+	opacity: 0;
 }
 
 /* Overlays */

diff --git a/public/ui/index.js b/public/ui/index.js
@@ -2,16 +2,6 @@ import {html, render, Component} from '../web_modules/htm/preact/standalone.modu
 import gsap from './../web_modules/gsap.js'
 import App from './app.js'
 
-// or get other plugins:
-// import Draggable from 'gsap/Draggable'
-// import ScrollTrigger from 'gsap/ScrollTrigger'
-
-// or all tools are exported from the "all" file (excluding bonus plugins):
-// import {gsap, ScrollTrigger, Draggable, MotionPathPlugin} from 'gsap/all'
-
-// don't forget to register plugins
-// gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin)
-
 // This component decides what to render:
 // A splash screen, a "win" screen or the game/app itself.
 // It also detects if there's a saved game in the URL and allows the player to continue.