1  # VII Legio — Native Migration Notes
  2  
  3  ## Current Status
  4  The game runs **fully on Expo Web** (`npx expo start --web`) with zero changes.
  5  For iOS/Android (true React Native), the items below need adapting.
  6  
  7  ---
  8  
  9  ## 1. Galaxy Map SVG → react-native-svg
 10  
 11  `GalaxyMap` in `VIILegio.jsx` uses standard HTML `<svg>` tags.
 12  React Native requires importing from `react-native-svg`.
 13  
 14  **Replace the import at the top of VIILegio.jsx:**
 15  ```js
 16  // Add this import for native:
 17  import Svg, { Circle, Line, Polygon, Text as SvgText, G } from 'react-native-svg';
 18  ```
 19  
 20  **Then in GalaxyMap, replace:**
 21  ```jsx
 22  // BEFORE (web)
 23  <svg width={MAP} height={MAP} style={{display:"block"}}>
 24    <circle cx={x} cy={y} r={5} fill={C.amber} />
 25    <line x1={a} y1={b} x2={c} y2={d} stroke={C.cyan} />
 26    <text x={x} y={y} fill={C.amber}>BASE</text>
 27    <polygon points="..." fill={C.green} />
 28  </svg>
 29  
 30  // AFTER (react-native-svg)
 31  <Svg width={MAP} height={MAP}>
 32    <Circle cx={x} cy={y} r={5} fill={C.amber} />
 33    <Line x1={a} y1={b} x2={c} y2={d} stroke={C.cyan} />
 34    <SvgText x={x} y={y} fill={C.amber}>BASE</SvgText>
 35    <Polygon points="..." fill={C.green} />
 36  </Svg>
 37  ```
 38  
 39  All props are identical — just capitalised component names and the `Text` rename.
 40  
 41  ---
 42  
 43  ## 2. Scroll containers
 44  
 45  Web `<div style={{maxHeight:X, overflowY:"auto"}}>` needs to become
 46  `<ScrollView style={{maxHeight:X}}>` in React Native.
 47  
 48  Affected components: `NavigationScreen` planet list, `LogScreen`, `TablesScreen`.
 49  
 50  ---
 51  
 52  ## 3. Text nodes
 53  
 54  Every string must be inside a `<Text>` component in React Native.
 55  Currently all strings are inside `<div>` or `<span>` tags which is web-only.
 56  
 57  A systematic find/replace:
 58  - `<div style={{...base, ...}}>text</div>` → `<Text style={{...base, ...}}>text</Text>`
 59  - `<span style={...}>text</span>` → `<Text style={...}>text</Text>`
 60  
 61  Import `Text` from `react-native`:
 62  ```js
 63  import { View, Text, ScrollView, TouchableOpacity, TextInput } from 'react-native';
 64  ```
 65  
 66  ---
 67  
 68  ## 4. Input fields
 69  
 70  `<input>` → `<TextInput>` from react-native.
 71  
 72  ```jsx
 73  // BEFORE
 74  <input value={name} onChange={e => setName(e.target.value)} style={...} />
 75  
 76  // AFTER
 77  <TextInput value={name} onChangeText={setName} style={...} />
 78  ```
 79  
 80  ---
 81  
 82  ## 5. Buttons
 83  
 84  `<button onClick={fn}>` → `<TouchableOpacity onPress={fn}><Text>...</Text></TouchableOpacity>`
 85  
 86  Or use `Pressable` for more control.
 87  
 88  ---
 89  
 90  ## 6. Fonts
 91  
 92  `fontFamily: 'Courier New'` won't resolve on Android.
 93  Load a monospace font via `expo-font`:
 94  
 95  ```js
 96  import { useFonts } from 'expo-font';
 97  import { SpaceMono_400Regular } from '@expo-google-fonts/space-mono';
 98  
 99  const [fontsLoaded] = useFonts({ SpaceMono_400Regular });
100  ```
101  
102  Then use `fontFamily: 'SpaceMono_400Regular'` throughout.
103  
104  ---
105  
106  ## 7. CSS properties not supported in RN
107  
108  | Web CSS | React Native equivalent |
109  |---|---|
110  | `letterSpacing: "0.3em"` | `letterSpacing: 4` (px only) |
111  | `lineHeight: 1.7` | `lineHeight: 22` (px only) |
112  | `overflowY: "auto"` | Use `<ScrollView>` |
113  | `display: "flex"` | Default in RN, no need to set |
114  | `userSelect: "none"` | Not needed (RN default) |
115  | `transition: "all 0.3s"` | Use `Animated` API |
116  | `cursor: "pointer"` | Not applicable |
117  | `boxSizing: "border-box"` | Not supported |
118  
119  ---
120  
121  ## Recommended migration order
122  
123  1. ✅ Get web working (done)
124  2. Replace `<svg>` with `react-native-svg` in GalaxyMap
125  3. Wrap all text strings in `<Text>`
126  4. Replace `<div>` layout with `<View>`
127  5. Replace `<button>` with `TouchableOpacity`
128  6. Replace `<input>` with `TextInput`
129  7. Replace overflow scroll divs with `<ScrollView>`
130  8. Fix em-unit style values to px
131  9. Load and apply Expo font
132  10. Test on iOS Simulator and Android Emulator
133  
134  ---
135  
136  ## Quick test checklist (web)
137  
138  ```bash
139  npx expo start --web
140  ```
141  
142  - [ ] Main menu loads with save slots
143  - [ ] New mission → setup → rigging → game
144  - [ ] Galaxy map renders and planets are clickable
145  - [ ] Landing → encounter → mission resolution shows table log
146  - [ ] SHIP tab shows component HP bars
147  - [ ] SAVE tab saves/loads correctly
148  - [ ] Auto-save fires every 3 turns
149  - [ ] Load from main menu resumes correctly