dev- Mobile UI Implementation for Terratomic by El-Magico777 · Pull Request #210 · 1brucben/Terratomic

El-Magico777 · 2026-02-16T19:53:57Z

Replaced by #278

Mobile UI Implementation for Terratomic

🎯 Player-Facing Overview

Terratomic is now fully playable on mobile devices! This implementation brings the complete PC strategy experience to touchscreen devices with a native mobile interface designed specifically for on-the-go gameplay.

What Players Get:

📱 Native Touch Controls: Intuitive tap, long-press, drag, pinch, and swipe gestures replace keyboard and mouse
🎮 Full Feature Parity: Every strategic action from the PC version is accessible on mobile—building, attacking, diplomacy, research, alliances, and more
🔊 Haptic Feedback: Tactile responses for all interactions (configurable)
📐 Adaptive Layouts: Responsive scaling across phone sizes, tablet sizes, and both portrait/landscape orientations
⚡ Performance-First: Optimized rendering and gesture detection for smooth 60fps gameplay even on mid-range devices
🎨 Mobile-Native UI: Bottom sheets, slide-out sidebars, floating action buttons, and HUD elements designed for one-handed play

Target Devices:

iPhone 6s+ (iOS 13+)
Android phones (Chrome 80+)
iPad Air/Pro tablets
Android tablets (Chrome 80+)

Play anywhere, command everywhere. The full strategic depth of Terratomic now fits in your pocket.

🖼️ UI Comparison: Desktop vs Mobile

Desktop UI (Traditional)

Keyboard shortcuts and radial menus
Multi-window layout with persistent sidebars
Hover states and right-click context menus
Fixed viewport with scroll or WASD controls

Mobile UI (Touch-First)

Touch gesture controls (tap, swipe, pinch, long-press)
Collapsible overlays and bottom-sheet action grids
Edge-swipe sidebars and floating tab buttons
Drag-to-pan viewport with pinch-zoom

Key Visual Differences:

ActionGrid replaces radial menu: Slides up from bottom with context-aware actions

TopBar replaces header: Compact status bar showing population, gold, and game clock

Tab Buttons replace persistent panels: Economy, Research, and Intel accessible via fixed right-side buttons

HUD Bubbles replace notifications: Attack bar, chat/emoji bar, and alliance notifications appear as dismissible floating elements

Player Toast replaces hover tooltips: Long-press any tile to see detailed player info

🏗️ Technical Overview

Architecture

The mobile UI is implemented as a parallel interface layer that runs alongside the existing desktop client, sharing the same game logic and network layer but with a completely redesigned presentation layer optimized for touch interactions.

Entry Point Detection:

MobileDetector (137 lines) identifies mobile devices via user-agent, touch capability, screen size, and device-specific quirks
Automatically activates mobile UI for phones and tablets, bypassing desktop interface
Handles iOS safe area insets, orientation changes, and viewport resize events

Core Orchestrator:

MobileUI (873 lines) acts as the central coordinator for all mobile components
Manages lifecycle, z-index stacking, gesture routing, and game-state synchronization
Delegates responsibilities to specialized helper modules for cleaner separation of concerns:
- MobileUIInteractions (341 lines) — attack, diplomacy, spawn, chat, emoji, donation handlers
- MobileUIStateSync (127 lines) — game tick → topbar/tab/trade-indicator synchronization
- MobileUIEventSetup (133 lines) — centralized listener registration for UI controls
- MobileUIOverlayCoordinator (55 lines) — overlay positioning + per-tick update orchestration
- MobileUIMapStack (154 lines) — screen→tile conversion + stack upgrade targeting helpers

Gesture System:

GestureDetector (331 lines) implements a touch state machine for recognizing gestures:
- Tap: <200ms, movement <10px → tile selection, button presses
- Long Press: Hold 600ms, movement <10px → player info, economy overlay
- Drag: Movement >10px → map panning
- Pinch: 2+ fingers, scale from initial distance → map zoom
- Edge Swipe: Start within 20px of edge, fast swipe → open sidebars
Palm rejection via iOS contact-area data (radiusX/radiusY > 30px)

