ดาวน์โหลด CubeCobra - ดาวน์โหลดซอร์สโค้ด CubeCobra

คิวบ์คอบร้า

ซอร์สโค้ดอื่น ๆ

Release

ดาวน์โหลด

คิวบ์คอบร้า

เว็บแอปพลิเคชันโอเพ่นซอร์สสำหรับการสร้าง จัดการ และทดสอบการเล่น Magic: the Gathering Cubes

มีส่วนร่วม

หากคุณสนใจที่จะบริจาคให้กับ Cube Cobra โปรดอ่านแนวทางการบริจาคสำหรับโครงการนี้

ตั้งค่า

ติดตั้งข้อกำหนดเบื้องต้น

คุณจะต้องติดตั้ง NodeJS, Redis และ IDE ตามที่คุณต้องการ (ฉันแนะนำ VSCode) คุณสามารถค้นหาทรัพยากรที่จำเป็นได้ที่นี่:

โหนดJS

โหนด 20

โหนดJS: https://nodejs.org/en/download/

เรดิส

เซิร์ฟเวอร์ Redis:

วินโดวส์: https://github.com/microsoftarchive/redis
Mac: brew install redis
Linux: apt-get install redis

หลังจากติดตั้ง Redis ให้เริ่มเซิร์ฟเวอร์ บน Mac ทางลัดในการดำเนินการนี้คือ brew services start redis คุณสามารถดูสถานะด้วย brew services list

โลคัลสแต็ก

Localstack มีการจำลองบริการ AWS ภายในที่จำเป็นสำหรับการรัน CubeCobra รวมถึง S3, DynamoDB และ Cloudwatch

คุณสามารถปฏิบัติตามแนวทางการติดตั้งได้จากไซต์ localstack การตั้งค่าที่แนะนำเกี่ยวข้องกับการเรียกใช้ localstack ในคอนเทนเนอร์นักเทียบท่า ซึ่งต้องใช้ Docker Desktop เช่นกัน

Windows: ดาวน์โหลดและติดตั้งไบนารีจาก localstack
Mac: brew install localstack/tap/localstack-cli
Linux: ใช้คำสั่ง curl จาก localstack

เมื่อติดตั้ง localstack แล้ว คุณสามารถเริ่มเซิร์ฟเวอร์ในเบื้องหลังได้ด้วย CLI: localstack start --detached คุณสามารถดูสถานะด้วย localstack status

โปรแกรมแก้ไขโค้ด (IDE)

VSCode (แนะนำอย่างยิ่ง แต่ไม่จำเป็น): https://code.visualstudio.com/ ส่วนขยาย ESLint สำหรับ VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ส่วนขยาย Prettier สำหรับ VSCode: https //marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

VSCode (พร้อมส่วนขยาย ESLint และ Prettier) คือสภาพแวดล้อมที่แนะนำ เมื่อใช้การตั้งค่านี้ ตรวจสอบให้แน่ใจว่าพื้นที่ทำงานที่คุณเลือกคือโฟลเดอร์รูทที่คุณได้โคลนไว้ ซึ่งจะช่วยให้มั่นใจได้ว่าปลั๊กอิน ESLint สามารถทำงานร่วมกับกฎ Linting ของเราได้ Prettier จะใช้การจัดรูปแบบมาตรฐานกับโค้ดของคุณโดยอัตโนมัติ การใช้ปลั๊กอินเหล่านี้จะทำให้การปฏิบัติตามกฎการจัดรูปแบบและขุยและโค้ดง่ายขึ้นอย่างมาก

การตั้งค่าเริ่มต้น

สำหรับการตั้งค่าครั้งแรก คุณจะต้องเรียกใช้:

yarn install && yarn build
yarn setup:local

สิ่งนี้จะ:

