Implemented removing of cards and decks

This commit is contained in:
Djeeberjr 2021-11-14 16:36:39 +01:00
parent 0acc326914
commit eebc68e4ad
3 changed files with 20 additions and 4 deletions

View File

@ -10,11 +10,13 @@ interface Props {
card: Card card: Card
side: Side side: Side
onChange?: (newCard: Card)=>void onChange?: (newCard: Card)=>void
onRemove?: ()=>void
} }
const CardComp: React.FC<Props> = ({card,side,onChange}) => { const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
return ( return (
<div className="bg-blue-500 m-1 p-1"> <div className="bg-blue-500 m-1 p-1">
<span className="float-right cursor-pointer" onClick={()=>{onRemove?.()}}>X</span>
<span className="font-bold"><TextEdit <span className="font-bold"><TextEdit
text={card.title} text={card.title}
onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))} onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))}

View File

@ -8,22 +8,30 @@ interface Props {
cardGroup: CardGroup cardGroup: CardGroup
side: Side side: Side
onChange?: (newCardGroup: CardGroup)=>void onChange?: (newCardGroup: CardGroup)=>void
onRemove?: ()=>void
} }
const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange}) => { const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
return ( return (
<div className="bg-red-500 m-1 p-1"> <div className="bg-red-500 m-1 p-1">
<span className="float-right cursor-pointer" onClick={()=>onRemove?.()} >X</span>
Num: <NumEdit value={cardGroup.numInDeck} Num: <NumEdit value={cardGroup.numInDeck}
onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))} onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))}
/> />
<div className="flex"> <div className="flex">
{cardGroup.cards.map((card,index) => {cardGroup.cards.map((card,index) =>
<CardComp card={card} side={side} onChange={(newCard)=>{ <CardComp card={card} side={side}
onChange={(newCard)=>{
onChange?.(new CardGroup( onChange?.(new CardGroup(
cardGroup.numInDeck, cardGroup.numInDeck,
...cardGroup.cards.map((e,i)=>i===index?newCard:e)) ...cardGroup.cards.map((e,i)=>i===index?newCard:e))
) )
}} /> }}
onRemove={()=>onChange?.(new CardGroup(
cardGroup.numInDeck,
...cardGroup.cards.filter((e,i)=>i!==index))
)}
/>
)} )}
</div> </div>
</div> </div>

View File

@ -29,6 +29,12 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
...deck.cardGroups.map((e,i)=>i===index?newGroup:e) ...deck.cardGroups.map((e,i)=>i===index?newGroup:e)
)) ))
}} }}
onRemove={()=>{
onChange?.(new Deck(
deck.numDefusers,
...deck.cardGroups.filter((e,i)=>i!==index)
))
}}
/> />
)} )}
</div> </div>