Hasen: Real-Time Multiplayer Card Game
I’ve always liked board games, and for the past five years I’ve been designing them. Hasen is one of my latest projects and one I enjoyed a lot. It’s inspired by traditional German card games, with some influence from the Argentine Truco. What started as a tabletop game designing rules and cards ended up becoming a tech project for my portfolio. I wanted to see if I could turn it into an online game.
I began by modeling the data with TypeScript and quickly ran into a key question: where should the game rules live? frontend or backend? That’s when I introduced a domain layer. I moved all the game logic into a shared, framework-agnostic module so both client and server use the same rules. That way, I avoid duplicating logic and keep everything consistent.
Challenges
- Why REST Wasn’t Enough and WebSockets Changed Everything
- Why I Built a Domain Layer Before Writing a Single Component
Objectives
- Build a real-time multiplayer card game
- Keep game rules consistent across frontend and backend
- Handle real-time communication between players
- Design a simple but solid game architecture
Features
1. Real-time multiplayer
- WebSocket communication using Socket.IO
- Room-based system for isolated matches
- Instant updates for all players
2. Game system
- Turn-based gameplay with card mechanics
- Betting system inspired by Truco
- Score tracking and win conditions
3. Architecture
- Shared domain layer for game rules
- Same logic used in frontend and backend
- Easy to test with pure TypeScript functions
4. User flow
- Create and join game lobbies
- Smooth real-time interaction between players
- Responsive interface built with Vue
