Sekarang sebelum kita menambahkan lebih banyak logika, mari kita bekerja pada antarmuka pengguna, jadi apa yang kita hasilkan.
Jadi di sini, saya akan mengembalikan tampilan
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
wadah nomor untuk menyajikan dengan baik angka yang menebak itu.
Jadi itu keuntungan besar memiliki komponen yang dapat digunakan kembali karena Anda dapat menggunakannya kembali, saya kira, jadi itulah yang
kami lakukan di sini.
Kami akan menggunakan wadah nomor itu lagi, di bawah itu lawan menebak teks di sini untuk memiliki wadah nomor
kami sendiri dan dengan baik menampilkan perkiraan
saat ini di sini. Tebakan saat ini adalah keadaan
kita, ingat itulah yang kita inisialisasi di sini dan apa yang akan segera dapat kita ubah.
Jadi itulah yang mendapatkan output di sini, di bawah ini kita sekarang dapat juga menunjukkan mungkin kartu kita dengan dua tombol yang memungkinkan
pengguna untuk memberikan komputer petunjuk.
Jadi di sini, saya akan mengimpor kartu dari kartu komponen untuk membungkus tombol-tombol ini di sana dan oleh karena itu, kita sudah
dapat juga mengimpor tombol dari Bereaksi Asli karena kita akan memerlukannya
dalam hitungan detik juga dan kemudian cukup memiliki kartu kita di sini dan di kartu itu , Saya ingin memiliki tombol dengan judul lebih rendah
dan tombol lain di mana kita mengatakan lebih besar, ini adalah dua arah di mana kita dapat memberikan petunjuk, begitu juga
angka yang Anda tebak terlalu rendah, terlalu
tinggi, maka kita dapat memberikan komputer petunjuk dengan tombol-tombol ini dan onPress, saya akan pada saat ini hanya mendaftarkan
fungsi kosong yang tidak melakukan apa-apa, yang tentu saja akan segera berubah
dan secara efektif akan menghasilkan nomor acak baru dan dengan itu, sekarang saatnya untuk menambahkan beberapa gaya di sini.
Saya ingin memiliki gaya untuk layar keseluruhan saya dan seperti sebelumnya, ini akan
mendapatkan satu fleksibel untuk mengambil semua ruang yang tersedia di layar
di bawah header yang kita miliki di atas, tambahkan padding 10 untuk memiliki
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
layar digunakan pada tampilan sekitarnya di sini untuk menambahkan layar gaya di sana sehingga
konten pada layar keseluruhan ini diposisikan dengan baik. Sekarang untuk tombol-tombol ini, alangkah baiknya jika mereka akan duduk bersebelahan,
jadi pada kartu kita dapat menambahkan gaya, mungkin menggunakan wadah tombol sebagai nama di sini dan oleh karena itu tambahkan nama yang
sama di sini di stylesheet kami karena itulah yang kita merujuk dan
mengatur arah fleks di sini ke baris dan kita dapat menetapkan arah fleks di sini karena saya melakukan ini pada kartu
saya tetapi
jika kita melihat, dalam kartu itu, kita mendistribusikan gaya ini pada tampilan dan view menggunakan flexbox sehingga kita dapat mengatur
arah flex di sini dan itulah yang saya lakukan di sana, mengatur arah flex untuk mendudukkan
ke posisi item di samping satu sama lain secara horizontal. justifyContent dengan ruang sekitar mungkin, untuk memiliki
ruang kosong di sekitar tombol, di sebelah kiri dan kanan sama-sama terdistribusi dan juga menambahkan margin atas 20 sehingga
kartu ini dengan tombol kami tidak duduk langsung di sebelah angka yang ditebak tetapi ada beberapa jarak
di antara dan juga mungkin memberikan ini lebar 300 dan lebar maks 80% untuk memastikan
bahwa ini tidak pernah dapat melebihi batas-batas tampilan induk. Sekarang jika kita menyimpan ini, akan menyenangkan untuk melihat itu
dan untuk itu, kita perlu cara untuk pergi ke layar game.
Sekarang kita menggunakan layar mulai permainan di komponen aplikasi, jadi kita harus menggunakan layar permainan di sana
juga dan mengelola nomor yang dipilih dalam komponen aplikasi itu karena itu adalah satu-satunya komponen yang ada di
layar setiap saat, baik selain header
tetapi komponen aplikasi juga merupakan komponen yang akan memegang layar mulai permainan dan layar permainan segera dan
oleh karena itu itu
adalah komponen di mana kita juga dapat meneruskan data ke layar mulai permainan dan ke
layar permainan.
Jadi mari kita impor layar permainan di sini dari layar layar permainan dan tentu saja saya ingin membuat layar permainan saya di sini
tetapi tidak jika layar mulai permainan masih terlihat, saya ingin memiliki salah satu dari dua dan
catatan samping, ada juga yang benar-benar cara memuat komponen yang berbeda dan kami
akan membahasnya dalam modul terpisah di modul navigasi.
Sekarang sementara kita akan membahas solusi navigasi yang berbeda nanti, ada cara rendering salah satu dari dua
layar sekarang, kita juga memiliki
cara rendering hanya satu dari dua layar ini sekarang dan untuk itu, kita tidak
memerlukan alat khusus atau hal seperti itu,
kita dapat menggunakan logika Bereaksi normal, kita dapat membuat konten ini secara kondisional.
Yang perlu kita lakukan untuk itu adalah kita perlu mengelola beberapa status dalam
komponen aplikasi kita, kita perlu mengelola nomor yang dipilih di sini juga.
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,
saya
ingin mendapatkan nomor yang dipilih atau nomor pengguna dan telah menetapkan nomor pengguna sebagai fungsi pembaruan di sini dan pada awalnya itu tidak
terdefinisi dan sekarang
di sini saya memerlukan fungsi
di mana kita dapat mengubah ini, seperti
mulai penangan
permainan, yang terdengar
seperti nama yang pas karena kita akan memiliki nomor seperti itu jika pengguna menekan tombol mulai permainan di
sini di layar mulai permainan.
Jadi pengendali permainan awal kemudian akan mendapatkan nomor yang dipilih sebagai input, itu asumsi yang harus kita buat
di sini dan mengatur nomor pengguna menjadi nomor yang dipilih di sini. Sekarang, kapan pun itu terjadi, setiap kali kami
memiliki nomor pengguna, kami tahu bahwa permainan sedang berjalan dan kami tahu
bahwa kami dapat menampilkan layar game alih-alih layar mulai permainan.
Jadi di sini kita dapat menggunakan variabel konten misalnya dan mengatakan konten default kami adalah layar mulai permainan dan itu adalah
kode
Bereaksi normal seperti yang Anda tahu dari Bereaksi Untuk Web juga, Anda dapat menyimpan komponen seperti ini dalam variabel dan
kemudian cukup output variabel ke bawah di sana, itu juga yang sudah
kami lakukan di layar mulai permainan dengan hasil yang dikonfirmasi. Jadi layar start game adalah output default kami,
tetapi sekarang
kami dapat menambahkan cek jika dan periksa apakah isinya benar, itu yang
diperiksa oleh cek ini, jadi ini akan palsu pada awalnya jika tidak ditentukan
tapi sekarang jika itu benar, kami dapat mengatur nomor pengguna, jadi saya memeriksa apakah nomor pengguna adalah true-ish,
jika itu benar-ish, maka kita
tahu nomor dipilih, itu akan ditentukan dan karena itu awalnya salah tetapi jika itu benar-ish, jika nomor
dipilih, maka kita
akan mengatur konten di sini untuk menjadi layar permainan dan kemudian kita membuat apa pun yang ada di
konten di sana dan itu akan menjadi layar permainan atau layar mulai permainan.
Jadi sekarang ketika kita klik mulai permainan di sini dengan yang lain terpilih, ini harus beralih di sini jika dan itu
yang penting, jika kita memastikan
bahwa pengendali permainan mulai dapat dipicu dari dalam layar mulai permainan. Sekarang untuk itu, kami menggunakan pola Bereaksi
standar untuk meneruskan referensi ke penangan ini ke komponen itu, mungkin pada prop onStartGame, yang terdengar seperti
nama yang cocok untuk saya. Kami meneruskan pengendali permainan awal,
hanya referensi tanpa tanda kurung di sini, hanya referensi, penunjuk pada fungsi ini dan onStartGame
sekarang menjadi properti yang dapat kita gunakan di layar mulai permainan.
Jadi di sini di layar mulai permainan, ketika kita klik pada tombol mulai permainan di sini, saya ingin memicu prop
pada akhirnya.
Jadi di sini, saya memiliki onPress dan di sana pada akhirnya, saya ingin menjalankan onStartGame dan meneruskan nomor yang saat ini dipilih
di sini yang dikelola dalam keadaan layar mulai permainan.
Jadi di sini, saya meneruskan ini ke onStartGame dan onStartGame terikat ke pengendali permainan awal yang mengharapkan
dan kemudian menerima nomor yang dipilih.
Jadi itulah cara kami memastikan bahwa mengklik tombol itu untuk memulai layar permainan memicu metode ini atau fungsi ini di sini
dan ketika fungsi
ini dipicu, kami menetapkan nomor pengguna, ini memastikan bahwa konten adalah
layar permainan dan oleh karena itu kita harus melihat layar game. Sekarang bagian yang hilang adalah bahwa
di layar permainan, saya perlu pilihan pengguna untuk menghasilkan nomor acak awal saya dan mengecualikan bahwa pilihan pengguna
dengan benar untuk nomor acak pertama dan oleh karena itu kita harus meneruskan
properti bernama pilihan pengguna ke layar permainan. Jadi kita bisa menambahkan prop pilihan pengguna di
sini dan memberikan nomor pengguna yang merupakan keadaan yang kita kelola dalam komponen aplikasi yaitu
nomor yang dipilih yang kita simpan di keadaan
di sini, meneruskannya ke layar game.
Jadi saya berharap bahwa aliran data jelas, kami mendapatkan nomor yang dipilih dari layar mulai permainan ketika tombol
itu, tombol mulai permainan ditekan, kami kemudian
menyimpannya dalam keadaan komponen aplikasi di sini dalam status penggunaan nomor dengan bantuan mengatur
nomor pengguna dan kami kemudian menggunakan nomor pengguna itu untuk meneruskannya ke layar game yang hanya
diberikan jika kami memiliki nomor pengguna, jadi jika game sedang berjalan, jika game dimulai sehingga
di layar game, kita dapat menggunakan nomor pengguna yang diterima pada prop pilihan pengguna untuk kemudian menghasilkan
nomor acak baru yang komputer tebak di mana pilihan pengguna ini, nomor pengguna ini dikecualikan, sehingga untuk
tebakan komputer pertama, komputer tidak dapat langsung tebak nomor pengguna. Banyak bicara, mari kita simpan semua
itu dan melihatnya.
Mari kita masukkan 55 dan konfirmasi dan klik start game dan kami tidak dapat menemukan variabel pada start game.
Jadi masalahnya di sini adalah yang saya jalankan, ya itu harus menjadi alat peraga pada permainan awal di sini, pada
tombol permainan awal di komponen permainan awal karena tentu saja itu adalah properti yang
kita dapatkan, itu bukan fungsi yang
didefinisikan di sini, itu
didefinisikan pada alat peraga, alat peraga ini pada akhirnya.
Kesalahan kecil, mari kita coba
lagi setelah memperbaikinya, klik mulai permainan
dan itu terlihat bagus.
Sekarang kita melihat
lawan menebak dan kita dapat memberikan beberapa
petunjuk di sini yang saat ini tidak memiliki efek tetapi yang segera akan berpengaruh dan karena itu kita berada di layar berikutnya,
kita berada di layar permainan.
Sekarang mari kita pastikan kita benar-benar dapat memberikan komputer beberapa petunjuk di sini dan memastikan bahwa komputer memiliki
peluang untuk menyelesaikan ini dan menebak-nebak nomor kita.