From eebc68e4ad511063d4a463a9a73288f74bf2d328 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sun, 14 Nov 2021 16:36:39 +0100
Subject: [PATCH] Implemented removing of cards and decks

---
 src/components/Card.tsx      |  4 +++-
 src/components/CardGroup.tsx | 14 +++++++++++---
 src/components/Deck.tsx      |  6 ++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 93ea42e..f31f220 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -10,11 +10,13 @@ interface Props {
     card: Card
     side: Side
     onChange?: (newCard: Card)=>void
+    onRemove?: ()=>void
 }
 
-const CardComp: React.FC<Props> = ({card,side,onChange}) => {
+const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
     return (
         <div className="bg-blue-500 m-1 p-1">
+            <span className="float-right cursor-pointer" onClick={()=>{onRemove?.()}}>X</span>
             <span className="font-bold"><TextEdit 
                 text={card.title}
                 onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))}
diff --git a/src/components/CardGroup.tsx b/src/components/CardGroup.tsx
index a0d646b..d4b335f 100644
--- a/src/components/CardGroup.tsx
+++ b/src/components/CardGroup.tsx
@@ -8,22 +8,30 @@ interface Props {
 	cardGroup: CardGroup
 	side: Side
 	onChange?: (newCardGroup: CardGroup)=>void
+	onRemove?: ()=>void
 }
 
-const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange}) => {
+const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 	return (
 		<div className="bg-red-500 m-1 p-1">
+			<span className="float-right cursor-pointer" onClick={()=>onRemove?.()} >X</span>
 			Num: <NumEdit value={cardGroup.numInDeck} 
 				onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))}
 			/>
 			<div className="flex">
 				{cardGroup.cards.map((card,index) => 
-					<CardComp card={card} side={side} onChange={(newCard)=>{
+					<CardComp card={card} side={side}
+						onChange={(newCard)=>{
 							onChange?.(new CardGroup(
 								cardGroup.numInDeck,
 								...cardGroup.cards.map((e,i)=>i===index?newCard:e))
 							)
-					}} />
+						}}
+						onRemove={()=>onChange?.(new CardGroup(
+							cardGroup.numInDeck,
+							...cardGroup.cards.filter((e,i)=>i!==index))
+						)}
+					/>
 				)}
 			</div>
 		</div>
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
index e0ebaab..a550323 100644
--- a/src/components/Deck.tsx
+++ b/src/components/Deck.tsx
@@ -29,6 +29,12 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
                                 ...deck.cardGroups.map((e,i)=>i===index?newGroup:e)
                             ))
                         }}
+                        onRemove={()=>{
+                            onChange?.(new Deck(
+                                deck.numDefusers,
+                                ...deck.cardGroups.filter((e,i)=>i!==index)
+                            ))
+                        }}
                     />
                 )}
             </div>