Agora, antes de adicionarmos mais lógica, vamos trabalhar na interface do usuário, e assim por diante.
Então, aqui, retornarei uma visão no
final e, nessa visão, quero ter um texto em que digo que os oponentes adivinhem, então o que o computador adivinhou e podemos reutilizar
o contêiner de números para apresentar bem esse número adivinhado.
Portanto, é uma enorme vantagem de ter esses componentes reutilizáveis, porque você pode reutilizá-los, eu acho, e é isso
que estamos fazendo aqui.
Usaremos esse contêiner de números novamente, abaixo dos adversários que adivinham o texto aqui para ter nosso próprio
contêiner de números e produzem bem
o palpite atual aqui. O palpite atual é o nosso
estado, lembre-se de que é o que inicializamos aqui e o que em breve poderemos mudar também.
Então é isso que está gerando resultados aqui. Abaixo, agora também podemos apresentar nosso cartão com dois botões que permitem ao usuário
dar uma dica ao computador.
Então, aqui, vou importar o cartão do cartão de componentes para envolver esses botões e, portanto, já podemos importar o
botão do React Native, porque também precisaremos disso em um
segundo e, em seguida, simplesmente teremos o cartão aqui e nesse cartão , Quero ter um botão com o título inferior e outro
botão onde dizemos maior, essas são as duas direções nas quais podemos dar uma dica, o número que você
achou muito baixo, muito alto, e
podemos dar o sugestão do computador com esses botões e onPress, no momento, apenas registrarei uma função
vazia que não faz nada, que obviamente mudará em breve e
gerará efetivamente um novo número aleatório e, com isso, agora é hora de adicionar alguns estilos aqui.
Eu quero ter um estilo para minha tela geral e, como antes, isso será
flexível para ocupar todo o espaço disponível na tela abaixo do
cabeçalho que temos na parte superior, adicione um preenchimento de 10 para ter algum
espaço em torno do conteúdo para que ele não fique diretamente nas bordas e também use itens de alinhamento aqui para centralizar horizontalmente nosso conteúdo e essa propriedade de
tela seja usada na vista circundante aqui para adicionar uma tela de estilos para que
o conteúdo dessa tela geral esteja bem posicionado. Agora, para esses botões, seria bom que eles estivessem sentados um ao
lado do outro, para que no cartão possamos adicionar um estilo, talvez use o contêiner de botões como um nome aqui e, portanto, adicione
o mesmo nome aqui em nossa folha de estilo, porque é isso que
estamos nos referindo e definimos a direção flexível aqui para a linha e podemos definir uma direção flexível aqui porque estou fazendo
isso no
meu cartão, mas se dermos uma olhada, nesse cartão, distribuímos esses estilos em uma exibição e em um O view usa flexbox
para que possamos definir uma direção flexível aqui e é isso que estou fazendo lá, definindo a direção
da flex para enfileirar e posicionar os itens próximos horizontalmente. justifyContent com espaço ao redor, talvez, para ter
o espaço livre ao redor dos botões, à esquerda e à direita igualmente distribuídos e também adicionar uma margem superior a
20 para que este cartão com nossos botões não fique diretamente ao lado do número estimado, mas há algum
espaçamento entre eles e também pode fornecer uma largura de 300 e uma largura máxima de 80% para
garantir que isso nunca exceda os limites da visualização principal. Agora, se salvarmos isso, seria bom ver isso e, para
isso, precisamos de uma maneira de ir para a tela do jogo.
Agora, estamos usando a tela inicial do jogo no componente do aplicativo, portanto, também precisamos usar a tela do jogo
e gerenciar o número selecionado nesse componente do aplicativo, porque esse é o único componente que fica na tela o
tempo todo, além do cabeçalho, mas o
componente do aplicativo também é o componente que conterá a tela inicial do jogo e a tela do jogo
em breve e, portanto,
é o componente onde também podemos passar dados para a tela inicial do jogo e para a
tela do jogo.
Então, vamos importar a tela do jogo aqui da tela do jogo de telas e, é claro, eu quero renderizar a tela do meu jogo
aqui, mas não se a tela inicial do jogo ainda estiver visível, quero ter uma das duas notas
laterais e também uma maneira diferente de carregar componentes diferentes e vamos mergulhar nisso
em um módulo separado no módulo de navegação.
Agora, embora abordemos diferentes soluções de navegação posteriormente, existe uma maneira de renderizar qualquer uma das
duas telas no momento,
mas também podemos renderizar uma dessas duas telas agora e, para isso, não
precisamos de nenhuma ferramenta especial ou qualquer
coisa assim, podemos usar a lógica React normal, podemos renderizar esse conteúdo condicionalmente.
Tudo o que precisamos fazer é gerenciar um estado em nosso
componente de aplicativo, precisamos gerenciar o número selecionado aqui também.
Então, adicionarei use state aqui e, em seguida, basta usar meu state aqui e inicializá-lo sem valor no final e ali, quero obter o número
selecionado
ou o número do usuário e definir o número do usuário como uma função de atualização aqui e inicialmente isso é indefinido e
agora aqui eu
preciso de uma função na
qual possamos mudar isso, como o manipulador
de jogos
iniciais, que soa
como um nome adequado, porque teremos esse número se o usuário pressionar o botão iniciar jogos aqui
na tela inicial do jogo.
Portanto, o manipulador do jogo inicial obterá o número selecionado como uma entrada, é uma suposição que temos que
fazer aqui e definir o número do usuário para esse número selecionado aqui. Agora, sempre que for esse o caso, sempre que
tivermos um número de usuário, sabemos que o jogo está rodando e sabemos que
podemos renderizar a tela do jogo em vez da tela inicial do jogo.
Portanto, aqui podemos usar uma variável de conteúdo, por exemplo, e dizer que nosso
conteúdo
padrão é a tela inicial do jogo, e isso é normal. lá, também
é o que já fazemos na tela inicial
do jogo com a saída confirmada. Portanto, a tela de iniciar jogos é nossa
saída padrão,
mas agora podemos adicionar uma verificação se o conteúdo é verdadeiro, é o
que essa verificação verifica, então será falso inicialmente se não for definido, mas
agora se for verdade. pode definir o número do usuário, então verifiquei se o número do usuário é
true-ish, se for true-ish, sabemos
que um número foi selecionado, ele será indefinido e, portanto, falso inicialmente, mas se for true-ish, se
um foi escolhido
o número, definiremos o conteúdo aqui para ser a tela do jogo e renderizaremos o conteúdo que estiver lá
embaixo, que será a tela do jogo ou a tela inicial do jogo.
Portanto, agora, quando clicarmos em iniciar jogo aqui com outro escolhido, isso deverá mudar aqui se e isso é importante, se tivermos
certeza de que o manipulador
do jogo inicial poderá ser acionado de dentro da tela do jogo inicial. Agora, usamos um padrão React padrão de
transmitir uma referência a esse manipulador para esse componente, talvez no suporte onStartGame, que me
pareça um nome adequado. Encaminhamos o manipulador do jogo inicial,
apenas a referência sem parênteses aqui, apenas uma referência, um ponteiro para esta função e onStartGame
agora é uma propriedade que podemos usar na tela do jogo inicial.
Então, aqui na tela inicial do jogo, quando clicamos no botão iniciar jogo aqui, quero acionar esse suporte no
final.
Então, aqui, eu tenho o onPress e, no final, quero executar onStartGame e encaminhar o número atualmente selecionado aqui, que é
gerenciado no estado da tela inicial do jogo.
Então, aqui, encaminhar isso para onStartGame e onStartGame é vinculado ao manipulador de jogo inicial que espera e,
em seguida, recebe o número selecionado.
É assim que garantimos que, ao clicar nesse botão para iniciar a tela do jogo, ative esse método ou esta função aqui e, quando
essa função for
acionada, definimos o número do usuário, garantindo que o conteúdo seja a
tela do jogo e, portanto, deveríamos estar vendo a tela do jogo. Agora, uma parte que falta é que,
na tela do jogo, eu preciso da opção do usuário para gerar meu número aleatório inicial e excluir a escolha
correta do usuário para esse primeiro número aleatório e, portanto, precisamos passar uma propriedade
denominada escolha do usuário para a tela do jogo. Assim, podemos adicionar a opção de escolha do usuário
aqui e passar o número do usuário, que é o estado que estamos gerenciando no componente do aplicativo,
que é o número selecionado que estamos armazenando no estado
aqui, transmiti-lo para a tela do jogo.
Espero que o fluxo de dados seja claro, recebamos o número selecionado na tela inicial do jogo quando esse botão, o botão
iniciar jogo é pressionado, armazenamos no estado do componente
do aplicativo aqui no estado do número de uso com o botão ajuda para definir o número
do usuário e, em seguida, usamos esse número para transmiti-lo para a tela do jogo, que só é renderizada se
tivermos números de usuário; portanto, se o jogo estiver em execução, se o jogo foi iniciado para que
na tela do jogo, podemos usar o número de usuário que é recebido no suporte de escolha do usuário para gerar
o novo número aleatório que o computador adivinhou onde essa opção de usuário é excluída, para que, para o primeiro palpite
do computador, o computador não possa adivinhe instantaneamente o número do usuário. Muita conversa, vamos salvar tudo isso e dar
uma olhada nisso.
Vamos inserir 55 e confirmar e clicar em Iniciar Jogo, e não podemos encontrar uma variável em Iniciar Jogo.
Portanto, o problema aqui é que eu executo, sim, que deve ser usado no início do jogo aqui, no
botão iniciar no componente do jogo inicial, porque é claro que é uma propriedade
que estamos recebendo, não é uma
função definida aqui, é
definida nos adereços, é esse adereço no final.
Tão pequeno erro, vamos tentar novamente
depois de corrigir isso, clique em Iniciar
jogo e isso parece bom.
Agora vemos os
adversários adivinhando e podemos dar algumas
dicas aqui que, no momento, não têm efeito, mas que em breve terão efeito e, portanto, estamos na próxima tela, estamos
na tela do jogo.
Agora, vamos ter certeza de que podemos realmente dar algumas dicas ao computador aqui e garantir que o computador tenha
a chance de resolver isso e adivinhar o nosso número.