ติดตั้งการพึ่งพา
สร้างโค้ดแอปพลิเคชันเพื่อเรียกใช้สคริปต์การตั้งค่า
เรียกใช้สคริปต์การตั้งค่าเพื่อ:
- สร้างไฟล์ .env พร้อมค่าสำหรับการเรียกใช้แอปพลิเคชันที่ตั้งค่าไว้ในเครื่องแล้ว
- ตั้งค่า localstack ด้วยบัคเก็ต s3
- ตั้งค่าไฟล์ในเครื่องเพื่อความคงอยู่ของแอปพลิเคชัน
- ตั้งค่าตาราง localstack dynamodb (เช่น ผู้ใช้ คิวบ์ การ์ด ฯลฯ)
- ดาวน์โหลดข้อมูลการ์ดจำนวนมากจาก scryfall ยังคงอยู่ในไฟล์และโหลดลงใน localstack s3

หากคุณใช้ Windows คุณจะต้องตั้งค่า bash เป็นเชลล์สคริปต์ของคุณ:

คุณจะต้องตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง bash ไว้ที่ไหนสักแห่งแล้วรันคำสั่งต่อไปนี้ [ด้วย bash path แทนที่เส้นทางด้านล่าง]

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

วิ่ง CubeCobra

จากนั้นคุณสามารถเริ่มโปรแกรมได้ดังนี้:

yarn start:dev

สคริปต์นี้จะ:

ตรวจสอบให้แน่ใจว่า localstack ทำงานอยู่
ตรวจสอบให้แน่ใจว่าได้รวบรวมพาร์เซอร์สำหรับตัวกรองการ์ดเกือบแล้ว
คอมไพล์และดูสไตล์ scss (bootstrap)
คอมไพล์และดูจาวาสคริปต์เซิร์ฟเวอร์ด้วย nodemon
เรียกใช้และดูเซิร์ฟเวอร์ dev webpack

ตอนนี้คุณสามารถเปิดเบราว์เซอร์และเชื่อมต่อกับแอปผ่าน: http://localhost:8080

(แม้ว่าโหนดจะบอกว่ากำลังทำงานบนพอร์ต 5000 ในบันทึก แต่คุณควรใช้พอร์ต 8080 เพื่อเชื่อมต่อ)

Nodemon จะรีสตาร์ทแอปพลิเคชันทุกครั้งที่มีการเปลี่ยนแปลงไฟล์ต้นฉบับ

หลังจากเข้าถึงแอปพลิเคชันในเครื่องแล้ว คุณจะต้องสร้างบัญชีผู้ใช้ใหม่โดยใช้ลิงก์ "Resister" บนแถบนำทาง

ตัวแปรสภาพแวดล้อมและการเชื่อมต่อกับ AWS

ตัวแปรสภาพแวดล้อมจะถูกเติมจากไฟล์ . .env ไม่มีไฟล์ .env ที่เช็คอิน ดังนั้นสคริปต์การตั้งค่าจะคัดลอก .env_EXAMPLE ไปยัง .env และมีค่าเริ่มต้นบางส่วนเพื่อรองรับ CubeCobra ที่สนับสนุนโดย LocalStack

คุณสามารถเรียกใช้อินสแตนซ์ภายในเครื่องของ Cube Cobra กับทรัพยากร AWS จริง แทนที่จะใช้ LocalStack ได้ หากต้องการ หลังจากตั้งค่า S3, DynamoDB และ Cloudwatch โดยใช้บัญชี AWS ของคุณแล้ว คุณสามารถแทรกข้อมูลประจำตัวของคุณลงในไฟล์ .env ได้

นี่คือตารางเกี่ยวกับวิธีการกรอก env vars:

