1
00:00:02,310 --> 00:00:08,400
É claro que depende de você como você deseja estilizar esse texto de confirmação aqui ou, na verdade,

2
00:00:08,400 --> 00:00:15,630
não deve ser apenas texto, deve ser uma visualização com o texto que gera nosso número e, em seguida, um botão para

3
00:00:15,630 --> 00:00:21,780
iniciar o jogo e você pode definitivamente fazer uma pausa o vídeo neste momento e crie seu próprio estilo,

4
00:00:21,780 --> 00:00:23,050
seu próprio layout.

5
00:00:23,100 --> 00:00:27,510
Eu tenho um certo layout em mente que certamente será diferente do seu, mas

6
00:00:27,510 --> 00:00:32,430
não há decisão certa ou errada aqui, então definitivamente tome isso como outra chance de criar

7
00:00:32,430 --> 00:00:36,990
seu próprio layout para isso e um botão que agora não faz nada mas é

8
00:00:36,990 --> 00:00:42,520
aí que permite ao usuário iniciar o jogo e, após uma breve pausa que você pode usar para

9
00:00:42,520 --> 00:00:45,370
pausar o vídeo, implementarei minha solução junto com você.

10
00:00:45,420 --> 00:00:49,020
Então, aqui está como eu acho que isso ficaria bom.

11
00:00:49,050 --> 00:00:55,640
Quero ter uma visualização para poder configurar um contêiner geral em torno dela ou, na verdade, talvez não uma visualização,

12
00:00:55,650 --> 00:00:57,720
mas por que não usamos nosso cartão

13
00:00:57,720 --> 00:00:59,680
aqui? Parece uma boa idéia.

14
00:00:59,730 --> 00:01:04,980
Agora esse cartão, se dermos uma olhada nele, não tem margem e quero ter um espaçamento entre esse

15
00:01:04,980 --> 00:01:07,950
cartão na parte superior e o meu cartão de resumo.

16
00:01:08,070 --> 00:01:15,540
Portanto, aqui, darei um estilo separado aqui na minha folha de estilo, na tela inicial do

17
00:01:15,540 --> 00:01:21,570
jogo, vou nomear esse contêiner de resumo, o nome como sempre depende de

18
00:01:21,570 --> 00:01:35,400
você e quero ter uma margem para o topo digamos 20, algum espaçamento agradável aqui e adicione-o através do suporte de estilo ao cartão aqui e ali, quero dizer que

19
00:01:35,400 --> 00:01:44,710
você selecionou e, em uma nova linha, imprima o número de uma maneira bem apresentada, talvez o número na forma

20
00:01:44,710 --> 00:01:51,160
de um caixa com uma borda separada com cantos arredondados para que fique claramente

21
00:01:51,310 --> 00:01:56,740
visível ou também maior que o outro texto e, portanto, aqui,

22
00:01:56,740 --> 00:02:04,070
adicionarei uma exibição com um texto lá e nesse texto, terei o número selecionado, mas agora

23
00:02:04,620 --> 00:02:11,030
que a visualização e o texto devem ter um estilo especial e, como pretendo

24
00:02:11,030 --> 00:02:12,690
reutilizá-lo, vou buscá-lo

25
00:02:12,800 --> 00:02:24,080
e terceirizá-lo em um novo componente, e o nome de contêiner numérico. Neste componente, importarei o React do React e importarei a visualização e o texto do React Native e,

26
00:02:25,300 --> 00:02:33,850
em seguida, terei o componente de contêiner de número aqui, exportarei o contêiner de número padrão e, claro, também precisaremos de uma folha de estilo aqui, então vamos

27
00:02:34,090 --> 00:02:41,880
configurar uma folha de estilo bem como com a folha de estilo. criar lá em baixo e, em seguida, neste componente,

28
00:02:42,360 --> 00:02:49,320
retornarei essa coisa de visualização aqui com o número selecionado que agora deve ser repassado e espero

29
00:02:49,530 --> 00:02:55,140
que ele entre as tags de abertura e fechamento do meu próprio componente com

30
00:02:55,320 --> 00:02:57,800
a ajuda de adereços crianças.

31
00:02:57,870 --> 00:03:02,270
Agora, é claro que esse contêiner é algo que você

32
00:03:02,370 --> 00:03:11,590
pode configurar livremente; adicionarei apenas um estilo de contêiner, nome do contêiner aqui onde acho que uma largura de borda de dois pode

33
00:03:11,650 --> 00:03:20,650
parecer boa, portanto, um pouco mais de uma borda mais ampla. Uma cor de borda onde eu realmente quero usar minha cor principal ou

34
00:03:20,680 --> 00:03:23,670
minha cor de destaque, veremos qual parece melhor.

35
00:03:23,770 --> 00:03:33,400
Então, vamos importar cores de constantes / Cores e para a cor da borda, depois usar cores acentuadas por enquanto

36
00:03:33,400 --> 00:03:39,670
e ver como isso se parece. Algum preenchimento para que o número não

37
00:03:39,670 --> 00:03:42,070
fique diretamente nas bordas da caixa

38
00:03:42,080 --> 00:03:49,630
ao redor, não fique diretamente ao lado da borda, um raio de borda 10 para ter algumas bordas

39
00:03:49,630 --> 00:03:50,440
arredondadas,

40
00:03:50,440 --> 00:03:56,940
alguns cantos arredondados, com licença, a propósito, se você preferir deseja segmentar cantos individuais, você pode

