Checkmate on Compose Part 1
Article Summary
Zsolt Kocsi from Bumble built a chess app in Jetpack Compose to solve a problem that's frustrated beginners for years: engines tell you a move is bad, but never explain why.
As Bumble's team adopted Compose, Kocsi created Chesso, an open-source chess app with a unique twist: visual overlays that show pressure on squares, blocked pieces, and escape routes. This deep dive covers the architecture decisions behind building a moderately complex game in Compose, from data modeling to UI state management.
Key Takeaways
- Separate Board, GameSnapshotState, GameState, and GamePlayState into distinct layers
- Use pseudo-legal moves filtered by check constraints for all edge cases
- Pass UI state to composables, not business logic state
- Include selection state in LazyList keys to prevent rendering bugs
- MutableState objects beat delegation for managing multiple dialog states
Building a chess app revealed that Compose handles UI state brilliantly, but complex game logic still benefits from traditional Reducer patterns.
About This Article
Zsolt Kocsi had to build an 8x8 chessboard that displayed pieces at the right size for any screen while keeping a 1:1 aspect ratio. He started with Unicode chess symbols, but they looked bad on dark squares.
He switched from Unicode text to vector graphics using Compose's Icon composable with tint parameters. This gave him better image quality and more control over sizing than relying on font sizes.
The vector approach fixed the visibility problems with light pieces on dark squares and improved the overall look. The chessboard now compares well visually to other chess apps.