Aplikasi web sumber terbuka untuk membangun, mengelola, dan menguji coba Magic: the Gathering cube.
Jika Anda tertarik untuk berkontribusi terhadap Cube Cobra, silakan baca pedoman Kontribusi untuk proyek ini.
Anda perlu menginstal NodeJS, Redis, dan IDE pilihan Anda (saya merekomendasikan VSCode). Anda dapat menemukan sumber daya yang diperlukan di sini:
simpul 20
NodeJS: https://nodejs.org/en/download/
Server Redis:
brew install redis
apt-get install redis
Setelah menginstal redis, mulai server. Di Mac, jalan pintas untuk melakukan ini adalah brew services start redis
. Anda dapat melihat status dengan brew services list
.
Localstack menyediakan emulasi lokal Layanan AWS yang diperlukan untuk menjalankan CubeCobra termasuk S3, DynamoDB, dan Cloudwatch.
Anda dapat mengikuti panduan instalasi dari situs localstack. Penyiapan yang disarankan melibatkan menjalankan localstack dalam wadah buruh pelabuhan, yang juga memerlukan Docker Desktop.
brew install localstack/tap/localstack-cli
curl
dari localstack Setelah localstack diinstal, Anda dapat memulai server di latar belakang dengan CLI: localstack start --detached
. Anda dapat melihat statusnya dengan localstack status
.
VSCode (sangat disarankan, tetapi tidak wajib): https://code.visualstudio.com/ ESLint Extension untuk VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Prettier Extension untuk VSCode: https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VSCode (dengan ekstensi ESLint dan Prettier) adalah lingkungan yang direkomendasikan. Saat menggunakan pengaturan ini, pastikan ruang kerja yang Anda pilih adalah folder root yang telah Anda kloning, ini akan memastikan bahwa plugin ESLint dapat bekerja dengan aturan linting kami. Prettier secara otomatis akan menerapkan format standar pada kode Anda. Menggunakan plugin ini akan membuat kepatuhan terhadap aturan linting dan pemformatan kode menjadi jauh lebih mudah.
Untuk pengaturan pertama, Anda perlu menjalankan:
yarn install && yarn build
yarn setup:local
Ini akan:
Jika Anda menggunakan Windows, Anda perlu menetapkan bash sebagai shell skrip Anda:
Anda perlu memastikan bahwa Anda telah menginstal bash
di suatu tempat dan menjalankan perintah berikut [dengan jalur bash
Anda menggantikan jalur di bawah].
yarn config set script-shell " C: \ Program Files \ git \ bin \ bash.exe "
Kemudian Anda dapat memulai program seperti ini:
yarn start:dev
Skrip ini akan:
Anda sekarang dapat membuka browser dan terhubung ke aplikasi melalui: http://localhost:8080.
(Meskipun node mengatakan ia berjalan pada port 5000 di log, Anda harus menggunakan port 8080 untuk terhubung.)
Nodemon akan merestart aplikasi setiap kali ada perubahan pada file sumber.
Setelah mengakses aplikasi secara lokal Anda perlu membuat akun pengguna baru menggunakan link "Resister" di bilah navigasi.
Variabel lingkungan diisi dari file .env
. Tidak ada file .env
yang diperiksa, jadi skrip pengaturan menyalin .env_EXAMPLE
ke .env
dan dengan beberapa nilai default untuk mendukung CubeCobra yang didukung oleh LocalStack.
Anda dapat menjalankan instance lokal Cube Cobra terhadap sumber daya AWS yang sebenarnya, bukan LocalStack, jika diinginkan. Setelah menyiapkan S3, DynamoDB, dan Cloudwatch menggunakan akun AWS, Anda dapat memasukkan kredensial Anda ke dalam file .env
.
Berikut tabel cara mengisi env vars:
| Nama Variabel | Deskripsi | Diperlukan? | | ---------------------- | --------------------------------------------------- ------------------------------------------ | --------- | --- | | AWS_ACCESS_KEY_ID | Access key AWS untuk akun Anda. | Ya | | AWS_ENDPOINT | Titik akhir dasar yang digunakan untuk AWS. Digunakan untuk menunjuk ke localstack daripada AWS yang dihosting. | | | AWS_LOG_GROUP | Nama grup log AWS CloudWatch yang akan digunakan. | Ya | | AWS_LOG_STREAM | Nama aliran log AWS CloudWatch yang akan digunakan. | | | AWS_REGION | Wilayah AWS yang akan digunakan (default: us-east-2). | Ya | | AWS_SECRET_ACCESS_KEY | Kunci akses rahasia AWS untuk akun Anda. | Ya | | CUBECOBRA_VERSION | Versi Cube Cobra. | | | DATA_BUCKET | Nama bucket AWS S3 yang akan digunakan. Anda harus membuat keranjang ini di akun Anda. | Ya | | DOMAIN | Nama domain server. Digunakan untuk pengalihan eksternal seperti email. | Ya | | DOWNTIME_ACTIVE | Apakah situs sedang dalam mode downtime atau tidak. | | | DYNAMO_PREFIX | Awalan yang digunakan untuk tabel DynamoDB. Anda dapat membiarkan ini sebagai nilai default | Ya | | EMAIL_CONFIG_PASSWORD | Kata sandi akun email yang digunakan untuk mengirim email. | | | EMAIL_CONFIG_USERNAME | Nama pengguna akun email yang digunakan untuk mengirim email. | | | ENV | Lingkungan untuk menjalankan Cube Cobra. | Ya | | | NITROPAY_ENABLED | Mengaktifkan NitroPay, penyedia iklan kami atau tidak. | | | NODE_ENV | Lingkungan untuk menjalankan Cube Cobra. | Ya | | PATREON_CLIENT_ID | ID klien untuk aplikasi Patreon OAuth. | | | PATREON_CLIENT_SECRET | Rahasia klien untuk aplikasi Patreon OAuth. | | | PATREON_HOOK_SECRET | Rahasia webhook Patreon. | | | PATREON_REDIRECT | URL pengalihan untuk aplikasi Patreon OAuth. | | | PELABUHAN | Port untuk menjalankan Cube Cobra. | Ya | | REDIS_HOST | URL server Redis. | Ya | | REDIS_SETUP | Apakah akan menyiapkan server Redis atau tidak - ini diperlukan untuk Redis tetapi tidak untuk elasticache. | | | RAHASIA | Ungkapan rahasia untuk enkripsi. Anda dapat membiarkan nilai default. | Ya | | SESSION_SECRET | Ungkapan rahasia untuk enkripsi sesi. Anda dapat membiarkan nilai default. | Ya | | SESI | Nama cookie sesi. Anda dapat membiarkan nilai default. | Ya | | TCG_PLAYER_PRIVATE_KEY | Kunci pribadi untuk API TCGPlayer. | | | TCG_PLAYER_PUBLIC_KEY | Kunci publik untuk API TCGPlayer. | | | CACHE_ENABLED | Apakah mengaktifkan caching atau tidak. | | | AUTOSCALING_GROUP | Nama grup penskalaan otomatis tempat instance ini dijalankan, digunakan untuk cache yang didistribusikan. | | | CACHE_SECRET | Rahasia untuk cache yang didistribusikan. | |
Dalam skrip pengaturan awal, yarn update-cards
inilah yang menciptakan definisi kartu. Menjalankan skrip ini akan menarik data terbaru dari scryfall.
Jika Anda ingin analisis kartu, dapat menjalankan skrip berikut:
yarn update-all
Hal ini secara berurutan akan:
Express 4 menyediakan kerangka web minimalis untuk mendukung rendering template dengan PugJS 3 dan definisi titik akhir API berbasis JSON. Templat HTML terutama digunakan untuk merender halaman minimal agar React dapat melakukan bootstrap dengan props awal yang dimasukkan dari server.
Kami menyimpan semua definisi kartu dalam file besar yang telah diproses sebelumnya, sehingga node dalam produksi hanya perlu mengunduh dan memuat file, dan dapat mengambil file terbaru dari S3 ketika sudah siap. Kami melakukan ini karena membaca dari memori jauh lebih cepat daripada harus membuat permintaan ke layanan lain kapan pun kami memerlukan data kartu.
Proses eksternal bertanggung jawab untuk memperbarui definisi kartu, dan mengunggah ke S3. Proses yang sama juga bertanggung jawab untuk memperbarui analisis kartu, dan ekspor data.
Kami menggunakan redis untuk kontrol konkurensi untuk penyusunan multipemain. Semua operasi redis ditangani di multiplayerDrafting.js
Setiap instance dari server ekspres menjalankan pekerjaan menggunakan jadwal simpul setiap malam untuk memperbarui carddb dalam memori dari s3.
Skrip Bash ( jobs/definition
) dijalankan secara berkala di AWS untuk menjalankan pekerjaan per jam, harian & mingguan.
Filter kartu ditentukan yang dapat digunakan oleh frontend dan backend. Nearley adalah toolkit parser nodejs yang digunakan untuk menghasilkan kode yang menentukan filter yang dapat diterapkan ke database kartu.
TypeScript 5.5 secara bertahap diluncurkan untuk menggantikan penggunaan komponen vanilla JS dengan PropTypes.
Komponen disediakan oleh Reactstrap 9 yang didukung oleh [Bootstrap v5.1][boostrap], yang menggunakan SCSS.
Komponen biasanya secara langsung menggunakan kelas bootstrap untuk gaya tambahan, namun juga dapat menggunakan nama kelas global yang ditentukan dalam file CSS publik.