add task react-clase-2 #20
Conversation
| function useInterval(callback, delay) { | ||
| const savedCallback = useRef(); | ||
|
|
||
| useEffect(() => { | ||
| savedCallback.current = callback; | ||
| }, [callback]); | ||
|
|
||
| useEffect(() => { | ||
| function tick() { | ||
| savedCallback.current(); | ||
| } | ||
|
|
||
| if (delay !== null) { | ||
| let id = setInterval(tick, delay); | ||
| return () => clearInterval(id); | ||
| } | ||
| }, [delay]); |
There was a problem hiding this comment.
no declares un hook por dentro de otro, declaralo por fuera del useTimer
There was a problem hiding this comment.
Este código lo copié y pegué del blog que me mandaste, lo cambio igual? Simplemente lo adapté al memotest
There was a problem hiding this comment.
sí, pero en general no tenés que declarar hooks adentro de otros hooks, solamente movelo afuera del otro hook
| const createInitialCards = () => { | ||
| let allCards = cardArray.concat(cardArray); | ||
| let newCards = allCards.sort(() => 0.5 - Math.random()); | ||
| return newCards; | ||
| } |
There was a problem hiding this comment.
si ya estás guardando las cartas en un state, podés pasar el state de isFlipped acá mismo (así no lo tenés que armar a mano con un tamaño predeterminado). también podés agregar las keys que habíamos dicho para el render (vegeta-0, vegeta-1, etc.)
podés hacer todo eso con un .map() antes de devolverlo
There was a problem hiding this comment.
Si las keys puse nombre[i] porque no se me ocurrió deducir el vegeta-0 y vegeta-1. IsFlipped lo paso como array o pensaba asignarlo cómo objeto { isFlipped: false }
There was a problem hiding this comment.
claro, asignarlo al objeto es lo que decía
| const [previousID, setPreviousID] = useState(null); | ||
| const [animating, setAnimating] = useState(false); | ||
| const [wonPairs, setWonPairs] = useState(0); | ||
| const gameEnded = wonPairs > 7; |
There was a problem hiding this comment.
esto debería ser wonPairs > (cards.length / 2), así podés agregar cartas nuevas sin tener que modificar nada acá
| const [cards, setCards] = useState(createInitialCards); | ||
| const [isFlipped, setIsFlipped] = useState([false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false]); | ||
| const [currentPairs, setCurrentPairs] = useState([]); | ||
| const [previousID, setPreviousID] = useState(null); |
There was a problem hiding this comment.
El previousID me hace ruido, creo que es innecesario. Entiendo que lo necesitás para dar vuelta las dos cartas después, pero siento que eso mismo lo deberías poder hacer con currentPairs si lo modificás para que en vez de tener solo las strings alt, tengan la id también, onda:
setCurrentPairs([...currentPairs, { alt, id }])
There was a problem hiding this comment.
El previousID es más para el CSS así aplico las transformaciones al dar vuelta la carta. Ahora corrijo como decís para que me quede más prolijo.
|
|
||
| const WinnerScore = ({ show, result, restart = () => {} }) => { | ||
| return ( | ||
| <div className={'winner-score ' + (show ? 'winner-score--hidden': '')}> |
There was a problem hiding this comment.
creo que esto hace lo opuesto de lo que querés: si show es true, pone la clase winner-score--hidden.
Fijate que cuando ganás no podés apretar el botón porque tiene el pointer-events: none; puesto
There was a problem hiding this comment.
Lo del botón no lo pude hacer funcionar 😂 Ahora veo el problema, ojalá ahora si funcione
No description provided.