Responsive Scaling:

MobileViewportProfile (247 lines) classifies viewports into profiles:
- Compact landscape phones (e.g., iPhone SE landscape): Tighter ActionGrid tokens to preserve map visibility
- Regular landscape phones (e.g., iPhone 14 Pro): Medium compaction
- Large tablet profiles (e.g., iPad Air): Tablet readability bump with larger tiles/icons/text
- Baseline reference: iPhone 14 Pro Max (430x932) as no-regression reference profile
Token-driven CSS custom properties applied at runtime for dynamic scaling
All tokens flow through MobileUI.applyResponsiveProfile() → ActionGrid + overlays

Component Hierarchy:

MobileUI (orchestrator)
├── MobileDetector (device detection)
├── MobileTopBar (fixed top status bar)
├── MobileActionGrid (bottom-sheet context menu)
├── GestureDetector (touch state machine)
├── MobileViewportProfile (responsive token generation)
│
├── Overlays:
│   ├── MobileEconomyOverlay (full-screen economy sliders)
│   ├── MobileIntelSidebar (left-swipe: Players/Teams/Events tabs)
│   ├── MobileResearchSidebar (right-swipe: tech tree)
│   ├── MobileSettingsSidebar (settings + replay controls)
│   ├── MobilePlayerToast (long-press player tile)
│   ├── MobileAttackBar (HUD attack/trade bubbles)
│   ├── MobileChatEmojiBar (HUD chat/emoji bubbles)
│   ├── MobileAllianceNotifications (alliance request toasts)
│   ├── MobileTechUnlockToast (tech unlock notification)
│   └── MobileWinModal (mobile-first game over screen)
│
├── Components:
│   ├── MobileResearchPanel (full tech tree with category tabs)
│   └── MobileSettingsPanel (settings toggles + replay controls)
│
├── Utils:
│   ├── HapticFeedback (vibration patterns)
│   ├── Icons (SVG icon rendering)
│   └── OverlayPositioning (z-index + position helpers)
│
└── Helper Modules:
    ├── MobileUIInteractions (action handlers)
    ├── MobileUIStateSync (tick synchronization)
    ├── MobileUIEventSetup (listener registration)
    ├── MobileUIOverlayCoordinator (overlay updates)
    ├── MobileUIMapStack (tile targeting)
    ├── MobileUIStats (trade income parsing)
    ├── MobileUIActionUtils (build action parsing)
    └── MobileUIEventBindings (event helper wrappers)

Key Technical Decisions

1. Isomorphic Game Logic

No game logic changes in src/core/—mobile UI calls the same execution APIs as desktop
Client-side game runner (ClientGameRunner) remains unchanged
Transport layer (Transport.ts) shares network code between desktop and mobile

2. Modular Orchestrator Pattern

MobileUI delegates specialized concerns to helper modules instead of becoming a 3000+ line monolith
Each helper module is independently testable and focused on a single responsibility
Enables future refactoring without touching the orchestrator

3. Z-Index Stacking System

Layered UI with explicit z-index hierarchy:
- Base map: z-index: 0
- TopBar: z-index: 1650
- Tab buttons: z-index: 1700
- Attack/chat bars: z-index: 1758-1760
- Economy overlay: z-index: 1800
- ActionGrid: z-index: 2000
- Player toast: z-index: 2500
- Sidebars: z-index: 3000
- Tech toasts/modals: z-index: 4050+
Prevents z-fighting and ensures predictable interaction order

4. Haptic Feedback System

Centralized HapticFeedback utility wraps navigator.vibrate()
Semantic patterns: TAP (10ms), LONG_PRESS (50ms), SUCCESS (15ms), WARNING (30ms), ERROR (100ms)
User-toggleable via settings (defaults to enabled)
Graceful degradation for browsers without vibration API

5. Responsive Token System

CSS custom properties (--mobile-*) for dynamic styling
Profile-specific token overrides applied at viewport change events
ActionGrid receives 127+ tokens for comprehensive scaling control
Cost badges, tile dimensions, font sizes, padding, and max-height all token-driven

