A face-to-face Health and Mastery counter for two players of the Shards of Infinity card game. Lay a phone flat on the table between you; each player reads their own counters right-side up.
Live: https://shards-of-infinity-counters.surge.sh/
Single self-contained index.html.
No build step, no dependencies, works offline once loaded.
cp .env.example .envThen edit .env:
SURGE_DOMAIN- optional, the domainnpm run deploypublishes to (e.g.your-name.surge.sh). Leave blank and surge will prompt you interactively instead.
.env is gitignored, so it's never committed.
Deploying relies on a one-time surge login session cached on your machine (see Deploying below).
No dependencies are required to run it.
open index.html # macOS
xdg-open index.html # LinuxOr serve it, if you'd rather test on a phone over your local network:
npx serve .
# or
python3 -m http.server 3000For best results on a phone: open it, tap the fullscreen icon, then add it to your home screen.
Fullscreen needs a real page load (not file:// in some browsers) - serve it if the fullscreen icon doesn't respond.
surge login # one-time per machine, caches your session
npm run deploy # or: bash scripts/deploy.shscripts/deploy.sh loads SURGE_DOMAIN from .env if present and publishes with npx surge.
Full details, including what actually gets uploaded, are in docs/DEPLOYMENT.md.
| Feature | Detail |
|---|---|
| Two players, two stats each | Health (0-50) and Mastery (0-30) per player |
| Face-to-face layout | Top half rotates 180 degrees so the opposite player reads it upright; toggle off if both players view the screen the same way up |
| Tap or hold to change | Tap +/- for 1 at a time, hold to auto-repeat |
| Change badge | A fading +3/-2 style badge shows the running total of a quick burst of taps |
| Fullscreen | One tap, via the Fullscreen API |
| Background palette | Six preset "table felt" colors |
| Reset counters | Two-tap confirm, resets both players to Health 50 / Mastery 0 |
| Persistent state | Everything is saved to localStorage, survives a reload or closing the tab |
shards-of-infinity-counters/
├── index.html ← the entire app
│
├── AGENTS.md map/entry point for working in this repo
├── ARCHITECTURE.md how index.html is structured internally
├── README.md this file
│
├── docs/
│ ├── DESIGN.md layout, color, type, and interaction decisions
│ └── DEPLOYMENT.md local dev and surge.sh deployment
│
├── scripts/
│ └── deploy.sh publishes to surge.sh
│
├── .env.example template for SURGE_DOMAIN
├── .surgeignore only index.html gets deployed
└── package.json npm run deploy / npm start
The full design rationale, including why colors, typography, and layout were chosen the way they were, lives in docs/DESIGN.md.