CubeCobra
Release
Eine Open-Source-Webanwendung zum Erstellen, Verwalten und Testen von Magic: the Gathering-Würfeln.
Wenn Sie daran interessiert sind, einen Beitrag zu Cube Cobra zu leisten, lesen Sie bitte die Beitragsrichtlinien für dieses Projekt.
Sie müssen NodeJS, Redis und eine IDE Ihrer Wahl installieren (ich empfehle VSCode). Die notwendigen Ressourcen finden Sie hier:
Knoten 20
NodeJS: https://nodejs.org/en/download/
Redis-Server:
brew install redisapt-get install redis Starten Sie nach der Installation von Redis den Server. Auf dem Mac ist eine Verknüpfung dazu brew services start redis . Den Status können Sie mit brew services list einsehen.
Localstack bietet eine lokale Emulation der AWS-Dienste, die zum Ausführen von CubeCobra erforderlich sind, einschließlich S3, DynamoDB und Cloudwatch.
Sie können den Installationsrichtlinien der Localstack-Site folgen. Das empfohlene Setup umfasst die Ausführung von localstack in einem Docker-Container, der auch Docker Desktop erfordert.
brew install localstack/tap/localstack-clicurl “ von localstack Sobald localstack installiert ist, können Sie den Server im Hintergrund mit der CLI starten: localstack start --detached . Sie können den Status mit localstack status sehen.
VSCode (dringend empfohlen, aber nicht erforderlich): https://code.visualstudio.com/ ESLint-Erweiterung für VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint Prettier-Erweiterung für VSCode: https ://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VSCode (mit der ESLint- und Prettier-Erweiterung) ist die empfohlene Umgebung. Stellen Sie bei Verwendung dieses Setups sicher, dass Ihr ausgewählter Arbeitsbereich der Stammordner ist, den Sie geklont haben. Dadurch wird sichergestellt, dass das ESLint-Plugin mit unseren Linting-Regeln arbeiten kann. Prettier wendet automatisch die Standardformatierung auf Ihren Code an. Die Verwendung dieser Plugins erleichtert die Einhaltung der Linting- und Codeformatierungsregeln erheblich.
Für die erste Einrichtung müssen Sie Folgendes ausführen:
yarn install && yarn build
yarn setup:localDies wird:
Wenn Sie Windows verwenden, müssen Sie Bash als Ihre Skript-Shell festlegen:
Sie müssen sicherstellen, dass bash irgendwo installiert ist, und den folgenden Befehl ausführen [mit Ihrem bash -Pfad anstelle des unten angegebenen Pfads].
yarn config set script-shell " C: \ Program Files \ git \ bin \ bash.exe "Dann können Sie das Programm wie folgt starten:
yarn start:devDieses Skript wird:
Sie können jetzt einen Browser öffnen und über http://localhost:8080 eine Verbindung zur App herstellen.
(Obwohl der Knoten in den Protokollen angibt, dass er auf Port 5000 ausgeführt wird, sollten Sie für die Verbindung Port 8080 verwenden.)
Nodemon startet die Anwendung jedes Mal neu, wenn eine Änderung an einer Quelldatei vorgenommen wird.
Nachdem Sie lokal auf die Anwendung zugegriffen haben, müssen Sie über den Link „Resister“ in der Navigationsleiste ein neues Benutzerkonto erstellen.
Umgebungsvariablen werden aus der .env Datei gefüllt. Da keine .env Datei eingecheckt ist, kopiert das Setup-Skript .env_EXAMPLE nach .env und mit einigen Standardwerten zur Unterstützung von CubeCobra, unterstützt durch LocalStack.
Bei Bedarf können Sie eine lokale Instanz von Cube Cobra mit echten AWS-Ressourcen statt mit LocalStack ausführen. Nachdem Sie S3, DynamoDB und Cloudwatch mit Ihrem AWS-Konto eingerichtet haben, können Sie Ihre Anmeldeinformationen in die .env Datei einfügen.
Hier ist eine Tabelle zum Ausfüllen der Umgebungsvariablen:
| Variablenname | Beschreibung | Erforderlich? | | ---------------------- | -------------------------------------------------- ------------------------------------------ | --------- | --- | | AWS_ACCESS_KEY_ID | Der AWS-Zugriffsschlüssel für Ihr Konto. | Ja | | AWS_ENDPOINT | Der für AWS zu verwendende Basisendpunkt. Wird verwendet, um auf Localstack und nicht auf gehostetes AWS zu verweisen. | | | AWS_LOG_GROUP | Der Name der zu verwendenden AWS CloudWatch-Protokollgruppe. | Ja | | AWS_LOG_STREAM | Der Name des zu verwendenden AWS CloudWatch-Protokollstreams. | | | AWS_REGION | Die zu verwendende AWS-Region (Standard: us-east-2). | Ja | | AWS_SECRET_ACCESS_KEY | Der geheime AWS-Zugriffsschlüssel für Ihr Konto. | Ja | | CUBECOBRA_VERSION | Die Version von Cube Cobra. | | | DATA_BUCKET | Der Name des zu verwendenden AWS S3-Buckets. Sie müssen diesen Bucket in Ihrem Konto erstellen. | Ja | | DOMÄNE | Der Domänenname des Servers. Wird für externe Weiterleitungen wie E-Mails verwendet. | Ja | | DOWNTIME_ACTIVE | Ob sich die Site im Ausfallmodus befindet oder nicht. | | | DYNAMO_PREFIX | Das für DynamoDB-Tabellen zu verwendende Präfix. Sie können dies als Standardwert | belassen Ja | | EMAIL_CONFIG_PASSWORD | Das Passwort für das E-Mail-Konto, das zum Senden von E-Mails verwendet werden soll. | | | EMAIL_CONFIG_USERNAME | Der Benutzername für das E-Mail-Konto, das zum Senden von E-Mails verwendet werden soll. | | | ENV | Die Umgebung, in der Cube Cobra ausgeführt wird. | Ja | | | NITROPAY_ENABLED | Ob NitroPay, unser Anzeigenanbieter, aktiviert werden soll oder nicht. | | | NODE_ENV | Die Umgebung, in der Cube Cobra ausgeführt wird. | Ja | | PATREON_CLIENT_ID | Die Client-ID für die Patreon OAuth-App. | | | PATREON_CLIENT_SECRET | Das Client-Geheimnis für die Patreon OAuth-App. | | | PATREON_HOOK_SECRET | Das Geheimnis des Patreon-Webhooks. | | | PATREON_REDIRECT | Die Weiterleitungs-URL für die Patreon OAuth-App. | | | HAFEN | Der Port, auf dem Cube Cobra ausgeführt wird. | Ja | | REDIS_HOST | Die URL des Redis-Servers. | Ja | | REDIS_SETUP | Ob der Redis-Server eingerichtet werden soll oder nicht – dies ist für Redis erforderlich, aber nicht für Elasticache. | | | GEHEIMNIS | Eine geheime Phrase zur Verschlüsselung. Sie können den Standardwert belassen. | Ja | | SESSION_SECRET | Eine geheime Phrase für die Sitzungsverschlüsselung. Sie können den Standardwert belassen. | Ja | | SITZUNG | Der Name des Sitzungscookies. Sie können den Standardwert belassen. | Ja | | TCG_PLAYER_PRIVATE_KEY | Der private Schlüssel für die TCGPlayer-API. | | | TCG_PLAYER_PUBLIC_KEY | Der öffentliche Schlüssel für die TCGPlayer-API. | | | CACHE_ENABLED | Ob Caching aktiviert werden soll oder nicht. | | | AUTOSCALING_GROUP | Der Name der Autoscaling-Gruppe, in der diese Instanz ausgeführt wird, wird für den verteilten Cache verwendet. | | | CACHE_SECRET | Das Geheimnis des verteilten Caches. | |
In den anfänglichen Setup-Skripten werden durch yarn update-cards die Kartendefinitionen erstellt. Wenn Sie dieses Skript ausführen, werden die neuesten Daten aus Scryfall abgerufen.
Wenn Sie Kartenanalysen wünschen, können Sie das folgende Skript ausführen:
yarn update-allDies wird der Reihe nach:
Express 4 bietet ein minimalistisches Web-Framework, das sowohl das Rendern von Vorlagen mit PugJS 3 als auch die Definition von JSON-basierten API-Endpunkten unterstützt. HTML-Vorlagen werden hauptsächlich verwendet, um eine minimale Seite zu rendern, auf der sich React mit anfänglichen Requisiten, die vom Server eingefügt werden, booten kann.
Wir speichern alle Kartendefinitionen in großen vorverarbeiteten Dateien, sodass Knoten in der Produktion die Dateien nur herunterladen und laden müssen und die neuesten Dateien von S3 abrufen können, wenn sie bereit sind. Wir tun dies, weil es viel schneller ist, aus dem Speicher zu lesen, als jedes Mal, wenn wir Kartendaten benötigen, Anfragen an einen anderen Dienst stellen zu müssen.
Ein externer Prozess ist für die Aktualisierung der Kartendefinitionen und das Hochladen auf S3 verantwortlich. Derselbe Prozess ist auch für die Aktualisierung der Kartenanalysen und Datenexporte verantwortlich.
Wir verwenden Redis zur Parallelitätskontrolle beim Multiplayer-Drafting. Alle Redis-Vorgänge werden in multiplayerDrafting.js verarbeitet
Jede Instanz des Express-Servers führt jede Nacht einen Job mit Node-Schedule aus, um die speicherinterne Kartendatenbank von s3 aus zu aktualisieren.
Bash-Skripte ( jobs/definition ) werden regelmäßig auf AWS ausgeführt, um stündliche, tägliche und wöchentliche Jobs auszuführen.
Es werden Kartenfilter definiert, die vom Frontend und Backend verwendet werden können. Nearley ist ein NodeJS-Parser-Toolkit, mit dem Code generiert wird, der Filter definiert, die auf die Kartendatenbank angewendet werden können.
TypeScript 5.5 wird schrittweise eingeführt, um die Verwendung von Vanilla-JS-Komponenten durch PropTypes zu ersetzen.
Komponenten werden von Reactstrap 9 bereitgestellt, das auf [Bootstrap v5.1][boostrap] basiert, das SCSS verwendet.
Komponenten verwenden in der Regel direkt Bootstrap-Klassen für zusätzliches Styling, können aber auch globale Klassennamen verwenden, die in öffentlichen CSS-Dateien definiert sind.