Performance Optimizations

Lazy Overlay Initialization: Sidebars and overlays only created when first opened
Gesture Debouncing: Pinch-zoom and drag events throttled to prevent over-rendering
Conditional Rendering: HUD elements hidden during spawn phase to reduce draw calls
Tile Caching: ActionGrid pre-renders tiles and reuses DOM nodes
Event Delegation: Single touch listener on viewport instead of per-tile listeners

Testing Coverage

Unit Tests (6 test files, 629 lines):
- GestureDetector.test.ts — tap, long-press, drag, pinch, edge-swipe detection
- MobileActionGrid.test.ts — tile rendering, cost formatting, context awareness
- MobileDetector.test.ts — device detection, orientation, safe area parsing
- MobileResearchPanel.test.ts — tech tree rendering, category filtering
- MobileUIStateSync.test.ts — game tick synchronization, topbar updates
- MobileViewportProfile.test.ts — viewport classification, token generation
Manual QA (see MOBILE-GESTURE-HAPTIC-QA-MATRIX.md):
- Tested across iPhone SE, iPhone 14 Pro, iPad Air, Samsung Galaxy
- Portrait + landscape orientations
- iOS Safari, Chrome Android, Firefox Android

📋 Complete Feature List

Core Gameplay Actions

✅ Tile Selection: Tap any tile to open context-aware ActionGrid
✅ Ground Attack: Tap enemy tile → "Ground Attack" in ActionGrid
✅ Naval Assault: Tap enemy water tile → "Naval Assault" in ActionGrid
✅ Paratroopers: Tap enemy tile → "Paratroopers" in ActionGrid (requires research)
✅ Bomber Run: Tap enemy tile → "Bomber Run" in ActionGrid (requires research)
✅ Nuclear Strike: Tap enemy tile → "Nuke (Artillery)" / "Nuke (ICBM)" (requires silo + research)
✅ Declare War: Tap enemy tile → "Declare War" in ActionGrid
✅ Spawn: Tap unclaimed land during spawn phase

Building & Structures

✅ Build Structures: Tap own tile → ActionGrid shows buildable structures (Barracks, Factory, Port, etc.)
✅ Build Naval Units: Tap own water tile → "Warship" / "Submarine" (requires Port)
✅ Build Fighter Jet: Tap own tile → "Fighter Jet" (requires Airfield + Jet Engines research)
✅ Build Artillery: Tap own tile → "Artillery" (requires Factory + research)
✅ Stack/Upgrade Structures: Toggle stack mode in ActionGrid, tap structures to upgrade

Diplomacy

✅ Alliance Request: Tap enemy tile → "Propose Alliance" in ActionGrid
✅ Break Alliance: Tap allied tile → "Break Alliance" in ActionGrid
✅ Request Peace: Tap enemy-at-war tile → "Request Peace" in ActionGrid
✅ Alliance Notifications: Auto-shown alliance request/extension warning toasts with accept/reject buttons

Economy & Resources

✅ Troop/Worker Ratio: Adjustable via MobileEconomyOverlay slider (long-press map or Economy tab)
✅ Attack Ratio: Adjustable via MobileEconomyOverlay slider
✅ Investment Sliders: Production, Road, Research sliders in MobileEconomyOverlay
✅ Economy Lock Toggles: Prevent accidental slider changes during critical moments
✅ Population & Gold Display: Always visible in MobileTopBar
✅ Game Clock: Always visible in MobileTopBar (counts after spawn phase)
✅ Trade Income Indicator: Auto-shown trade bubbles in MobileAttackBar on income ticks

Intelligence & Communication

✅ Leaderboard: MobileIntelSidebar Players tab (tap Intel button or edge-swipe left)
✅ Team Leaderboard: MobileIntelSidebar Teams tab
✅ Events Log: MobileIntelSidebar Events tab
✅ Player Info: Long-press any player-owned tile → MobilePlayerToast with stats and actions
✅ Chat: Open chat modal via player toast → chat button
✅ Emoji: Open emoji picker via player toast → emoji button or ActionGrid emoji tile
✅ Chat/Emoji Bubbles: Auto-shown in MobileChatEmojiBar when messages arrive
✅ Donate Troops: Long-press player tile → donate troops button in player toast
✅ Donate Gold: Long-press player tile → donate gold button in player toast

