Kids math practice (SL/EN) in a Vite React app, wrapped with Capacitor for Android (net.bit76.matematika). Includes session refactor, i18n, and text-free difficulty icons with translated overlays.
2.3 KiB
Android
Zabavna Matematika on the phone is the same web game, running in a Capacitor WebView. Phones and tablets share one APK. Layout is CSS (already tuned for ~390px and up), not a second codebase.
What lives where
| Path | Role |
|---|---|
web/src/ |
The game |
web/dist/ |
Vite production build (synced into Android) |
web/capacitor.config.json |
App id net.bit76.matematika, webDir: dist |
web/android/ |
Gradle / Android Studio project (generated, then committed) |
Do not start a Kotlin/Compose game. Change play logic in web/src/ only, then sync.
First-time machine setup
- Install Android Studio.
- Install an SDK (API 24+ is enough for Capacitor 7) and a virtual device, or plug in a phone with USB debugging.
- Accept licenses if Studio asks.
Commands
From the repo root or web/:
cd web
npm install
npm run android
That runs vite build, cap sync android, then cap open android. In Studio press Run.
After you change JS/CSS/assets:
npm run cap:sync
Then Run again in Android Studio. Skip a full cap add android unless the android/ folder is missing.
If android/ was never generated (clone of a repo that omitted it):
cd web
npm run build
npx cap add android
npx cap sync
App identity
Set in web/capacitor.config.json:
- Application id:
net.bit76.matematika(Play Console package name) - Display name: Zabavna Matematika
Change these before the first Play Store listing. Renaming later is painful.
Icons and splash
Replace the Capacitor placeholders in:
web/android/app/src/main/res/mipmap-*/web/android/app/src/main/res/drawable*/
Keep one icon set. Tablet vs phone is the same WebView.
Store notes
- Privacy policy:
web/public/privacy.html(also served on the web host). - Orientation: portrait is already declared in the PWA manifest; you can match that in
AndroidManifest.xmlif you want to lock it. - Offline: the existing service worker still helps inside the WebView; Capacitor also ships the
dist/files on device, so the game works without a network after install.
What not to do
- Do not add
apps/androidwith a rewritten UI. - Do not copy
questionGenerator.jsinto Java/Kotlin. - Do not treat tablets as a separate flavor unless you later need a different Play listing.