1
00:00:02,450 --> 00:00:08,430
Ora prima di aggiungere più logica, lavoriamo sull'interfaccia utente, quindi su ciò che produciamo.

2
00:00:08,450 --> 00:00:11,670
Quindi qui, restituirò una vista alla fine

3
00:00:11,700 --> 00:00:23,190
e in quella vista voglio avere un testo in cui dico che gli avversari indovinano, quindi ciò che il computer ha indovinato e quindi possiamo riutilizzare

4
00:00:23,230 --> 00:00:27,760
il contenitore dei numeri per presentare bene quel numero indovinato.

5
00:00:27,760 --> 00:00:34,330
Quindi è un enorme vantaggio di avere componenti riutilizzabili perché è possibile riutilizzarli, immagino, quindi è quello

6
00:00:34,330 --> 00:00:36,040
che stiamo facendo qui.

7
00:00:36,040 --> 00:00:42,400
Utilizzeremo di nuovo quel contenitore di numeri, di seguito in cui gli avversari indovinano il testo qui per avere

8
00:00:42,400 --> 00:00:44,510
il nostro contenitore di numeri e produrre

9
00:00:44,650 --> 00:00:47,810
correttamente l'ipotesi corrente qui. L'ipotesi attuale è il nostro

10
00:00:47,830 --> 00:00:52,130
stato, ricorda che è quello che inizializziamo qui e che presto saremo in grado di cambiare.

11
00:00:52,210 --> 00:01:00,340
Ecco cosa sta ottenendo l'output qui, sotto che ora possiamo anche presentare forse la nostra scheda con due pulsanti che consentono all'utente di

12
00:01:00,340 --> 00:01:02,290
dare un suggerimento al computer.

13
00:01:02,950 --> 00:01:11,320
Quindi qui, importerò la carta dalla scheda dei componenti per avvolgere questi pulsanti lì e quindi, possiamo già importare anche il

14
00:01:11,320 --> 00:01:15,850
pulsante da React Native perché ne avremo bisogno anche in un

15
00:01:16,200 --> 00:01:25,880
secondo e quindi avremo semplicemente la nostra carta qui e in quella carta , Voglio avere un pulsante con un titolo inferiore e un

16
00:01:25,880 --> 00:01:33,860
altro pulsante in cui diciamo maggiore, queste sono due direzioni in cui possiamo dare un suggerimento, quindi il numero

17
00:01:33,890 --> 00:01:37,070
che hai indovinato troppo basso, è troppo

18
00:01:37,070 --> 00:01:44,520
alto, quindi possiamo dare il computer un suggerimento con questi pulsanti e onPress, al momento registrerò solo una

19
00:01:44,820 --> 00:01:49,500
funzione vuota che non fa nulla, che ovviamente cambierà presto e

20
00:01:49,500 --> 00:01:57,060
genererà effettivamente un nuovo numero casuale e con quello, ora è il momento di aggiungere alcuni stili qui.

21
00:01:57,110 --> 00:02:02,450
Voglio avere uno stile per il mio schermo generale e come prima, questo diventerà flessibile

22
00:02:02,450 --> 00:02:06,950
per prendere tutto lo spazio disponibile sullo schermo sotto l'intestazione che abbiamo

23
00:02:07,070 --> 00:02:12,410
in alto, aggiungere un'imbottitura di 10 per avere un po 'di spazio attorno al

24
00:02:12,410 --> 00:02:23,370
contenuto in modo che non si trovi direttamente sui bordi e utilizzi anche gli elementi di allineamento qui per centrare il nostro contenuto in orizzontale e quella proprietà dello schermo

25
00:02:23,370 --> 00:02:29,190
viene utilizzata nella vista circostante qui per aggiungere lo schermo degli stili lì in modo che

26
00:02:29,190 --> 00:02:36,400
il contenuto su questo schermo complessivo sia ben posizionato. Ora per questi pulsanti, sarebbe bello se si trovassero uno accanto

27
00:02:36,470 --> 00:02:43,480
all'altro, quindi sulla scheda possiamo aggiungere uno stile, forse usare il contenitore di pulsanti come nome qui e quindi aggiungere lo stesso

28
00:02:43,480 --> 00:02:47,320
nome qui nel nostro foglio di stile perché è quello che ci

29
00:02:47,560 --> 00:02:54,160
riferiamo e impostiamo la direzione flessibile qui per remare e possiamo impostare una direzione flessibile qui perché lo sto facendo sulla

30
00:02:54,160 --> 00:02:54,930
mia carta,

