CubeCobra
Release
Une application Web open source pour créer, gérer et tester Magic: the Gathering cubes.
Si vous souhaitez contribuer à Cube Cobra, veuillez lire les directives de contribution pour ce projet.
Vous devrez installer NodeJS, Redis et un IDE de votre préférence (je recommande VSCode). Vous pouvez trouver les ressources nécessaires ici :
Nœud 20
NodeJS : https://nodejs.org/en/download/
Serveur Redis :
brew install redisapt-get install redis Après avoir installé Redis, démarrez le serveur. Sur Mac, un raccourci pour ce faire est brew services start redis . Vous pouvez voir le statut avec brew services list .
Localstack fournit une émulation locale des services AWS requis pour exécuter CubeCobra, notamment S3, DynamoDB et Cloudwatch.
Vous pouvez suivre les directives d'installation du site localstack. La configuration recommandée implique d'exécuter localstack dans un conteneur Docker, qui nécessite également Docker Desktop.
brew install localstack/tap/localstack-clicurl de localstack Une fois localstack installé, vous pouvez démarrer le serveur en arrière-plan avec la CLI : localstack start --detached . Vous pouvez voir le statut avec localstack status .
VSCode (fortement recommandé, mais pas obligatoire) : https://code.visualstudio.com/ Extension ESLint pour VSCode : https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Extension plus jolie pour VSCode : https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VSCode (avec l'extension ESLint et Prettier) est l'environnement recommandé. Lorsque vous utilisez cette configuration, assurez-vous que votre espace de travail sélectionné correspond au dossier racine que vous avez cloné, cela garantira que le plugin ESLint peut fonctionner avec nos règles de peluchage. Prettier appliquera automatiquement une mise en forme standard à votre code. L’utilisation de ces plugins facilitera considérablement le respect des règles de peluchage et de formatage du code.
Pour la première configuration, vous devrez exécuter :
yarn install && yarn build
yarn setup:localCela va :
Si vous êtes sous Windows, vous devrez définir bash comme shell de script :
Vous devrez vous assurer que bash est installé quelque part et exécuter la commande suivante [avec votre chemin bash à la place du chemin ci-dessous].
yarn config set script-shell " C: \ Program Files \ git \ bin \ bash.exe "Ensuite, vous pouvez démarrer le programme comme ceci :
yarn start:devCe script :
Vous pouvez maintenant ouvrir un navigateur et vous connecter à l'application via : http://localhost:8080.
(Malgré le fait que le nœud indique qu'il s'exécute sur le port 5000 dans les journaux, vous devez utiliser le port 8080 pour vous connecter.)
Nodemon redémarrera l'application chaque fois qu'un fichier source sera modifié.
Après avoir accédé à l'application localement, vous devrez créer un nouveau compte utilisateur en utilisant le lien « Résister » sur la barre de navigation.
Les variables d'environnement sont renseignées à partir du fichier .env . Il n'y a pas de fichier .env archivé, donc le script d'installation copie .env_EXAMPLE dans .env et avec certaines valeurs par défaut pour prendre en charge CubeCobra soutenu par LocalStack.
Vous pouvez exécuter une instance locale de Cube Cobra sur de vraies ressources AWS plutôt que LocalStack, si vous le souhaitez. Après avoir configuré S3, DynamoDB et Cloudwatch à l'aide de votre compte AWS, vous pouvez insérer vos informations d'identification dans le fichier .env .
Voici un tableau sur la façon de remplir les variables d'environnement :
| Nom de la variable | Descriptif | Requis? | | ---------------------- | -------------------------------------------------- ------------------------------------------ | --------- | --- | | AWS_ACCESS_KEY_ID | La clé d'accès AWS pour votre compte. | Oui | | AWS_ENDPOINT | Le point de terminaison de base à utiliser pour AWS. Utilisé pour pointer vers localstack plutôt que vers AWS hébergé. | | | AWS_LOG_GROUP | Nom du groupe de journaux AWS CloudWatch à utiliser. | Oui | | AWS_LOG_STREAM | Nom du flux de journaux AWS CloudWatch à utiliser. | | | RÉGION_AWS | La région AWS à utiliser (par défaut : us-east-2). | Oui | | AWS_SECRET_ACCESS_KEY | La clé d'accès secrète AWS pour votre compte. | Oui | | CUBECOBRA_VERSION | La version du Cube Cobra. | | | DONNEES_BUCKET | Le nom du compartiment AWS S3 à utiliser. Vous devrez créer ce bucket dans votre compte. | Oui | | DOMAINE | Le nom de domaine du serveur. Utilisé pour les redirections externes telles que les e-mails. | Oui | | DOWNTIME_ACTIVE | Que le site soit ou non en mode temps d'arrêt. | | | DYNAMO_PREFIX | Le préfixe à utiliser pour les tables DynamoDB. Vous pouvez laisser ceci comme valeur par défaut | Oui | | EMAIL_CONFIG_PASSWORD | Le mot de passe du compte de messagerie à utiliser pour envoyer des e-mails. | | | EMAIL_CONFIG_USERNAME | Le nom d'utilisateur du compte de messagerie à utiliser pour envoyer des e-mails. | | | ENV | L'environnement dans lequel exécuter Cube Cobra. | Oui | | | NITROPAY_ENABLED | Que ce soit pour activer ou non NitroPay, notre fournisseur de publicité. | | | NODE_ENV | L'environnement dans lequel exécuter Cube Cobra. | Oui | | PATREON_CLIENT_ID | L'ID client de l'application Patreon OAuth. | | | PATREON_CLIENT_SECRET | Le secret client de l'application Patreon OAuth. | | | PATREON_HOOK_SECRET | Le secret du webhook Patreon. | | | PATREON_REDIRECT | L'URL de redirection de l'application Patreon OAuth. | | | PORT | Le port sur lequel exécuter Cube Cobra. | Oui | | REDIS_HOST | L'URL du serveur Redis. | Oui | | REDIS_SETUP | Qu'il s'agisse ou non de configurer le serveur Redis - cela est nécessaire pour Redis mais pas pour Elasticache. | | | SECRET | Une phrase secrète pour le cryptage. Vous pouvez laisser la valeur par défaut. | Oui | | SESSION_SECRET | Une phrase secrète pour le cryptage de session. Vous pouvez laisser la valeur par défaut. | Oui | | SÉANCE | Le nom du cookie de session. Vous pouvez laisser la valeur par défaut. | Oui | | TCG_PLAYER_PRIVATE_KEY | La clé privée de l'API TCGPlayer. | | | TCG_PLAYER_PUBLIC_KEY | La clé publique de l'API TCGPlayer. | | | CACHE_ENABLED | S'il faut ou non activer la mise en cache. | | | AUTOSCALING_GROUP | Nom du groupe de mise à l'échelle automatique dans lequel cette instance est exécutée, utilisé pour le cache distribué. | | | CACHE_SECRET | Le secret du cache distribué. | |
Dans les scripts de configuration initiale, c'est yarn update-cards qui crée les définitions de cartes. L'exécution de ce script extraira les dernières données de scryfall.
Si vous souhaitez des analyses de cartes, vous pouvez exécuter le script suivant :
yarn update-allCela va, dans l’ordre :
Express 4 fournit un framework Web minimaliste pour prendre en charge à la fois le rendu des modèles avec PugJS 3 et la définition des points de terminaison d'API basés sur JSON. Les modèles HTML sont principalement utilisés pour afficher une page minimale dans laquelle React peut s'amorcer avec les accessoires initiaux injectés depuis le serveur.
Nous conservons toutes les définitions de cartes dans de gros fichiers prétraités, de sorte que les nœuds en production n'ont qu'à télécharger et charger les fichiers, et peuvent récupérer les derniers fichiers de S3 lorsqu'ils sont prêts. Nous faisons cela parce qu'il est beaucoup plus rapide de lire à partir de la mémoire que de devoir adresser des requêtes à un autre service chaque fois que nous avons besoin de données de carte.
Un processus externe est responsable de la mise à jour des définitions de carte et du téléchargement vers S3. Ce même processus est également responsable de la mise à jour des analyses de cartes et des exportations de données.
Nous utilisons Redis pour le contrôle de concurrence pour la rédaction multijoueur. Toutes les opérations Redis sont gérées dans multiplayerDrafting.js
Chaque instance du serveur express exécute une tâche à l'aide de node-schedule chaque nuit pour mettre à jour la base de données en mémoire à partir de s3.
Les scripts Bash ( jobs/definition ) sont exécutés périodiquement sur AWS pour exécuter des tâches horaires, quotidiennes et hebdomadaires.
Des filtres de carte sont définis et peuvent être utilisés par le frontend et le backend. Nearley est une boîte à outils d'analyseur nodejs utilisée pour générer du code définissant des filtres pouvant être appliqués à la base de données de cartes.
TypeScript 5.5 est progressivement déployé pour remplacer l'utilisation des composants Vanilla JS par PropTypes.
Les composants sont fournis par Reactstrap 9 qui est alimenté par [Bootstrap v5.1][boostrap], qui utilise SCSS.
Les composants utilisent généralement directement des classes d'amorçage pour un style supplémentaire, mais peuvent également utiliser des noms de classe globaux définis dans des fichiers CSS publics.
