立方体眼镜蛇

立方体眼镜蛇

用于构建、管理和测试 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 提供运行 CubeCobra 所需的 AWS 服务的本地模拟，包括 S3、DynamoDB 和 Cloudwatch。

您可以遵循 localstack 站点的安装指南。推荐的设置包括在 Docker 容器中运行 localstack，这也需要 Docker Desktop。

• Windows：从 localstack 下载并安装二进制文件
• Mac： brew install localstack/tap/localstack-cli
• Linux：使用 localstack 中的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 插件可以与我们的 linting 规则配合使用。 Prettier 会自动将标准格式应用于您的代码。使用这些插件将使遵守 linting 和代码格式化规则变得更加容易。

初始设置

对于第一次设置，您需要运行：

yarn install && yarn build
yarn setup:local

这将：

• 安装依赖项
• 构建应用程序代码以运行设置脚本
• 运行安装脚本以：
  • 创建一个 .env 文件，其中已设置用于在本地运行应用程序的值
  • 使用 s3 存储桶设置 localstack
  • 设置本地文件以实现应用程序持久性
  • 设置 localstack dynamodb 表（例如用户、多维数据集、卡等）
  • 从 scryfall 下载批量卡数据，保存到文件并将其加载到 localstack s3

如果您使用的是 Windows，则需要将 bash 设置为脚本 shell：

您需要确保已在某处安装了bash并运行以下命令[用您的bash路径代替下面的路径]。

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

运行立方体眼镜蛇

然后你可以像这样启动程序：

yarn start:dev

该脚本将：

• 确保 localstack 正在运行
• 确保卡片过滤器的几乎解析器已编译
• 编译并观看 scss (bootstrap) 样式
• 使用 nodemon 编译并监视服务器 javascript
• 运行并观察 webpack 开发服务器

您现在可以打开浏览器并通过以下方式连接到应用程序：http://localhost:8080。

（尽管节点在日志中显示它正在端口 5000 上运行，但您应该使用端口 8080 进行连接。）

只要源文件发生更改，Nodemon 就会重新启动应用程序。

在本地访问应用程序后，您将需要使用导航栏上的“Resister”链接创建一个新的用户帐户。

环境变量和连接到 AWS

环境变量是从.env文件填充的。没有签入.env文件，因此安装脚本将.env_EXAMPLE复制到.env并使用一些默认值来支持 LocalStack 支持的 CubeCobra。

如果需要，您可以针对真实的 AWS 资源而不是 LocalStack 运行 Cube Cobra 的本地实例。使用您的 AWS 账户设置 S3、DynamoDB 和 Cloudwatch 后，您可以将凭证插入.env文件中。

下面是有关如何填写环境变量的表格：

