MTG: Virtual Table

This tool grew out of a desire to play Magic the Gathering with friends during the pandemic. While we all had our cards, we couldn't see everyone else's cards. With just two players, we could keep the other person's cards in our head OK, but once you got to 3 or 4 players, it was a lost cause.

This tool allows one person to keep track of everyone's cards as they get played. They can then share their screen so everyone can follow along. Additionally you can choose to share your table with others by hosting a new game. Give your game table ID to your friends and they can join and participate in the same table. There's no fancy permissions or accounts, anyone who has joined the table has full controll over the shared game. Game tables expire after an hour of inactivity.

See the MTG: Virtual Table site for an example. (Or just use this tool from there!)

Features

• Multi-player shared virtual tables
• Life tracking
• Card lookup courtesy of the Scryfall API
• Customizable counter/token widgets
• Drag and Drop cards from search to a player

ToDo

• Handle PayloadTooLargeException in PostToConnection
• Mesage alert system
• Game history drawer
• Better card detail view (newlines, iconize mana/taps, etc)

Architecture

Front End

This is a Vue.js application that uses the Vuetify UI library, Vue Easy-DnD, and the blurhash library.

Back End

The back end components track and update the shared game data for tables. This is a serverless architecture deployed in AWS.

• API Gateway - handles websocket connections from clients
• Lambda - Logic for hosting, joining, storing, and updating game data
• DynamoDB - Store game data

Development

This is a pretty standard Vue.js 2.0 application. Run yarn serve to start up the development host, and start editing.

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Deployment - Front End

This project contains an AWS CloudFormation template to deploy an environment to host the static website files. It uses an S3 bucket with CloudFront to handle SSL termination. You don't have to deploy this tool to AWS, any web host that can serve static files will be fine. Just do a yarn build and then upload the contents of the dist folder to wherever you want to host it (or just keep it local).

Deploying a site to S3/CloudFront is not free, but for a site that receives pretty low traffic, it is pretty cheap.

Deployment pre-requisites

• AWS Account
• AWS CLI Tool
• AWS IAM Access Keys
• AWS CLI Profile
• ACM SSL Certificate

You will also need to create two local environment files which are not part of the repository. These hold your AWS account specific information.

environment-dev.sh

REQUIRE_SECRETS_FILE="true"
ACCOUNT_NUMBER_CHECK="XXXXXXXXXXX"
AWS_CLI_PROFILE="profilename"
HOSTNAME="mtgvirtualtable.example.com"
FRONTEND_STACK_NAME="mtgvirtualtable-site"

secrets-dev.sh

SSL_CERTIFICATE_ARN="arn:aws:acm:us-east-1:XXXXXXXXXXX:certificate/your-certificate-arn"

Deploy

Once you have everything in place, you can deploy the CloudFormation template by running:

npm run deploy-aws

Publish

Once the stack has been deployed, you can publish your built app up to the S3 bucket:

npm run publish

This will upload all current files from your dist folder to the S3 bucket, and delete any old files. It will also perform a CloudFront invalidation, clearing the CloudFront cache so you can see your results immediately. Note, there is a limit on how many CloudFront invalidations you can perform for free in a given timeframe. See the CloudFront costs for details. Just don't setup some sort of bot that automatically publishes 24/7. :)

Deployment - Back End

The backend components are organized and deployed using the [serverless framework][serverless].

too tired, will write more later!