1
00:00:02,440 --> 00:00:07,590
Portanto, para garantir que o computador possa realmente terminar o jogo e adivinhar o

2
00:00:07,720 --> 00:00:12,000
número certo, precisamos verificar o que o computador adivinhou e terminar o

3
00:00:12,010 --> 00:00:17,590
jogo se for o número que inserimos. Para isso, podemos usar outro gancho React e esse é o gancho useEffect.

4
00:00:17,590 --> 00:00:25,670
useEffect permite executar efeitos colaterais ou, em geral, permite executar a lógica após cada ciclo de renderização e, como mencionado anteriormente,

5
00:00:25,810 --> 00:00:31,300
se toda essa coisa do React hooks for relativamente nova para você, confira definitivamente

6
00:00:31,300 --> 00:00:36,790
alguns recursos dedicados do React hooks ou mergulhe no meu Guia completo do React

7
00:00:36,850 --> 00:00:42,660
Course, onde abordo os ganchos em detalhes. Então, o que vou fazer com o useEffect agora é que eu

8
00:00:42,770 --> 00:00:49,370
o chamo aqui depois de inicializar meu estado e meus refs aqui e ali, temos uma função, então useEffect recebe uma função e essa função por padrão

9
00:00:49,370 --> 00:00:54,950
é executada após cada ciclo de renderização para este componente. Portanto, toda vez que ela

10
00:00:54,950 --> 00:00:59,750
é renderizada, essa função é executada, depois de renderizada, isso também

11
00:00:59,750 --> 00:01:03,150
é importante, não antes, nem simultaneamente, depois.

12
00:01:03,200 --> 00:01:10,290
Agora, quero verificar se o computador de palpite atual é igual à escolha do usuário, porque isso significa

13
00:01:10,290 --> 00:01:11,980
que o jogo acabou.

14
00:01:12,120 --> 00:01:16,830
Agora, isso não pode ser o caso do primeiro ciclo de renderização, é claro, porque

15
00:01:16,830 --> 00:01:19,940
excluímos a escolha do usuário dos números possíveis, mas

16
00:01:19,940 --> 00:01:25,790
da segunda linha em diante. Assim, quando clicamos em menor ou maior pela primeira vez, isso pode acontecer.

17
00:01:25,860 --> 00:01:29,220
Então, aí, eu quero acionar uma mensagem de

18
00:01:29,220 --> 00:01:35,970
que o jogo acabou e enviar para o aplicativo. js para que possamos trocar a tela do jogo por uma tela

19
00:01:35,970 --> 00:01:36,890
de game over.

20
00:01:36,970 --> 00:01:39,000
Agora, ainda não temos essa tela, então

21
00:01:39,000 --> 00:01:45,300
vamos adicioná-la, vamos adicionar uma tela de game over aqui na pasta screens e vamos criar uma muito simples por enquanto, vamos

22
00:01:45,300 --> 00:01:47,250
ajustá-la mais tarde. Lá, eu

23
00:01:47,250 --> 00:01:50,660
simplesmente terei uma visualização, um texto e uma

24
00:01:50,700 --> 00:02:00,760
folha de estilo; portanto, o que normalmente importamos do React Native e, em seguida, temos o componente game over screen, que pega alguns

25
00:02:00,760 --> 00:02:04,000
objetos e depois retorna jsx no final.

26
00:02:04,000 --> 00:02:12,270
Aqui temos esses estilos com a Folha de estilo. criar e depois exportamos o game over screen como padrão.

27
00:02:12,370 --> 00:02:17,170
Agora, como eu disse, quero manter isso simples, por enquanto, apenas visualizarei o texto do

28
00:02:17,170 --> 00:02:22,220
jogo e mostraremos mais detalhes mais tarde. Por enquanto, aqui, apenas atribuirei

29
00:02:22,230 --> 00:02:28,560
algum estilo, meu estilo de tela que adicionarei a esse objeto que passamos para a folha

30
00:02:28,690 --> 00:02:37,720
de estilos aqui na parte inferior, defina flex como 1 e talvez justifiqueContent para centralizar e depois alinhe os itens para centralizar, para