31
00:02:55,060 --> 00:03:01,570
ma se guardiamo, in quella carta, distribuiamo questi stili su una vista e un view utilizza flexbox in modo che possiamo

32
00:03:01,570 --> 00:03:06,820
impostare una direzione flessibile qui ed è quello che sto facendo lì, impostando la direzione flessibile su

33
00:03:06,820 --> 00:03:13,780
riga per posizionare gli elementi uno accanto all'altro in orizzontale. justifyContenuto con spazio intorno forse, per avere lo

34
00:03:13,780 --> 00:03:21,760
spazio libero attorno ai pulsanti, a sinistra e a destra equamente distribuiti e anche aggiungere un margine superiore di 20 in

35
00:03:21,760 --> 00:03:29,080
modo che questa carta con i nostri pulsanti non sia posizionata direttamente accanto al numero indovinato ma c'è una

36
00:03:29,080 --> 00:03:35,770
spaziatura tra e forse anche dare una larghezza di 300 e una larghezza massima dell'80% per assicurarsi che

37
00:03:35,770 --> 00:03:43,530
ciò non possa mai superare i limiti della vista padre. Ora, se lo salviamo, sarebbe bello vederlo e per questo,

38
00:03:43,530 --> 00:03:47,460
abbiamo bisogno di un modo per andare alla schermata di gioco.

39
00:03:47,460 --> 00:03:53,070
Ora stiamo usando la schermata di avvio del gioco nel componente dell'app, quindi dovremo usare anche la schermata di

40
00:03:53,070 --> 00:03:58,830
gioco lì e gestire il numero selezionato in quel componente dell'app perché è l'unico componente che è sempre presente sullo

41
00:03:58,830 --> 00:04:00,720
schermo, oltre all'intestazione, ma il componente dell'app

42
00:04:00,720 --> 00:04:06,120
è anche il componente che conterrà presto la schermata di avvio del gioco e la schermata di gioco

43
00:04:06,330 --> 00:04:07,680
e quindi è il

44
00:04:07,680 --> 00:04:12,540
componente in cui possiamo anche passare i dati alla schermata di avvio dei giochi e alla

45
00:04:12,660 --> 00:04:13,730
schermata di gioco.

46
00:04:13,860 --> 00:04:22,680
Quindi importiamo la schermata di gioco qui dalla schermata di gioco delle schermate e ovviamente voglio renderizzare la mia schermata di gioco qui ma non se

47
00:04:22,680 --> 00:04:29,010
la schermata di avvio del gioco è ancora visibile, voglio avere una delle due e una nota a

48
00:04:29,010 --> 00:04:34,110
margine, c'è anche un totale modo diverso di caricare componenti diversi e ci immergeremo in

49
00:04:34,110 --> 00:04:37,540
quello in un modulo separato nel modulo di navigazione.

50
00:04:37,560 --> 00:04:43,050
Ora, mentre tratteremo diverse soluzioni di navigazione in un secondo momento, esiste un modo per eseguire il rendering di una

51
00:04:43,050 --> 00:04:44,840
delle due schermate in questo momento,

52
00:04:45,030 --> 00:04:49,620
ma abbiamo anche un modo per rendere solo una di queste due schermate in questo momento e

53
00:04:49,620 --> 00:04:52,040
per questo, non abbiamo bisogno di uno strumento speciale

54
00:04:52,380 --> 00:04:56,770
o qualcosa del genere, possiamo usare la normale logica di React, possiamo rendere condizionalmente questo contenuto.

55
00:04:56,940 --> 00:05:00,980
Tutto quello che dobbiamo fare per questo è che dobbiamo gestire un certo

56
00:05:00,990 --> 00:05:04,950
stato nel nostro componente dell'app, dobbiamo anche gestire il numero selezionato qui.

57
00:05:04,950 --> 00:05:14,250
Quindi aggiungerò use state qui e poi semplicemente userò il mio stato qui e inizializzerò questo senza alcun valore alla fine e lì, voglio ottenere

58
00:05:14,250 --> 00:05:15,010
il

59
00:05:15,260 --> 00:05:24,000
numero selezionato o il numero utente e ho impostato il numero utente come funzione di aggiornamento qui e inizialmente non è definito e ora

60
00:05:24,000 --> 00:05:25,280
qui ho bisogno

61
00:05:25,380 --> 00:05:27,250
di una funzione in cui

62
00:05:27,300 --> 00:05:29,870
possiamo cambiarlo, come ad esempio il gestore

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

64
00:05:30,930 --> 00:05:31,920
che suona come

65
00:05:31,920 --> 00:05:38,610
un nome appropriato perché avremo un tale numero se l'utente preme il pulsante di avvio del gioco qui

