Mesin Slot React

Proyek Mesin Slot Sederhana dan Fungsional

Proyek ini dibuat dengan Create React App dan dilengkapi dengan dependensi tambahan serta pengujian untuk semua komponen dan kait yang digunakan.

Dependensi yang Ditambahkan ke CRA

• @testing-library/react-hooks
• @types/enzyme
• @wojtekmaj/enzyme-adapter-react-17 – paket tidak resmi untuk React v17
• enzyme
• node-sass

Perilaku

1. Mesin memiliki 3 roda. Setiap roda memiliki 4 simbol (stroberi, pisang, jeruk, dan monyet), dan mesin hanya dapat menampilkan satu simbol per roda.
2. Mesin memulai dengan simbol pada posisi acak.
3. Mesin memiliki tombol mulai. Saat diklik, roda mulai berputar (satu simbol setiap 50ms).
4. Jika tombol mulai tidak diklik, mesin mulai berputar otomatis setelah 5 detik.
5. Jika tombol berhenti tidak diklik setelah mulai, mesin berhenti otomatis setelah 10 detik.
6. Saat berhenti, jika ada dua simbol identik yang tidak berurutan, hadiahnya $10, atau dua simbol berurutan, hadiahnya $20. Jika semua cocok, hadiahnya $100.

Struktur Folder dan File

Berikut adalah struktur folder:

• src
  • components // komponen React yang dapat digunakan kembali
    • Button
    • Message
    • Wheel
    • Setiap komponen memiliki struktur berikut:
      • ComponentName
        • module
        • test
        • ComponentName
        • index
  • containers
    • SlotMachine (struktur sama seperti komponen, namun mungkin memiliki folder tambahan terkait kontainer tersebut)
  • hooks
    • useSlotMachine
  • lib // pembantu
    • scripts
      • utils
    • styles
      • abstracts
        • _mixins.scss
        • _variables.scss
      • main
  • index

Cara Menjalankan Proyek

Instal Node, lalu buka Terminal/CMD dan navigasi ke folder proyek. Jalankan perintah berikut:

npm install

Lingkungan Pengembangan

npm start

Menjalankan aplikasi dalam mode pengembangan. Buka http://localhost:3000 di browser untuk melihatnya. Halaman akan dimuat ulang jika Anda melakukan pengeditan. Anda juga akan melihat kesalahan lint di konsol.

Build Produksi

npm run build

Membangun aplikasi untuk produksi ke folder build. Ini menggabungkan React dalam mode produksi dan mengoptimalkan build untuk kinerja terbaik. Build diminifikasi dan nama file menyertakan hash. Aplikasi Anda siap untuk diterapkan.

Pengujian

npm run test

Menjalankan test runner dalam mode pantau interaktif.

Eject

npm run eject

Catatan: ini adalah operasi satu arah. Setelah di-eject, Anda tidak bisa kembali!

Jika Anda tidak puas dengan alat build dan pilihan konfigurasi, Anda dapat melakukan eject kapan saja. Perintah ini akan menghapus dependensi build tunggal dari proyek Anda. Sebagai gantinya, perintah ini akan menyalin semua file konfigurasi dan dependensi transitif (webpack, Babel, ESLint, dll) langsung ke proyek Anda sehingga Anda memiliki kendali penuh atasnya. Semua perintah kecuali eject akan tetap berfungsi, tetapi sekarang perintah tersebut akan menunjuk ke skrip yang disalin sehingga Anda dapat menyesuaikannya. Pada titik ini, Anda sendiri yang bertanggung jawab. Anda tidak harus menggunakan eject. fitur yang dikurasi ini cocok untuk penerapan kecil dan menengah, dan Anda tidak perlu merasa wajib menggunakan fitur ini. Namun, kami memahami bahwa alat ini tidak akan berguna jika Anda tidak dapat menyesuaikannya saat Anda siap.