31
00:02:37,750 --> 00:02:40,410
que este texto esteja centralizado no momento.

32
00:02:40,420 --> 00:02:44,440
Agora temos a tela do game over e queremos renderizar isso em vez

33
00:02:44,440 --> 00:02:53,050
da tela do jogo, se o jogo terminar. Então, vamos voltar ao aplicativo. js e importe o game over screen da

34
00:02:53,050 --> 00:02:56,100
pasta screens e depois do game over screen, e

35
00:02:56,240 --> 00:03:04,240
a pergunta agora é claro: qual é a nossa condição para renderizar isso? Bem, no final, precisaremos de mais uma informação

36
00:03:04,390 --> 00:03:07,000
adicional e esse é

37
00:03:07,000 --> 00:03:12,570
o número de rodadas necessárias para o computador terminar o jogo.

38
00:03:12,700 --> 00:03:18,720
Então, uma coisa que eu quero armazenar aqui no componente de aplicativo é outro estado que eu gerencio e

39
00:03:18,730 --> 00:03:24,580
esse é o número de rodadas necessárias para terminar, que é zero inicialmente, porque ainda não começamos o

40
00:03:24,580 --> 00:03:26,120
jogo, e vou dar

41
00:03:26,260 --> 00:03:31,540
o nome de palpites e defina rondas de adivinhação e você pode nomear isso como quiser.

42
00:03:31,540 --> 00:03:34,130
Agora, o objetivo é definir isso quando o jogo terminar.

43
00:03:34,140 --> 00:03:38,230
Então, para isso, também adicionarei outra função aqui ao componente

44
00:03:38,230 --> 00:03:45,790
do aplicativo, game over handler e ali, quero obter meu número de rodadas como argumento, portanto, espero obtê-lo

45
00:03:45,790 --> 00:03:50,010
aqui para que eu possa chamar rodadas de palpite ao

46
00:03:50,020 --> 00:03:56,440
meu número de rodadas que cheguei aqui. Agora, o game over handler deve ser acionado de dentro da tela do jogo, obviamente.

47
00:03:56,560 --> 00:04:01,390
Então aqui na tela do jogo, eu quero passar um suporte que eu nomeei em GameOver, soa como um

48
00:04:01,420 --> 00:04:06,430
nome apropriado que pode ser chamado de dentro da tela do jogo ou que contém uma referência de função

49
00:04:06,430 --> 00:04:10,960
que pode ser chamada de dentro do tela do jogo e a referência de função é uma

50
00:04:10,960 --> 00:04:13,600
referência nesta função de manipulador de jogo, é claro.

51
00:04:13,600 --> 00:04:19,450
Portanto, dentro da tela do jogo, agora podemos usar o suporte onGameOver para executar esta função e

52
00:04:19,450 --> 00:04:22,720
passar o número de rodadas que o computador levou para

53
00:04:22,720 --> 00:04:29,460
adivinhar o nosso número. Em seguida, definimos esse número de rodadas aqui, armazenamos em nosso estado de rodadas e agora no

54
00:04:29,470 --> 00:04:37,480
componente de aplicativo, sabemos que, se as rodadas de adivinhação são zero, o jogo ainda não começou ou está sendo executado, se for maior que

55
00:04:37,480 --> 00:04:40,560
zero, o manipulador de game over é executado e

56
00:04:40,720 --> 00:04:41,970
o jogo termina.

57
00:04:41,980 --> 00:04:43,840
Então, queremos mostrar a tela do game

58
00:04:43,870 --> 00:04:46,490
over se as rodadas de palpites forem maiores que zero.

59
00:04:46,540 --> 00:04:52,180
A propósito, se iniciarmos um novo jogo, eu também quero redefinir minhas rodadas de palpite para zero, porque se um novo

60
00:04:52,180 --> 00:04:52,570
jogo

61
00:04:52,570 --> 00:04:56,350
for iniciado, queremos redefinir o número de rodadas que o computador levou para 0.

62
00:04:56,470 --> 00:04:58,600
Então, se for maior que zero,

63
00:04:58,630 --> 00:05:02,110
o jogo acabou. Nesse caso, quero mostrar a tela do game over.