Research & Technology

✅ Research Toggle: MobileResearchSidebar (tap Research button or edge-swipe right)
✅ Research Priority Selection: MobileResearchPriorityModal for category prioritization
✅ Tech Tree: Full tech tree display in MobileResearchPanel with category tabs
✅ Tech Unlock Notifications: Auto-shown MobileTechUnlockToast on research completion

Controls & Navigation

✅ Pan Map: Touch-drag anywhere on map (via GestureDetector)
✅ Zoom In/Out: Pinch-to-zoom gesture or tap zoom +/− buttons (left side)
✅ Center Camera: Tap center button (left side) to recenter on your territory
✅ Edge Swipe Left: Swipe from left edge → toggle Intel sidebar
✅ Edge Swipe Right: Swipe from right edge → toggle Research sidebar

Attack & Battle Feedback

✅ Attack Notifications: Auto-shown attack bubbles in MobileAttackBar with troop counts and timers
✅ Incoming Attacks: Red bubbles show incoming attacks with tap-to-focus
✅ Outgoing Attacks: Blue/green bubbles show your attacks with tap-to-cancel
✅ Naval Units: Boat icons in attack bar for active naval assaults
✅ Airstrike Indicators: Paratrooper/bomber icons in attack bar during airborne attacks

Settings & Game Management

✅ Settings Panel: MobileSettingsSidebar → MobileSettingsPanel with all game settings
✅ Haptic Toggle: Enable/disable vibration feedback
✅ Replay Controls: Save replay, download replay, copy replay URL
✅ Exit Game: Quit to lobby (confirmation dialog included)
✅ Win/Loss Modal: MobileWinModal shows game-over stats, replay options, Discord invite

Responsive Scaling

✅ Compact Landscape Phones: ActionGrid uses tighter tokens to preserve map visibility
✅ Regular Landscape Phones: ActionGrid applies medium compaction
✅ Large Tablet Profiles: ActionGrid receives tablet readability bump (larger tiles/icons/text)
✅ Portrait Orientation: All overlays and ActionGrid adapt to portrait aspect ratios
✅ Baseline Reference: iPhone 14 Pro Max emulation (430x932) as no-regression reference
✅ Tablet Activation: iPad Air/Pro devices enter mobile UI path reliably

Haptic Feedback (Configurable)

✅ Tap Feedback: 10ms vibration on button taps, toggles, menu opens
✅ Long Press Feedback: 50ms vibration on long-press trigger
✅ Success Feedback: 15ms vibration on build/attack/diplomacy confirmations
✅ Warning Feedback: 30ms vibration on warnings and confirmations
✅ Error Feedback: 100ms vibration on invalid actions or locked tiles
✅ Edge Swipe Feedback: 25ms vibration on sidebar swipe triggers

🎨 Mobile Lobby Industrial Styling (Separate Commit)

The second commit (feat(mobile): Mobile lobby industrial styling) applies a mobile-optimized industrial aesthetic to the lobby screens (game creation, user settings, map selection).

What Changed:

Visual Redesign: Metallic textures, embossed panels, and industrial typography replace flat lobby UI
Touch-Optimized Buttons: Larger touch targets, increased padding, and clearer hover/active states
Background Graphics: Added mobile-optimized background texture (resources/images/mobile-bg-grey.png)
Responsive Layouts: Lobby forms and modals now adapt to mobile viewport sizes
Typography Scaling: Font sizes and line-heights adjusted for mobile readability

Files Modified:

src/client/index.html — Inline lobby CSS rewrite with industrial styling (1128 lines added)
src/client/GameStartingModal.ts — New modal component for "Game Starting" countdown screen
src/client/UserSettingModal.ts — Mobile-optimized settings modal with larger inputs
src/client/components/Maps.ts — Map selection grid with touch-friendly tiles
resources/images/mobile-bg-grey.png — Mobile-optimized background texture (1.8MB PNG)

