1
00:00:02,400 --> 00:00:09,500
Agora, com isso, se formos para a próxima tela onde temos um jogo em execução, enfrentaremos o próximo problema

2
00:00:09,520 --> 00:00:10,610
lá. No

3
00:00:10,610 --> 00:00:15,680
modo retrato, parece bom, mas se girarmos o dispositivo, isso não parecerá muito bom.

4
00:00:15,680 --> 00:00:20,520
Agora, aqui, uma solução poderia ser simplesmente mudar um pouco o estilo,

5
00:00:20,570 --> 00:00:23,320
se não tivermos tanta altura disponível.

6
00:00:23,420 --> 00:00:28,150
Como alternativa, renderizamos um layout totalmente diferente com base no espaço disponível, ambas

7
00:00:28,220 --> 00:00:30,470
seriam opções que você tem.

8
00:00:30,470 --> 00:00:36,920
Você pode, por exemplo, tentar renderizar isso lado a lado, simplesmente adicionando um if check aqui na tela do

9
00:00:36,920 --> 00:00:42,620
jogo, onde você retorna um código jsx totalmente diferente e talvez também com um estilo totalmente diferente

10
00:00:42,620 --> 00:00:49,820
e, portanto, um layout baseado na largura ou altura disponível e, em seguida, você só precisaria configurar um ouvinte que renderize

11
00:00:49,820 --> 00:00:51,200
novamente seu componente.

12
00:00:51,200 --> 00:00:56,150
Portanto, com o cenário definido, como fizemos aqui na tela inicial do jogo, para renderizar

13
00:00:56,150 --> 00:01:02,560
novamente seu componente sempre que for esse o caso. Eu acho que seria bem interessante e, portanto, é algo que farei aqui.

14
00:01:02,570 --> 00:01:08,740
O que vou fazer é querer renderizar meus botões aqui à esquerda e à direita do contêiner de

15
00:01:08,740 --> 00:01:13,370
números, se tivermos apenas uma altura limitada disponível e renderizá-la como sempre, se

16
00:01:13,390 --> 00:01:15,160
não fosse o caso.

17
00:01:15,460 --> 00:01:20,560
Então, eu quero renderizar código jsx totalmente diferente com base em minhas dimensões.

18
00:01:20,560 --> 00:01:30,540
Então, aqui vou adicionar um if check e dizer se as dimensões obtêm a altura da janela, digamos que seja menor que 500

19
00:01:30,670 --> 00:01:33,850
e veremos se esse valor funciona,

20
00:01:33,850 --> 00:01:37,770
então eu quero retornar basicamente esse código jsx

21
00:01:37,860 --> 00:01:47,770
lá em baixo, então eu ' Vou copiar isso, colocá-lo entre parênteses aqui, entre parênteses, mas não quero ter meu cartão aqui.

22
00:01:47,770 --> 00:01:55,390
Em vez disso, terei o primeiro botão principal antes do meu número, o próximo após o número

23
00:01:55,390 --> 00:01:59,530
e eu vou ter tudo disso dentro de uma

24
00:02:02,410 --> 00:02:09,000
nova visão aqui, que abordarei sobre isso, que deve colocar essas três coisas em sequência.

25
00:02:09,010 --> 00:02:16,180
Então, adicionarei um novo estilo aqui, estilos, digamos, controles ou o que você quiser nomeá-lo e agora adiciono isso

26
00:02:16,300 --> 00:02:21,400
à minha folha de estilo aqui e é a mesma folha de estilo

27
00:02:21,400 --> 00:02:27,460
de antes, porque apenas configura os estilos que eu posso usar em qualquer lugar componente,

28
00:02:27,460 --> 00:02:31,540
independentemente de quais condições eu renderize o que e

29
00:02:31,540 --> 00:02:38,890
aqui, definirei essa direção flexível para linha, o padrão é coluna e agora queremos ter uma linha aqui e

30
00:02:39,070 --> 00:02:48,360
definir o conteúdo justificado para o espaço e veremos como isso parece. Se agora salvarmos isso e iniciarmos um novo jogo aqui no modo paisagem, não parecerá tão

31
00:02:48,390 --> 00:02:49,470
ruim, ainda há

32
00:02:49,470 --> 00:02:54,690
trabalho a fazer, mas agora é o que recebo aqui no modo paisagem ou em dispositivos com altura limitada.

33
00:02:55,350 --> 00:02:57,370
Em dispositivos com mais altura,

34
00:02:57,480 --> 00:03:01,530
ainda recebo a visualização antiga, que é exatamente o que eu quero.

35
00:03:01,620 --> 00:03:08,260
Agora vamos corrigir essa visualização aqui e, portanto, podemos simplesmente ir para os controles e fornecer uma largura

36
00:03:08,260 --> 00:03:16,340
de, digamos, 80%, para que o contêiner geral seja maior e muito importante, defina alinhar itens aqui para centralizar, de modo que o

37
00:03:16,340 --> 00:03:24,340
contêiner numérico e os dois botões estão todos centralizados verticalmente. E agora com isso, se fizermos

