Added NumEdit

src/components/AddItem.tsx

@@ -12,9 +12,7 @@ const AddItem: React.FC<Props> = ({side,onChange}) => {
     const [selected,setSelected] = useState<Item>(Item.DEFAULT_PISTOL)
 
     return (
-        <div
-            className=""
-        >
+        <div>
             <select
                 onChange={(e)=>setSelected(Item[e.target.value as keyof typeof Item])}
             >

src/components/Card.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import ItemToDisplay from "../ItemToDisplay"
 import Card from "../types/Card"
-import Item from "../types/Item"
 import Side from "../types/Side"
 import AddItem from "./AddItem"
 import SwitchButton from "./SwitchButton"

src/components/CardGroup.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import CardGroup from "../types/CardGroup"
 import Side from "../types/Side"
 import CardComp from "./Card"
+import NumEdit from "./NumEdit"
 
 interface Props {
 	cardGroup: CardGroup
@@ -12,7 +13,9 @@ interface Props {
 const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange}) => {
 	return (
 		<div className="bg-red-500 m-1 p-1">
-			Num: {cardGroup.numInDeck}
+			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)=>{

src/components/Deck.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import Deck from "../types/Deck"
 import Side from "../types/Side"
 import CardGroupComp from "./CardGroup"
+import NumEdit from "./NumEdit"
 
 interface Props {
     deck: Deck
@@ -14,7 +15,11 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
     return (
         <div className="bg-green-400 m-1 p-1">
             <span className="font-bold">{title}</span> 
-            { side === Side.CT && <span> D: {deck.numDefusers} </span> }
+            { side === Side.CT && <span> 
+                D: <NumEdit 
+                    value={deck.numDefusers}
+                    onChange={newNum => onChange?.(new Deck(Math.max(newNum,0),...deck.cardGroups))} 
+                /> </span> }
             <div className="flex">
                 {deck.cardGroups.map((group,index) =>
                     <CardGroupComp key={index} cardGroup={group} side={side} 

src/components/NumEdit.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+
+interface Props {
+    value: number
+    onChange?:(newNumer: number)=>void
+}
+
+const NumEdit: React.FC<Props> = ({value,onChange}) => {
+    return (
+        <>
+            <span 
+                className="cursor-pointer select-none"
+                onClick={()=>onChange?.(value - 1)}
+            >-</span>
+            {value}
+            <span 
+                className="cursor-pointer select-none"
+                onClick={()=>onChange?.(value + 1)}
+            >+</span>
+        </>
+    )
+}
+
+export default NumEdit