64
00:05:02,110 --> 00:05:07,540
Então, aqui, se eu verificar se temos um número de usuário, caso em que mostro a tela

65
00:05:07,960 --> 00:05:13,110
do jogo, isso só será correto se as rodadas de palpite forem menores ou iguais a

66
00:05:13,120 --> 00:05:16,780
zero, menor não é possível, mas ainda assim, podemos verificar isso.

67
00:05:16,900 --> 00:05:20,770
Então, se for esse o caso, sabemos que o jogo

68
00:05:20,770 --> 00:05:28,650
certamente está rodando; caso contrário, se as rodadas de palpites forem maiores que zero, sabemos que o jogo acabou e, portanto,

69
00:05:28,650 --> 00:05:31,960
o conteúdo será igual ao game over screen,

70
00:05:31,980 --> 00:05:37,160
neste momento esse é apenas um componente como este sem adereços pelos quais passamos.

71
00:05:37,180 --> 00:05:43,270
Portanto, agora temos uma condição em que renderizamos o game over screen, tudo o que precisamos fazer agora, precisamos usar o

72
00:05:43,270 --> 00:05:49,330
onGameOver Prop aqui na tela do jogo para, no final, chamar essa função e encaminhar o número de rodadas para

73
00:05:49,330 --> 00:05:51,010
o componente do aplicativo .

74
00:05:51,820 --> 00:05:59,510
Então, de volta à tela do jogo, se useEffect aqui determinar que a escolha certa foi feita, a suposição correta

75
00:05:59,530 --> 00:06:07,120
foi feita e, portanto, o jogo acabou, então aqui, quero chamar adereços onGameOver como uma função e encaminhar a

76
00:06:07,240 --> 00:06:14,380
quantidade de rodadas levou o computador para adivinhar nosso resultado ou nossa escolha e, portanto, esse é outro

77
00:06:14,410 --> 00:06:22,750
estado que precisamos gerenciar aqui na tela do jogo. Temos nossas rodadas e rodadas definidas e, inicialmente, é zero,

78
00:06:22,810 --> 00:06:32,280
quando esse componente é criado pela primeira vez, é claro que zero e rodadas é, portanto, agora o que encaminhar aqui, porque é um

79
00:06:32,290 --> 00:06:37,390
número que incrementaremos a cada palpite, porque no próximo manipulador de palpites, se

80
00:06:37,390 --> 00:06:43,510
estivermos gerando um próximo palpite, além de definir esse palpite aqui em nosso estado, é claro

81
00:06:43,540 --> 00:06:51,630
que também quero definir minhas rodadas e usar o formulário da função onde recebo minhas rodadas atuais e retorno as rodadas

82
00:06:51,760 --> 00:06:53,330
atuais mais um.

83
00:06:53,380 --> 00:06:59,560
Portanto, adiciono uma à quantidade atual de rodadas armazenada em meu estado, para que o novo estado seja rodadas

84
00:06:59,560 --> 00:07:05,930
antigas mais uma porque uma nova rodada foi iniciada. Então, com isso, estamos gerenciando a quantidade de rodadas e estamos

85
00:07:05,930 --> 00:07:12,530
usando isso como uma condição no componente do aplicativo para renderizar a tela do game over e na tela do jogo, verificamos

86
00:07:12,740 --> 00:07:17,480
se o jogo terminou aqui em usoEfeito e agora , fazemos isso sempre que esse componente

87
00:07:17,490 --> 00:07:18,690
é renderizado novamente.

88
00:07:19,010 --> 00:07:26,240
Agora poderíamos fazer isso, mas também podemos simplesmente ser mais honestos ou mais diretos com relação às dependências desse efeito

89
00:07:26,270 --> 00:07:31,640
e isso é algo que você pode ser ou pode fazer adicionando um segundo argumento

90
00:07:31,880 --> 00:07:37,550
para useEffect, primeiro argumento é a função que ele deve executar após renderizar o componente, segundo

91
00:07:37,560 --> 00:07:41,630
argumento que você passou para useEffect é uma matriz de

92
00:07:41,630 --> 00:07:47,690
dependências dessa função e aqui você deve especificar qualquer valor proveniente de fora dessa função de efeito.