66
00:05:38,610 --> 00:05:40,550
nella schermata di avvio del gioco.

67
00:05:40,800 --> 00:05:45,240
Quindi il gestore del gioco iniziale otterrà quindi il numero selezionato come input, è un presupposto che dobbiamo

68
00:05:45,240 --> 00:05:51,860
fare qui e impostare il numero utente come quel numero selezionato qui. Ora, ogni volta che è il caso, ogni volta che

69
00:05:51,920 --> 00:05:56,330
abbiamo un numero utente, sappiamo che il gioco è in esecuzione e sappiamo che

70
00:05:56,330 --> 00:06:00,320
possiamo visualizzare la schermata di gioco anziché la schermata di avvio del gioco.

71
00:06:00,350 --> 00:06:06,530
Quindi qui possiamo usare una variabile di contenuto per esempio e dire che il nostro contenuto predefinito è la schermata di avvio

72
00:06:06,530 --> 00:06:07,140
del

73
00:06:07,250 --> 00:06:13,130
gioco e che è normale codice React come lo sai anche da React For Web, puoi memorizzare componenti come questo in

74
00:06:13,190 --> 00:06:16,710
variabili e quindi semplicemente ridimensionare la variabile lì, è anche quello che

75
00:06:16,730 --> 00:06:23,050
facciamo già nella schermata di avvio del gioco con l'output confermato. Quindi la schermata di avvio dei giochi è il nostro

76
00:06:23,050 --> 00:06:24,120
output predefinito

77
00:06:24,130 --> 00:06:28,730
ma ora possiamo aggiungere un controllo if e verificare se il contenuto è true-ish, questo

78
00:06:28,740 --> 00:06:33,510
è ciò che controlla questo controllo, quindi sarà inizialmente false-ish se non è definito, ma

79
00:06:33,630 --> 00:06:40,260
ora se è true, noi posso impostare il numero utente, quindi ho verificato se il numero utente è true-ish, se questo

80
00:06:40,260 --> 00:06:42,060
è true-ish, quindi sappiamo che

81
00:06:42,060 --> 00:06:48,330
è stato selezionato un numero, sarà inizialmente non definito e quindi falso ma se è true-ish, se un è stato

82
00:06:48,510 --> 00:06:49,700
scelto il numero, quindi

83
00:06:49,710 --> 00:06:56,450
imposteremo qui il contenuto in modo che sia la schermata di gioco e quindi eseguiamo il rendering di qualunque cosa sia presente

84
00:06:56,470 --> 00:07:01,370
nel contenuto e che sia la schermata di gioco o la schermata di avvio del gioco.

85
00:07:01,380 --> 00:07:07,350
Quindi ora quando facciamo clic su Avvia gioco qui con un altro prescelto, questo dovrebbe passare qui se e questa è la cosa importante,

86
00:07:07,470 --> 00:07:09,110
se ci assicuriamo che il gestore

87
00:07:09,210 --> 00:07:15,840
di avvio del gioco possa essere attivato dalla schermata di avvio del gioco. Ora, per questo, usiamo un modello React predefinito

88
00:07:15,840 --> 00:07:23,120
per passare un riferimento a questo gestore a quel componente, magari sul puntello onStartGame, che suona come

89
00:07:23,130 --> 00:07:28,200
un nome adatto a me. Inoltriamo il gestore del gioco iniziale,

90
00:07:28,200 --> 00:07:34,350
qui solo il riferimento senza parentesi, solo un riferimento, un puntatore a questa funzione e onStartGame è

91
00:07:34,740 --> 00:07:39,240
ora una proprietà che possiamo usare nella schermata di avvio del gioco.

92
00:07:39,300 --> 00:07:46,410
Quindi qui nella schermata di avvio del gioco, quando clicchiamo sul pulsante di avvio del gioco qui, voglio innescare quel sostegno

93
00:07:46,590 --> 00:07:47,370
alla fine.

94
00:07:47,370 --> 00:07:57,090
Quindi qui, ho onPress e lì alla fine, voglio eseguire onStartGame e inoltrare qui il numero attualmente selezionato che

95
00:07:57,090 --> 00:08:01,440
è gestito nella schermata di avvio del gioco.

96
00:08:01,440 --> 00:08:08,310
Quindi qui, inoltro questo a onStartGame e onStartGame è associato al gestore del gioco iniziale che si aspetta

97
00:08:08,370 --> 00:08:11,190
e quindi riceve quel numero selezionato.

