1
00:00:02,450 --> 00:00:08,430
Ahora, antes de agregar más lógica, trabajemos en la interfaz de usuario, así que en lo que mostramos.

2
00:00:08,450 --> 00:00:11,670
Entonces, aquí, devolveré una vista al

3
00:00:11,700 --> 00:00:23,190
final y en esa vista quiero tener un texto donde diga que los oponentes adivinan, entonces lo que adivinó la computadora y luego podemos reutilizar el

4
00:00:23,230 --> 00:00:27,760
contenedor de números para presentar muy bien ese número adivinado.

5
00:00:27,760 --> 00:00:34,330
Entonces, esa es una gran ventaja de tener componentes tan reutilizables porque puede reutilizarlos, supongo, así que eso es lo

6
00:00:34,330 --> 00:00:36,040
que estamos haciendo aquí.

7
00:00:36,040 --> 00:00:42,400
Usaremos ese contenedor de números nuevamente, debajo de que los oponentes adivinen el texto aquí para tener nuestro

8
00:00:42,400 --> 00:00:44,510
propio contenedor de números y generen

9
00:00:44,650 --> 00:00:47,810
la suposición actual aquí. La suposición actual es nuestro

10
00:00:47,830 --> 00:00:52,130
estado, recuerde que es lo que inicializamos aquí y lo que pronto podremos cambiar también.

11
00:00:52,210 --> 00:01:00,340
Entonces, eso es lo que se está obteniendo aquí, a continuación, ahora también podemos presentar nuestra tarjeta con dos botones que permiten al usuario dar

12
00:01:00,340 --> 00:01:02,290
una pista a la computadora.

13
00:01:02,950 --> 00:01:11,320
Entonces, aquí, importaré la tarjeta de la tarjeta de componentes para envolver estos botones allí y, por lo tanto, también podemos

14
00:01:11,320 --> 00:01:15,850
importar el botón de React Native porque también lo necesitaremos en

15
00:01:16,200 --> 00:01:25,880
un segundo y luego simplemente tendremos nuestra tarjeta aquí y en esa tarjeta , Quiero tener un botón con un título de inferior y

16
00:01:25,880 --> 00:01:33,860
otro botón donde digamos mayor, estas son dos direcciones en las que podemos dar una pista, entonces el número que

17
00:01:33,890 --> 00:01:37,070
adivinó es demasiado bajo, es demasiado alto,

18
00:01:37,070 --> 00:01:44,520
entonces podemos dar el una sugerencia de computadora con estos botones y onPress, por el momento solo registraré una

19
00:01:44,820 --> 00:01:49,500
función vacía que no hace nada, que por supuesto pronto cambiará

20
00:01:49,500 --> 00:01:57,060
y generará efectivamente un nuevo número aleatorio y con eso, ahora es el momento de agregar Algunos estilos aquí.

21
00:01:57,110 --> 00:02:02,450
Quiero tener un estilo para mi pantalla general y, como antes, obtendré un flex

22
00:02:02,450 --> 00:02:06,950
para tomar todo el espacio disponible en la pantalla debajo del encabezado

23
00:02:07,070 --> 00:02:12,410
que tenemos en la parte superior, agregar un relleno de 10 para tener algo

24
00:02:12,410 --> 00:02:23,370
de espacio alrededor del contenido para que no se asiente directamente en los bordes y también use elementos de alineación aquí para centrar nuestro contenido horizontalmente y esa propiedad de

25
00:02:23,370 --> 00:02:29,190
pantalla se usa en la vista circundante aquí para agregar estilos de pantalla allí para que

26
00:02:29,190 --> 00:02:36,400
el contenido en esta pantalla general esté bien posicionado. Ahora, para estos botones, sería bueno que estuvieran sentados uno al lado

27
00:02:36,470 --> 00:02:43,480
del otro, por lo que en la tarjeta podemos agregar un estilo, tal vez usar el contenedor de botones como nombre aquí y, por lo

28
00:02:43,480 --> 00:02:47,320
tanto, agregar el mismo nombre aquí en nuestra hoja de estilo porque eso es

29
00:02:47,560 --> 00:02:54,160
lo que nos referimos y establecemos la dirección de flexión aquí para remar y podemos establecer una dirección de flexión aquí porque estoy haciendo

30
00:02:54,160 --> 00:02:54,930
esto en

31
00:02:55,060 --> 00:03:01,570
mi tarjeta, pero si echamos un vistazo, en esa tarjeta, distribuimos estos estilos en una vista y un view usa flexbox para que podamos

