elevated state to App

This commit is contained in:
Djeeberjr 2021-11-15 22:15:38 +01:00
parent 4273b5c8ca
commit d095488c74
2 changed files with 23 additions and 26 deletions

View File

@ -1,46 +1,49 @@
import React, { useState } from "react"
import React from "react"
import RetakesConfig from "../types/RetakesConfig"
import Side from "../types/Side"
import CardComp from "./Card"
import DeckComp from "./Deck"
const AllDecks: React.FC = () => {
const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
interface Props {
retakesConfig: RetakesConfig
onChange?: (newConfig: RetakesConfig)=>void
}
const AllDecks: React.FC<Props> = ({retakesConfig,onChange}) => {
return (
<div>
<DeckComp title="CT Pistol" side={Side.CT} deck={retakesConfig.ctPistol}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} />
<DeckComp title="T Pistol" side={Side.T} deck={retakesConfig.tPistol}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} />
<DeckComp title="CT Upgraded Pistol" side={Side.CT} deck={retakesConfig.ctUpgradedPistol}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} />
<DeckComp title="T Upgraded Pistol" side={Side.T} deck={retakesConfig.tUpgradedPistol}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} />
<DeckComp title="CT Light" side={Side.CT} deck={retakesConfig.ctLight}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} />
<DeckComp title="T Light" side={Side.T} deck={retakesConfig.tLight}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} />
<DeckComp title="CT Full" side={Side.CT} deck={retakesConfig.ctFull}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} />
<DeckComp title="T Full" side={Side.T} deck={retakesConfig.tFull}
onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
<div className="flex">
<CardComp card={retakesConfig.ctEnemy} side={Side.T}
onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
<CardComp card={retakesConfig.tEnemy} side={Side.CT}
onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
</div>
<div className="flex">
<CardComp card={retakesConfig.ctBonus} side={Side.CT}
onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
<CardComp card={retakesConfig.tBonus} side={Side.T}
onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
</div>
</div>
)

View File

@ -1,22 +1,16 @@
import React from 'react';
import React, { useState } from 'react';
import RetakesConfig from '../types/RetakesConfig';
import AllDecks from './AllDecks';
import MenuBar from './MenuBar';
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)
// )
// ))
const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
return (
<div className="text-white">
<MenuBar />
<AllDecks />
<AllDecks retakesConfig={retakesConfig} onChange={(newConfig)=>setRetakesConfig(newConfig)} />
</div>
);
}