The LP Calculator
A modern, responsive, customizable life point tracker for competitive and casual TCG players.
OVERVIEW
The LP Calculator is a modern web application designed to optimize life point tracking during card game duels. I originally built it for a Web-Based Programming project in college to solve the clunky, ad-ridden calculator apps currently available, this tool provides a clean, intuitive interface for players to focus on their game rather than manual math.
What started as a simple calculator quickly evolved into a feature-rich application supporting duel tools, personal customization, and mobile-responsive design. The app handles everything from standard duels to complex scenarios with multiple life point adjustments, all while maintaining a seamless user experience.
Primary Goal
Create a distraction-free, visually pleasing, instant-loading life point tracker with zero ads and full mobile support
Target Audience
TCG players at local/regional tournaments and casual table games who need reliable life point tracking
Key Outcome
A market-leading software with positive community reputation and 24/7 availability.
THE CHALLENGE
CHALLENGE
Existing solutions are underdeveloped. Popular life point apps are riddled with intrusive ads, confusing UI, delayed button responses, and lack accessibility. Players either struggle with these apps or resort to Yu-Gi-Oh! Neuron, a mobile-only support application made by Konami Digital Entertainment Co..
SOLUTION
Build from the ground up with player experience first! Zero ads, instant visual on all buttons, large touch targets for mobile, and a clean dark theme that's easy on the eyes during long tournament days. Added player customization for a greater sense of accessibility and personalization.
DESIGN & DEVELOPMENT PROCESS
Research & Planning
I started by analyzing the top life point calculator softwares on desktop, iOS and Android. I documented their pain points: slow load times, minimal customization, inaccessible layouts, and lack of availability across platforms. I created a list of essential features : reset button, coin flips, die rolls, timers, calaculating, applying, and maintaining points for two separate players.
Wireframing & UI Design
The interface needed to feel like a duel tool, not a spreadsheet. I drew inspiration from futuristic environments like CyberPunk and the Yu-Gi-Oh! tv shows whjen coming up with the color scheme. The most important feature was the button layout for the calculator. No matter how the page adapted to the size of the device's screen, the calculator layout NEEDED to keep its designated layout. Each button has a distinct visual hierarchy to separate their functions: primary controls (+, -) and utility buttons are bold colors, and number inputs are easily accessible. The Duelist display boxes for the Duel Page are designed to highlight the user's color choices while always keeping points visible and easy to read.
Development
I chose client-side vanilla JavaScript for zero dependency bloat and instant load times. The core challenge was managing states between two players while keeping the UI responsive. Any color changes that were made on the settings page needed to persist on multiple elements in the duel page. To do this, I created JS function to store and load any selected color values in LocalStorage and apply them to those specific elements on the duel page.
Testing & Iteration
I shared early versions with my friends who are experienced Yu-Gi-Oh! players. Critical feedback included:
- "Could you add the ability to choose whatever color you want for each player?" (implemented)
- "The screen is zooming in on mobile when quickly pressing buttons." (still working on viable fix for mobile devices)
- "A match counter system would be nice for tracking more than one game." (planned update)
GALLERY
KEY FEATURES
Instant math.js Calculations
No lag, no loading, no security issues. Implemented math.js for secure calculator functionality. Every button press updates immediately with visual feedback.
Utility Features
Need to quickly reset your game? Just click the "Reset" button! Did you make a mistake while calculating? Click the "Clear" button to clear the display!
Mobile First
Buttons sized for thumbs, not cursors. Works perfectly in portrait and landscape.
Flip Coins & Roll Dice
Equipped with randomized coin and die buttons. These can be used for starting turn decisions, as well as specific in-game card functions.
Player Customization
Visit the settings page to customize your player colors! JS functionality for choosing and saving custom color values for each player. There are also preset color schemes for Duelist 1 and Duelist 2, if you're in a hurry.
Timer Functionality
If you want to track the time of your match, press the "Play" button under the timer clock to start or resume the timer! The timer will start to count up! Need to pause? Press the "Pause" button!
LESSONS LEARNED
This project taught me that "simple" doesn't mean "easy." Making something that feels effortless to use requires obsessive attention to detail. I spent hours just tuning the button animations. It took weeks before I decided on the background display that you see on the fully-deployed website. It takes a lot of learning and failure to make things look effortless, and this project gave me the opportunity to do exactly that with frontend development.
Key Takeaways:
- - Users want customization options: People enjoy personalizing their experiences. Current competitors do not offer this.
- - User feedback is crucial in agile development: Friends and experienced players gave me innovative, unexplored feature ideas.
- - Design for mobile-first: This is something I learned after having submitted Version 1 of this website for my college course. Mobile-first design helps you prioritize the essential features first, and simply scale them to fit larger screens. If you design for web-first, you will need to shrink a cluttered layout to fit mobile devices.
- - Security matters: Even in simple apps, avoiding the possibility of your users being attacked or your code being manipulated is extremely important.
FUTURE IMPROVEMENTS
The software has a solid foundation, but I plan on building much more! Here's what's coming next:
WHY THIS PROJECT MATTERS
Beyond the code, this project represents something personal. I've been playing and watching Yu-Gi-Oh since I was 10 years old. This game has helped me create lasting, impactful relationships with some of my closest friends. The community is amazing, but the tools we use are often an oversight. Building the LP Calculator was my way of giving back - creating something genuinely useful that improves the tournament/casual experience for everyone.