1 00:00:02,450 --> 00:00:08,430 Maintenant, avant d'ajouter plus de logique, travaillons sur l'interface utilisateur, donc sur ce que nous produisons. 2 00:00:08,450 --> 00:00:11,670 Donc ici, je vais retourner une vue 3 00:00:11,700 --> 00:00:23,190 à la fin et dans cette vue, je veux avoir un texte où je dis que les adversaires devinent, donc ce que l'ordinateur a deviné et ensuite nous pouvons 4 00:00:23,230 --> 00:00:27,760 réutiliser le conteneur de numéros pour bien présenter ce numéro deviné. 5 00:00:27,760 --> 00:00:34,330 C'est donc un énorme avantage d'avoir de tels composants réutilisables parce que vous pouvez les réutiliser, je suppose, c'est donc 6 00:00:34,330 --> 00:00:36,040 ce que nous faisons ici. 7 00:00:36,040 --> 00:00:42,400 Nous utiliserons à nouveau ce conteneur de numéros, en dessous du texte que les adversaires devineront ici pour avoir notre 8 00:00:42,400 --> 00:00:44,510 propre conteneur de numéros et afficherons bien 9 00:00:44,650 --> 00:00:47,810 la supposition actuelle ici. La supposition actuelle est notre 10 00:00:47,830 --> 00:00:52,130 état, rappelez-vous que c'est ce que nous initialisons ici et ce que nous pourrons bientôt changer également. 11 00:00:52,210 --> 00:01:00,340 C'est donc ce qui est produit ici, ci-dessous, nous pouvons maintenant également présenter notre carte avec deux boutons qui permettent à l'utilisateur de 12 00:01:00,340 --> 00:01:02,290 donner un indice à l'ordinateur. 13 00:01:02,950 --> 00:01:11,320 Donc ici, je vais importer la carte de la carte des composants pour envelopper ces boutons là-dedans et donc, nous pouvons déjà 14 00:01:11,320 --> 00:01:15,850 aussi importer le bouton de React Native parce que nous en aurons 15 00:01:16,200 --> 00:01:25,880 besoin dans une seconde aussi et ensuite simplement avoir notre carte ici et dans cette carte , Je veux avoir un bouton avec un titre inférieur 16 00:01:25,880 --> 00:01:33,860 et un autre bouton où nous disons supérieur, ce sont deux directions dans lesquelles nous pouvons donner un indice, tout comme 17 00:01:33,890 --> 00:01:37,070 le nombre que vous avez deviné trop 18 00:01:37,070 --> 00:01:44,520 faible, est trop élevé, alors nous pouvons donner le ordinateur un indice avec ces boutons et onPress, je vais pour 19 00:01:44,820 --> 00:01:49,500 l'instant enregistrer une fonction vide qui ne fait rien, qui changera bien 20 00:01:49,500 --> 00:01:57,060 sûr bientôt et générera effectivement un nouveau nombre aléatoire et avec cela, il est maintenant temps d'ajouter certains styles ici. 21 00:01:57,110 --> 00:02:02,450 Je veux avoir un style pour mon écran général et comme auparavant, cela en 22 00:02:02,450 --> 00:02:06,950 donnera un pour prendre tout l'espace disponible sur l'écran sous l'en-tête que 23 00:02:07,070 --> 00:02:12,410 nous avons en haut, ajoutez un rembourrage de 10 pour avoir un peu d'espace 24 00:02:12,410 --> 00:02:23,370 autour du contenu afin qu'il ne repose pas directement sur les bords et utilise également les éléments d'alignement ici pour centrer notre contenu horizontalement et que la propriété screen 25 00:02:23,370 --> 00:02:29,190 soit utilisée sur la vue environnante ici pour ajouter des styles d'écran là-bas afin que le 26 00:02:29,190 --> 00:02:36,400 contenu de cet écran global soit bien positionné. Maintenant, pour ces boutons, ce serait bien qu'ils soient assis côte à 27 00:02:36,470 --> 00:02:43,480 côte, donc sur la carte, nous pouvons ajouter un style, peut-être utiliser le conteneur de boutons comme nom ici et donc ajouter ce même nom 28 00:02:43,480 --> 00:02:47,320 ici dans notre feuille de style parce que c'est ce que nous faisons référence 29 00:02:47,560 --> 00:02:54,160 et définissons la direction de flex ici pour ramer et nous pouvons définir une direction de flex ici parce que je fais cela sur 30 00:02:54,160 --> 00:02:54,930 ma carte, 31 00:02:55,060 --> 00:03:01,570 mais si nous regardons, dans cette carte, nous distribuons ces styles sur une vue et un La vue utilise Flexbox pour que nous 32 00:03:01,570 --> 00:03:06,820 puissions définir une direction de flex ici et c'est ce que je fais là, en définissant la direction de 33 00:03:06,820 --> 00:03:13,780 flex sur la ligne pour positionner les éléments côte à côte horizontalement. justifierContenu avec un espace autour peut-être, pour avoir l'espace 34 00:03:13,780 --> 00:03:21,760 libre autour des boutons, à gauche et à droite également répartis et ajouter également une marge en haut de 20 afin que cette carte 35 00:03:21,760 --> 00:03:29,080 avec nos boutons ne se trouve pas directement à côté du nombre deviné, mais il y a un certain espacement entre les 36 00:03:29,080 --> 00:03:35,770 deux et peut-être aussi lui donner une largeur de 300 et une largeur maximale de 80% pour vous assurer que 37 00:03:35,770 --> 00:03:43,530 cela ne peut jamais dépasser les limites de la vue parent. Maintenant, si nous sauvegardons cela, ce serait bien de voir cela 38 00:03:43,530 --> 00:03:47,460 et pour cela, nous avons besoin d'un moyen d'accéder à l'écran de jeu. 39 00:03:47,460 --> 00:03:53,070 Maintenant, nous utilisons l'écran de démarrage du jeu dans le composant de l'application, nous devons donc également utiliser l'écran 40 00:03:53,070 --> 00:03:58,830 de jeu et gérer le numéro sélectionné dans ce composant de l'application, car c'est le seul composant qui est 41 00:03:58,830 --> 00:04:00,720 constamment affiché à l'écran, en plus 42 00:04:00,720 --> 00:04:06,120 de l'en-tête, mais le composant de l'application est également le composant qui contiendra bientôt l'écran de démarrage et 43 00:04:06,330 --> 00:04:07,680 l'écran de jeu.C'est donc 44 00:04:07,680 --> 00:04:12,540 le composant où nous pouvons également transmettre des données à l'écran de démarrage et à 45 00:04:12,660 --> 00:04:13,730 l'écran de jeu. 46 00:04:13,860 --> 00:04:22,680 Importons donc l'écran de jeu ici à partir de l'écran de jeu des écrans et bien sûr, je veux rendre mon écran de jeu ici, mais pas si 47 00:04:22,680 --> 00:04:29,010 l'écran de démarrage du jeu est toujours visible, je veux avoir l'une des deux et une note latérale, il y 48 00:04:29,010 --> 00:04:34,110 a aussi un totalement manière différente de charger différents composants et nous allons nous y 49 00:04:34,110 --> 00:04:37,540 plonger dans un module séparé dans le module de navigation. 50 00:04:37,560 --> 00:04:43,050 Maintenant, alors que nous couvrirons différentes solutions de navigation plus tard, il existe un moyen de rendre l'un des deux 51 00:04:43,050 --> 00:04:44,840 écrans en ce moment, nous avons 52 00:04:45,030 --> 00:04:49,620 également un moyen de rendre uniquement l'un de ces deux écrans en ce moment déjà et pour 53 00:04:49,620 --> 00:04:52,040 cela, nous n'avons besoin d'aucun outil spécial ou quelque 54 00:04:52,380 --> 00:04:56,770 chose comme ça, nous pouvons utiliser la logique React normale, nous pouvons rendre ce contenu conditionnellement. 55 00:04:56,940 --> 00:05:00,980 Tout ce que nous devons faire pour cela, c'est que nous devons gérer un 56 00:05:00,990 --> 00:05:04,950 état dans notre composant d'application, nous devons également gérer le numéro sélectionné ici. 57 00:05:04,950 --> 00:05:14,250 Je vais donc ajouter l'état d'utilisation ici, puis simplement utiliser mon état ici et l'initialiser sans valeur à la fin et là, je veux obtenir le 58 00:05:14,250 --> 00:05:15,010 numéro 59 00:05:15,260 --> 00:05:24,000 sélectionné ou le numéro d'utilisateur et avoir défini le numéro d'utilisateur comme fonction de mise à jour ici et initialement c'est indéfini et maintenant 60 00:05:24,000 --> 00:05:25,280 j'ai besoin d'une 61 00:05:25,380 --> 00:05:27,250 fonction où nous pouvons changer 62 00:05:27,300 --> 00:05:29,870 cela, comme le gestionnaire de jeu, qui 63 00:05:30,030 --> 00:05:30,920 ressemble à 64 00:05:30,930 --> 00:05:31,920 un nom approprié 65 00:05:31,920 --> 00:05:38,610 parce que nous aurons un tel nombre si l'utilisateur appuie sur le bouton de démarrage du jeu ici 66 00:05:38,610 --> 00:05:40,550 dans l'écran de démarrage du jeu. 67 00:05:40,800 --> 00:05:45,240 Ainsi, le gestionnaire de démarrage du jeu obtiendra alors le numéro sélectionné en entrée, c'est une hypothèse que nous 68 00:05:45,240 --> 00:05:51,860 devons faire ici et définir le numéro d'utilisateur comme étant ce numéro sélectionné ici. Maintenant, chaque fois que c'est le cas, chaque fois que nous 69 00:05:51,920 --> 00:05:56,330 avons un numéro d'utilisateur, nous savons que le jeu est en cours d'exécution et nous savons 70 00:05:56,330 --> 00:06:00,320 que nous pouvons rendre l'écran du jeu au lieu de l'écran de démarrage du jeu. 71 00:06:00,350 --> 00:06:06,530 Donc, ici, nous pouvons utiliser une variable de contenu par exemple et dire que notre contenu par défaut est l'écran de démarrage du jeu et 72 00:06:06,530 --> 00:06:07,140 que c'est 73 00:06:07,250 --> 00:06:13,130 du code React normal tel que vous le connaissez depuis React For Web aussi, vous pouvez stocker des composants comme celui-ci dans des variables, 74 00:06:13,190 --> 00:06:16,710 puis simplement sortir la variable vers le bas là, c'est aussi ce que nous 75 00:06:16,730 --> 00:06:23,050 faisons déjà dans l'écran de démarrage du jeu avec la sortie confirmée. Donc, l'écran de démarrage des jeux est notre sortie par 76 00:06:23,050 --> 00:06:24,120 défaut, mais 77 00:06:24,130 --> 00:06:28,730 maintenant nous pouvons ajouter une vérification if et vérifier si le contenu est true-ish, 78 00:06:28,740 --> 00:06:33,510 c'est ce que cette vérification vérifie, donc ce sera false-ish au départ si ce n'est 79 00:06:33,630 --> 00:06:40,260 pas défini mais maintenant si c'est vrai, nous peut définir le numéro d'utilisateur, j'ai donc vérifié si le numéro d'utilisateur est 80 00:06:40,260 --> 00:06:42,060 true-ish, si c'est true-ish, alors 81 00:06:42,060 --> 00:06:48,330 nous savons qu'un nombre a été sélectionné, il sera indéfini et donc faux initialement, mais s'il est vrai-ish, si 82 00:06:48,510 --> 00:06:49,700 un numéro a été 83 00:06:49,710 --> 00:06:56,450 choisi, puis nous définirons le contenu ici comme écran de jeu, puis nous rendrons tout ce qui se trouve dans le 84 00:06:56,470 --> 00:07:01,370 contenu là-bas et ce sera soit l'écran de jeu, soit l'écran de démarrage du jeu. 85 00:07:01,380 --> 00:07:07,350 Alors maintenant, lorsque nous cliquons sur le démarrage du jeu ici avec un autre choisi, cela devrait changer ici si et c'est la chose importante, si 86 00:07:07,470 --> 00:07:09,110 nous nous assurons que le gestionnaire 87 00:07:09,210 --> 00:07:15,840 de démarrage du jeu peut être déclenché depuis l'intérieur de l'écran de démarrage du jeu. Maintenant, pour cela, nous utilisons un modèle React 88 00:07:15,840 --> 00:07:23,120 par défaut de transmission d'une référence à ce gestionnaire à ce composant, peut-être sur l'accessoire onStartGame, qui ressemble 89 00:07:23,130 --> 00:07:28,200 à un nom approprié pour moi. Nous transférons le gestionnaire de démarrage du 90 00:07:28,200 --> 00:07:34,350 jeu, juste la référence sans parenthèses ici, juste une référence, un pointeur sur cette fonction et onStartGame est 91 00:07:34,740 --> 00:07:39,240 maintenant une propriété que nous pouvons utiliser dans l'écran de démarrage du jeu. 92 00:07:39,300 --> 00:07:46,410 Donc ici dans l'écran de démarrage du jeu, lorsque nous cliquons sur le bouton de démarrage du jeu ici, je veux déclencher cet accessoire à 93 00:07:46,590 --> 00:07:47,370 la fin. 94 00:07:47,370 --> 00:07:57,090 Donc ici, j'ai onPress et là à la fin, je veux exécuter onStartGame et transférer le numéro actuellement sélectionné ici qui 95 00:07:57,090 --> 00:08:01,440 est géré dans l'écran de démarrage du jeu. 96 00:08:01,440 --> 00:08:08,310 Donc ici, je transmets ceci à onStartGame et onStartGame est lié au gestionnaire de début de jeu qui 97 00:08:08,370 --> 00:08:11,190 attend et reçoit ensuite ce numéro sélectionné. 98 00:08:11,190 --> 00:08:16,690 C'est ainsi que nous nous assurons que cliquer sur ce bouton pour démarrer l'écran de jeu déclenche cette méthode ou cette fonction ici et 99 00:08:16,690 --> 00:08:17,700 lorsque cette fonction 100 00:08:17,700 --> 00:08:20,570 est déclenchée, nous définissons le numéro d'utilisateur, cela garantit que le contenu 101 00:08:20,580 --> 00:08:26,160 est l'écran de jeu et donc nous devrions voir l'écran de jeu. Maintenant, une pièce manquante est que dans 102 00:08:26,160 --> 00:08:33,120 l'écran de jeu, j'ai besoin du choix de l'utilisateur pour générer mon nombre aléatoire initial et exclure ce choix 103 00:08:33,150 --> 00:08:38,130 des utilisateurs correctement pour ce premier nombre aléatoire et donc nous devons transmettre une 104 00:08:38,130 --> 00:08:44,070 propriété nommée choix d'utilisateur à l'écran de jeu. Nous pouvons donc ajouter l'accessoire de choix de l'utilisateur 105 00:08:44,070 --> 00:08:49,920 ici et transmettre le numéro d'utilisateur qui est l'état que nous gérons dans le composant d'application qui 106 00:08:49,920 --> 00:08:53,040 est le numéro sélectionné que nous stockons dans l'état ici, 107 00:08:53,040 --> 00:08:55,580 le transmettre à l'écran de jeu. 108 00:08:55,830 --> 00:09:02,280 J'espère donc que le flux de données est clair, nous obtenons ce numéro sélectionné à partir de l'écran de démarrage du jeu lorsque ce bouton, 109 00:09:02,280 --> 00:09:05,240 le bouton de démarrage du jeu est enfoncé, nous le 110 00:09:05,280 --> 00:09:10,440 stockons ensuite dans l'état du composant d'application ici dans l'état du numéro d'utilisation avec le l'aide de définir le 111 00:09:10,440 --> 00:09:16,170 numéro d'utilisateur et nous utilisons ensuite ce numéro d'utilisateur pour le transmettre à l'écran de jeu qui n'est rendu que si nous 112 00:09:16,170 --> 00:09:21,510 avons un numéro d'utilisateur, donc si le jeu est en cours d'exécution, si le jeu a été démarré de sorte 113 00:09:21,510 --> 00:09:27,690 que dans l'écran de jeu, nous pouvons utiliser le numéro d'utilisateur qui est reçu sur l'accessoire de choix d'utilisateur pour générer ensuite le 114 00:09:27,780 --> 00:09:33,870 nouveau numéro aléatoire que l'ordinateur a deviné où ce choix d'utilisateur, ce numéro d'utilisateur est exclu, de sorte que pour la toute première 115 00:09:33,870 --> 00:09:41,050 estimation de l'ordinateur, l'ordinateur ne peut pas devinez instantanément le numéro de l'utilisateur. Beaucoup de discussions, gardons tout cela et jetons 116 00:09:41,050 --> 00:09:43,020 un coup d'œil. 117 00:09:43,060 --> 00:09:50,660 Entrons 55 et confirmons et cliquez sur démarrer le jeu et nous ne pouvons pas trouver une variable au début du jeu. 118 00:09:50,710 --> 00:09:57,820 Donc, le problème ici est que j'exécute, oui, cela devrait être des accessoires pour démarrer le jeu ici, sur le bouton de 119 00:09:57,820 --> 00:10:03,080 démarrage du jeu dans le composant de démarrage du jeu car bien sûr, c'est une propriété que 120 00:10:03,080 --> 00:10:03,450 nous 121 00:10:03,450 --> 00:10:05,270 obtenons, ce n'est pas une 122 00:10:05,380 --> 00:10:07,340 fonction définie ici, elle est définie 123 00:10:07,420 --> 00:10:10,500 sur les accessoires, c'est cet accessoire à la fin. 124 00:10:10,780 --> 00:10:12,990 Donc petite erreur, réessayons après avoir 125 00:10:13,000 --> 00:10:15,330 corrigé cela, cliquez sur démarrer le jeu 126 00:10:15,430 --> 00:10:17,410 et ça a l'air bien. 127 00:10:17,410 --> 00:10:18,620 Maintenant, nous voyons 128 00:10:18,620 --> 00:10:20,610 les adversaires deviner et nous pouvons donner 129 00:10:20,620 --> 00:10:27,240 ici des indices qui n'ont actuellement aucun effet mais qui auront bientôt un effet et donc nous sommes sur l'écran suivant, nous 130 00:10:27,250 --> 00:10:28,570 sommes dans l'écran de jeu. 131 00:10:28,570 --> 00:10:35,320 Maintenant, assurons-nous que nous pouvons donner quelques conseils à l'ordinateur ici et nous assurer que l'ordinateur a une chance 132 00:10:35,320 --> 00:10:38,740 de résoudre ce problème et de deviner notre nombre.