React Card Game Player

What is it?

This application is coded in React, NodeJS and ExpressJS and websocket to allow someone to import cards , create playmats and do multiplayer across networks on the browser. It is an online card game with card makers, playmat makers etc.

The actual main intent though is to allow me to have a digital playmat using a portable thin monitor.

You can see the two videos for version 1 and 2 and see everything it does. There are some more progress videos and pictures as to how I got here.

Version 1

Version 2

Development Journey Day 1

In this video I demonstrate the beta versions features.
In this video you’ll see the playmat and card features.

Card features:

    tap card 90 degrees / untap
    stack cards ontop of eachother
    move card to bottom of the stack for whatever context its in (think Scry for your deck, but works in hand and anywhere else)
    move card across anywhere. This is good if you need to specifcally do something. rearrange your hand or for example put a card 3 from the top of your deck.
    you can flip over any card to the backside. or front side. if you need to look at the top card of your library, you go to the library pane and flip the top card over yourself. you can also flip a card in your hand then play it so that its played face down.

playmat features:

    any section can be renamed. Nonlands named to ‘babys first battlefield’.
    any section can pop out and move anywhere. hate my playmat? move some stuff.
    in the video it’s bugged but you can pop sections back into other panels . like if you pop out ‘non lands’ you can pop it back in under ‘graveyard’.
    you can toggle out the extra noise so it looks more like a regular playmat.
    you can create tokens. change the color and set its stats.
    you can create tokens that aren’t cards to put on other cards for tokens. you put whatever text you want and choose the color.
    you click ‘draw 7’ to start the game and it gives you 7 cards
    you click ‘new turn’ and it draws 1 card and untaps everything
    each context panel has an untap all button
    you can create an unlimited number of sections for cards to exist.

game features:
every time you draw a card the state of the game is saved. if your browser or PC crashes, it reloads the game

other:
off screen is a deck importer

keep in mind the video is in scrunch format to save space on the video. the actual playfield on a monitor is pretty nice in toggle mode.

Here is what your playmat actually looks like when your playing the game with all of the unneeded noise toggled off.

Development Journey Day 2

Made some great progress today.
The video is a bit overwhelming but i just wanted to show how fast you could create a playmat for something like yugioh
reference:

Let’s break it down. as a single page app everything is a resizable pane. you can have a page with vertical panes and horizontal panes.

this one is 3 vertical panes. each of those panes has 4,,7 and 7 panes respectively

Everything breaks down into a ‘section’ which consists of a title for that area that you can edit. A place to put your cards. and that’s it.

when you want to add a section, you can either add a section “inside”

or you could add a section “outside”

you may wish to add a new ‘horizontal’ or ‘vertical’ section which is resizable by the blue line.

Resulting in:

so your actions are recursively on any section

1. add new child element
2. insert new element inside
3. create a horizontal pane with X elements
4. create a vertical pane with X elements
   

and inside EVERY element created you can do this forever.

after the editing process is complete you can hide the garbage and see the end result. the playmatt.

The end result is a 5kb payload of the playmatt that can be saved/loaded and eventually transferred to friends.

Development Journey Day 3

create a profile (username and icon)
create a deck
create a playmatt
???
profit

Card Importer

Deck creation

pulls from scryfall
you can set your commander (can set as many as you want). this dictates what cards will spawn in ‘commander zone’ if any.
saves deck to the server for anyone to use

Playmat editor

you can create any playmat you want. and ultimately use it too. so you and your friends can design diff playmats.
aside from layout you also specify where the commander, hand, and deck zones are. 1 of each. a slick enhancement to this would be the ability to on the fly use your own attributes, then dictate how it effects game play. but i’m not too concerned with non-magic features at the moment.

setup profile

when you load the page(s) you get a client ID on connect. you can set this to something readable if you want. and give yourself an icon

Game Creator

you pick the playmat you want
you pick the deck you want
when you click start game it just sets all that stuff to your current profile name so that when you go to the battlefield page it loads it.

the battlefield

right now, all this does is goes and gets your playmat and loads the page. then it gets your deck data but doesn’t render anything.

Stuff to do next

1. program back in the card simulation of flip, rotate etc.
2. initialize the game state when you go to battlefield. it loads the playmat, but it needs to grab your card data and put your deck and commander on the field with life totals etc
3. give ability to grab the current game state at any time incase of de-syncs or crashes
4. actually code the ‘when I move a card reflect it to my friends screens’

Development Journey Day 4

4 Players cross browser card game in action.

Here is a picture of the card application being used as a digital card playmat

Version 2

Switched to React to handle 20,000 cards flawlessly. Here is the progress videos and pictures

Digital playmat in action

This was effectively what I saw, the other players at the table saw:
“

Disclaimer: Code is closed source. I do not own the rights to MTG or any of the art. This excersize was purely educational. This application and all of its features are not available for anyone to use.