Only highlight dragdrop on valid targets

public/ui/dragdrop.js

@@ -8,56 +8,70 @@ import {canPlayCard} from '../game/utils.js'
 const overClass = 'is-dragOver'
 
 // Makes the card fly back into the hand.
-function cancelDrag(draggable) {
+function animateCardToHand(draggable) {
 	return gsap.to(draggable.target, {x: draggable.startX, y: draggable.startY})
 }
 
+// Nasty but returns the card object from a card DOM element.
+function getCardFromElement(el) {
+	const cardName = el.querySelector('.Card-name').textContent
+	return cards.find((c) => c.name === cardName)
+}
+
+function getTargetStringFromElement(el) {
+	const targetIndex = Array.from(el.parentNode.children).indexOf(el)
+	return el.dataset.type + targetIndex
+}
+
 export default function enableDragDrop(container, onAdd) {
 	const targets = container.querySelectorAll('.Target')
 
-	container.querySelectorAll('.Hand .Card').forEach(card => {
+	container.querySelectorAll('.Hand .Card').forEach((card) => {
 		Draggable.create(card, {
 			// While dragging, highlight any targets we are dragging over.
 			onDrag() {
 				if (this.target.attributes.disabled) {
 					this.endDrag()
 				}
+				const cardEl = this.target
 				let i = targets.length
 				while (--i > -1) {
+					// Highlight only if valid target.
 					if (this.hitTest(targets[i], '50%')) {
-						targets[i].classList.add(overClass)
+						if (canPlayCard(getCardFromElement(cardEl), getTargetStringFromElement(targets[i]))) {
+							targets[i].classList.add(overClass)
+						}
 					} else {
 						targets[i].classList.remove(overClass)
 					}
 				}
 			},
 			onRelease() {
-				// Which target are we dropping the card on?
-				let targetElement = undefined
+				const cardEl = this.target
+
+				// Which element are we dropping on?
+				let targetEl
 				let i = targets.length
 				while (--i > -1) {
 					if (this.hitTest(targets[i], '50%')) {
-						targetElement = targets[i]
+						targetEl = targets[i]
 						break
 					}
 				}
 
-				if (!targetElement) return cancelDrag(this)
+				if (!targetEl) return animateCardToHand(this)
 
-				const cardElement = this.target
-				const targetIndex  = Array.from(targetElement.parentNode.children).indexOf(targetElement)
-				const target = targetElement.dataset.type + targetIndex
-
-				// Check if the card allows us to drop it here.
-				const cardName = cardElement.querySelector('.Card-name').textContent
-				const card = cards.find(c => c.name === cardName)
-				if (!canPlayCard(card, target)) return cancelDrag(this)
-
-				onAdd(cardElement.dataset.id, target, cardElement)
+				// If card is allowed here, trigger the callback with target, else animate back.
+				const targetString = getTargetStringFromElement(targetEl)
+				if (canPlayCard(getCardFromElement(cardEl), targetString)) {
+					onAdd(cardEl.dataset.id, targetString, cardEl)
+				} else {
+					animateCardToHand(this)
+				}
 
 				// Remove active class from any other targets.
-				targets.forEach(t => t.classList.remove(overClass))
-			}
+				targets.forEach((t) => t.classList.remove(overClass))
+			},
 		})
 	})
 }