38
00:03:24,340 --> 00:03:33,560
outra tentativa aqui, inserimos isso, parece muito melhor e funciona da mesma maneira que antes, mas

39
00:03:33,560 --> 00:03:38,950
agora temos um layout diferente com base em nossas dimensões.

40
00:03:38,990 --> 00:03:44,960
Agora é claro que o problema é que esse layout não muda se girarmos, não o fim

41
00:03:45,050 --> 00:03:49,560
do mundo, mas podemos querer voltar para o layout antigo e você

42
00:03:49,670 --> 00:03:54,690
aprendeu como isso funciona, só precisamos gerenciar isso com state e set um ouvinte.

43
00:03:54,690 --> 00:04:00,200
Agora eu já tenho useState e useEffect aqui na tela do jogo, então tudo o que

44
00:04:00,200 --> 00:04:08,180
precisamos fazer no componente da tela do jogo é começar configurando esse estado aqui e, no final, o que queremos gerenciar aqui

45
00:04:08,370 --> 00:04:18,370
é a largura do dispositivo, que muda com o tempo, talvez nomeie essa largura de dispositivo disponível para deixar claro que não estamos definindo a largura do dispositivo

46
00:04:18,370 --> 00:04:21,960
aqui, apenas definindo a largura do dispositivo detectado; portanto, você

47
00:04:22,030 --> 00:04:25,370
também pode nomear a largura do dispositivo detectado.

48
00:04:25,450 --> 00:04:34,090
Vou chamá-lo de largura disponível do dispositivo e definir a largura disponível do dispositivo. Eu gerencio isso com o useState, onde uso dimensões para obter a

49
00:04:34,090 --> 00:04:43,930
largura da janela para obter a largura disponível do dispositivo e, é claro, acabei de reconhecer que isso está errado, estamos interessados na altura, não na

50
00:04:43,930 --> 00:04:44,470
largura,

51
00:04:44,470 --> 00:04:46,480
mas também precisaremos da largura

52
00:04:49,520 --> 00:04:52,850
para essa verificação aqui, então precisaremos de ambos.

53
00:04:53,300 --> 00:04:59,250
Portanto, temos a largura do dispositivo disponível e também gerenciarei outro estado, que

54
00:04:59,270 --> 00:05:00,560
é a

55
00:05:00,560 --> 00:05:03,990
altura do dispositivo disponível. Aqui também é

56
00:05:04,000 --> 00:05:07,300
definido a altura do dispositivo disponível e,

57
00:05:07,300 --> 00:05:11,700
portanto, aqui inicialmente, obtemos a altura do dispositivo disponível e

58
00:05:11,710 --> 00:05:19,710
agora precisamos alterar ambos quando nosso mudanças de orientação. Para isso, podemos usar o efeito, por exemplo, aqui, configurar uma

59
00:05:19,710 --> 00:05:29,310
função que seja executada sempre que nosso componente for renderizado e, nessa função, configurarei dimensões, adicionarei ouvinte de eventos, ouviremos os eventos de alteração e configurarei uma função

60
00:05:29,330 --> 00:05:35,810
que deve ser acionada quando isso for necessário. Nesse caso, o layout de atualização, por exemplo, é um

61
00:05:35,810 --> 00:05:39,720
nome adequado, porque é exatamente isso que estamos fazendo e,

62
00:05:39,850 --> 00:05:51,420
lá, chamo de definir a largura disponível do dispositivo e defino isso para as dimensões obter janela. largura e, é claro, também define a altura disponível do dispositivo para

63
00:05:51,420 --> 00:05:59,410
dimensões, para obter a altura da janela. O layout de atualização é, portanto, a função que

64
00:05:59,410 --> 00:06:05,680
apontamos em nosso ouvinte de evento em dimensões e, como antes, precisamos de uma função

65
00:06:06,010 --> 00:06:14,080
de limpeza para evitar renderizações desnecessárias e, nessa função, simplesmente usamos dimensões remover a alteração de ouvinte de evento

66
00:06:14,170 --> 00:06:23,010
onde apontamos para o layout de atualização e 'são bons. Agora, apenas precisamos usar nossos dois estados aqui - largura

67
00:06:23,040 --> 00:06:25,390
e altura disponíveis do dispositivo.

68
00:06:25,500 --> 00:06:32,190
Portanto, se verificar aqui, eu uso a largura disponível do dispositivo e aqui onde estou interessado

69
00:06:32,220 --> 00:06:40,170
na altura, uso a altura disponível do dispositivo. Se agora salvarmos isso, teremos um layout em que, se

70
00:06:40,170 --> 00:06:47,070
iniciarmos um jogo, teremos essa aparência, mas se girarmos para o modo paisagem, isso mudará e, é

71
00:06:47,070 --> 00:06:55,830
claro, também mudará novamente, se necessário. Aqui no iOS, temos essa aparência e, se rodarmos. Portanto, agora isso parece realmente

72
00:06:55,830 --> 00:07:03,500
bom e está dando a aparência desejada, com base na largura e altura disponíveis, e também

73
00:07:03,510 --> 00:07:06,960
respeita as alterações quando giramos o dispositivo.