1 00:00:02,450 --> 00:00:08,430 Sekarang sebelum kita menambahkan lebih banyak logika, mari kita bekerja pada antarmuka pengguna, jadi apa yang kita hasilkan. 2 00:00:08,450 --> 00:00:11,670 Jadi di sini, saya akan mengembalikan tampilan 3 00:00:11,700 --> 00:00:23,190 pada akhirnya dan dalam tampilan itu saya ingin memiliki teks di mana saya mengatakan lawan menebak, jadi apa yang ditebak komputer dan kemudian kita dapat menggunakan kembali 4 00:00:23,230 --> 00:00:27,760 wadah nomor untuk menyajikan dengan baik angka yang menebak itu. 5 00:00:27,760 --> 00:00:34,330 Jadi itu keuntungan besar memiliki komponen yang dapat digunakan kembali karena Anda dapat menggunakannya kembali, saya kira, jadi itulah yang 6 00:00:34,330 --> 00:00:36,040 kami lakukan di sini. 7 00:00:36,040 --> 00:00:42,400 Kami akan menggunakan wadah nomor itu lagi, di bawah itu lawan menebak teks di sini untuk memiliki wadah nomor 8 00:00:42,400 --> 00:00:44,510 kami sendiri dan dengan baik menampilkan perkiraan 9 00:00:44,650 --> 00:00:47,810 saat ini di sini. Tebakan saat ini adalah keadaan 10 00:00:47,830 --> 00:00:52,130 kita, ingat itulah yang kita inisialisasi di sini dan apa yang akan segera dapat kita ubah. 11 00:00:52,210 --> 00:01:00,340 Jadi itulah yang mendapatkan output di sini, di bawah ini kita sekarang dapat juga menunjukkan mungkin kartu kita dengan dua tombol yang memungkinkan 12 00:01:00,340 --> 00:01:02,290 pengguna untuk memberikan komputer petunjuk. 13 00:01:02,950 --> 00:01:11,320 Jadi di sini, saya akan mengimpor kartu dari kartu komponen untuk membungkus tombol-tombol ini di sana dan oleh karena itu, kita sudah 14 00:01:11,320 --> 00:01:15,850 dapat juga mengimpor tombol dari Bereaksi Asli karena kita akan memerlukannya 15 00:01:16,200 --> 00:01:25,880 dalam hitungan detik juga dan kemudian cukup memiliki kartu kita di sini dan di kartu itu , Saya ingin memiliki tombol dengan judul lebih rendah 16 00:01:25,880 --> 00:01:33,860 dan tombol lain di mana kita mengatakan lebih besar, ini adalah dua arah di mana kita dapat memberikan petunjuk, begitu juga 17 00:01:33,890 --> 00:01:37,070 angka yang Anda tebak terlalu rendah, terlalu 18 00:01:37,070 --> 00:01:44,520 tinggi, maka kita dapat memberikan komputer petunjuk dengan tombol-tombol ini dan onPress, saya akan pada saat ini hanya mendaftarkan 19 00:01:44,820 --> 00:01:49,500 fungsi kosong yang tidak melakukan apa-apa, yang tentu saja akan segera berubah 20 00:01:49,500 --> 00:01:57,060 dan secara efektif akan menghasilkan nomor acak baru dan dengan itu, sekarang saatnya untuk menambahkan beberapa gaya di sini. 21 00:01:57,110 --> 00:02:02,450 Saya ingin memiliki gaya untuk layar keseluruhan saya dan seperti sebelumnya, ini akan 22 00:02:02,450 --> 00:02:06,950 mendapatkan satu fleksibel untuk mengambil semua ruang yang tersedia di layar 23 00:02:07,070 --> 00:02:12,410 di bawah header yang kita miliki di atas, tambahkan padding 10 untuk memiliki 24 00:02:12,410 --> 00:02:23,370 beberapa ruang di sekitar konten sehingga itu tidak duduk langsung di tepi dan juga menggunakan menyelaraskan item di sini untuk memusatkan konten kami secara horizontal dan properti 25 00:02:23,370 --> 00:02:29,190 layar digunakan pada tampilan sekitarnya di sini untuk menambahkan layar gaya di sana sehingga 26 00:02:29,190 --> 00:02:36,400 konten pada layar keseluruhan ini diposisikan dengan baik. Sekarang untuk tombol-tombol ini, alangkah baiknya jika mereka akan duduk bersebelahan, 27 00:02:36,470 --> 00:02:43,480 jadi pada kartu kita dapat menambahkan gaya, mungkin menggunakan wadah tombol sebagai nama di sini dan oleh karena itu tambahkan nama yang 28 00:02:43,480 --> 00:02:47,320 sama di sini di stylesheet kami karena itulah yang kita merujuk dan 29 00:02:47,560 --> 00:02:54,160 mengatur arah fleks di sini ke baris dan kita dapat menetapkan arah fleks di sini karena saya melakukan ini pada kartu 30 00:02:54,160 --> 00:02:54,930 saya tetapi 31 00:02:55,060 --> 00:03:01,570 jika kita melihat, dalam kartu itu, kita mendistribusikan gaya ini pada tampilan dan view menggunakan flexbox sehingga kita dapat mengatur 32 00:03:01,570 --> 00:03:06,820 arah flex di sini dan itulah yang saya lakukan di sana, mengatur arah flex untuk mendudukkan 33 00:03:06,820 --> 00:03:13,780 ke posisi item di samping satu sama lain secara horizontal. justifyContent dengan ruang sekitar mungkin, untuk memiliki 34 00:03:13,780 --> 00:03:21,760 ruang kosong di sekitar tombol, di sebelah kiri dan kanan sama-sama terdistribusi dan juga menambahkan margin atas 20 sehingga 35 00:03:21,760 --> 00:03:29,080 kartu ini dengan tombol kami tidak duduk langsung di sebelah angka yang ditebak tetapi ada beberapa jarak 36 00:03:29,080 --> 00:03:35,770 di antara dan juga mungkin memberikan ini lebar 300 dan lebar maks 80% untuk memastikan 37 00:03:35,770 --> 00:03:43,530 bahwa ini tidak pernah dapat melebihi batas-batas tampilan induk. Sekarang jika kita menyimpan ini, akan menyenangkan untuk melihat itu 38 00:03:43,530 --> 00:03:47,460 dan untuk itu, kita perlu cara untuk pergi ke layar game. 39 00:03:47,460 --> 00:03:53,070 Sekarang kita menggunakan layar mulai permainan di komponen aplikasi, jadi kita harus menggunakan layar permainan di sana 40 00:03:53,070 --> 00:03:58,830 juga dan mengelola nomor yang dipilih dalam komponen aplikasi itu karena itu adalah satu-satunya komponen yang ada di 41 00:03:58,830 --> 00:04:00,720 layar setiap saat, baik selain header 42 00:04:00,720 --> 00:04:06,120 tetapi komponen aplikasi juga merupakan komponen yang akan memegang layar mulai permainan dan layar permainan segera dan 43 00:04:06,330 --> 00:04:07,680 oleh karena itu itu 44 00:04:07,680 --> 00:04:12,540 adalah komponen di mana kita juga dapat meneruskan data ke layar mulai permainan dan ke 45 00:04:12,660 --> 00:04:13,730 layar permainan. 46 00:04:13,860 --> 00:04:22,680 Jadi mari kita impor layar permainan di sini dari layar layar permainan dan tentu saja saya ingin membuat layar permainan saya di sini 47 00:04:22,680 --> 00:04:29,010 tetapi tidak jika layar mulai permainan masih terlihat, saya ingin memiliki salah satu dari dua dan 48 00:04:29,010 --> 00:04:34,110 catatan samping, ada juga yang benar-benar cara memuat komponen yang berbeda dan kami 49 00:04:34,110 --> 00:04:37,540 akan membahasnya dalam modul terpisah di modul navigasi. 50 00:04:37,560 --> 00:04:43,050 Sekarang sementara kita akan membahas solusi navigasi yang berbeda nanti, ada cara rendering salah satu dari dua 51 00:04:43,050 --> 00:04:44,840 layar sekarang, kita juga memiliki 52 00:04:45,030 --> 00:04:49,620 cara rendering hanya satu dari dua layar ini sekarang dan untuk itu, kita tidak 53 00:04:49,620 --> 00:04:52,040 memerlukan alat khusus atau hal seperti itu, 54 00:04:52,380 --> 00:04:56,770 kita dapat menggunakan logika Bereaksi normal, kita dapat membuat konten ini secara kondisional. 55 00:04:56,940 --> 00:05:00,980 Yang perlu kita lakukan untuk itu adalah kita perlu mengelola beberapa status dalam 56 00:05:00,990 --> 00:05:04,950 komponen aplikasi kita, kita perlu mengelola nomor yang dipilih di sini juga. 57 00:05:04,950 --> 00:05:14,250 Jadi saya akan menambahkan status penggunaan di sini dan kemudian gunakan status saya di sini dan inisialisasi ini tanpa nilai pada akhirnya dan di sana, 58 00:05:14,250 --> 00:05:15,010 saya 59 00:05:15,260 --> 00:05:24,000 ingin mendapatkan nomor yang dipilih atau nomor pengguna dan telah menetapkan nomor pengguna sebagai fungsi pembaruan di sini dan pada awalnya itu tidak 60 00:05:24,000 --> 00:05:25,280 terdefinisi dan sekarang 61 00:05:25,380 --> 00:05:27,250 di sini saya memerlukan fungsi 62 00:05:27,300 --> 00:05:29,870 di mana kita dapat mengubah ini, seperti 63 00:05:30,030 --> 00:05:30,920 mulai penangan 64 00:05:30,930 --> 00:05:31,920 permainan, yang terdengar 65 00:05:31,920 --> 00:05:38,610 seperti nama yang pas karena kita akan memiliki nomor seperti itu jika pengguna menekan tombol mulai permainan di 66 00:05:38,610 --> 00:05:40,550 sini di layar mulai permainan. 67 00:05:40,800 --> 00:05:45,240 Jadi pengendali permainan awal kemudian akan mendapatkan nomor yang dipilih sebagai input, itu asumsi yang harus kita buat 68 00:05:45,240 --> 00:05:51,860 di sini dan mengatur nomor pengguna menjadi nomor yang dipilih di sini. Sekarang, kapan pun itu terjadi, setiap kali kami 69 00:05:51,920 --> 00:05:56,330 memiliki nomor pengguna, kami tahu bahwa permainan sedang berjalan dan kami tahu 70 00:05:56,330 --> 00:06:00,320 bahwa kami dapat menampilkan layar game alih-alih layar mulai permainan. 71 00:06:00,350 --> 00:06:06,530 Jadi di sini kita dapat menggunakan variabel konten misalnya dan mengatakan konten default kami adalah layar mulai permainan dan itu adalah 72 00:06:06,530 --> 00:06:07,140 kode 73 00:06:07,250 --> 00:06:13,130 Bereaksi normal seperti yang Anda tahu dari Bereaksi Untuk Web juga, Anda dapat menyimpan komponen seperti ini dalam variabel dan 74 00:06:13,190 --> 00:06:16,710 kemudian cukup output variabel ke bawah di sana, itu juga yang sudah 75 00:06:16,730 --> 00:06:23,050 kami lakukan di layar mulai permainan dengan hasil yang dikonfirmasi. Jadi layar start game adalah output default kami, 76 00:06:23,050 --> 00:06:24,120 tetapi sekarang 77 00:06:24,130 --> 00:06:28,730 kami dapat menambahkan cek jika dan periksa apakah isinya benar, itu yang 78 00:06:28,740 --> 00:06:33,510 diperiksa oleh cek ini, jadi ini akan palsu pada awalnya jika tidak ditentukan 79 00:06:33,630 --> 00:06:40,260 tapi sekarang jika itu benar, kami dapat mengatur nomor pengguna, jadi saya memeriksa apakah nomor pengguna adalah true-ish, 80 00:06:40,260 --> 00:06:42,060 jika itu benar-ish, maka kita 81 00:06:42,060 --> 00:06:48,330 tahu nomor dipilih, itu akan ditentukan dan karena itu awalnya salah tetapi jika itu benar-ish, jika nomor 82 00:06:48,510 --> 00:06:49,700 dipilih, maka kita 83 00:06:49,710 --> 00:06:56,450 akan mengatur konten di sini untuk menjadi layar permainan dan kemudian kita membuat apa pun yang ada di 84 00:06:56,470 --> 00:07:01,370 konten di sana dan itu akan menjadi layar permainan atau layar mulai permainan. 85 00:07:01,380 --> 00:07:07,350 Jadi sekarang ketika kita klik mulai permainan di sini dengan yang lain terpilih, ini harus beralih di sini jika dan itu 86 00:07:07,470 --> 00:07:09,110 yang penting, jika kita memastikan 87 00:07:09,210 --> 00:07:15,840 bahwa pengendali permainan mulai dapat dipicu dari dalam layar mulai permainan. Sekarang untuk itu, kami menggunakan pola Bereaksi 88 00:07:15,840 --> 00:07:23,120 standar untuk meneruskan referensi ke penangan ini ke komponen itu, mungkin pada prop onStartGame, yang terdengar seperti 89 00:07:23,130 --> 00:07:28,200 nama yang cocok untuk saya. Kami meneruskan pengendali permainan awal, 90 00:07:28,200 --> 00:07:34,350 hanya referensi tanpa tanda kurung di sini, hanya referensi, penunjuk pada fungsi ini dan onStartGame 91 00:07:34,740 --> 00:07:39,240 sekarang menjadi properti yang dapat kita gunakan di layar mulai permainan. 92 00:07:39,300 --> 00:07:46,410 Jadi di sini di layar mulai permainan, ketika kita klik pada tombol mulai permainan di sini, saya ingin memicu prop 93 00:07:46,590 --> 00:07:47,370 pada akhirnya. 94 00:07:47,370 --> 00:07:57,090 Jadi di sini, saya memiliki onPress dan di sana pada akhirnya, saya ingin menjalankan onStartGame dan meneruskan nomor yang saat ini dipilih 95 00:07:57,090 --> 00:08:01,440 di sini yang dikelola dalam keadaan layar mulai permainan. 96 00:08:01,440 --> 00:08:08,310 Jadi di sini, saya meneruskan ini ke onStartGame dan onStartGame terikat ke pengendali permainan awal yang mengharapkan 97 00:08:08,370 --> 00:08:11,190 dan kemudian menerima nomor yang dipilih. 98 00:08:11,190 --> 00:08:16,690 Jadi itulah cara kami memastikan bahwa mengklik tombol itu untuk memulai layar permainan memicu metode ini atau fungsi ini di sini 99 00:08:16,690 --> 00:08:17,700 dan ketika fungsi 100 00:08:17,700 --> 00:08:20,570 ini dipicu, kami menetapkan nomor pengguna, ini memastikan bahwa konten adalah 101 00:08:20,580 --> 00:08:26,160 layar permainan dan oleh karena itu kita harus melihat layar game. Sekarang bagian yang hilang adalah bahwa 102 00:08:26,160 --> 00:08:33,120 di layar permainan, saya perlu pilihan pengguna untuk menghasilkan nomor acak awal saya dan mengecualikan bahwa pilihan pengguna 103 00:08:33,150 --> 00:08:38,130 dengan benar untuk nomor acak pertama dan oleh karena itu kita harus meneruskan 104 00:08:38,130 --> 00:08:44,070 properti bernama pilihan pengguna ke layar permainan. Jadi kita bisa menambahkan prop pilihan pengguna di 105 00:08:44,070 --> 00:08:49,920 sini dan memberikan nomor pengguna yang merupakan keadaan yang kita kelola dalam komponen aplikasi yaitu 106 00:08:49,920 --> 00:08:53,040 nomor yang dipilih yang kita simpan di keadaan 107 00:08:53,040 --> 00:08:55,580 di sini, meneruskannya ke layar game. 108 00:08:55,830 --> 00:09:02,280 Jadi saya berharap bahwa aliran data jelas, kami mendapatkan nomor yang dipilih dari layar mulai permainan ketika tombol 109 00:09:02,280 --> 00:09:05,240 itu, tombol mulai permainan ditekan, kami kemudian 110 00:09:05,280 --> 00:09:10,440 menyimpannya dalam keadaan komponen aplikasi di sini dalam status penggunaan nomor dengan bantuan mengatur 111 00:09:10,440 --> 00:09:16,170 nomor pengguna dan kami kemudian menggunakan nomor pengguna itu untuk meneruskannya ke layar game yang hanya 112 00:09:16,170 --> 00:09:21,510 diberikan jika kami memiliki nomor pengguna, jadi jika game sedang berjalan, jika game dimulai sehingga 113 00:09:21,510 --> 00:09:27,690 di layar game, kita dapat menggunakan nomor pengguna yang diterima pada prop pilihan pengguna untuk kemudian menghasilkan 114 00:09:27,780 --> 00:09:33,870 nomor acak baru yang komputer tebak di mana pilihan pengguna ini, nomor pengguna ini dikecualikan, sehingga untuk 115 00:09:33,870 --> 00:09:41,050 tebakan komputer pertama, komputer tidak dapat langsung tebak nomor pengguna. Banyak bicara, mari kita simpan semua 116 00:09:41,050 --> 00:09:43,020 itu dan melihatnya. 117 00:09:43,060 --> 00:09:50,660 Mari kita masukkan 55 dan konfirmasi dan klik start game dan kami tidak dapat menemukan variabel pada start game. 118 00:09:50,710 --> 00:09:57,820 Jadi masalahnya di sini adalah yang saya jalankan, ya itu harus menjadi alat peraga pada permainan awal di sini, pada 119 00:09:57,820 --> 00:10:03,080 tombol permainan awal di komponen permainan awal karena tentu saja itu adalah properti yang 120 00:10:03,080 --> 00:10:05,270 kita dapatkan, itu bukan fungsi yang 121 00:10:05,380 --> 00:10:07,340 didefinisikan di sini, itu 122 00:10:07,420 --> 00:10:10,500 didefinisikan pada alat peraga, alat peraga ini pada akhirnya. 123 00:10:10,780 --> 00:10:12,990 Kesalahan kecil, mari kita coba 124 00:10:13,000 --> 00:10:15,330 lagi setelah memperbaikinya, klik mulai permainan 125 00:10:15,430 --> 00:10:17,410 dan itu terlihat bagus. 126 00:10:17,410 --> 00:10:18,620 Sekarang kita melihat 127 00:10:18,620 --> 00:10:20,610 lawan menebak dan kita dapat memberikan beberapa 128 00:10:20,620 --> 00:10:27,240 petunjuk di sini yang saat ini tidak memiliki efek tetapi yang segera akan berpengaruh dan karena itu kita berada di layar berikutnya, 129 00:10:27,250 --> 00:10:28,570 kita berada di layar permainan. 130 00:10:28,570 --> 00:10:35,320 Sekarang mari kita pastikan kita benar-benar dapat memberikan komputer beberapa petunjuk di sini dan memastikan bahwa komputer memiliki 131 00:10:35,320 --> 00:10:38,740 peluang untuk menyelesaikan ini dan menebak-nebak nomor kita.