A simple web application to help streamline Pokémon Trading Card Game sessions by randomly drawing energy cards based on the distribution in your deck.
This was a simple pet project I slapped together to understand the capabilities of modern code assistants while creating something useful for my kids' Pokémon TCG games. It's a practical tool that helps simplify the energy card drawing process when playing Pokémon TCG.
-
Player Selection: Toggle between Player 1 and Player 2, with each player having their own independent energy card values.
-
Energy Distribution: Enter the number of each type of energy card in your deck (Grass, Fire, Water, etc.).
-
Drawing Energy: Click the "Draw Energy Card" button to randomly draw an energy card based on the distribution you've entered.
-
Energy Ratios: View the percentage distribution of your energy cards in the ratio display section.
- Two-player Support: Switch between two players, with each player's energy distribution saved independently.
- Visual Feedback: Clear visual indication of which player is active.
- Card Drawing Animation: A simple animation effect when drawing energy cards.
- Sound Effects: Audio feedback when a card is drawn.
- Responsive Design: Works well on different screen sizes.
This project uses vanilla JavaScript, HTML, and CSS - no frameworks or libraries needed!
Simply open the index.html file in any modern web browser to start using the application.
My kids love playing Pokémon TCG, but the classic version where about 1/3 of every deck is comprised of energy cards leads to needless bloat. The Pokemon TCG Pocket mobile game released 2024 proved that an expedited version of the game could be played without energy cards. This tool helps make the physical Pokemon TCG work more like the mobile version, by generating energy based on the ratio of total energy costs of each player's deck.
It was also a fun way for me to experiment with modern AI code assistants / vibe coding to see how quickly a simple but useful web application could be developed.