When I'm not working or spending time with my family, there's a pretty good chance I'm playing board games. Recently, I've used them as an opportunity to bolster my coding skills.

RadlandsWith its tense gameplay and fantastic art, this one-on-one card battler is one of my favorites. I took photos of the cards and started jamming to see if I could bring the game experience into the browser.

I don't have it completely working yet, but I've already learned a lot about implementing drag-and-drop, about the perspective CSS property, and about the care required to make hover and click timings feel natural in densely interactive UIs.

A game of Radlands about to begin...

Using the perspective CSS property gives the 'table' a slight tilt. Since my opponent's cards are smaller, showing a card preview on the left ensures I can easily read every card.

Twilight Imperium Score DashboardTwilight Imperium is the über board game. It pits up to eight players against each other in a galactic struggle that can last 12 hours or more. As you might expect, the game requires players to track a lot of information, including their scores.

I'm building a dashboard we can throw onto a nearby TV to eliminate some tedium and ensure the game's status is always clear. I'm learning even more about drag-and-drop, object-oriented programming, and more streamlined ways to handle global state in Svelte.

Tracking scores at the table is tedious, tiny, and way too vulnerable to cats.

Tokens can be dragged between objective cards to add points to a player's score. Scores can also be manually entered or overridden with a simple hover animation and click.