32
00:03:01,570 --> 00:03:06,820
establecer una dirección de flexión aquí y eso es lo que estoy haciendo allí, configurar la dirección de flexión

33
00:03:06,820 --> 00:03:13,780
para remar para colocar los elementos uno al lado del otro horizontalmente. justifyContent con espacio alrededor, tal vez, para tener

34
00:03:13,780 --> 00:03:21,760
el espacio libre alrededor de los botones, a la izquierda y a la derecha distribuidos equitativamente y también agregar un margen superior de

35
00:03:21,760 --> 00:03:29,080
20 para que esta tarjeta con nuestros botones no se encuentre directamente al lado del número adivinado, pero hay algo de

36
00:03:29,080 --> 00:03:35,770
espacio intermedio y también puede darle un ancho de 300 y un ancho máximo del 80% para asegurarse de

37
00:03:35,770 --> 00:03:43,530
que esto nunca pueda exceder los límites de la vista principal. Ahora, si guardamos esto, sería bueno ver eso y para

38
00:03:43,530 --> 00:03:47,460
eso, necesitamos una forma de ir a la pantalla del juego.

39
00:03:47,460 --> 00:03:53,070
Ahora estamos usando la pantalla de inicio del juego en el componente de la aplicación, por lo que también tendremos que usar la

40
00:03:53,070 --> 00:03:58,830
pantalla del juego allí y administrar el número seleccionado en ese componente de la aplicación porque ese es el único componente que está en

41
00:03:58,830 --> 00:04:00,720
la pantalla todo el tiempo, además del encabezado,

42
00:04:00,720 --> 00:04:06,120
pero el componente de la aplicación también es el componente que mantendrá la pantalla de inicio del juego y la pantalla del

43
00:04:06,330 --> 00:04:07,680
juego pronto y, por lo

44
00:04:07,680 --> 00:04:12,540
tanto, es el componente donde también podemos pasar datos a la pantalla de inicio del juego y a la

45
00:04:12,660 --> 00:04:13,730
pantalla del juego.

46
00:04:13,860 --> 00:04:22,680
Así que importaremos la pantalla del juego aquí desde la pantalla del juego de pantallas y, por supuesto, quiero renderizar la pantalla de mi juego aquí, pero

47
00:04:22,680 --> 00:04:29,010
no si la pantalla de inicio del juego todavía es visible, quiero tener cualquiera de las dos y nota

48
00:04:29,010 --> 00:04:34,110
al margen, también hay una diferente forma de cargar diferentes componentes y profundizaremos en eso

49
00:04:34,110 --> 00:04:37,540
en un módulo separado en el módulo de navegación.

50
00:04:37,560 --> 00:04:43,050
Ahora, si bien cubriremos diferentes soluciones de navegación más adelante, hay una forma de representar cualquiera de las

51
00:04:43,050 --> 00:04:44,840
dos pantallas en este momento,

52
00:04:45,030 --> 00:04:49,620
también tenemos una forma de representar solo una de estas dos pantallas en este momento

53
00:04:49,620 --> 00:04:52,040
y para eso, no necesitamos una herramienta especial

54
00:04:52,380 --> 00:04:56,770
o algo así, podemos usar la lógica normal de React, podemos procesar este contenido condicionalmente.

55
00:04:56,940 --> 00:05:00,980
Todo lo que necesitamos hacer para eso es que necesitamos administrar algún estado en

56
00:05:00,990 --> 00:05:04,950
el componente de nuestra aplicación, también necesitamos administrar el número seleccionado aquí.

57
00:05:04,950 --> 00:05:14,250
Entonces agregaré el estado de uso aquí y luego simplemente usaré mi estado aquí e inicializaré esto sin ningún valor al final y allí, quiero obtener el

58
00:05:14,250 --> 00:05:15,010
número

59
00:05:15,260 --> 00:05:24,000
seleccionado o el número de usuario y establecer el número de usuario como una función de actualización aquí e inicialmente eso no está definido y

60
00:05:24,000 --> 00:05:25,280
ahora aquí necesito una

61
00:05:25,380 --> 00:05:27,250
función en la que podamos

62
00:05:27,300 --> 00:05:29,870
cambiar esto, como el controlador de inicio

63
00:05:30,030 --> 00:05:30,920
del juego,

64
00:05:30,930 --> 00:05:31,920
que suena como

65
00:05:31,920 --> 00:05:38,610
un nombre apropiado porque tendremos ese número si el usuario presiona el botón de inicio del juego aquí en