Why Separate Commit?
This commit is kept separate from the main mobile UI implementation because:

Optional Aesthetic Changes: The lobby styling is visual polish, not functional mobile support
Easy Revert: If the industrial theme isn't desired, this commit can be reverted without affecting mobile gameplay
Design Iteration: Allows for easy A/B testing or alternative styling experiments

📊 Statistics

Code Metrics

Total Lines Added: 16,212 lines (14,855 mobile UI + 1,357 lobby styling)
Mobile Source Files: 34 new files under src/client/mobile/
Test Files: 6 test files with 629 lines of test coverage
Documentation: 4 comprehensive docs under docs/mobile/ (661 lines)

Component Breakdown

Component	Lines	Purpose
MobileActionGrid	1,449	Bottom-sheet context-aware action tiles
MobileUI	873	Core orchestrator
MobileIntelSidebar	770	Leaderboard + events sidebar
MobileEconomyOverlay	809	Full-screen economy sliders
MobileResearchPanel	691	Tech tree component
MobileAttackBar	630	Attack/trade notification bubbles
MobileEventsDisplay	578	Events log
MobileHelpModal	575	(Reserved for future help system)
MobilePlayerToast	571	Long-press player info toast
MobileSettingsPanel	541	Settings + replay controls
MobileTopBar	445	Top status bar
MobileWinModal	405	Game over / victory screen
MobileResearchPriorityModal	374	Research priority picker
MobileUIInteractions	341	Action handlers (attack/diplomacy/spawn)
GestureDetector	331	Touch gesture state machine
MobileChatEmojiBar	256	Chat/emoji HUD bubbles
MobileViewportProfile	247	Responsive token generation
Other components	1,200	(11 smaller components + utils)

Device Compatibility

iOS: iPhone 6s+ (iOS 13+), iPad Air/Pro
Android: Chrome 80+, Firefox 68+
Screen Sizes: 320px–1024px width, portrait + landscape
Touch: Single touch, multi-touch, palm rejection
Haptics: Navigator Vibration API (graceful degradation)

🔗 Related Documentation

Comprehensive technical documentation lives in docs/mobile/:

MOBILE-ARCHITECTURE.md — Component hierarchy, file inventory, design patterns
MOBILE-FEATURE-MATRIX.md — Desktop→mobile feature parity table, HUD layout, tab buttons
MOBILE-GESTURES-HAPTICS.md — Gesture detection patterns, haptic feedback usage
MOBILE-ACTION-GRID-CATALOG.md — ActionGrid tile catalog with context rules
MOBILE-GESTURE-HAPTIC-QA-MATRIX.md — QA test matrix for gestures and haptics

🚀 Testing & Validation

Unit Tests

Run mobile unit tests:

npm test -- tests/mobile/

All tests passing:

✅ GestureDetector.test.ts (90 lines)
✅ MobileActionGrid.test.ts (113 lines)
✅ MobileDetector.test.ts (93 lines)
✅ MobileResearchPanel.test.ts (68 lines)
✅ MobileUIStateSync.test.ts (177 lines)
✅ MobileViewportProfile.test.ts (88 lines)

Manual Testing Checklist

See docs/mobile/MOBILE-GESTURE-HAPTIC-QA-MATRIX.md for complete QA matrix.

Devices Tested:

✅ iPhone SE (2020) — iOS 16, Safari, portrait + landscape
✅ iPhone 14 Pro — iOS 17, Safari, portrait + landscape
✅ iPad Air (5th gen) — iPadOS 17, Safari, portrait + landscape
✅ Samsung Galaxy S21 — Android 13, Chrome, portrait + landscape
✅ Pixel 7 — Android 14, Chrome, portrait + landscape

Key Scenarios Verified:

✅ Complete game from spawn to victory
✅ All attack types (ground, naval, air, nuke)
✅ All diplomacy actions (ally, peace, war)
✅ All building types (structures, units, upgrades)
✅ Economy adjustments during gameplay
✅ Research priority changes mid-game
✅ Chat and emoji communication
✅ Alliance requests and notifications
✅ Replay save and download
✅ Orientation change handling

