DEV Community

Typre
Typre

Posted on

I added Chess to my typing-practice app — you move pieces by writing code

Typre is a free web app for practicing typing code in 14 languages. I just shipped a feature that had no business working as well as it does: chess, where every move is a real command you type, not a drag-and-drop.

Moves are code, literally

Pick your language, and moves look like this:

board.move('e2', 'e4');
Enter fullscreen mode Exit fullscreen mode
board.move("e2", "e4")
Enter fullscreen mode Exit fullscreen mode

Castling, captures, promotions — all typed, all validated against real chess rules (powered by chess.js under the hood).

The moments that matter got real effects

  • Castling — king and rook slide in a staggered one-two beat, then a fire/gold shield blooms around the king.
  • Promotion — the pawn dissolves from the bottom up and the new piece sweeps in with a burst of sparks and a warm glow.
  • Checkmate — the losing king slumps and raises two little pixel-art flags in surrender.

All rendered from raw SVG path data — same pixel-art set lichess uses, no image assets.

Play a bot, pass-and-play, or go online and actually compete

  • Three bot difficulty levels, or local two-player on one keyboard — no account needed, just show up and play.
  • Create a free account and it gets more interesting: online games are rated, and there's a real ELO leaderboard. Your rank is public, your rating moves with every win and loss, and it only counts games against other signed-in humans — no farming bots for points.

If you just want to poke at it, no signup required. But if you want to actually climb something, sign up at typre.dev and your first rated game is one click away.

Happy to answer questions about the implementation — the promotion crossfade bug alone (SVG clip-path sequencing to avoid two different piece silhouettes rendering half-visible at once) was a fun one to chase down.

Top comments (0)