キューブコブラ

キューブコブラ

Magic: the Gathering のキューブを構築、管理、プレイテストするためのオープンソース Web アプリケーション。

貢献する

Cube Cobra への貢献に興味がある場合は、このプロジェクトの貢献ガイドラインをお読みください。

設定

インストールの前提条件

NodeJS、Redis、および好みの IDE (VSCode をお勧めします) をインストールする必要があります。必要なリソースはここで見つけることができます。

NodeJS

ノード20

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

レディス

Redisサーバー:

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

redis をインストールしたら、サーバーを起動します。 Mac では、これを行うためのショートカットはbrew services start redisです。ステータスはbrew services listで確認できます。

ローカルスタック

Localstack は、S3、DynamoDB、Cloudwatch などの CubeCobra を実行するために必要な AWS サービスのローカル エミュレーションを提供します。

localstack サイトのインストール ガイドラインに従うことができます。推奨されるセットアップには、Docker コンテナーで localstack を実行することが含まれます。これには、Docker Desktop も必要です。

• Windows: ローカルスタックからバイナリをダウンロードしてインストールします。
• Mac: brew install localstack/tap/localstack-cli
• Linux: ローカルスタックからのcurlコマンドを使用します。

localstack がインストールされたら、CLI localstack start --detached使用してサーバーをバックグラウンドで起動できます。 localstack statusでステータスを確認できます。

コードエディタ(IDE)

VSCode (強く推奨されますが、必須ではありません): https://code.visualstudio.com/ VSCode の ESLint 拡張機能: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint VSCode の Prettier 拡張機能: https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

VSCode (ESLint および Prettier 拡張機能を含む) が推奨環境です。この設定を使用する場合は、選択したワークスペースがクローンを作成したルート フォルダーであることを確認してください。これにより、ESLint プラグインがリンティング ルールで確実に動作できるようになります。 Prettier はコードに標準の書式設定を自動的に適用します。これらのプラグインを使用すると、lint およびコードの書式設定ルールに従うことが大幅に容易になります。

初期セットアップ

最初のセットアップでは、以下を実行する必要があります。

yarn install && yarn build
yarn setup:local

これにより、次のことが行われます。

• 依存関係をインストールする
• セットアップ スクリプトを実行するアプリケーション コードを構築する
• セットアップ スクリプトを実行して次のことを行います。
  • アプリケーションをローカルで実行するための値がすでに設定されている .env ファイルを作成します。
  • s3バケットを使用したローカルスタックのセットアップ
  • アプリケーションを永続化するためにローカル ファイルをセットアップする
  • localstack dynamodb テーブル (例: ユーザー、キューブ、カードなど) をセットアップします。
  • Scryfall からカード データを一括ダウンロードし、ファイルに保存してローカルスタック s3 にロードします

Windows を使用している場合は、スクリプト シェルとして bash を設定する必要があります。

bashがどこかにインストールされていることを確認し、次のコマンドを実行する必要があります (以下のパスの代わりにbashパスを使用します)。

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

ランニングキューブコブラ

次に、次のようにプログラムを開始できます。

yarn start:dev

このスクリプトは次のことを行います。

• ローカルスタックが実行されていることを確認してください
• カードフィルターのほぼパーサーがコンパイルされていることを確認します
• scss (ブートストラップ) スタイルのコンパイルと監視
• ノードモンを使用してサーバーJavaScriptをコンパイルおよび監視します
• Webpack 開発サーバーを実行および監視する

これで、ブラウザを開いて、http://localhost:8080 経由でアプリに接続できるようになります。

(ログではノードがポート 5000 で実行されていると示されていますが、接続にはポート 8080 を使用する必要があります。)

Nodemon は、ソース ファイルに変更があるたびにアプリケーションを再起動します。

アプリケーションにローカルでアクセスした後、ナビゲーション バーの [登録] リンクを使用して新しいユーザー アカウントを作成する必要があります。

環境変数と AWS への接続

環境変数は.envファイルから設定されます。 .envファイルがチェックインされていないため、セットアップ スクリプトは、LocalStack によってサポートされる CubeCobra をサポートするために、 .env_EXAMPLEいくつかのデフォルト値とともに.envにコピーします。

必要に応じて、LocalStack ではなく実際の AWS リソースに対して Cube Cobra のローカル インスタンスを実行できます。 AWS アカウントを使用して S3、DynamoDB、Cloudwatch をセットアップした後、認証情報を.envファイルに挿入できます。

以下は、環境変数を入力する方法に関する表です。

