Problem
The Ritual Beast deck in Yu-Gi-Oh! has an awkward rule: many of its monsters share a "once per turn, by name" special-summon restriction, and it is easy to lose track of who you already summoned during a fast game. I wanted a clean, distraction-free visual aid a player could keep beside them while playing, on both a laptop and a phone, with nothing heavy to install and no dependency on a connection.
Solution
I designed a single-screen interface in vanilla HTML, CSS and JavaScript on top of Bootstrap: a grid of the archetype's 12 monsters, each with its card art and a checkbox that marks a green check once it has been special-summoned this turn. I added a separate normal-summon control with a live counter and a "+1" button for effects that grant an extra normal summon, plus a turn reset. I then packaged the exact same code inside a native Android app using a WebView (Kotlin, AndroidX), with its own loading and error screens, so the mobile version works offline.
Result
The tracker exists in two formats from one codebase: a web page that opens instantly and an installable Android APK. The summon logic runs entirely on the client, so it needs no server and no network. It was my first end-to-end project spanning web and mobile, and it cemented a pattern I still reuse: build the UI once on the web and wrap it natively when a phone presence is needed.