🎯 Commit Structure

This PR contains two sequential commits that can be merged together or separately:

Commit 1: `feat(mobile): Implement mobile UI` (`abf1e39`)

The Core Implementation

Complete mobile UI layer with 34 new components
Gesture detection and haptic feedback
Responsive scaling system
Full desktop feature parity for mobile
Unit test coverage and documentation

Impact: Enables mobile gameplay

Commit 2: `feat(mobile): Mobile lobby industrial styling` (`9baffa4`)

Optional Visual Polish

Industrial aesthetic for lobby screens
Mobile-optimized forms and buttons
Background textures and typography scaling

Impact: Visual enhancement (can be reverted without affecting mobile gameplay)

✨ Summary

This PR unlocks full mobile support for Terratomic, bringing the complete PC strategy experience to touchscreen devices. The implementation prioritizes:

Native mobile UX with touch-first interactions
Feature completeness matching desktop capabilities
Performance with optimized rendering and gesture detection
Responsive design across all phone and tablet sizes
Maintainability with modular architecture and comprehensive tests

The mobile UI runs in parallel with the desktop interface, sharing game logic and network code while providing a completely redesigned presentation layer optimized for touch.

Please complete the following:

I have added screenshots for all UI updates
I process any text displayed to the user through translateText() and I've added it to the en.json file
I have added relevant tests to the test directory
I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced
I understand that submitting code with bugs that could have been caught through manual testing blocks releases and new features for all contributors

Please put your Discord username so you can be contacted if a bug or regression is found:

el_magico777

Double zoom button step size for faster tap-based zooming and reduce pinch sensitivity for finer touch control.

…om tuning, and i18n fix

… sizing. Mobile: horizontal carousel map selection in lobby modals - Replace vertical scrolling map grids with horizontal carousel - Add category tabs (Continental, Regional, Fantasy) for faster navigation - Auto-switch to active category when selecting a map - Category state tracked in both SinglePlayerModal and HostLobbyModal - Mobile-optimized with touch scroll and snap behavior - Random map tile visible in all categories - Reduces scroll friction on mobile with 31 maps Lobby modals: close extra settings by default and fix dropdown contrast - Set showUnitSettings to false by default in SinglePlayerModal - Fix open() method that was resetting showUnitSettings to true - Add explicit styling for select option elements with darker background - Fixes light text on white background in dropdowns (gold multiplier, starting gold, peace timer) Lobby modals: add viewport-aware responsive sizing - Integrate mobile viewport tracking system (getMobileViewportProfile) - Add resize listeners via connectedCallback/disconnectedCallback - Apply size-class data attributes (compact/regular/large) to body - Compact portrait (360px): 0.9x scale, smaller fonts, tighter spacing - Compact landscape: 0.95x scale, optimized horizontal layout - Regular phones (361-430px): 0.98x balanced scale - Large tablets (>430px): 1.1x scale, generous spacing - Fixes: cramped UI on small phones, oversized elements in landscape - Consistent with in-game mobile UI responsive system

- Add extra-large size class for devices with shortest side over 768px - Increase action grid tiles from 70px to 85px - Increase icons from 31px to 38px and fonts from 12px to 14px - Increase padding from 18px to 24px and gaps from 9px to 12px - Add iPad Pro 12.9 inch test cases - All 395 tests passing

- Add MobileUnitSelection.ts with 40px screen-distance hit detection for forgiving tap targeting of Warship, Submarine, FighterJet, Artillery - Update MobileUI.ts with selection state, redirect-on-tap mode, floating selection banner, and unit:select action routing - Update MobileActionGrid.ts to show 'Select [Unit]' actions on ALL tile categories (own, enemy, neutral) when near a selectable unit - Add MobileUnitSelection.test.ts with 11 tests covering hit radius, owner filtering, distance sorting, and terrain validation

…talog - documented unit selection and redirection feature - updated MobileUI component map with MobileUnitSelection - added new unit-related events to EventBus table - updated ActionGrid catalog with unit selection actions - updated feature parity matrix

