1 00:00:02,450 --> 00:00:08,430 Agora, antes de adicionarmos mais lógica, vamos trabalhar na interface do usuário, e assim por diante. 2 00:00:08,450 --> 00:00:11,670 Então, aqui, retornarei uma visão no 3 00:00:11,700 --> 00:00:23,190 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 4 00:00:23,230 --> 00:00:27,760 o contêiner de números para apresentar bem esse número adivinhado. 5 00:00:27,760 --> 00:00:34,330 Portanto, é uma enorme vantagem de ter esses componentes reutilizáveis, porque você pode reutilizá-los, eu acho, e é isso 6 00:00:34,330 --> 00:00:36,040 que estamos fazendo aqui. 7 00:00:36,040 --> 00:00:42,400 Usaremos esse contêiner de números novamente, abaixo dos adversários que adivinham o texto aqui para ter nosso próprio 8 00:00:42,400 --> 00:00:44,510 contêiner de números e produzem bem 9 00:00:44,650 --> 00:00:47,810 o palpite atual aqui. O palpite atual é o nosso 10 00:00:47,830 --> 00:00:52,130 estado, lembre-se de que é o que inicializamos aqui e o que em breve poderemos mudar também. 11 00:00:52,210 --> 00:01:00,340 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 12 00:01:00,340 --> 00:01:02,290 dar uma dica ao computador. 13 00:01:02,950 --> 00:01:11,320 Então, aqui, vou importar o cartão do cartão de componentes para envolver esses botões e, portanto, já podemos importar o 14 00:01:11,320 --> 00:01:15,850 botão do React Native, porque também precisaremos disso em um 15 00:01:16,200 --> 00:01:25,880 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 16 00:01:25,880 --> 00:01:33,860 botão onde dizemos maior, essas são as duas direções nas quais podemos dar uma dica, o número que você 17 00:01:33,890 --> 00:01:37,070 achou muito baixo, muito alto, e 18 00:01:37,070 --> 00:01:44,520 podemos dar o sugestão do computador com esses botões e onPress, no momento, apenas registrarei uma função 19 00:01:44,820 --> 00:01:49,500 vazia que não faz nada, que obviamente mudará em breve e 20 00:01:49,500 --> 00:01:57,060 gerará efetivamente um novo número aleatório e, com isso, agora é hora de adicionar alguns estilos aqui. 21 00:01:57,110 --> 00:02:02,450 Eu quero ter um estilo para minha tela geral e, como antes, isso será 22 00:02:02,450 --> 00:02:06,950 flexível para ocupar todo o espaço disponível na tela abaixo do 23 00:02:07,070 --> 00:02:12,410 cabeçalho que temos na parte superior, adicione um preenchimento de 10 para ter algum 24 00:02:12,410 --> 00:02:23,370 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 25 00:02:23,370 --> 00:02:29,190 tela seja usada na vista circundante aqui para adicionar uma tela de estilos para que 26 00:02:29,190 --> 00:02:36,400 o conteúdo dessa tela geral esteja bem posicionado. Agora, para esses botões, seria bom que eles estivessem sentados um ao 27 00:02:36,470 --> 00:02:43,480 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 28 00:02:43,480 --> 00:02:47,320 o mesmo nome aqui em nossa folha de estilo, porque é isso que 29 00:02:47,560 --> 00:02:54,160 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 30 00:02:54,160 --> 00:02:54,930 isso no 31 00:02:55,060 --> 00:03:01,570 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 32 00:03:01,570 --> 00:03:06,820 para que possamos definir uma direção flexível aqui e é isso que estou fazendo lá, definindo a direção 33 00:03:06,820 --> 00:03:13,780 da flex para enfileirar e posicionar os itens próximos horizontalmente. justifyContent com espaço ao redor, talvez, para ter 34 00:03:13,780 --> 00:03:21,760 o espaço livre ao redor dos botões, à esquerda e à direita igualmente distribuídos e também adicionar uma margem superior a 35 00:03:21,760 --> 00:03:29,080 20 para que este cartão com nossos botões não fique diretamente ao lado do número estimado, mas há algum 36 00:03:29,080 --> 00:03:35,770 espaçamento entre eles e também pode fornecer uma largura de 300 e uma largura máxima de 80% para 37 00:03:35,770 --> 00:03:43,530 garantir que isso nunca exceda os limites da visualização principal. Agora, se salvarmos isso, seria bom ver isso e, para 38 00:03:43,530 --> 00:03:47,460 isso, precisamos de uma maneira de ir para a tela do jogo. 39 00:03:47,460 --> 00:03:53,070 Agora, estamos usando a tela inicial do jogo no componente do aplicativo, portanto, também precisamos usar a tela do jogo 40 00:03:53,070 --> 00:03:58,830 e gerenciar o número selecionado nesse componente do aplicativo, porque esse é o único componente que fica na tela o 41 00:03:58,830 --> 00:04:00,720 tempo todo, além do cabeçalho, mas o 42 00:04:00,720 --> 00:04:06,120 componente do aplicativo também é o componente que conterá a tela inicial do jogo e a tela do jogo 43 00:04:06,330 --> 00:04:07,680 em breve e, portanto, 44 00:04:07,680 --> 00:04:12,540 é o componente onde também podemos passar dados para a tela inicial do jogo e para a 45 00:04:12,660 --> 00:04:13,730 tela do jogo. 46 00:04:13,860 --> 00:04:22,680 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 47 00:04:22,680 --> 00:04:29,010 aqui, mas não se a tela inicial do jogo ainda estiver visível, quero ter uma das duas notas 48 00:04:29,010 --> 00:04:34,110 laterais e também uma maneira diferente de carregar componentes diferentes e vamos mergulhar nisso 49 00:04:34,110 --> 00:04:37,540 em um módulo separado no módulo de navegação. 50 00:04:37,560 --> 00:04:43,050 Agora, embora abordemos diferentes soluções de navegação posteriormente, existe uma maneira de renderizar qualquer uma das 51 00:04:43,050 --> 00:04:44,840 duas telas no momento, 52 00:04:45,030 --> 00:04:49,620 mas também podemos renderizar uma dessas duas telas agora e, para isso, não 53 00:04:49,620 --> 00:04:52,040 precisamos de nenhuma ferramenta especial ou qualquer 54 00:04:52,380 --> 00:04:56,770 coisa assim, podemos usar a lógica React normal, podemos renderizar esse conteúdo condicionalmente. 55 00:04:56,940 --> 00:05:00,980 Tudo o que precisamos fazer é gerenciar um estado em nosso 56 00:05:00,990 --> 00:05:04,950 componente de aplicativo, precisamos gerenciar o número selecionado aqui também. 57 00:05:04,950 --> 00:05:14,250 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 58 00:05:14,250 --> 00:05:15,010 selecionado 59 00:05:15,260 --> 00:05:24,000 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 60 00:05:24,000 --> 00:05:25,280 agora aqui eu 61 00:05:25,380 --> 00:05:27,250 preciso de uma função na 62 00:05:27,300 --> 00:05:29,870 qual possamos mudar isso, como o manipulador 63 00:05:30,030 --> 00:05:30,920 de jogos 64 00:05:30,930 --> 00:05:31,920 iniciais, que soa 65 00:05:31,920 --> 00:05:38,610 como um nome adequado, porque teremos esse número se o usuário pressionar o botão iniciar jogos aqui 66 00:05:38,610 --> 00:05:40,550 na tela inicial do jogo. 67 00:05:40,800 --> 00:05:45,240 Portanto, o manipulador do jogo inicial obterá o número selecionado como uma entrada, é uma suposição que temos que 68 00:05:45,240 --> 00:05:51,860 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 69 00:05:51,920 --> 00:05:56,330 tivermos um número de usuário, sabemos que o jogo está rodando e sabemos que 70 00:05:56,330 --> 00:06:00,320 podemos renderizar a tela do jogo em vez da tela inicial do jogo. 71 00:06:00,350 --> 00:06:06,530 Portanto, aqui podemos usar uma variável de conteúdo, por exemplo, e dizer que nosso 72 00:06:06,530 --> 00:06:07,140 conteúdo 73 00:06:07,250 --> 00:06:13,130 padrão é a tela inicial do jogo, e isso é normal. lá, também 74 00:06:13,190 --> 00:06:16,710 é o que já fazemos na tela inicial 75 00:06:16,730 --> 00:06:23,050 do jogo com a saída confirmada. Portanto, a tela de iniciar jogos é nossa 76 00:06:23,050 --> 00:06:24,120 saída padrão, 77 00:06:24,130 --> 00:06:28,730 mas agora podemos adicionar uma verificação se o conteúdo é verdadeiro, é o 78 00:06:28,740 --> 00:06:33,510 que essa verificação verifica, então será falso inicialmente se não for definido, mas 79 00:06:33,630 --> 00:06:40,260 agora se for verdade. pode definir o número do usuário, então verifiquei se o número do usuário é 80 00:06:40,260 --> 00:06:42,060 true-ish, se for true-ish, sabemos 81 00:06:42,060 --> 00:06:48,330 que um número foi selecionado, ele será indefinido e, portanto, falso inicialmente, mas se for true-ish, se 82 00:06:48,510 --> 00:06:49,700 um foi escolhido 83 00:06:49,710 --> 00:06:56,450 o número, definiremos o conteúdo aqui para ser a tela do jogo e renderizaremos o conteúdo que estiver lá 84 00:06:56,470 --> 00:07:01,370 embaixo, que será a tela do jogo ou a tela inicial do jogo. 85 00:07:01,380 --> 00:07:07,350 Portanto, agora, quando clicarmos em iniciar jogo aqui com outro escolhido, isso deverá mudar aqui se e isso é importante, se tivermos 86 00:07:07,470 --> 00:07:09,110 certeza de que o manipulador 87 00:07:09,210 --> 00:07:15,840 do jogo inicial poderá ser acionado de dentro da tela do jogo inicial. Agora, usamos um padrão React padrão de 88 00:07:15,840 --> 00:07:23,120 transmitir uma referência a esse manipulador para esse componente, talvez no suporte onStartGame, que me 89 00:07:23,130 --> 00:07:28,200 pareça um nome adequado. Encaminhamos o manipulador do jogo inicial, 90 00:07:28,200 --> 00:07:34,350 apenas a referência sem parênteses aqui, apenas uma referência, um ponteiro para esta função e onStartGame 91 00:07:34,740 --> 00:07:39,240 agora é uma propriedade que podemos usar na tela do jogo inicial. 92 00:07:39,300 --> 00:07:46,410 Então, aqui na tela inicial do jogo, quando clicamos no botão iniciar jogo aqui, quero acionar esse suporte no 93 00:07:46,590 --> 00:07:47,370 final. 94 00:07:47,370 --> 00:07:57,090 Então, aqui, eu tenho o onPress e, no final, quero executar onStartGame e encaminhar o número atualmente selecionado aqui, que é 95 00:07:57,090 --> 00:08:01,440 gerenciado no estado da tela inicial do jogo. 96 00:08:01,440 --> 00:08:08,310 Então, aqui, encaminhar isso para onStartGame e onStartGame é vinculado ao manipulador de jogo inicial que espera e, 97 00:08:08,370 --> 00:08:11,190 em seguida, recebe o número selecionado. 98 00:08:11,190 --> 00:08:16,690 É 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 99 00:08:16,690 --> 00:08:17,700 essa função for 100 00:08:17,700 --> 00:08:20,570 acionada, definimos o número do usuário, garantindo que o conteúdo seja a 101 00:08:20,580 --> 00:08:26,160 tela do jogo e, portanto, deveríamos estar vendo a tela do jogo. Agora, uma parte que falta é que, 102 00:08:26,160 --> 00:08:33,120 na tela do jogo, eu preciso da opção do usuário para gerar meu número aleatório inicial e excluir a escolha 103 00:08:33,150 --> 00:08:38,130 correta do usuário para esse primeiro número aleatório e, portanto, precisamos passar uma propriedade 104 00:08:38,130 --> 00:08:44,070 denominada escolha do usuário para a tela do jogo. Assim, podemos adicionar a opção de escolha do usuário 105 00:08:44,070 --> 00:08:49,920 aqui e passar o número do usuário, que é o estado que estamos gerenciando no componente do aplicativo, 106 00:08:49,920 --> 00:08:53,040 que é o número selecionado que estamos armazenando no estado 107 00:08:53,040 --> 00:08:55,580 aqui, transmiti-lo para a tela do jogo. 108 00:08:55,830 --> 00:09:02,280 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 109 00:09:02,280 --> 00:09:05,240 iniciar jogo é pressionado, armazenamos no estado do componente 110 00:09:05,280 --> 00:09:10,440 do aplicativo aqui no estado do número de uso com o botão ajuda para definir o número 111 00:09:10,440 --> 00:09:16,170 do usuário e, em seguida, usamos esse número para transmiti-lo para a tela do jogo, que só é renderizada se 112 00:09:16,170 --> 00:09:21,510 tivermos números de usuário; portanto, se o jogo estiver em execução, se o jogo foi iniciado para que 113 00:09:21,510 --> 00:09:27,690 na tela do jogo, podemos usar o número de usuário que é recebido no suporte de escolha do usuário para gerar 114 00:09:27,780 --> 00:09:33,870 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 115 00:09:33,870 --> 00:09:41,050 do computador, o computador não possa adivinhe instantaneamente o número do usuário. Muita conversa, vamos salvar tudo isso e dar 116 00:09:41,050 --> 00:09:43,020 uma olhada nisso. 117 00:09:43,060 --> 00:09:50,660 Vamos inserir 55 e confirmar e clicar em Iniciar Jogo, e não podemos encontrar uma variável em Iniciar Jogo. 118 00:09:50,710 --> 00:09:57,820 Portanto, o problema aqui é que eu executo, sim, que deve ser usado no início do jogo aqui, no 119 00:09:57,820 --> 00:10:03,080 botão iniciar no componente do jogo inicial, porque é claro que é uma propriedade 120 00:10:03,080 --> 00:10:05,270 que estamos recebendo, não é uma 121 00:10:05,380 --> 00:10:07,340 função definida aqui, é 122 00:10:07,420 --> 00:10:10,500 definida nos adereços, é esse adereço no final. 123 00:10:10,780 --> 00:10:12,990 Tão pequeno erro, vamos tentar novamente 124 00:10:13,000 --> 00:10:15,330 depois de corrigir isso, clique em Iniciar 125 00:10:15,430 --> 00:10:17,410 jogo e isso parece bom. 126 00:10:17,410 --> 00:10:18,620 Agora vemos os 127 00:10:18,620 --> 00:10:20,610 adversários adivinhando e podemos dar algumas 128 00:10:20,620 --> 00:10:27,240 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 129 00:10:27,250 --> 00:10:28,570 na tela do jogo. 130 00:10:28,570 --> 00:10:35,320 Agora, vamos ter certeza de que podemos realmente dar algumas dicas ao computador aqui e garantir que o computador tenha 131 00:10:35,320 --> 00:10:38,740 a chance de resolver isso e adivinhar o nosso número.