74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
|
# React Native Version Plan
|
||
|
|
|
||
|
|
Goal: build a React Native companion app that connects to the same Bun server used by the web app.
|
||
|
|
Production base URL: `https://negopoly.fr`
|
||
|
|
Development base URL: `http://<this-computer's-ip>`
|
||
|
|
|
||
|
|
## 1) Project setup
|
||
|
|
- Choose framework: React Native + Expo (fast iteration) or bare RN (native modules).
|
||
|
|
- Initialize inside this repo at `mobile/`.
|
||
|
|
- Configure TypeScript and linting to match existing code style.
|
||
|
|
- Decide navigation: React Navigation for stack + tab layouts.
|
||
|
|
|
||
|
|
## 2) Shared types + networking
|
||
|
|
- Extract/share types from `shared/types.ts` into a package or keep a synced copy for RN.
|
||
|
|
- Create a `config` module to switch base URL by build type:
|
||
|
|
- Dev: `http://<this-computer's-ip>` (read from env or app config).
|
||
|
|
- Prod: `https://negopoly.fr`.
|
||
|
|
- Create an API client wrapper for REST and WebSocket calls.
|
||
|
|
|
||
|
|
## 3) Auth/session flow
|
||
|
|
- Implement session creation/joining screens matching web UX:
|
||
|
|
- Mobile-first flow: Join first, then Create.
|
||
|
|
- Join flow: room code → choose name or dummy takeover.
|
||
|
|
- Persist session + player IDs with `AsyncStorage`.
|
||
|
|
- Sync with server via WebSocket (mirrors web `useSessionManager`).
|
||
|
|
|
||
|
|
## 4) Navigation structure
|
||
|
|
- Root stack:
|
||
|
|
- Home
|
||
|
|
- Play (entry)
|
||
|
|
- Lobby
|
||
|
|
- Player tabs
|
||
|
|
- Banker tabs
|
||
|
|
- Chat list / thread / new
|
||
|
|
- Player tab layout:
|
||
|
|
- Home / Transfers / Chat (bottom tabs)
|
||
|
|
- Banker tab layout:
|
||
|
|
- Dashboard / Tools / Chat (bottom tabs)
|
||
|
|
|
||
|
|
## 5) Real-time state handling
|
||
|
|
- Implement WebSocket client (auto-reconnect + heartbeats).
|
||
|
|
- Mirror server messages: state updates, errors, takeover approvals, chat events.
|
||
|
|
- Handle blackout states with full-screen overlay.
|
||
|
|
|
||
|
|
## 6) Chat UX parity
|
||
|
|
- Chat list with unread indicators.
|
||
|
|
- Thread view like WhatsApp (bubbles + timestamps + composer).
|
||
|
|
- New chat screen (direct/group).
|
||
|
|
- Unread tracking (client-side initially; server-side later).
|
||
|
|
|
||
|
|
## 7) Banking features
|
||
|
|
- Player view: balance, transaction history, transfer form.
|
||
|
|
- Banker view: force transfers, balance adjustments, dummy creation, approvals, blackout, end session.
|
||
|
|
- Ensure banker has no balance view.
|
||
|
|
|
||
|
|
## 8) UX + performance
|
||
|
|
- Ensure mobile-safe typography (no auto zoom).
|
||
|
|
- Use safe-area insets for bottom tabs.
|
||
|
|
- Optimize list rendering (`FlatList` for chats/transactions).
|
||
|
|
|
||
|
|
## 9) Testing
|
||
|
|
- Add unit tests for API helpers + state reducers (if extracted).
|
||
|
|
- Smoke test flows for create/join, lobby, player, banker, chat.
|
||
|
|
|
||
|
|
## 10) Build + release
|
||
|
|
- Configure dev builds with a local IP target.
|
||
|
|
- Configure production builds to use `https://negopoly.fr`.
|
||
|
|
- Set up CI for builds and OTA updates (if using Expo).
|
||
|
|
|
||
|
|
## Open questions
|
||
|
|
- Expo or bare React Native?
|
||
|
|
- Any custom native features planned (QR scanner, push notifications)?
|
||
|
|
- Preferred directory layout for the mobile app inside this repo?
|