Added pointer-events: none to HeadsUpMessage container and message elements for mobile-ui-enabled contexts. This prevents the 'choose start location' banner from intercepting taps during spawn phase, allowing touches beneath the top bar to properly reach the canvas. Desktop positioning and behavior unchanged. Fixes #225

Adds attack troop count badges to mobile action buttons for Ground Attack, Naval Assault, and Paratroopers. Uses attackRatio-based troop amount and renderTroops display scaling to match existing UI troop formatting. Also styles the badge with a combat-focused look to avoid confusion with resource/currency badges. Closes #218

Adds a live attack troop readout beneath the Attack Ratio slider in the mobile economy overlay, using the same attack-ratio calculation and troop display formatting as mobile attack action badges. This keeps eco-tab attack planning and action-button values aligned.

Anchors mobile attack bubbles at the bottom by default and dynamically repositions them above the mobile action grid when it opens. Also removes the visual line artifact by eliminating the attack-bar container background and tightening spacing above the grid. Mobile-only UI behavior; desktop unchanged.

Pins the clock recess to the left edge and settings recess to the right edge on wider mobile portrait screens, while keeping center stats centered. Small-screen behavior remains unchanged.

Updates MobileSettingsSidebar to use the same --m-panel-top-offset token as other mobile overlays, so it opens below the top bar on larger screens instead of overlapping it. Mobile-only change.

- Fix click interception on small portrait screens by adjusting :host pointer-events area to only cover the sidebar (right side) - Add stacked layout for larger tablets: Portrait mode: large (min-height 600px) and extra-large Landscape mode: large and extra-large (min-width 1000px) Stacked mode shows Players, Leaderboard, and Events sections vertically (portrait) or in 2-column grid (landscape) instead of tabs, providing better space utilization on larger screens - Tabs remain visible on smaller screens with existing tabbed interface

Adds a mobile-only stack label refresh signal and triggers a short refresh burst after stack taps so labels repaint deterministically while still using authoritative server state. - add RefreshMobileStackLabelsEvent - listen in StructureLayer and rebuild labels when mobile + upgrade mode - emit refresh burst from MobileUI stack tap path - clean pending refresh timers on stack mode off / destroy

Removes attack-bubble anchoring from research priority modal/toast so they stay top-anchored and no longer shift downward during active attacks. Also keeps responsive horizontal alignment behavior: - phone portrait: left aligned - landscape + tablet portrait: centered

El-Magico777 · 2026-02-23T22:31:06Z

replaced by #278

El-Magico777 added this to the v0.2.3 milestone Feb 16, 2026

El-Magico777 self-assigned this Feb 16, 2026

El-Magico777 added the enhancement New feature or request label Feb 16, 2026

El-Magico777 added 2 commits February 16, 2026 21:00

feat(mobile): Implement mobile UI

bfb8090

feat(mobile): Mobile lobby industrial styling

fded6b6

El-Magico777 force-pushed the mobile-ui-magic branch from 4dc9107 to fded6b6 Compare February 16, 2026 20:00

El-Magico777 added 4 commits February 16, 2026 23:16

feat(mobile): tune zoom controls for touch usability

63a25b3

Double zoom button step size for faster tap-based zooming and reduce pinch sensitivity for finer touch control.

fix(i18n): resolve public lobby map names via GameMapType

74d48eb

feat(mobile): landscape and portrait lobby UI

abd0200

docs(mobile): update architecture and feature matrix for lobby UI, zo…

06f899c

…om tuning, and i18n fix

El-Magico777 changed the base branch from v0.2.3 to newai February 20, 2026 20:18

1brucben force-pushed the newai branch from 6ee39d0 to 14ab1f8 Compare February 20, 2026 21:58

El-Magico777 added 7 commits February 21, 2026 23:15

Mobile UI: state-driven loading/spectator/dead visibility

772c0b2

Polish mobile action grid metal styling and unified sheen

ff56a70

Force English default locale on mobile devices

f1c4a6f

Fix mobile save replay flow and modal actions

a04d259