93
00:07:47,690 --> 00:07:53,660
Portanto, no nosso caso, esse seria o palpite atual e seria a escolha do usuário e o onGameOver e sempre que esse valor for

94
00:07:54,000 --> 00:07:57,260
alterado, esse efeito será executado novamente; sempre que uma tarefa for alterada após

95
00:07:57,290 --> 00:08:03,380
um ciclo de renderização, o efeito será executado novamente, devo dizer . Se um ciclo de renderização ocorrer e os valores

96
00:08:03,380 --> 00:08:06,840
especificados aqui ainda forem os mesmos do ciclo de renderização

97
00:08:06,860 --> 00:08:11,300
anterior, o efeito não será executado novamente, portanto o efeito será executado novamente

98
00:08:11,390 --> 00:08:17,120
apenas se uma de nossas dependências for alterada. Agora, como eu disse, props escolha do

99
00:08:17,120 --> 00:08:24,230
usuário e props onGameOver são todas as dependências, e para cuidar delas, usarei uma sintaxe Javascript moderna em

100
00:08:24,320 --> 00:08:32,720
que uso a destruição de objetos para desestruturar meus props e obter a opção do usuário e onGameOver. A sintaxe pode parecer

101
00:08:32,720 --> 00:08:33,400
estranha,

102
00:08:33,440 --> 00:08:39,500
mas é como uma desestruturação de matriz, apenas para objetos, estamos retirando essas propriedades. Portanto,

103
00:08:39,500 --> 00:08:45,860
esses nomes de propriedades desse objeto de suporte e os armazenam em constantes com nomes iguais,

104
00:08:45,860 --> 00:08:53,930
para que agora possamos usar apenas a escolha do usuário e apenas use onGameOver, pois agora temos esses valores armazenados em

105
00:08:53,930 --> 00:09:00,350
constantes com esse nome, e estou fazendo isso porque agora podemos adicionar opções de usuário e onGameOver

106
00:09:00,350 --> 00:09:04,340
como dependências nesta lista, caso contrário, teríamos que adicionar objetos

107
00:09:04,340 --> 00:09:10,370
aqui e que realmente muda sempre que o componente pai é alterado e, portanto, não

108
00:09:10,420 --> 00:09:11,990
é uma boa verificação.

109
00:09:12,050 --> 00:09:16,430
Essa é uma verificação melhor, porque agora garantimos que, se algo mais nos adereços mudar, não nos importamos,

110
00:09:16,430 --> 00:09:23,300
apenas se um desses dois valores mudar, esse efeito deve ser executado novamente. Agora, com isso, temos nosso check-in no lugar

111
00:09:23,300 --> 00:09:28,280
que, esperamos, levará a tela do game over se o computador

112
00:09:28,280 --> 00:09:31,530
adivinhar nossos números, então agora vamos

113
00:09:31,670 --> 00:09:42,580
salvar isso e experimentá-lo, talvez aqui no Android para misturar as coisas. Então, digito um número aqui, 32, confirmo, inicio um jogo e é 2; portanto, deve ser maior;

114
00:09:42,580 --> 00:09:43,990
deixe-me também mostrar

115
00:09:43,990 --> 00:09:46,710
como o aviso aparece quando estou no Android; esse

116
00:09:46,750 --> 00:09:50,280
é o alerta padrão do Android. Então era 32, portanto é claro que

117
00:09:50,290 --> 00:09:53,170
deveria ser maior, ainda deveria ser maior, agora deveria ser mais baixo,

118
00:09:53,200 --> 00:09:58,780
deveria ser mais baixo, deveria ser maior, deveria ser mais baixo, deveria ser mais baixo, deveria ser mais baixo, deveria ser maior, deveria

119
00:09:58,780 --> 00:09:59,780
ser maior, o o

120
00:09:59,830 --> 00:10:00,490
jogo acabou.

121
00:10:00,580 --> 00:10:05,590
Isso parece bom, o palpite provavelmente era 32, faria sentido em relação à sequência de números

122
00:10:05,590 --> 00:10:08,800
que tínhamos aqui e, portanto, essa saída faz sentido aqui.