# Camko  https://camko.netlify.app/ ---  ---  --- ## Planing S(t)ages  --- ### The Whole Structure  --- ### Compnents and relations  --- ### UI/UX Stuff  --- ### Design Inspo  --- ### Folder Stricture  --- ## Lesssons + Struggles - It's good to keep states on the top level so you can pass them where needed - Plan states carefully as it can get messy! ```jsx= // fetched data const [data, setData] = React.useState(null); // provided username const [username, setUsername] = React.useState(""); const [gameMode, setGameMode] = React.useState(""); // oponentsData const [opponent, setOpponent] = React.useState(null); const [err, setErr] = React.useState('') ``` --- - SO MANY TERNARIES ```jsx= {name && name !== 'Giovanna L R T Aveiro' ? name : login} ``` --- ## Updateing results ```jsx= const Result = ({ data, setData, opponent, setGameMode, setOpponent }) => { const { public_repos, followers, following } = data; const userPower = public_repos + followers + following; const opponentPower = opponent.public_repos + opponent.followers + opponent.following; React.useEffect(() => { if (userPower >= opponentPower) { data.followers += 10; setData(data); } else { data.following += 2; setData(data); } }, []); ``` --- # CSS ```css= background: -webkit-linear-gradient(red, orange, yellow); -webkit-background-clip: border-box; -webkit-text-fill-color: black; ``` ```jsx= className={username === login ? "fighter-profile" : "opponent"} ``` --- ## More Time - Refactror code and states - Cool animations for fight and fight entrance - Fight log ` - Tests