BIWAI TCG

• 

  YouTube Thumbnail

• 

  Home

• 

  Shop

• 

  Pack opening

• 

  Collection

• 

  Card inspection

• 

  Campaign

• 

  Team builder

• 

  Battle

• 

  Victory

Inspiration

I had been playing a lot of mobile games, opening physical trading card packs, and watching One Piece pack openings on YouTube. With the World Cup approaching, I was also opening soccer card packs myself. The part I kept coming back to was the anticipation: the pause before the final card, the flash of a rare treatment, and the feeling that the next reveal might be the hit.

I wanted to capture that excitement in a browser game without real-money packs or stronger cards being locked behind rarer artwork. BIWAI TCG grew from that idea: make pack opening the emotional center, then give every card a real purpose in team building and battle.

What it does

BIWAI TCG is a complete single-player, anime-inspired trading card game. You tear open animated four-card packs, reveal the headline card last, and collect 48 original characters across 132 printings.

The collection includes foil, full-art, alternate-art, and manga-style treatments, but every version of a character has the same combat power. You build a nine-card formation with six active cards and three bench allies. Elements counter each other, matching elements create resonance bonuses, and battles include Basic attacks, Signatures, Guard, Swap, target selection, status effects, passives, and role-aware auto-battle.

The campaign has three chapters and 60 encounters, including mini-bosses and bosses. Rewards, duplicate selling, collection progress, settings, and save import and export are all part of the same playable loop. Everything runs locally in the browser with no account, backend, purchases, or analytics.

The interaction model works across mouse and touch. Cards can be tapped to flip and dragged to look around, Team Builder supports direct card dragging, and combat actions can be tapped or dragged onto valid targets. Compact mobile layouts keep the active decision visible without squeezing the cards.

How I built it

I built BIWAI TCG in roughly three days using GPT-5.6 Sol in ChatGPT and Codex throughout development. I began by explaining the collecting experience, battle system, campaign, visual style, and economy I wanted. ChatGPT helped me turn those thoughts into a complete plan, and Codex expanded that plan into detailed working documents before implementation began.

I made the product decisions and gave the creative direction, including the card treatments, pack pacing, interface, battle rules, art style, animations, and later corrections. Codex turned those decisions into the working game, created and revised the original visual assets, tested the implementation, inspected browser screenshots, and fixed problems found during iteration.

The game is built with React 19, TypeScript 6, Vite 8, React Router, Zustand, and Zod. Pack opening and battle use seeded randomness, the gameplay rules are separated from the UI, and sound effects are synthesized in the browser with the Web Audio API.

Before this, I made the English version of Pumpkin TD for Warcraft 3 on Battle.net. It was one of the three most-played maps for several years and is still in the top ten today, although a good friend has now taken over its development.

Challenges I ran into

The first challenge was making a digital pack feel like an event instead of four images appearing on a screen. The result is a staged opening sequence with a pack tear, controlled reveal order, a locked headline card, rarity and foil effects, and a closer inspection view.

The next challenge was fitting readable rules onto cards without hiding the artwork. Standard cards and premium full-art treatments needed different layouts, and the same card still had to work in the collection, team editor, pack opening, and battle. I solved that through responsive card composition, delayed hover enlargement for smaller desktop cards, and direct tap-to-flip and drag-to-look inspection on touch devices.

Battle presentation was another major challenge. The rules can resolve quickly, but the player still needs to understand each attack, status effect, HP change, and defeat. I separated battle resolution from presentation timing so animations, impact effects, health changes, and the live battle log stay synchronized. Suggested Attack plans and direct tap-or-drag targeting keep six-card command planning approachable without removing tactical control.

Finally, the amount of original content was large for the time available. Structured catalogs, validators, simulations, automated tests, browser journeys, and screenshot review made it possible to keep the cards, encounters, art, and game rules consistent.

Accomplishments I am proud of

I am most proud that BIWAI TCG is a complete playable game rather than a mockup. The full loop works: open packs, grow a collection, sell duplicates, build a formation, progress through the campaign, earn rewards, and improve the team.

I am also proud of the scale I reached in roughly three days: 48 collectible characters, 132 printings, 60 campaign encounters, original art and interface design, and a battle system with enough depth to support meaningful team decisions. The current release is backed by 124 unit and integration tests plus focused desktop and mobile browser coverage.

What I learned

The biggest surprise was how reliable GPT-5.6 Sol and Codex were across the entire project. Codex did not only generate code. It checked its own work, ran tests, inspected visual results, found problems, and kept iterating. That made it possible for me to stay focused on the game I wanted to make and spend my time on direction, taste, rules, pacing, and corrections.

I also learned that a detailed plan and clear feedback matter more than simply asking an agent to build something. The better I explained the experience I wanted, the better Codex could turn it into a coherent product.

What's next for BIWAI TCG

Development will continue with further cross-device polish, additional card sets, expanded story and campaign chapters, richer visual effects, dedicated sound design, and deeper formation-building and card-value decisions.

Update since the gameplay video

Several combat mechanics and mobile interactions have been redesigned since the gameplay video was recorded. The playable build contains the latest targeting controls, responsive layouts, card gestures, and quality-of-life improvements.

Built With

• gpt-5.6-sol
• openai-codex
• openai-sites
• playwright
• react
• react-router
• typescript
• vite
• vitest
• web-audio-api
• zod
• zustand