Added item select

src/components/AddItem.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react"
+import ItemToDisplay from "../ItemToDisplay"
+import Item from "../types/Item"
+import Side from "../types/Side"
+
+interface Props {
+    side: Side
+    onChange?: (newItem: Item)=>void
+}
+
+const AddItem: React.FC<Props> = ({side,onChange}) => {
+    const [selected,setSelected] = useState<Item>(Item.DEFAULT_PISTOL)
+
+    return (
+        <div
+            className=""
+        >
+            <select
+                onChange={(e)=>setSelected(Item[e.target.value as keyof typeof Item])}
+            >
+                {
+                    Object.keys(Item).map(e=><option key={e} value={e}>{ItemToDisplay(Item[e as keyof typeof Item],side)}</option>)
+                }
+            </select>
+            <span
+                onClick={()=>onChange?.(selected)}
+                className="cursor-pointer"
+            >
+                Add
+            </span>
+        </div>
+    )
+}
+
+export default AddItem

src/components/Card.tsx

@@ -3,6 +3,7 @@ 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"
 import TextEdit from "./TextEdit"
 
@@ -31,12 +32,7 @@ const CardComp: React.FC<Props> = ({card,side,onChange}) => {
                         }} className="float-right cursor-pointer" >X</span>
                     </div>
                 )}
-
+                <AddItem side={side} onChange={newItem => onChange?.(new Card(card.title,card.armor,card.helmet,...card.items,newItem))} />
-                <div className="text-center cursor-pointer" onClick={()=>{
-                    onChange?.(new Card(card.title,card.armor,card.helmet,...card.items,Item.HE))
-                }} >
-                        Add
-                </div>
             </div>
         </div>
     )