initial commit

src/components/App.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import DeckComp from './Deck';
+import Card from '../types/Card';
+import CardGroup from '../types/CardGroup';
+import Deck from '../types/Deck';
+import Item from '../types/Item';
+import Side from '../types/Side';
+
+function App() {
+  const [CTDeck,setCTDeck] = useState<Deck>(new Deck(
+    2,new CardGroup(
+      2,new Card("AWE fake",false,false,Item.AWP,Item.DECOY),
+      new Card("M4 Flash",true,true,Item.AK_47_M4,Item.FLASHBANG)
+    ),
+    new CardGroup(
+      3,new Card("One deag",true,false,Item.DESERT_EAGLE)
+    )
+  ))
+
+  return (
+    <div>
+      <DeckComp title="CT Normal" side={Side.CT} deck={CTDeck} onChange={(newDeck)=> setCTDeck(newDeck)} />
+    </div>
+  );
+}
+
+export default App;

src/components/Card.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import ItemToDisplay from "../ItemToDisplay"
+import Card from "../types/Card"
+import Item from "../types/Item"
+import Side from "../types/Side"
+import SwitchButton from "./SwitchButton"
+import TextEdit from "./TextEdit"
+
+interface Props {
+    card: Card
+    side: Side
+    onChange?: (newCard: Card)=>void
+}
+
+const CardComp: React.FC<Props> = ({card,side,onChange}) => {
+    return (
+        <div className="bg-blue-500 m-1 p-1">
+            <span className="font-bold"><TextEdit 
+                text={card.title}
+                onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))}
+            /></span>
+            <div>
+                Helmet: <SwitchButton active={card.helmet} onChange={(to)=>onChange?.(new Card(card.title,card.armor,to,...card.items))} />
+                Armor: <SwitchButton active={card.armor} onChange={(to)=>onChange?.(new Card(card.title,to,card.helmet,...card.items))} />
+            </div>
+            <div className="border border-red-500">
+                {card.items.map((item,i)=>
+                    <div key={i}>
+                        {ItemToDisplay(item,side)} <span onClick={()=>{
+                            onChange?.(new Card(card.title,card.armor,card.helmet,...card.items.filter((_,fi)=>i!==fi)))
+                        }} className="float-right cursor-pointer" >X</span>
+                    </div>
+                )}
+
+                <div className="text-center cursor-pointer" onClick={()=>{
+                    onChange?.(new Card(card.title,card.armor,card.helmet,...card.items,Item.HE))
+                }} >
+                        Add
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CardComp

src/components/CardGroup.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import CardGroup from "../types/CardGroup"
+import Side from "../types/Side"
+import CardComp from "./Card"
+
+interface Props {
+	cardGroup: CardGroup
+	side: Side
+	onChange?: (newCardGroup: CardGroup)=>void
+}
+
+const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange}) => {
+	return (
+		<div className="bg-red-500 m-1 p-1">
+			Num: {cardGroup.numInDeck}
+			<div className="flex">
+				{cardGroup.cards.map((card,index) => 
+					<CardComp card={card} side={side} onChange={(newCard)=>{
+							onChange?.(new CardGroup(
+								cardGroup.numInDeck,
+								...cardGroup.cards.map((e,i)=>i===index?newCard:e))
+							)
+					}} />
+				)}
+			</div>
+		</div>
+	)
+}
+
+export default CardGroupComp

src/components/Deck.tsx

@@ -0,0 +1,34 @@
+import React from "react"
+import Deck from "../types/Deck"
+import Side from "../types/Side"
+import CardGroupComp from "./CardGroup"
+
+interface Props {
+    deck: Deck
+    side: Side
+    title: string
+    onChange?: (newDeck: Deck)=>void
+}
+
+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> }
+            <div className="flex">
+                {deck.cardGroups.map((group,index) =>
+                    <CardGroupComp key={index} cardGroup={group} side={side} 
+                        onChange={(newGroup)=>{
+                            onChange?.(new Deck(
+                                deck.numDefusers,
+                                ...deck.cardGroups.map((e,i)=>i===index?newGroup:e)
+                            ))
+                        }}
+                    />
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default DeckComp

src/components/SwitchButton.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+
+interface Props {
+    active: boolean
+    onChange: (to: boolean)=>void
+}
+
+const SwitchButton: React.FC<Props> = ({active,onChange}) => {
+    return (
+        <button onClick={()=>onChange(!active)} > {active?"YES":"NO"} </button>
+    )
+}
+
+export default SwitchButton

src/components/TextEdit.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef, useState } from "react"
+
+interface Props {
+    text: string
+    onChange?: (newText: string)=>void
+}
+
+const TextEdit: React.FC<Props> = ({text,onChange}) => {
+    const [edit,setEdit] = useState<boolean>(false)
+    const [inputValue,setinputValue] = useState(text)
+    const inputRef = useRef<HTMLInputElement>(null)
+
+	useEffect(()=>{
+		if (edit){
+			inputRef.current?.select()
+		}else{
+            if (text !== inputValue){
+                onChange?.(inputValue)
+            }
+        }
+	},[edit])
+
+
+    return (
+        <>
+            {!edit && <span className="cursor-pointer" onClick={()=>setEdit(true)} >{inputValue}</span>}
+            {edit &&
+                <form className="inline" onSubmit={(e)=>{
+                    e.preventDefault()
+                    setEdit(false)
+                }} >
+                    <input
+                        type="text"
+                        className="bg-transparent outline-none font-bold"
+                        value={inputValue}
+                        onChange={(e)=>setinputValue(e.target.value)}
+                        onBlur={()=>setEdit(false)}
+                        ref={inputRef}
+                    ></input>
+                </form>
+            }
+        </>
+    )
+}
+
+export default TextEdit