From 0acc326914888bba5f6a4d9a343099d64f4c8d13 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sun, 14 Nov 2021 16:23:34 +0100
Subject: [PATCH] Added NumEdit

---
 src/components/CardGroup.tsx |  5 ++++-
 src/components/Deck.tsx      |  7 ++++++-
 src/components/NumEdit.tsx   | 24 ++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/components/NumEdit.tsx

diff --git a/src/components/CardGroup.tsx b/src/components/CardGroup.tsx
index 05955aa..a0d646b 100644
--- a/src/components/CardGroup.tsx
+++ b/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)=>{
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
index b762c20..e0ebaab 100644
--- a/src/components/Deck.tsx
+++ b/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} 
diff --git a/src/components/NumEdit.tsx b/src/components/NumEdit.tsx
new file mode 100644
index 0000000..e082d60
--- /dev/null
+++ b/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