- ชื่อตัวแปร | คำอธิบาย | ที่จำเป็น? - - - - - - - AWS_ACCESS_KEY_ID | รหัสการเข้าถึง AWS สำหรับบัญชีของคุณ - ใช่ | - AWS_ENDPOINT | ตำแหน่งข้อมูลพื้นฐานที่จะใช้สำหรับ AWS ใช้เพื่อชี้ไปที่ localstack แทนที่จะโฮสต์ AWS - - - AWS_LOG_GROUP | ชื่อของกลุ่มบันทึก AWS CloudWatch ที่จะใช้ - ใช่ | - AWS_LOG_STREAM | ชื่อของสตรีมบันทึก AWS CloudWatch ที่จะใช้ - - - AWS_REGION | ภูมิภาค AWS ที่จะใช้ (ค่าเริ่มต้น: us-east-2) - ใช่ | - AWS_SECRET_ACCESS_KEY | รหัสการเข้าถึงข้อมูลลับ AWS สำหรับบัญชีของคุณ - ใช่ | - CUBECOBRA_VERSION | เวอร์ชั่นของคิวบ์คอบร้า - - - DATA_BUCKET | ชื่อของบัคเก็ต AWS S3 ที่จะใช้ คุณจะต้องสร้างที่เก็บข้อมูลนี้ในบัญชีของคุณ - ใช่ | - โดเมน | ชื่อโดเมนของเซิร์ฟเวอร์ ใช้สำหรับการเปลี่ยนเส้นทางภายนอก เช่น อีเมล - ใช่ | - ดาวน์ไทม์_แอคทีฟ | ไม่ว่าไซต์จะอยู่ในโหมดหยุดทำงานหรือไม่ก็ตาม - - - DYNAMO_PREFIX | คำนำหน้าที่จะใช้สำหรับตาราง DynamoDB คุณสามารถปล่อยให้สิ่งนี้เป็นค่าเริ่มต้น | ใช่ | - EMAIL_CONFIG_PASSWORD | รหัสผ่านสำหรับบัญชีอีเมลที่จะใช้ในการส่งอีเมล - - - EMAIL_CONFIG_USERNAME | ชื่อผู้ใช้สำหรับบัญชีอีเมลที่จะใช้ในการส่งอีเมล - - - อีเอ็นวี | สภาพแวดล้อมในการรัน Cube Cobra ค่ะ | ใช่ | - - NITROPAY_ENABLED | ไม่ว่าจะเปิดใช้งาน NitroPay ผู้ให้บริการโฆษณาของเราหรือไม่ - - - NODE_ENV | สภาพแวดล้อมในการรัน Cube Cobra ค่ะ | ใช่ | - PATREON_CLIENT_ID | รหัสไคลเอ็นต์สำหรับแอป Patreon OAuth - - - PATREON_CLIENT_SECRET | รหัสลับไคลเอ็นต์สำหรับแอป Patreon OAuth - - - PATREON_HOOK_SECRET | ความลับของเว็บฮุค Patreon - - - PATREON_REDIRECT | URL เปลี่ยนเส้นทางสำหรับแอป Patreon OAuth - - - พอร์ต | พอร์ตสำหรับรัน Cube Cobra - ใช่ | - REDIS_HOST | URL ของเซิร์ฟเวอร์ Redis - ใช่ | - REDIS_SETUP | ไม่ว่าจะตั้งค่าเซิร์ฟเวอร์ Redis หรือไม่ - สิ่งนี้จำเป็นสำหรับ Redis แต่ไม่ใช่สำหรับ elasticache - - - ความลับ | วลีลับสำหรับการเข้ารหัส คุณสามารถปล่อยให้เป็นค่าเริ่มต้นได้ - ใช่ | - SESSION_SECRET | วลีลับสำหรับการเข้ารหัสเซสชัน คุณสามารถปล่อยให้เป็นค่าเริ่มต้นได้ - ใช่ | - เซสชั่น | ชื่อของคุกกี้เซสชั่น คุณสามารถปล่อยให้เป็นค่าเริ่มต้นได้ - ใช่ | - TCG_PLAYER_PRIVATE_KEY | คีย์ส่วนตัวสำหรับ TCGPlayer API - - - TCG_PLAYER_PUBLIC_KEY | รหัสสาธารณะสำหรับ TCGPlayer API - - - แคช_เปิดใช้งาน | ไม่ว่าจะเปิดใช้งานการแคชหรือไม่ - - - AUTOSCALING_GROUP | ชื่อของกลุ่มการปรับขนาดอัตโนมัติที่เรียกใช้อินสแตนซ์นี้ ซึ่งใช้สำหรับแคชแบบกระจาย - - - CACHE_SECRET | ความลับสำหรับแคชแบบกระจาย - -

