Implemented removing of cards and decks
This commit is contained in:
parent
0acc326914
commit
eebc68e4ad
@ -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))}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user