66
00:05:38,610 --> 00:05:40,550
la pantalla de inicio del juego.

67
00:05:40,800 --> 00:05:45,240
Entonces, el controlador de inicio del juego obtendrá el número seleccionado como entrada, eso es una suposición que tenemos que hacer

68
00:05:45,240 --> 00:05:51,860
aquí y establecer el número de usuario para que sea ese número seleccionado aquí. Ahora, cuando ese sea el caso, siempre que tengamos un

69
00:05:51,920 --> 00:05:56,330
número de usuario, sabemos que el juego se está ejecutando y sabemos que podemos mostrar

70
00:05:56,330 --> 00:06:00,320
la pantalla del juego en lugar de la pantalla de inicio del juego.

71
00:06:00,350 --> 00:06:06,530
Entonces, aquí podemos usar una variable de contenido, por ejemplo, y decir que nuestro contenido predeterminado es la pantalla de inicio del juego

72
00:06:06,530 --> 00:06:07,140
y que

73
00:06:07,250 --> 00:06:13,130
es el código React normal, como lo conoce también en React For Web, puede almacenar componentes como este en variables y luego

74
00:06:13,190 --> 00:06:16,710
simplemente mostrar la variable hacia abajo allí, también es lo que ya hacemos

75
00:06:16,730 --> 00:06:23,050
en la pantalla de inicio del juego con la salida confirmada. Por lo tanto, la pantalla de inicio de juegos es

76
00:06:23,050 --> 00:06:24,120
nuestra salida

77
00:06:24,130 --> 00:06:28,730
predeterminada, pero ahora podemos agregar una comprobación de if y verificar si el contenido es

78
00:06:28,740 --> 00:06:33,510
true-ish, eso es lo que comprueba esta comprobación, por lo que será false-ish inicialmente si

79
00:06:33,630 --> 00:06:40,260
no está definido, pero ahora si es cierto, puede establecer el número de usuario, así que verifiqué si el número de usuario

80
00:06:40,260 --> 00:06:42,060
es verdadero-ish, si eso es verdadero-ish,

81
00:06:42,060 --> 00:06:48,330
entonces sabemos que se seleccionó un número, será indefinido y por lo tanto falso inicialmente pero si es verdadero-ish, si

82
00:06:48,510 --> 00:06:49,700
un se eligió el

83
00:06:49,710 --> 00:06:56,450
número, luego configuraremos el contenido aquí para que sea la pantalla del juego y luego rendericemos lo que esté en el contenido

84
00:06:56,470 --> 00:07:01,370
allí abajo y esa será la pantalla del juego o la pantalla de inicio del juego.

85
00:07:01,380 --> 00:07:07,350
Entonces, cuando hacemos clic en iniciar juego aquí con otro elegido, esto debería cambiar aquí si y eso es lo importante, si nos aseguramos de

86
00:07:07,470 --> 00:07:09,110
que el controlador de inicio del

87
00:07:09,210 --> 00:07:15,840
juego se pueda activar desde dentro de la pantalla de inicio del juego. Ahora para eso, usamos un patrón React predeterminado

88
00:07:15,840 --> 00:07:23,120
de pasar una referencia a este controlador a ese componente, tal vez en el accesorio onStartGame, que me

89
00:07:23,130 --> 00:07:28,200
suena como un nombre apropiado. Reenviamos el controlador de inicio del

90
00:07:28,200 --> 00:07:34,350
juego, solo la referencia sin paréntesis aquí, solo una referencia, un puntero en esta función y onStartGame ahora

91
00:07:34,740 --> 00:07:39,240
es una propiedad que podemos usar en la pantalla de inicio del juego.

92
00:07:39,300 --> 00:07:46,410
Así que aquí en la pantalla de inicio del juego, cuando hacemos clic en el botón de inicio del juego aquí, quiero activar ese accesorio

93
00:07:46,590 --> 00:07:47,370
al final.

94
00:07:47,370 --> 00:07:57,090
Entonces, aquí tengo onPress y, al final, quiero ejecutar onStartGame y reenviar aquí el número seleccionado actualmente, que se

95
00:07:57,090 --> 00:08:01,440
administra en la pantalla de inicio del juego.

96
00:08:01,440 --> 00:08:08,310
Así que aquí, reenvío esto a onStartGame y onStartGame está vinculado al controlador de inicio del juego que

97
00:08:08,370 --> 00:08:11,190
espera y luego recibe ese número seleccionado.