98
00:08:11,190 --> 00:08:16,690
Quindi è così che ci assicuriamo che facendo clic su quel pulsante per avviare la schermata di gioco inneschi questo metodo o questa funzione

99
00:08:16,690 --> 00:08:17,700
qui e quando questa

100
00:08:17,700 --> 00:08:20,570
funzione viene attivata, impostiamo il numero utente, questo assicura che il contenuto sia

101
00:08:20,580 --> 00:08:26,160
la schermata di gioco e quindi dovremmo vedere la schermata di gioco. Ora un pezzo mancante è che nella

102
00:08:26,160 --> 00:08:33,120
schermata di gioco, ho bisogno della scelta dell'utente per generare il mio numero casuale iniziale ed escludere che la scelta

103
00:08:33,150 --> 00:08:38,130
degli utenti sia corretta per quel primo numero casuale e quindi dobbiamo passare una

104
00:08:38,130 --> 00:08:44,070
proprietà denominata scelta dell'utente nella schermata di gioco. Quindi possiamo aggiungere qui il prop di scelta

105
00:08:44,070 --> 00:08:49,920
dell'utente e passare il numero utente che è lo stato che stiamo gestendo nel componente dell'app che

106
00:08:49,920 --> 00:08:53,040
è quel numero selezionato che stiamo memorizzando nello stato

107
00:08:53,040 --> 00:08:55,580
qui, passarlo alla schermata di gioco.

108
00:08:55,830 --> 00:09:02,280
Quindi spero che il flusso di dati sia chiaro, otteniamo quel numero selezionato dalla schermata di avvio del gioco quando viene premuto quel pulsante,

109
00:09:02,280 --> 00:09:05,240
viene premuto il pulsante di avvio del gioco, quindi

110
00:09:05,280 --> 00:09:10,440
lo memorizziamo nello stato del componente dell'app qui nello stato del numero di utilizzo con il aiuto per

111
00:09:10,440 --> 00:09:16,170
impostare il numero utente e quindi usiamo quel numero utente per passarlo alla schermata del gioco che viene visualizzato solo se

112
00:09:16,170 --> 00:09:21,510
abbiamo un numero utente, quindi se il gioco è in esecuzione, se il gioco è stato avviato in modo

113
00:09:21,510 --> 00:09:27,690
che nella schermata di gioco, possiamo usare il numero utente che viene ricevuto sul prop di scelta dell'utente per generare quindi il

114
00:09:27,780 --> 00:09:33,870
nuovo numero casuale che il computer ha indovinato dove questa scelta dell'utente, questo numero utente è escluso, in modo che per la

115
00:09:33,870 --> 00:09:41,050
prima ipotesi del computer, il computer non può indovina immediatamente il numero dell'utente. Parliamo molto, salviamo tutto e

116
00:09:41,050 --> 00:09:43,020
diamo un'occhiata.

117
00:09:43,060 --> 00:09:50,660
Immettere 55 e confermare e fare clic su Avvia gioco e non è possibile trovare una variabile all'avvio del gioco.

118
00:09:50,710 --> 00:09:57,820
Quindi il problema qui è che eseguo, sì, dovrebbero essere oggetti di scena all'avvio del gioco qui, sul pulsante di avvio

119
00:09:57,820 --> 00:10:03,080
del gioco nel componente di avvio del gioco perché ovviamente questa è una proprietà che stiamo

120
00:10:03,080 --> 00:10:05,270
ottenendo, non è una funzione definita

121
00:10:05,380 --> 00:10:07,340
qui, è definita sugli oggetti

122
00:10:07,420 --> 00:10:10,500
di scena, è questo oggetto di scena alla fine.

123
00:10:10,780 --> 00:10:12,990
Quindi un piccolo errore, proviamo di nuovo

124
00:10:13,000 --> 00:10:15,330
dopo aver risolto questo problema, fai clic su

125
00:10:15,430 --> 00:10:17,410
Avvia gioco e sembra buono.

126
00:10:17,410 --> 00:10:18,620
Ora vediamo gli

127
00:10:18,620 --> 00:10:20,610
avversari indovinare e possiamo dare alcuni suggerimenti

128
00:10:20,620 --> 00:10:27,240
qui che in questo momento non hanno alcun effetto ma che presto avranno un effetto e quindi siamo nella schermata successiva, siamo

129
00:10:27,250 --> 00:10:28,570
nella schermata di gioco.

130
00:10:28,570 --> 00:10:35,320
Ora assicuriamoci di poter dare qualche suggerimento al computer qui e assicurarci che il computer abbia la possibilità

131
00:10:35,320 --> 00:10:38,740
di risolvere questo e di indovinare il nostro numero.