Case Study: TCG in React

I work on projects through a process where I am constantly tearing down walls, but I leave talking about it to the hypothetical "finished point". That's a mistake.

I'm currently working on two projects, Lanarts and a game I will tentatively call Ciribots, a card game. I have talked enough about Lanarts for now, let's talk some about Ciribots. I'm still lagging on open sourcing it, but that's as much due to shy privacy as any vague hopes of monetization.

"Ciribots" new prototype, with animated React glory.

Work on Ciribots currently falls under 3 categories:

• Initial game design: While I've been mulling over the rules of the game for a long time now as the game was played in paper play. Currently the firmly decided rules are, roughly:
• Cards make or interact with pieces on the board.
• Pieces move like chess queens, but only up the their movement value in squares away.
• Pieces can attack whoever a queen could attack, up their range value in squares away. Pieces don't move to the enemy square ever, unlike chess.
• Cards have a health value that resets each turn. It must be brought to 0 in a single turn for the unit to die.
• You must move a unit to one of the two centre squares on the other side of the board to win.
• You can move with 2 distinct units in a turn. All units have energy to do one action each turn (like MTG tapping), which is used to attack, deal damage back when attacked, or to do a special action printed on the card. 
• Board game engine that lends to easy card changes: This is probably the most interesting part of the implementation too me, although also a part I wish could be magically written. Writing in C++ for performance, compiling with emscripten for use on front end. The board game engine is the backbone of the rules enforcement, and also any AI players. It is being written with both absolute performance (e.g. roll back states in AI to avoid any full state copies, keep exactly one state object) and extensibiliy (incorporate any new cards) in mind. It's my favourite kind of tricky challenge - designing a performant system that might be extended to do *anything*.
• UI in React: The game is a react app. I'm on the JSX bandwagon. Probably to the point that I'm not really interested in non-React front end stuff. Too many goodies for language nerds like me with TypeScript+React being both static and declarative. My most recent rewrite in React-as-of-May-2018 focused on using CSS animations + React animations, which mostly work amazingly other than some jankiness. 

And this I shall publish, because I have to remember partial results are worthy to talk about.

-Adam