98
00:08:11,190 --> 00:08:16,690
Así es como nos aseguramos de que al hacer clic en ese botón para iniciar la pantalla del juego se active este método o esta función aquí

99
00:08:16,690 --> 00:08:17,700
y cuando se activa

100
00:08:17,700 --> 00:08:20,570
esta función, establecemos el número de usuario, esto asegura que el contenido sea la

101
00:08:20,580 --> 00:08:26,160
pantalla del juego y, por lo tanto, deberíamos ver La pantalla del juego. Ahora, una pieza que falta es que

102
00:08:26,160 --> 00:08:33,120
en la pantalla del juego, necesito la elección del usuario para generar mi número aleatorio inicial y excluir esa elección del

103
00:08:33,150 --> 00:08:38,130
usuario correctamente para ese primer número aleatorio y, por lo tanto, debemos pasar una propiedad

104
00:08:38,130 --> 00:08:44,070
llamada elección del usuario a la pantalla del juego. Entonces, podemos agregar el accesorio de elección del usuario aquí

105
00:08:44,070 --> 00:08:49,920
y pasar el número de usuario, que es el estado que estamos administrando en el componente de la aplicación,

106
00:08:49,920 --> 00:08:53,040
que es el número seleccionado que estamos almacenando en el estado

107
00:08:53,040 --> 00:08:55,580
aquí, pasarlo a la pantalla del juego.

108
00:08:55,830 --> 00:09:02,280
Así que espero que el flujo de datos sea claro, obtenemos ese número seleccionado de la pantalla de inicio del juego cuando se presiona ese botón,

109
00:09:02,280 --> 00:09:05,240
se presiona el botón de inicio del juego, luego lo almacenamos

110
00:09:05,280 --> 00:09:10,440
en el estado del componente de la aplicación aquí en el estado de número de uso con el ayuda para establecer

111
00:09:10,440 --> 00:09:16,170
el número de usuario y luego usamos ese número de usuario para pasarlo a la pantalla del juego, que solo se muestra si

112
00:09:16,170 --> 00:09:21,510
tenemos números de usuario, por lo que si el juego se está ejecutando, si el juego se inició de modo que

113
00:09:21,510 --> 00:09:27,690
en la pantalla del juego, podemos usar el número de usuario que se recibe en el accesorio de elección del usuario para luego generar el

114
00:09:27,780 --> 00:09:33,870
nuevo número aleatorio que la computadora adivinó donde esta elección del usuario, este número de usuario está excluido, de modo que para la primera suposición

115
00:09:33,870 --> 00:09:41,050
de la computadora, la computadora no puede adivina al instante el número de usuario. Hablamos mucho, guardemos todo eso y

116
00:09:41,050 --> 00:09:43,020
echemos un vistazo.

117
00:09:43,060 --> 00:09:50,660
Ingresemos 55 y confirmemos y haga clic en iniciar juego y no podemos encontrar una variable en iniciar juego.

118
00:09:50,710 --> 00:09:57,820
Entonces, el problema aquí es que ejecuto, sí, eso debería ser accesorios en el juego de inicio aquí, en el botón

119
00:09:57,820 --> 00:10:03,080
de inicio del juego en el componente de inicio del juego porque, por supuesto, es una

120
00:10:03,080 --> 00:10:05,270
propiedad que estamos obteniendo, no es

121
00:10:05,380 --> 00:10:07,340
una función definida aquí, está

122
00:10:07,420 --> 00:10:10,500
definida en los accesorios, es este accesorio al final.

123
00:10:10,780 --> 00:10:12,990
Pequeño error, intentemos nuevamente después de

124
00:10:13,000 --> 00:10:15,330
arreglar esto, haga clic en iniciar juego

125
00:10:15,430 --> 00:10:17,410
y se ve bien.

126
00:10:17,410 --> 00:10:18,620
Ahora vemos que

127
00:10:18,620 --> 00:10:20,610
los oponentes adivinan y podemos dar algunas pistas

128
00:10:20,620 --> 00:10:27,240
aquí que en este momento no tienen ningún efecto pero que pronto tendrán un efecto y, por lo tanto, estamos en la siguiente pantalla, estamos

129
00:10:27,250 --> 00:10:28,570
en la pantalla del juego.

130
00:10:28,570 --> 00:10:35,320
Ahora asegurémonos de que realmente podamos darle algunas pistas a la computadora y asegurarnos de que la computadora tenga

131
00:10:35,320 --> 00:10:38,740
la oportunidad de resolver esto y adivinar nuestro número.