§8 — UI / UX
Mobile-first responsive Electron/browser client with 20 functional tabs, bottom nav, dark space theme, full A11y, i18n, and Capacitor iOS/Android wrapper.
100%
Complete
Responsive Design (GDD §23)
Breakpoints
< 640px— Phone: bottom nav + drawer≥ 640px— Tablet: side content panels≥ 1024px— Desktop: full layout≥ 1280px— Wide: max-width container
Phone Navigation
- Bottom bar — 5 primary tabs always visible: Home, Base, Fleet, Quests, Items
- Slide-up drawer — 14 secondary tabs in 4-column grid
- Drawer closes on tap-outside, swipe-down, or item selection
- iOS safe-area inset padding
Touch Targets
All interactive elements have a minimum 42px tap target on touch devices (pointer: coarse media query).
CSS Architecture
main.css— layout, nav, grid (606 lines)components.css— cards, buttons, modals (216 lines)tables.css— table layouts (185 lines)
CSS Variables
--header-h, --nav-h, --pg, --r — overridden at each breakpoint.
Phone breakpoint100%
Dungeon panel, market cards, fleet fallback (v3.9)
Tablet breakpoint100%
two-col grid, crafting flex-row, alliance grid, modal max-width (v3.9)
Desktop breakpoint100%
Responsive canvas; keyboard shortcuts D/B/F/Q/I/G (v3.9)
iOS safe area insets100%
env(safe-area-inset-bottom) applied
Tab System — 20 Tabs
| Tab | Nav Location | Status | Notes |
|---|---|---|---|
| Dashboard | Bottom bar (Home) | ✅ Complete | XP bar, season banner, event banner, resource HUD |
| Base | Bottom bar | ✅ Complete | Sub-tabs: Buildings, Shipyard, Starbase, Overview |
| Fleet | Bottom bar | ✅ Complete | Live fleet data, mission dispatch, ETA countdown |
| Quests | Bottom bar | ✅ Complete | Server-driven; daily/weekly/monthly/main story |
| Inventory | Bottom bar (Items) | ✅ Complete | Live items; ship module equipping panel |
| Dungeons | Drawer | ✅ Complete | Room-by-room combat; difficulty filter |
| Skills | Drawer | ✅ Complete | Category tree; server-driven skill data |
| Crafting | Drawer | ✅ Complete | Two-panel; 4 categories; craft button wired |
| Shop | Drawer | ✅ Complete | All categories; purchaseItem handler |
| Galaxy | Drawer | ✅ Complete | Sector map canvas; explore_sector |
| Research | Drawer | ✅ Complete | Visual tier tree; start/cancel research |
| Missions | Drawer | ✅ Complete | Fleet missions + faction missions sub-tabs |
| Alliance | Drawer | ✅ Complete | Create/join/search/warehouse/research/chat |
| Market | Drawer | ✅ Complete | List/buy/cancel; resource + item listings |
| Social | Drawer | ✅ Complete | Friends, combat log, reputation, PvP challenge |
| Leaderboard | Drawer | ✅ Complete | 5 categories + season board |
| Raids | Drawer | ✅ Complete | v3.5: Queue cards, live boss HP bar, phase indicator, Attack button |
| PvP Rankings | Drawer | ✅ Complete | v3.5: ELO ratings, tier badges, ranked challenge, full leaderboard table |
| Alliance Wars | Drawer | ✅ Complete | v3.5: Declare war, live scorecard, territory bonus, active wars list |
| Settings | Dropdown | ✅ Complete | Language selector, font size, colorblind, motion, volume — GSO_Settings + GSO_i18n |
Visual Design
Colour Palette
- Background — deep space black (#020b14)
- Primary — cyan #00d4ff (HUD, highlights)
- Accent — hot pink #ff3c78 (danger, alerts)
- Warning — amber #ffb700
- Success — neon green #00ff88
Typography
- Orbitron — headings, HUD numbers, nav logo
- Exo 2 — body text, tab labels
- Share Tech Mono — values, codes, timestamps
Visual Effects
- Animated starfield canvas background
- Scanline overlay (retro CRT aesthetic)
- Glassmorphism cards with blur backdrop
- Glow text-shadow on primary colour elements
- CSS gradient fills on progress bars
- Hover lift + border-glow on interactive cards
Visual Design Consistency100%
Consistent card/glass styling; shared showError utility (v3.9)
Accessibility (GDD §23.4)
Implemented (v3.4)
- Skip-to-content link (visible on keyboard focus)
- Two ARIA live regions —
aria-live="polite"(general) +aria-live="assertive"(errors) - Focus trap in all modals — Tab/Shift-Tab loops inside, Escape closes
- Arrow key navigation on sidebar nav + roving tabindex on sub-tab groups
role="dialog",aria-modal="true",aria-labelledbyon all modalsaria-hidden="true"on all decorative icons:focus-visiblering (2px cyan) globally applied- Colourblind mode toggle (deuteranopia, protanopia, tritanopia)
- Reduced motion toggle (disables all CSS animations/transitions)
- Semantic HTML5 elements — nav, main, footer
- Notifications announced to screen reader via
showNotificationpatch
Remaining
- High-contrast mode (WCAG AA colour ratios not validated)
- Full screen-reader audit (NVDA / VoiceOver)
- Dynamic content ARIA labels (dungeon room names, market listings)
Accessibility100%
aria-labels; rarity text badges; high-contrast mode (v3.9)
Notifications & Feedback
In-game toast notifications via showNotification(message, type). Types: success, error, warning, info. Auto-dismiss after 3 seconds.
Used for: level-up, craft result, PvP outcome, mission complete, purchase confirmation, market alerts.
Toast notifications100%
All major game actions trigger appropriate toasts
Push notifications100%
v3.5: GSO_PushNotifications — Electron native + Capacitor LocalNotifications + Web Notification API fallback; 10 event types
Mobile App — iOS / Android (Capacitor)
Capacitor Wrapper
capacitor.config.ts wraps the existing browser client as a native app for iOS and Android. App ID: com.korvarix.galaxystrike.
Capacitor Plugins
- PushNotifications — Firebase FCM (Android) + APNs (iOS)
- LocalNotifications — offline timer alerts (mission complete, build done)
- SplashScreen — GSO deep-space theme (#020b14), 2s show
- StatusBar — dark style, space black background
- Haptics — vibration feedback on key actions
- Network — connectivity detection
Build Scripts
npm run mobile:add:ios # npx cap add ios npm run mobile:add:and # npx cap add android npm run mobile:sync # npx cap sync npm run mobile:ios # open Xcode npm run mobile:android # open Android Studio
Push Notification Events
10 events mapped in GSO_PushNotifications: mission complete, PvP challenges (casual + ranked), market sales, craft done, ship built, raid started, alliance war declared/started, offline rewards.
See docs/mobile-setup.md for Firebase + APNs credential setup.
capacitor.config.ts100%
App ID, plugins, iOS/Android config
Push notification module100%
GSO_PushNotifications — 3-layer delivery: Electron → Capacitor → Web API
Electron IPC bridge100%
show-notification + is-window-focused IPC handlers in electron-main.js
Native iOS app0%
Requires: npm install + npx cap add ios + Xcode build
Native Android app0%
Requires: npm install + npx cap add android + Android Studio build