|変数名 |説明 |必須？ | | ---------------------- | -------------------------------------------------- ------------------------------------------ | --------- | --- | | AWS_ACCESS_KEY_ID |アカウントの AWS アクセス キー。 |はい | | AWS_エンドポイント | AWS に使用するベースエンドポイント。ホストされた AWS ではなくローカルスタックを指すために使用されます。 | | | AWS_LOG_GROUP |使用する AWS CloudWatch ログ グループの名前。 |はい | | AWS_LOG_STREAM |使用する AWS CloudWatch ログ ストリームの名前。 | | | AWS_地域 |使用する AWS リージョン (デフォルト: us-east-2)。 |はい | | AWS_SECRET_ACCESS_KEY |アカウントの AWS シークレット アクセス キー。 |はい | | CUBECOBRA_VERSION |キューブコブラのバージョン。 | | |データバケット |使用する AWS S3 バケットの名前。アカウントにこのバケットを作成する必要があります。 |はい | |ドメイン |サーバーのドメイン名。電子メールなどの外部リダイレクトに使用されます。 |はい | |ダウンタイム_アクティブ |サイトがダウンタイム モードであるかどうか。 | | |ダイナモ_プレフィックス | DynamoDB テーブルに使用するプレフィックス。これをデフォルト値のままにすることができます。はい | | EMAIL_CONFIG_PASSWORD |電子メールの送信に使用する電子メール アカウントのパスワード。 | | | EMAIL_CONFIG_USERNAME |電子メールの送信に使用する電子メール アカウントのユーザー名。 | | |環境 | Cube Cobra を実行する環境。はい | | |ニトロペイ_有効 |広告プロバイダーである NitroPay を有効にするかどうか。 | | |ノード環境 | Cube Cobra を実行する環境。はい | | PATREON_CLIENT_ID | Patreon OAuth アプリのクライアント ID。 | | | PATREON_CLIENT_SECRET | Patreon OAuth アプリのクライアント シークレット。 | | |パトレオン_フック_シークレット | Patreon Webhook の秘密。 | | |パトレオン_リダイレクト | Patreon OAuth アプリのリダイレクト URL。 | | |ポート | Cube Cobra を実行するポート。 |はい | | REDIS_ホスト | Redis サーバーの URL。 |はい | | REDIS_セットアップ | Redis サーバーをセットアップするかどうか - これは Redis には必要ですが、elasticache には必要ありません。 | | |秘密 |暗号化のための秘密のフレーズ。デフォルト値のままで構いません。 |はい | |セッション_シークレット |セッション暗号化のための秘密のフレーズ。デフォルト値のままで構いません。 |はい | |セッション |セッション Cookie の名前。デフォルト値のままで構いません。 |はい | | TCG_PLAYER_PRIVATE_KEY | TCGPlayer API の秘密キー。 | | | TCG_PLAYER_PUBLIC_KEY | TCGPlayer API の公開キー。 | | |キャッシュ有効 |キャッシュを有効にするかどうか。 | | |オートスケーリング_グループ |このインスタンスが実行される自動スケーリング グループの名前。分散キャッシュに使用されます。 | | |キャッシュ_シークレット |分散キャッシュの秘密。 | |

カード定義と分析の更新

初期セットアップ スクリプトでは、 yarn update-cardsがカード定義を作成します。このスクリプトを実行すると、scryfall から最新のデータが取得されます。

カード分析が必要な場合は、次のスクリプトを実行できます。

yarn update-all

これにより、順番に次のことが行われます。

• ドラフト履歴を更新する
• キューブ履歴を更新する
• メタデータ辞書を更新する
• カードを更新する

コンセプト

バックエンド

API とテンプレートのレンダリング

Express 4 は、PugJS 3 によるテンプレートのレンダリングと JSON ベースの API エンドポイントの定義の両方をサポートする最小限の Web フレームワークを提供します。 HTML テンプレートは主に、サーバーから注入された初期プロパティを使用して React 自体をブートストラップするための最小限のページをレンダリングするために使用されます。

カード

すべてのカード定義は事前処理された大きなファイルに保存されているため、本番環境のノードはファイルをダウンロードしてロードするだけで済み、準備ができたら S3 から最新のファイルをフェッチできます。これを行うのは、カード データが必要なときに他のサービスにリクエストを行うよりも、メモリから読み取る方がはるかに高速であるためです。

外部プロセスは、カード定義の更新と S3 へのアップロードを担当します。これと同じプロセスが、カード分析の更新とデータのエクスポートも担当します。

マルチプレイヤードラフト

マルチプレイヤー ドラフトの同時実行制御には Redis を使用します。すべての Redis 操作はmultiplayerDrafting.jsで処理されます

スケジュールされたジョブ

Express サーバーの各インスタンスは、node-schedule を使用してジョブを毎晩実行し、s3 からメモリ内のカードデータベースを更新します。

Bash スクリプト ( jobs/definition ) は AWS 上で定期的に実行され、時間ごと、毎日、毎週のジョブを実行します。

カードフィルター

フロントエンドとバックエンドで使用できるカード フィルターが定義されています。 Nearley は、カード データベースに適用できるフィルターを定義するコードを生成するために使用される、nodejs パーサー ツールキットです。

フロントエンド

タイプスクリプト

TypeScript 5.5 は、バニラ JS コンポーネントの使用を PropType に置き換えるために段階的に展開されています。

コンポーネントとスタイリング

コンポーネントは、SCSS を使用する [Bootstrap v5.1][boostrap] を搭載した Reactstrap 9 によって提供されます。

通常、コンポーネントは追加のスタイル設定にブートストラップ クラスを直接使用しますが、パブリック CSS ファイルで定義されたグローバル クラス名を使用する場合もあります。