Tup Tromps
A web-based multi-player card game
Personal project
2024-2025
Explore the project here. Please note, the server can take up to 60 seconds to initialise, so please be patient after clicking the link.
A one minute video demonstration can be seen here. (external link to YouTube)
Introduction
From my childhood days in a tent on Cub Camp to playing with my nephew today, I’ve enjoyed countless hands of Top Trumps. It still baffles me that the company hasn’t released an app version of the game. So, I decided to challenge myself by creating one. Besides, making my own version of the game allowed me to devise my ideal deck, Road Cars of the ’80s. This deck features dream cars from the era—like the Lamborghini Countach, Ferrari Testarossa, and Lotus Esprit—alongside more modest but equally memorable models such as the Citroën 2CV and VW Beetle.
My main goal was to create a playable version of Top Trumps optimized for multiplayer, where each player could use their own mobile device. I envisioned players holding their phones much like they would a hand of cards, playing together in the same room. The project had several key objectives:
- Intuitive gameplay: Anyone familiar with the physical game should be able to play without needing instructions.
- Support for multiple players: Up to eight players.
- Support for multiple games: Allowing several simultaneous sessions.
- Ease of expansion: Adding new decks should be simple.
- Custom skins: A retro skeuomorphic design as default, with modern options available.
- Messaging system: Keeping all players informed of the game state.
Development Process
As I wanted to avoid requiring players to download an app, a browser-based game was the obvious choice.
Technical Stack
- The client-side interface was built using HTML, CSS, and JavaScript.
- Node.js, Access, and Socket.IO powered the server side, handling game logic and player integration.
Challenges Met
Instead of creating detailed site maps or prototypes, I took an iterative approach—starting with a simple, functional version of the game and gradually adding features. The basic game logic was straightforward, so I had a playable version running fairly quickly. The real challenges arose with edge cases, like:
- Ties: Players move to their next card in the event of a tie, but what happens if one of them is on their last card?
- Player disconnections: Ensuring the game continued smoothly if a player left intentionally or due to a dropped connection.
UI/UX
The card layout was heavily inspired by the original game, making the interface intuitive. I also focused on animations to enhance the user experience. These animations didn’t just add flair—they conveyed subtle game information, such as:
- Dealing cards: Accurate animations depending on the number of players.
- Winning and losing a hand: Different animations for each outcome.
- Card stack size: Shadows growing or shrinking to reflect the number of cards held.
Features
At the front end, initiating games is straightforward: players enter a four-digit code to join specific games. I also added a QR code feature for quick navigation to the correct game.
I initially planned to include 32 cards per deck (the optimal number for gameplay). However, my enthusiasm led to 52 cards in the Road Cars of the ’80s deck. Rather than cut it down, I used all the cards, which introduced two benefits:
- Players always start with an equal number of cards, regardless of how many are playing.
- Randomized card selection ensures a unique experience every time.
I also created two additional decks: Aeroplanes and Ships of the Ocean. Adding more decks—like Amazing Buildings—would be simple in the future.
For customization, I designed multiple skins:
- Old Skool: Retro skeuomorphic themes (one per deck).
- Minimal: A clean, modern design.
- Neon: A bold, colorful option.
Lessons Learned
User testing revealed that the game was a hit. Players loved the nostalgia, easy gameplay, and sociability of playing together. However, the following adjustments were made based on feedback:
- Gameplay pace: Slowed down to give players more time to review cards and celebrate wins/losses.
- Preventing errors: Added measures to stop players from joining games without a name or creating duplicate accounts, which disrupted gameplay.
- Timeout penalties: Initially, players were ejected for not taking their turn in time. This was seen as too harsh, so now they merely lose their turn.
- Disconnection handling: Improved functionality to manage players who lose their connection.
AI Assistance
I used AI tools to aid development. The cover image was created with MidJourney, while ChatGPT assisted with coding and debugging.
Conclusion
Tup Tromps is now a fully functional web-based game and can be accessed here. Please note that the server may take up to a minute to activate upon first access, so a brief wait may be required.