fix(ui): duplicate joker/card not working for newly added jokers/cards

Fixes #15.

src/ui/UiState.ts

@@ -404,10 +404,7 @@ export class UiState {
 		this.#jokerContainer.insertAdjacentHTML('beforeend', '<joker-card></joker-card>')
 		const jokerEl = this.#jokerContainer.lastElementChild
 		if (jokerEl instanceof JokerCard) {
-			if (joker) {
-				jokerEl.setJoker(joker)
-			}
-
+			jokerEl.setJoker(joker)
 			jokerEl.updateState()
 		}
 	}
@@ -416,10 +413,7 @@ export class UiState {
 		this.#playingCardContainer.insertAdjacentHTML('beforeend', '<playing-card></playing-card>')
 		const el = this.#playingCardContainer.lastElementChild
 		if (el instanceof PlayingCard) {
-			if (card) {
-				el.setCard(card)
-			}
-
+			el.setCard(card)
 			el.updateState()
 		}
 	}

src/ui/components/JokerCard.ts

@@ -95,11 +95,11 @@ export class JokerCard extends DraggableCard {
 	}
 
 	get rank () {
-		return this.#definition.hasRankInput ? this.rankSelect.value as Rank : undefined
+		return this.rankSelect.value as Rank
 	}
 
 	get suit () {
-		return this.#definition.hasSuitInput ? this.suitSelect.value as Suit : undefined
+		return this.suitSelect.value as Suit
 	}
 
 	get active () {
@@ -125,8 +125,38 @@ export class JokerCard extends DraggableCard {
 		this.hasRendered = true
 	}
 
-	setJoker (joker: Joker) {
-		this.#joker = joker
+	get joker (): Joker {
+		if (this.#joker) {
+			return this.#joker
+		}
+
+		const index = this.parentElement!.children.length
+		const rarity = this.#definition.rarity
+		const name = this.jokerName
+		const edition = this.edition
+		const plusChips = this.plusChips
+		const plusMultiplier = this.plusMultiplier
+		const timesMultiplier = this.timesMultiplier
+		const active = this.active
+		const rank = this.rank
+		const suit = this.suit
+
+		return {
+			index,
+			rarity,
+			name,
+			edition,
+			plusChips,
+			plusMultiplier,
+			timesMultiplier,
+			active,
+			rank,
+			suit,
+		}
+	}
+
+	setJoker (joker?: Joker) {
+		this.#joker = joker ?? this.joker
 
 		const {
 			name,
@@ -137,7 +167,7 @@ export class JokerCard extends DraggableCard {
 			active,
 			rank,
 			suit,
-		} = joker
+		} = this.#joker
 
 		this.nameSelect.value = name
 		this.editionSelect.value = edition

src/ui/components/PlayingCard.ts

@@ -118,8 +118,34 @@ export class PlayingCard extends DraggableCard {
 		this.hasRendered = true
 	}
 
-	setCard (card: Card) {
-		this.#card = card
+	get card (): Card {
+		if (this.#card) {
+			return this.#card
+		}
+
+		const index = this.parentElement!.children.length
+		const rank = this.rank
+		const suit = this.suit
+		const edition = this.edition
+		const enhancement = this.enhancement
+		const seal = this.seal
+		const debuffed = this.debuffed
+		const played = this.played
+
+		return {
+			index,
+			rank,
+			suit,
+			edition,
+			enhancement,
+			seal,
+			debuffed,
+			played,
+		}
+	}
+
+	setCard (card?: Card) {
+		this.#card = card ?? this.card
 
 		const {
 			rank,
@@ -129,7 +155,7 @@ export class PlayingCard extends DraggableCard {
 			seal,
 			debuffed,
 			played,
-		} = card
+		} = this.#card
 
 		this.playedCheckbox.checked = Boolean(played)
 		this.debuffedCheckbox.checked = debuffed