41
00:03:57,120 --> 00:04:06,780
fazer isso com o raio superior esquerdo da borda, o raio superior direito, a extremidade superior e o início superior também leva em consideração

42
00:04:06,780 --> 00:04:13,980
as configurações do usuário, se é um idioma da esquerda para a direita ou da direita para

43
00:04:13,980 --> 00:04:22,820
a esquerda, para que você possa segmentar todos os cantos também ou defina um raio para todos os cantos com raio

44
00:04:23,340 --> 00:04:32,120
da borda e também adicione uma pequena margem aqui, margem vertical de 10, talvez para ter algum espaçamento na parte superior

45
00:04:32,300 --> 00:04:40,340
e inferior do contêiner aqui e também importante, centralize o texto lá alinhar o centro do item e justificar

46
00:04:40,340 --> 00:04:48,740
o centro do conteúdo, aproveitando esse comportamento da caixa flexível. E com isso, eu também quero dar o número em si, então o texto tem

47
00:04:48,740 --> 00:04:57,230
um certo estilo e esse estilo é que eu dou ao texto também essa cor de destaque e quero usar um tamanho de fonte 22 para ter que realmente

48
00:04:57,230 --> 00:05:04,280
se destacar e mais tarde , também usaremos uma fonte personalizada. E então essa visão aqui obtém o estilo

49
00:05:04,280 --> 00:05:13,830
do contêiner e o texto aqui, é claro, recebe o estilo numérico. Com essa configuração, podemos usar o contêiner de números na

50
00:05:13,830 --> 00:05:19,740
tela inicial do jogo; portanto, simplesmente adicionamos essa importação e o que estamos fazendo aqui

51
00:05:19,740 --> 00:05:25,000
é bastante normal, pois você tem vários componentes dos quais compõe seu aplicativo.

52
00:05:25,160 --> 00:05:31,560
Portanto, agora podemos usar o contêiner de número no componente da tela inicial do jogo, adicioná-lo aqui abaixo deste texto

53
00:05:32,010 --> 00:05:38,160
e no contêiner de número, obtemos o conteúdo aqui com props children, produzimos com props children, o que significa

54
00:05:38,220 --> 00:05:41,190
que temos que passá-lo entre as tags de

55
00:05:41,250 --> 00:05:44,370
abertura e fechamento, então aqui encaminhamos o número selecionado.

56
00:05:44,580 --> 00:05:48,710
Agora, essa é apenas minha sugestão de como podemos estilizar isso, mas eu gosto

57
00:05:48,900 --> 00:05:54,630
do estilo e, por enquanto, adicionarei um botão aqui, que é uma marca de fechamento automático, o botão interno com

58
00:05:55,080 --> 00:06:02,890
um título de jogo inicial, tudo tampas para fazer com que ele realmente se destaque e salve isso e agora, se escolhermos um número aqui, é isso

59
00:06:02,940 --> 00:06:08,820
que obtemos e não parece muito feio, eu diria. Ainda assim, há duas coisas que eu

60
00:06:08,820 --> 00:06:15,060
quero mudar: esse texto aqui deve ser centralizado e esta caixa com o número não deve

61
00:06:15,330 --> 00:06:22,120
ser tão larga quanto a caixa ao redor, mas deve ser apenas a largura que o número precisar.

62
00:06:22,860 --> 00:06:30,260
Agora, para fazer os dois funcionarem, irei ao meu cartão que contém todo o conteúdo aqui e, com isso,

63
00:06:30,260 --> 00:06:33,900
quero dizer que vou ao estilo na tela inicial

64
00:06:34,040 --> 00:06:35,480
do jogo que

65
00:06:35,750 --> 00:06:45,400
também uso nesse cartão, esse é o meu contêiner de resumo e lá estamos. pode alinhar os itens lá para serem centralizados, em vez de

66
00:06:45,400 --> 00:06:52,280
usar o padrão que seria esticado e agora isso é automaticamente centralizado e a caixa é apenas

67
00:06:52,280 --> 00:06:54,610
a largura que o número exigir.

68
00:06:54,700 --> 00:06:57,360
Agora que não parece muito surrado, uma

69
00:06:57,370 --> 00:07:03,160
última coisa que notei também é que, quando confirmamos uma entrada, também quero usar a API

70
00:07:03,190 --> 00:07:09,940
do teclado para descartar o teclado, para que, assim que pressionarmos confirmar aqui, também fechemos o teclado e agora

71
00:07:10,180 --> 00:07:12,220
temos uma boa saída aqui.

72
00:07:12,220 --> 00:07:16,180
Agora, com isso, temos uma aparência de base sólida, eu diria, podemos escolher

73
00:07:16,180 --> 00:07:22,210
um número, estamos fazendo uma validação aproximada para garantir que tenhamos um número válido e o próximo passo é fazer

74
00:07:22,210 --> 00:07:28,540
com que esse botão de início do jogo funcione e trocamos o que vemos na tela aqui pela tela em que

75
00:07:28,540 --> 00:07:34,540
o jogo está sendo executado, onde o computador está fazendo palpites e garantimos ao usuário a chance de dizer

76
00:07:34,540 --> 00:07:37,850
se os números devem ser maiores ou menores e

77
00:07:37,990 --> 00:07:41,770
então em algum momento ponto finalizado e mostra um game over screen.