fix(desktop): align map card colors with lobby frame palette on PC

59a1104

El-Magico777 modified the milestones: v0.2.3, v0.3.0 Feb 22, 2026

El-Magico777 linked an issue Feb 22, 2026 that may be closed by this pull request

When land attack and naval attack are both possible also show naval assault #219

Closed

El-Magico777 changed the base branch from newai to v0.2.3 February 22, 2026 17:14

El-Magico777 added 5 commits February 22, 2026 20:07

feat(mobile): add research completion percentages to toast and tab

60d24ec

fix(mobile): show naval assault when land attack is also available

5ccf0b0

This was referenced Feb 22, 2026

in spawn phase on landscape something is preventing you to spawn #225

Closed

add troop counter to Attack ratio slider #220

Closed

El-Magico777 added 3 commits February 22, 2026 23:12

El-Magico777 mentioned this pull request Feb 22, 2026

Move attack bubble to bottom #257

Closed

feat: align mobile top-bar side cutouts on wider screens

6f3de7b

Pins the clock recess to the left edge and settings recess to the right edge on wider mobile portrait screens, while keeping center stats centered. Small-screen behavior remains unchanged.

This was referenced Feb 22, 2026

top bar outer cutouts lined out to left and right on bigger view ports #224

Closed

options mobile on larger screens underneath top bar instead of overlapping #226

Closed

feat: align mobile settings sidebar with responsive top-offset system

ed82900

Updates MobileSettingsSidebar to use the same --m-panel-top-offset token as other mobile overlays, so it opens below the top bar on larger screens instead of overlapping it. Mobile-only change.

El-Magico777 mentioned this pull request Feb 22, 2026

on larger tablet the intel panel can show events and leader board underneath each other #223

Closed

El-Magico777 added 2 commits February 23, 2026 00:28

This was referenced Feb 23, 2026

Priority research model popup on tablets, (it should be in the middle) #221

Closed

Fix stacking counter delay #222

Closed

El-Magico777 mentioned this pull request Feb 23, 2026

Mobile UI Implementation for Terratomic #278

Draft

5 tasks

El-Magico777 changed the title ~~Mobile UI Implementation for Terratomic~~ dev- Mobile UI Implementation for Terratomic Feb 23, 2026

El-Magico777 closed this Feb 23, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

dev- Mobile UI Implementation for Terratomic#210

dev- Mobile UI Implementation for Terratomic#210
El-Magico777 wants to merge 26 commits intov0.2.3from
mobile-ui-magic

El-Magico777 commented Feb 16, 2026 •

edited

Loading

Uh oh!

El-Magico777 commented Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

El-Magico777 commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Replaced by #278

Mobile UI Implementation for Terratomic

🎯 Player-Facing Overview

🖼️ UI Comparison: Desktop vs Mobile

Desktop UI (Traditional)

Mobile UI (Touch-First)

🏗️ Technical Overview

Architecture

Key Technical Decisions

Performance Optimizations

Testing Coverage

📋 Complete Feature List

Core Gameplay Actions

Building & Structures

Diplomacy

Economy & Resources

Intelligence & Communication

Research & Technology

Controls & Navigation

Attack & Battle Feedback

Settings & Game Management

Responsive Scaling

Haptic Feedback (Configurable)

🎨 Mobile Lobby Industrial Styling (Separate Commit)

📊 Statistics

Code Metrics

Component Breakdown

Device Compatibility

🔗 Related Documentation

🚀 Testing & Validation

Unit Tests

Manual Testing Checklist

🎯 Commit Structure

Commit 1: feat(mobile): Implement mobile UI (abf1e39)

Commit 2: feat(mobile): Mobile lobby industrial styling (9baffa4)

✨ Summary

Please complete the following:

Please put your Discord username so you can be contacted if a bug or regression is found:

Uh oh!

El-Magico777 commented Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

El-Magico777 commented Feb 16, 2026 •

edited

Loading

Commit 1: `feat(mobile): Implement mobile UI` (`abf1e39`)

Commit 2: `feat(mobile): Mobile lobby industrial styling` (`9baffa4`)