การอัปเดตคำจำกัดความของการ์ดและการวิเคราะห์

ในสคริปต์การตั้งค่าเริ่มต้น yarn update-cards คือสิ่งที่สร้างคำจำกัดความของการ์ด การเรียกใช้สคริปต์นี้จะดึงข้อมูลล่าสุดจาก scryfall

หากคุณต้องการการวิเคราะห์การ์ด คุณสามารถเรียกใช้สคริปต์ต่อไปนี้:

yarn update-all

สิ่งนี้จะตามลำดับ:

อัปเดตประวัติร่าง
อัพเดตประวัติคิวบ์
อัปเดตพจนานุกรมข้อมูลเมตา
อัพเดตการ์ด

แนวคิด

แบ็กเอนด์

API และการแสดงผลเทมเพลต

Express 4 มอบเฟรมเวิร์กเว็บที่เรียบง่ายเพื่อรองรับทั้งการเรนเดอร์เทมเพลตด้วย PugJS 3 และคำจำกัดความของจุดสิ้นสุด API ที่ใช้ JSON เทมเพลต HTML ส่วนใหญ่จะใช้ในการเรนเดอร์เพจขั้นต่ำสำหรับ React เพื่อบู๊ตตัวเองด้วยอุปกรณ์เริ่มต้นที่ฉีดจากเซิร์ฟเวอร์

การ์ด

เราเก็บคำจำกัดความของการ์ดทั้งหมดไว้ในไฟล์ที่ประมวลผลล่วงหน้าขนาดใหญ่ เพื่อให้โหนดที่ใช้งานจริงจำเป็นต้องดาวน์โหลดและโหลดไฟล์ และสามารถดึงไฟล์ล่าสุดจาก S3 ได้เมื่อพร้อม เราทำเช่นนี้เพราะอ่านจากหน่วยความจำได้เร็วกว่าการร้องขอบริการอื่นทุกครั้งที่เราต้องการข้อมูลการ์ด

กระบวนการภายนอกมีหน้าที่รับผิดชอบในการอัปเดตคำจำกัดความของการ์ด และอัปโหลดไปยัง S3 กระบวนการเดียวกันนี้ยังรับผิดชอบในการอัปเดตการวิเคราะห์การ์ดและการส่งออกข้อมูลอีกด้วย

การร่างผู้เล่นหลายคน

เราใช้ Redis เพื่อควบคุมการทำงานพร้อมกันสำหรับการร่างแบบผู้เล่นหลายคน การดำเนินการ Redis ทั้งหมดได้รับการจัดการใน multiplayerDrafting.js

งานที่กำหนดเวลาไว้

แต่ละอินสแตนซ์ของเซิร์ฟเวอร์ด่วนจะรันงานโดยใช้โหนด-กำหนดเวลาทุกคืนเพื่ออัปเดต carddb ในหน่วยความจำจาก s3

สคริปต์ Bash ( jobs/definition ) จะถูกดำเนินการเป็นระยะบน AWS เพื่อรันงานรายชั่วโมง รายวัน และรายสัปดาห์

ตัวกรองการ์ด

ตัวกรองการ์ดถูกกำหนดไว้ซึ่งสามารถใช้ได้โดยส่วนหน้าและส่วนหลัง Nearley เป็นชุดเครื่องมือแยกวิเคราะห์ nodejs ที่ใช้เพื่อสร้างโค้ดที่กำหนดตัวกรองที่สามารถนำไปใช้กับฐานข้อมูลการ์ดได้