CubeCobra

An open source web application for building, managing, and playtesting Magic: the Gathering cubes.

Contributing

If you are interested in contributing towards Cube Cobra, please read the Contribution guidelines for this project.

Setup

Install Prerequisites

You will need to install NodeJS, Redis, and an IDE of your preference (I recommend VSCode). You can find the necessary resources here:

NodeJS

Node 20

NodeJS: https://nodejs.org/en/download/

Redis

Redis Server:

• Windows: https://github.com/microsoftarchive/redis
• Mac: brew install redis
• Linux: apt-get install redis

After installing redis, start the server. On mac, a shortcut to do this is brew services start redis. You can seet the status with brew services list.

Localstack

Localstack provides a local emulation of AWS Services required to run CubeCobra including S3, DynamoDB and Cloudwatch.

You may follow the installation guidelines from the localstack site. The recommended setup involves running localstack in a docker container, which requires Docker Desktop as well.

• Windows: Download and install the binary from localstack
• Mac: brew install localstack/tap/localstack-cli
• Linux: Use the curl command from localstack

Once localstack is installed, you can start the server in the background with the CLI: localstack start --detached. You can see the status with localstack status.

Code Editor (IDE)

VSCode (strongly recommended, but not required): https://code.visualstudio.com/ ESLint Extension for VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Prettier Extension for VSCode: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

VSCode (with the ESLint and Prettier extension) is the recommended environment. When using this setup, make sure that your selected workspace is the root folder that you have cloned, this will ensure that the ESLint plugin can work with our linting rules. Prettier will automatically apply standard formatting to your code. Using these plugins will make adhering to the linting and code formatting rules significantly easier.

Initial Setup

For the first setup, you will need to run:

yarn install && yarn build
yarn setup:local

This will:

• install dependencies
• build the application code to run setup scripts
• run setup scripts to:
  • create a .env file with values for running the application locally already set
  • setup localstack w/ s3 bucket
  • setup local files for application perisistence
  • setup localstack dynamodb tables (ex. Users, Cubes, Cards, etc.)
  • download bulk card data from scryfall, persist to files and load it to localstack s3

If you are on Windows, you will need to set bash as your script shell:

You will need to make sure you have bash installed somewhere and run the following command [with your bash path in place of the path below].

yarn config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"

Running CubeCobra

Then you can start the program like so:

yarn start:dev

This script will:

• ensure localstack is running
• ensure nearly parsers for card filters have compiled
• compile & watch scss (bootstrap) styles
• compile & watch server javascript w/ nodemon
• run & watch webpack dev server

You can now open up a browser and connect to the app through: http://localhost:8080.

(Despite the fact that node says it is running on port 5000 in the logs, you should use port 8080 to connect.)

Nodemon will restart the application anytime there is a change to a source file.

After accessing the application locally you will need to create a new user account using the "Resister" link on the nav bar.

Environment Variables & Connecting to AWS

Environment variables are populated from the .env file. There is no .env file checked in, so the setup script copies .env_EXAMPLE to .env and with some default values to support CubeCobra backed by LocalStack.

You can run a local instance of Cube Cobra against real AWS resources rather than LocalStack, if desired. After setting up S3, DynamoDB, and Cloudwatch using your AWS account, you can insert your credentials into the .env file.

Here is a table on how to fill out the env vars:

Updating Card Definitions and Analytics

In the initial setup scripts, yarn update-cards is what creates the card definitions. Running this script will pull the latest data from scryfall.

If you want card analytics, can run the following script:

yarn update-all

This will, in sequence:

• update draft history
• update cube history
• update metadata dictionary
• update cards

Concepts

Backend

API & Template Rendering

Express 4 provides a minimalist web framework to support both template rendering with PugJS 3 and definition of JSON-based API endpoints. HTML templates are mainly used to render a minimal page for React to bootstrap itself into with initial props injected from the server.

Cards

We keep all card definitions in large pre-processed files, so that nodes in production just need to download and load the files, and can fetch the latest files from S3 when they're ready. We do this because it's much faster to read from memory than to have to make requests to some other service anytime we need card data.

An external process is responsible for updating the card definitions, and uploading to S3. This same process is also responsible for updating the card analytics, and data exports.

Multiplayer Drafting

We use redis for concurrency control for multiplayer drafting. All redis operations are handled in multiplayerDrafting.js

Scheduled jobs

Each instance of the express server runs a job using node-schedule on a nightly basis to update the in-memory carddb from s3.

Bash scripts (jobs/definition) are executed periodically on AWS to run hourly, daily & weekly jobs.

Card Filters

Card filters are defined that can be used by the frontend and backend. Nearley is a nodejs parser toolkit that is used to generate code that define filters that can be applied to the card database.

Frontend

Typescript

TypeScript 5.5 is gradually being rolled out to replace usage of vanilla JS components with PropTypes.

Components & Styling

Components are provided by Reactstrap 9 which is powered by [Bootstrap v5.1][boostrap], which uses SCSS.

Components typically directly use bootstrap classes for additional styling, but may also use global classnames defined in public CSS files.