|变量名称 |描述 |必需的？ | | ---------------------- | -------------------------------------------------- ------------------------------------------------------ | ---------| ---| | AWS_ACCESS_KEY_ID | AWS_ACCESS_KEY_ID您账户的 AWS 访问密钥。 |是的 | | AWS_ENDPOINT | AWS_ENDPOINT用于 AWS 的基本端点。用于指向 localstack 而不是托管的 AWS。 | | | AWS_LOG_GROUP | AWS_LOG_GROUP | AWS_LOG_GROUP要使用的 AWS CloudWatch 日志组的名称。 |是的 | | AWS_LOG_STREAM | AWS_LOG_STREAM | AWS_LOG_STREAM要使用的 AWS CloudWatch 日志流的名称。 | | | AWS_区域 |要使用的 AWS 区域（默认值：us-east-2）。 |是的 | | AWS_SECRET_ACCESS_KEY | AWS_SECRET_ACCESS_KEY |您账户的 AWS 秘密访问密钥。 |是的 | | CUBECOBRA_版本 | Cube Cobra 的版本。 | | |数据桶 |要使用的 AWS S3 存储桶的名称。您需要在您的帐户中创建此存储桶。 |是的 | |域名 |服务器的域名。用于外部重定向，例如电子邮件。 |是的 | | DOWNTIME_ACTIVE | 停机时间站点是否处于停机模式。 | | | DYNAMO_PREFIX | DYNAMO_PREFIX |用于 DynamoDB 表的前缀。您可以将此保留为默认值 |是的 | | EMAIL_CONFIG_PASSWORD |用于发送电子邮件的电子邮件帐户的密码。 | | | EMAIL_CONFIG_USERNAME |用于发送电子邮件的电子邮件帐户的用户名。 | | |环境|运行 Cube Cobra 的环境。是的 | | | NITROPAY_ENABLED | NITROPAY_ENABLED |是否启用我们的广告提供商 NitroPay。 | | | NODE_ENV |运行 Cube Cobra 的环境。是的 | | PATREON_CLIENT_ID | | Patreon OAuth 应用程序的客户端 ID。 | | | PATREON_CLIENT_秘密 | Patreon OAuth 应用程序的客户端密钥。 | | | PATREON_HOOK_秘密 | Patreon webhook 的秘密。 | | | PATREON_重定向 | Patreon OAuth 应用程序的重定向 URL。 | | |港口|运行 Cube Cobra 的端口。 |是的 | | REDIS_HOST | REDIS_主机Redis 服务器的 URL。 |是的 | | REDIS_SETUP | REDIS_SETUP |是否设置 Redis 服务器 - Redis 需要此设置，但 Elasticache 不需要。 | | |秘密 |用于加密的秘密短语。您可以保留默认值。 |是的 | |会话秘密 |用于会话加密的秘密短语。您可以保留默认值。 |是的 | |会议|会话 cookie 的名称。您可以保留默认值。 |是的 | | TCG_PLAYER_PRIVATE_KEY | TCGPlayer API 的私钥。 | | | TCG_PLAYER_PUBLIC_KEY | TCG_PLAYER_PUBLIC_KEY | TCGPlayer API 的公钥。 | | | CACHE_ENABLED | 缓存启用是否启用缓存。 | | |自动缩放组 |运行此实例的自动伸缩组的名称，用于分布式缓存。 | | |缓存_秘密 |分布式缓存的秘密。 | |

更新卡定义和分析

在初始设置脚本中， yarn update-cards用于创建卡定义。运行此脚本将从 scryfall 中提取最新数据。

如果你想要卡片分析，可以运行以下脚本：

yarn update-all

这将依次：

• 更新草稿历史记录
• 更新立方体历史记录
• 更新元数据字典
• 更新卡

概念

后端

API & 模板渲染

Express 4 提供了一个简约的 Web 框架，支持 PugJS 3 的模板渲染和基于 JSON 的 API 端点的定义。 HTML 模板主要用于渲染一个最小页面，以便 React 通过从服务器注入的初始 props 来引导自身。

牌

我们将所有卡定义保存在大型预处理文件中，以便生产中的节点只需要下载和加载文件，并在准备好时可以从 S3 获取最新文件。我们这样做是因为从内存中读取数据比在需要卡数据时向其他服务发出请求要快得多。

外部进程负责更新卡定义并上传到 S3。该流程还负责更新卡分析和数据导出。

多人制图

我们使用redis来进行多人选秀的并发控制。所有 redis 操作都在multiplayerDrafting.js中处理

预定职位

Express 服务器的每个实例每晚使用 node-schedule 运行一项作业，以从 s3 更新内存中的 carddb。

Bash 脚本 ( jobs/definition ) 在 AWS 上定期执行，以运行每小时、每天和每周的作业。

卡片过滤器

卡片过滤器被定义为可供前端和后端使用。 Nearley 是一个 NodeJS 解析器工具包，用于生成定义可应用于卡片数据库的过滤器的代码。

前端

打字稿

TypeScript 5.5 正在逐步推出，以用 PropTypes 取代普通 JS 组件的使用。

组件和样式

组件由 Reactstrap 9 提供，该组件由使用 SCSS 的 [Bootstrap v5.1][boostrap] 提供支持。

组件通常直接使用引导类来实现附加样式，但也可以使用公共 CSS 文件中定义的全局类名。