Um aplicativo da web de código aberto para construir, gerenciar e testar cubos de Magic: the Gathering.
Se você estiver interessado em contribuir para o Cube Cobra, leia as diretrizes de contribuição para este projeto.
Você precisará instalar NodeJS, Redis e uma IDE de sua preferência (recomendo VSCode). Você pode encontrar os recursos necessários aqui:
Nó 20
NodeJS: https://nodejs.org/en/download/
Servidor Redis:
brew install redis
apt-get install redis
Após instalar o redis, inicie o servidor. No Mac, um atalho para fazer isso é brew services start redis
. Você pode ver o status com brew services list
.
Localstack fornece uma emulação local de serviços AWS necessários para executar o CubeCobra, incluindo S3, DynamoDB e Cloudwatch.
Você pode seguir as diretrizes de instalação do site localstack. A configuração recomendada envolve a execução do localstack em um contêiner docker, que também requer o Docker Desktop.
brew install localstack/tap/localstack-cli
curl
do localstack Depois que o localstack estiver instalado, você poderá iniciar o servidor em segundo plano com a CLI: localstack start --detached
. Você pode ver o status com localstack status
.
VSCode (altamente recomendado, mas não obrigatório): https://code.visualstudio.com/ Extensão ESLint para VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Extensão mais bonita para VSCode: https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VSCode (com a extensão ESLint e Prettier) é o ambiente recomendado. Ao usar esta configuração, certifique-se de que o espaço de trabalho selecionado seja a pasta raiz que você clonou, isso garantirá que o plugin ESLint possa funcionar com nossas regras de linting. Prettier aplicará automaticamente a formatação padrão ao seu código. O uso desses plug-ins tornará significativamente mais fácil aderir às regras de linting e formatação de código.
Para a primeira configuração, você precisará executar:
yarn install && yarn build
yarn setup:local
Isto irá:
Se você estiver no Windows, precisará definir o bash como seu shell de script:
Você precisará ter certeza de que bash
está instalado em algum lugar e executar o seguinte comando [com o caminho do bash
no lugar do caminho abaixo].
yarn config set script-shell " C: \ Program Files \ git \ bin \ bash.exe "
Então você pode iniciar o programa assim:
yarn start:dev
Este script irá:
Agora você pode abrir um navegador e conectar-se ao aplicativo através de: http://localhost:8080.
(Apesar do nó indicar que está sendo executado na porta 5000 nos logs, você deve usar a porta 8080 para se conectar.)
O Nodemon reiniciará o aplicativo sempre que houver uma alteração em um arquivo de origem.
Após acessar o aplicativo localmente você precisará criar uma nova conta de usuário usando o link "Resister" na barra de navegação.
As variáveis de ambiente são preenchidas a partir do arquivo .env
. Não há registro de arquivo .env
, então o script de configuração copia .env_EXAMPLE
para .env
e com alguns valores padrão para suportar CubeCobra apoiado por LocalStack.
Você pode executar uma instância local do Cube Cobra em recursos reais da AWS em vez de LocalStack, se desejar. Depois de configurar o S3, DynamoDB e Cloudwatch usando sua conta AWS, você pode inserir suas credenciais no arquivo .env
.
Aqui está uma tabela sobre como preencher os env vars:
| Nome da variável | Descrição | Obrigatório? | | ---------------------- | -------------------------------------------------- ------------------------------------------ | --------- | --- | | AWS_ACCESS_KEY_ID | A chave de acesso da AWS para sua conta. | Sim | | AWS_ENDPOINT | O endpoint base a ser usado para AWS. Usado para apontar para pilha local em vez de AWS hospedado. | | | AWS_LOG_GROUP | O nome do grupo de logs do AWS CloudWatch a ser usado. | Sim | | AWS_LOG_STREAM | O nome do fluxo de log do AWS CloudWatch a ser usado. | | | AWS_REGION | A região da AWS a ser usada (padrão: us-east-2). | Sim | | AWS_SECRET_ACCESS_KEY | A chave de acesso secreta da AWS para sua conta. | Sim | | CUBECOBRA_VERSION | A versão do Cubo Cobra. | | | DADOS_BUCKET | O nome do bucket AWS S3 a ser usado. Você precisará criar este bucket em sua conta. | Sim | | DOMÍNIO | O nome de domínio do servidor. Usado para redirecionamentos externos, como e-mails. | Sim | | DOWNTIME_ACTIVE | Se o site está ou não em modo de inatividade. | | | DÍNAMO_PREFIX | O prefixo a ser usado para tabelas do DynamoDB. Você pode deixar isso como o valor padrão | Sim | | EMAIL_CONFIG_PASSWORD | A senha da conta de e-mail a ser usada para enviar e-mails. | | | EMAIL_CONFIG_USERNAME | O nome de usuário da conta de e-mail a ser usada para enviar e-mails. | | | ENV | O ambiente para executar o Cube Cobra. | Sim | | | NITROPAY_ENABLED | Habilitar ou não o NitroPay, nosso provedor de anúncios. | | | NODE_ENV | O ambiente para executar o Cube Cobra. | Sim | | PATREON_CLIENT_ID | O ID do cliente do aplicativo Patreon OAuth. | | | PATREON_CLIENT_SECRET | O segredo do cliente para o aplicativo Patreon OAuth. | | | PATREON_HOOK_SECRET | O segredo do webhook do Patreon. | | | PATREON_REDIRECT | O URL de redirecionamento do aplicativo Patreon OAuth. | | | PORTO | A porta para executar o Cube Cobra. | Sim | | REDIS_HOST | A URL do servidor Redis. | Sim | | REDIS_SETUP | Configurar ou não o servidor Redis - isso é necessário para o Redis, mas não para o elasticache. | | | SEGREDO | Uma frase secreta para criptografia. Você pode deixar o valor padrão. | Sim | | SESSION_SECRET | Uma frase secreta para criptografia de sessão. Você pode deixar o valor padrão. | Sim | | SESSÃO | O nome do cookie de sessão. Você pode deixar o valor padrão. | Sim | | TCG_PLAYER_PRIVATE_KEY | A chave privada para a API TCGPlayer. | | | TCG_PLAYER_PUBLIC_KEY | A chave pública da API TCGPlayer. | | | CACHE_ENABLED | Habilitar ou não o cache. | | | AUTOSCALING_GROUP | O nome do grupo de escalonamento automático em que esta instância é executada, usado para o cache distribuído. | | | CACHE_SECRET | O segredo do cache distribuído. | |
Nos scripts de configuração inicial, yarn update-cards
é o que cria as definições do cartão. A execução deste script extrairá os dados mais recentes do scryfall.
Se você quiser análises de cartões, pode executar o seguinte script:
yarn update-all
Isto irá, em sequência:
Express 4 fornece uma estrutura web minimalista para suportar a renderização de modelos com PugJS 3 e a definição de endpoints de API baseados em JSON. Os modelos HTML são usados principalmente para renderizar uma página mínima para o React se inicializar com os adereços iniciais injetados do servidor.
Mantemos todas as definições de cartão em grandes arquivos pré-processados, para que os nós em produção precisem apenas baixar e carregar os arquivos e possam buscar os arquivos mais recentes do S3 quando estiverem prontos. Fazemos isso porque é muito mais rápido ler da memória do que ter que fazer solicitações a algum outro serviço sempre que precisarmos dos dados do cartão.
Um processo externo é responsável por atualizar as definições do cartão e fazer upload para o S3. Este mesmo processo também é responsável pela atualização das análises do cartão e exportação de dados.
Usamos redis para controle de simultaneidade para desenho multijogador. Todas as operações redis são tratadas em multiplayerDrafting.js
Cada instância do servidor expresso executa um trabalho usando node-schedule todas as noites para atualizar o carddb na memória de s3.
Scripts Bash ( jobs/definition
) são executados periodicamente na AWS para executar jobs de hora em hora, diariamente e semanalmente.
São definidos filtros de cartão que podem ser usados pelo frontend e backend. Nearley é um kit de ferramentas de analisador nodejs usado para gerar código que define filtros que podem ser aplicados ao banco de dados de cartões.
O TypeScript 5.5 está sendo gradualmente implementado para substituir o uso de componentes JS vanilla por PropTypes.
Os componentes são fornecidos pelo Reactstrap 9, que é desenvolvido com [Bootstrap v5.1][boostrap], que usa SCSS.
Os componentes normalmente usam classes de bootstrap diretamente para estilo adicional, mas também podem usar nomes de classes globais definidos em arquivos CSS públicos.