1- No arquivo index.jsx, da pasta PlayTogether, vamos começar copiando os useStates do PlayAlone, pois são muito parecidos. Só vamos modificar alguns detalhes.
const [pin, setPin] = useState(["", "", ""]);
const [started, setStarted] = useState(false);
const [hours, setHours] = useState("");
const [minutes, setMinutes] = useState("");
const [seconds, setSeconds] = useState("");
const [message, setMessage] = useState("");
const [question, setQuestion] = useState("");
const [answer, setAnswer] = useState("");
const [intervalId, setIntervalId] = useState();
2- Vamos fazer a mesma coisa com o handleStartBomb:
function handleStartBomb() {
const diffTime = BombService.getDiffTime({ hours, seconds, minutes });
BombService.startCountdown({
setSeconds,
setMinutes,
setHours,
setStarted,
diffTime,
setIntervalId,
intervalId,
navigation,
});
}
3- Agora vamos trabalhar com 2 elesmentos: message e Tipinput. Vamos inserir os useStates no TipInput e na message vamos deixar a renderização condicional que vimos anteriormente.
{message ? <BombMessage>{message ? message : null}</BombMessage> : null}
<TipInput
started={started}
question={question}
setQuestion={setQuestion}
/>
4- No index.jsx do bombApp, vamos criar um serviço (bombActivationTogether)
bombActivationTogether: ({
question,
pin,
hours,
minutes,
seconds,
setMessage,
setStarted,
setPin,
handleStartBomb,
setAnswer,
}) => {}
5- Agora vamos fazer uma verificação antes do jogo iniciar. Se existir alguma dica para tentar, o jogo inicia normalmente, se não tiver, vai dar um erro.
if (question.length < 1) {
setMessage("Você precisa dar uma dica!");
return;
}