fix(ui): fix dragging a card showing the wrong cursor

src/ui/UiState.ts

@@ -175,23 +175,23 @@ export class UiState {
 
 	addJoker (joker?: Joker) {
 		this.jokerContainer.insertAdjacentHTML('beforeend', '<joker-card></joker-card>')
-		const jokerEl = this.jokerContainer.children[this.jokerContainer.children.length - 1]
+		const jokerEl = this.jokerContainer.lastElementChild
 		if (joker && jokerEl instanceof JokerCard) {
 			jokerEl.setJoker(joker)
 		}
 	}
 
 	addCard (card?: Card, isPlayed?: boolean) {
 		this.playingCardContainer.insertAdjacentHTML('beforeend', '<playing-card></playing-card>')
-		const el = this.playingCardContainer.children[this.playingCardContainer.children.length - 1]
+		const el = this.playingCardContainer.lastElementChild
 		if (card && el instanceof PlayingCard) {
 			el.setCard(card, isPlayed)
 		}
 	}
 
 	addHandLevel (handName: HandName, handLevel: { level: number, plays: number }) {
 		this.handLevelContainer.insertAdjacentHTML('beforeend', '<hand-level></hand-level>')
-		const el = this.handLevelContainer.children[this.handLevelContainer.children.length - 1]
+		const el = this.handLevelContainer.lastElementChild
 		if (el instanceof HandLevel) {
 			el.setHandLevel(handName, handLevel)
 		}

src/ui/components/DraggableCard.ts

@@ -20,30 +20,31 @@ export class DraggableCard extends HTMLElement {
 		}
 	}
 
-	handleDragStart (event: DragEvent) {
+	handleDragStart = (event: DragEvent) => {
 		if (event.dataTransfer === null || !(event.target instanceof Element)) {
 			return
 		}
 
 		if (this.container) {
-			const draggedElIndex = Array.from(this.container.children).findIndex((el) => el === event.target)
-			if (draggedElIndex !== -1) {
+			const draggedEl = Array.from(this.container.children).find((el) => el === event.target)
+			if (draggedEl) {
 				event.dataTransfer.effectAllowed = 'move'
 				event.dataTransfer.dropEffect = 'move'
-				event.dataTransfer.setData('text/plain', String(draggedElIndex))
+				event.dataTransfer.setData('text/plain', draggedEl.id)
 			}
 		}
 	}
 
-	handleDragEnd (event: DragEvent) {
+	handleDragEnd = (event: DragEvent) => {
 		const draggedEl = getDragEventData(event, this.container)
 		if (draggedEl) {
 			drop(this.container, draggedEl, event.clientX)
 		}
 	}
 
-	handleDragOver (event: DragEvent) {
+	handleDragOver = (event: DragEvent) => {
 		if (getDragEventData(event, this.container)) {
+			// **Allow** dropping off an element to occur
 			event.preventDefault()
 		}
 	}
@@ -54,11 +55,12 @@ function getDragEventData (event: DragEvent, container: Element): Element | null
 		return null
 	}
 
-	const draggedElIndex = Number(event.dataTransfer.getData('text/plain'))
-	if (!Number.isNaN(draggedElIndex) && container) {
-		const draggedEl = container.children[draggedElIndex]
+	const draggedElId = event.dataTransfer.getData('text/plain')
+	if (draggedElId && container) {
+		const draggedEl = Array.from(container.children).find((el) => el.id === draggedElId)
 
 		if (draggedEl) {
+			console.log('Allow!')
 			return draggedEl
 		}
 	}

src/ui/components/JokerCard.ts

@@ -28,9 +28,10 @@ export class JokerCard extends DraggableCard {
 
 		const template = document.querySelector('template#joker') as HTMLTemplateElement
 		this.fragment = template.content.cloneNode(true) as Element
+		const id = uniqueId()
+		this.id = `joker-card-${id}`
 		this.classList.add('card')
 		this.draggable = true
-		const id = uniqueId()
 
 		this.removeButton = this.fragment.querySelector('[data-remove-button]') as HTMLButtonElement
 		this.removeButton.addEventListener('click', () => this.remove())

src/ui/components/PlayingCard.ts

@@ -26,9 +26,10 @@ export class PlayingCard extends DraggableCard {
 
 		const template = document.querySelector('template#card') as HTMLTemplateElement
 		this.fragment = template.content.cloneNode(true) as Element
+		const id = uniqueId()
+		this.id = `playing-card-${id}`
 		this.classList.add('card')
 		this.draggable = true
-		const id = uniqueId()
 
 		this.removeButton = this.fragment.querySelector('[data-remove-button]') as HTMLButtonElement
 		this.removeButton.addEventListener('click', () => this.remove())