create-pika-minigame 1.0.0 → 1.1.0

package/bin/cli.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const { execSync, spawn } = require('child_process');
 
 // Colors for terminal output
 const colors = {
@@ -35,13 +36,12 @@ ${colors.bright}Options:${colors.reset}
 ${colors.bright}Examples:${colors.reset}
   npx create-pika-minigame my-awesome-game
   npx create-pika-minigame pronunciation-game
-  npx create-pika-minigame quiz-game
 
 ${colors.bright}After creation:${colors.reset}
   cd <project-name>
-  yarn install
-  yarn dev        # Run with mock host (standalone)
-  yarn build:ios  # Build for production
+  npm install
+  cd ios && pod install && cd ..
+  npm run ios     # Run on iOS simulator
 `);
 }
 
@@ -50,13 +50,6 @@ function showVersion() {
   console.log(pkg.version);
 }
 
-function toKebabCase(str) {
-  return str
-    .replace(/([a-z])([A-Z])/g, '$1-$2')
-    .replace(/[\s_]+/g, '-')
-    .toLowerCase();
-}
-
 function toPascalCase(str) {
   return str
     .split(/[-_\s]+/)
@@ -64,11 +57,13 @@ function toPascalCase(str) {
     .join('');
 }
 
-function toSnakeCase(str) {
-  return str
-    .replace(/([a-z])([A-Z])/g, '$1_$2')
-    .replace(/[\s-]+/g, '_')
-    .toLowerCase();
+function runCommand(command, cwd = process.cwd()) {
+  try {
+    execSync(command, { cwd, stdio: 'inherit' });
+    return true;
+  } catch (error) {
+    return false;
+  }
 }
 
 function copyDir(src, dest, replacements = {}) {
@@ -98,10 +93,56 @@ function copyDir(src, dest, replacements = {}) {
   }
 }
 
+function patchPodfile(projectDir) {
+  const podfilePath = path.join(projectDir, 'ios', 'Podfile');
+
+  if (!fs.existsSync(podfilePath)) {
+    log.warn('Podfile not found, skipping patch');
+    return;
+  }
+
+  let content = fs.readFileSync(podfilePath, 'utf8');
+
+  // Add fmt fix to post_install
+  const fmtFix = `
+    # Fix fmt library compatibility with newer Xcode
+    installer.pods_project.targets.each do |target|
+      target.build_configurations.each do |config|
+        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= ['$(inherited)']
+        config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] << 'FMT_USE_CONSTEVAL=0'
+      end
+    end`;
+
+  // Insert before the last 'end' in post_install
+  if (content.includes('react_native_post_install')) {
+    content = content.replace(
+      /(react_native_post_install\([^)]+\))/,
+      `$1\n${fmtFix}`
+    );
+    fs.writeFileSync(podfilePath, content);
+    log.success('Patched Podfile with fmt fix');
+  }
+}
+
+function createPostInstallScript(projectDir) {
+  const scriptContent = `#!/bin/bash
+# Fix fmt consteval issue for Xcode compatibility
+FMT_BASE_H="ios/Pods/fmt/include/fmt/base.h"
+if [ -f "$FMT_BASE_H" ]; then
+  sed -i '' 's/__apple_build_version__ < 14000029L/__apple_build_version__/' "$FMT_BASE_H"
+  echo "Patched fmt base.h for Xcode compatibility"
+fi
+`;
+
+  const scriptPath = path.join(projectDir, 'scripts', 'fix-fmt.sh');
+  fs.mkdirSync(path.join(projectDir, 'scripts'), { recursive: true });
+  fs.writeFileSync(scriptPath, scriptContent);
+  fs.chmodSync(scriptPath, '755');
+}
+
 function main() {
   const args = process.argv.slice(2);
 
-  // Handle flags
   if (args.includes('--help') || args.includes('-h') || args.length === 0) {
     showHelp();
     process.exit(0);
@@ -127,6 +168,7 @@ function main() {
   }
 
   const targetDir = path.resolve(process.cwd(), projectName);
+  const pascalName = toPascalCase(projectName);
 
   if (fs.existsSync(targetDir)) {
     log.error(`Directory "${projectName}" already exists.`);
@@ -143,44 +185,93 @@ ${colors.bright}${colors.cyan}
 ${colors.reset}
 `);
 
-  log.info(`Creating a new Pika mini-game in ${colors.bright}${targetDir}${colors.reset}`);
+  log.info(`Creating a new Pika mini-game: ${colors.bright}${pascalName}${colors.reset}`);
 
-  const kebabName = toKebabCase(projectName);
-  const pascalName = toPascalCase(projectName);
-  const snakeName = toSnakeCase(projectName);
+  // Step 1: Create React Native project
+  log.step(1, 'Creating React Native 0.77 project...');
+
+  const initSuccess = runCommand(
+    `npx @react-native-community/cli init ${pascalName} --version 0.77.0 --directory "${projectName}" --skip-install`,
+    process.cwd()
+  );
+
+  if (!initSuccess) {
+    log.error('Failed to create React Native project');
+    process.exit(1);
+  }
+
+  // Step 2: Copy Pika mini-game source files
+  log.step(2, 'Adding Pika mini-game template files...');
+
+  const templatesDir = path.join(__dirname, '..', 'templates');
+  const srcTemplateDir = path.join(templatesDir, 'src');
+  const devTemplateDir = path.join(templatesDir, 'dev');
 
   const replacements = {
     PROJECT_NAME: projectName,
-    PROJECT_NAME_KEBAB: kebabName,
     PROJECT_NAME_PASCAL: pascalName,
-    PROJECT_NAME_SNAKE: snakeName,
-    YEAR: new Date().getFullYear().toString(),
   };
 
-  log.step(1, 'Creating project structure...');
+  // Copy src folder
+  if (fs.existsSync(srcTemplateDir)) {
+    copyDir(srcTemplateDir, path.join(targetDir, 'src'), replacements);
+  }
 
-  const templatesDir = path.join(__dirname, '..', 'templates');
-  copyDir(templatesDir, targetDir, replacements);
+  // Copy dev folder
+  if (fs.existsSync(devTemplateDir)) {
+    copyDir(devTemplateDir, path.join(targetDir, 'dev'), replacements);
+  }
+
+  // Step 3: Patch Podfile for fmt compatibility
+  log.step(3, 'Patching for Xcode compatibility...');
+  patchPodfile(targetDir);
+  createPostInstallScript(targetDir);
 
-  log.step(2, 'Project created successfully!');
+  // Step 4: Update package.json with additional dependencies
+  log.step(4, 'Updating package.json...');
+
+  const pkgPath = path.join(targetDir, 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+
+  pkg.dependencies = {
+    ...pkg.dependencies,
+    'react-native-gesture-handler': '~2.20.0',
+    'react-native-reanimated': '~3.16.0',
+    'react-native-safe-area-context': '4.12.0',
+  };
+
+  pkg.scripts = {
+    ...pkg.scripts,
+    'fix-fmt': './scripts/fix-fmt.sh',
+    'postinstall:ios': 'cd ios && pod install && cd .. && npm run fix-fmt',
+  };
+
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+  log.step(5, 'Project created successfully!');
 
   console.log(`
-${colors.green}Success!${colors.reset} Created ${colors.bright}${projectName}${colors.reset} at ${targetDir}
+${colors.green}Success!${colors.reset} Created ${colors.bright}${pascalName}${colors.reset} at ${targetDir}
 
 ${colors.bright}Next steps:${colors.reset}
 
   ${colors.cyan}cd ${projectName}${colors.reset}
-  ${colors.cyan}yarn install${colors.reset}
+  ${colors.cyan}npm install --legacy-peer-deps${colors.reset}
+  ${colors.cyan}cd ios && pod install && cd ..${colors.reset}
+  ${colors.cyan}./scripts/fix-fmt.sh${colors.reset}   ${colors.yellow}# Fix Xcode compatibility${colors.reset}
+  ${colors.cyan}npm run ios${colors.reset}
 
 ${colors.bright}Available commands:${colors.reset}
 
-  ${colors.cyan}yarn dev${colors.reset}          Start development with mock host (standalone)
-  ${colors.cyan}yarn build:ios${colors.reset}   Build for iOS production
-  ${colors.cyan}yarn build:android${colors.reset} Build for Android production
-  ${colors.cyan}yarn deploy${colors.reset}      Deploy to CDN (requires setup)
+  ${colors.cyan}npm run ios${colors.reset}       Run on iOS simulator
+  ${colors.cyan}npm run android${colors.reset}   Run on Android emulator
+  ${colors.cyan}npm start${colors.reset}         Start Metro bundler
+
+${colors.bright}Project structure:${colors.reset}
 
-${colors.bright}Documentation:${colors.reset}
-  See README.md in your project for detailed instructions.
+  src/           Game source code (edit this!)
+  dev/           Development helpers (MockHost)
+  scripts/       Build scripts
 
 Happy coding! ${colors.yellow}🎮${colors.reset}
 `);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pika-minigame",
-  "version": "1.0.0",
-  "description": "CLI to scaffold Pika mini-game projects with standalone dev environment",
+  "version": "1.1.0",
+  "description": "CLI to scaffold Pika mini-game projects (bare React Native 0.77)",
   "author": "Pika Team",
   "license": "MIT",
   "bin": {

package/templates/README.md

@@ -1,25 +1,27 @@
 # {{PROJECT_NAME_PASCAL}}
 
-A Pika mini-game built with React Native and Module Federation.
+Pika Mini-Game built with React Native 0.77
 
 ## Quick Start
 
 ```bash
 # Install dependencies
-yarn install
+npm install --legacy-peer-deps
 
-# Run in development mode (standalone with mock host)
-yarn dev
+# iOS setup
+cd ios && pod install && cd ..
 
-# Build for production
-yarn build:ios
-yarn build:android
+# Fix Xcode compatibility (IMPORTANT!)
+./scripts/fix-fmt.sh
+
+# Run
+npm run ios
 ```
 
 ## Project Structure
 
 ```
-{{PROJECT_NAME_KEBAB}}/
+{{PROJECT_NAME}}/
 ├── src/                    # Your game source code
 │   ├── App.tsx             # Main entry component
 │   ├── tokens.ts           # Design system tokens
@@ -30,26 +32,34 @@ yarn build:android
 │       ├── TopBar.tsx
 │       └── Spinner.tsx
 │
-├── dev/                    # Standalone development
-│   ├── index.js            # Dev entry point
-│   ├── DevApp.tsx          # Wrapper with mock host
+├── dev/                    # Development helpers
 │   └── MockHost.ts         # Mock native capabilities
 │
-├── index.js                # Production entry (Module Federation)
-├── rspack.config.mjs       # Re.Pack bundler config
-├── app.json                # Expo config (for dev mode)
+├── scripts/                # Build scripts
+│   └── fix-fmt.sh          # Xcode compatibility fix
+│
+├── ios/                    # iOS native code
+├── android/                # Android native code
 └── package.json
 ```
 
 ## Development
 
-### Running Standalone
+### Running on iOS
+
+```bash
+# Terminal 1: Start Metro
+npm start
+
+# Terminal 2: Run app
+npm run ios
+```
 
-The `yarn dev` command runs your mini-game as a standalone Expo app with a mocked host bridge. This lets you:
+### Running on Android
 
-- Develop without the main Pika app
-- Test UI and game logic independently
-- See console logs for mock API calls
+```bash
+npm run android
+```
 
 ### Mock Host
 
@@ -58,7 +68,7 @@ Edit `dev/MockHost.ts` to customize mock behavior:
 ```typescript
 // Return specific scores for testing
 stopAndCheck: async (word) => ({
-  totalScore: 95,  // Always high score
+  totalScore: 95,
   words: [{ word, score: 95, letters: [...] }]
 })
 
@@ -66,9 +76,6 @@ stopAndCheck: async (word) => ({
 startRecording: async () => {
   throw new Error('Microphone permission denied');
 }
-
-// Add delays for loading state testing
-await delay(3000);
 ```
 
 ## Design System
@@ -82,13 +89,13 @@ import { color, semantic, space, radius, typography } from './tokens';
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: semantic.bg,        // Dark background
-    padding: space[4],                   // 16px
-    borderRadius: radius.lg,             // 16px
+    backgroundColor: semantic.bg,
+    padding: space[4],
+    borderRadius: radius.lg,
   },
   title: {
-    color: semantic.text,                // White
-    fontSize: typography.title1.size,    // 28
+    color: semantic.text,
+    fontSize: typography.title1.size,
     fontWeight: typography.title1.fontWeight,
   },
 });
@@ -101,18 +108,9 @@ Pre-built components in `src/components/`:
 ```typescript
 import { Button, Card, TopBar, Spinner } from './components';
 
-// Button variants: primary, secondary, danger, ghost
 <Button label="Start" variant="primary" size="lg" onPress={...} />
-
-// Card with press interaction
-<Card onPress={...}>
-  <Text>Tap me</Text>
-</Card>
-
-// TopBar with back/close buttons
+<Card onPress={...}><Text>Tap me</Text></Card>
 <TopBar left="back" onLeftPress={goBack} title="Game" />
-
-// Loading spinner
 <Spinner size="lg" color={color.cyan[400]} />
 ```
 
@@ -130,67 +128,45 @@ interface HostBridge {
 }
 ```
 
-Usage in your game:
+Usage:
 
 ```typescript
 const App: React.FC<GameProps> = ({ host }) => {
   const startRecording = async () => {
     await host?.pronunciation.startRecording();
   };
-
-  const checkPronunciation = async (word: string) => {
-    const result = await host?.pronunciation.stopAndCheck(word);
-    console.log('Score:', result.totalScore);
-  };
 };
 ```
 
-## Building for Production
+## Troubleshooting
 
-### 1. Build the bundle
+### Xcode fmt errors
 
 ```bash
-# iOS
-yarn build:ios
-
-# Android
-yarn build:android
+./scripts/fix-fmt.sh
+# Then in Xcode: Cmd+Shift+K (Clean), Cmd+R (Run)
 ```
 
-### 2. Serve locally for testing
+### Metro port in use
 
 ```bash
-yarn serve:ios   # Serves on http://localhost:9000
+lsof -ti:8081 | xargs kill -9
+npm start
 ```
 
-### 3. Deploy to CDN
+### Pod install fails
 
-Edit `package.json` to add your deployment command:
-
-```json
-{
-  "scripts": {
-    "deploy:ios": "MF_PUBLIC_PATH=https://your-cdn.com/games/{{PROJECT_NAME_KEBAB}}/ yarn build:ios && <your-deploy-command>"
-  }
-}
+```bash
+cd ios
+rm -rf Pods Podfile.lock
+pod install
+cd ..
 ```
 
 ## Integration with Pika App
 
-Once deployed, the main Pika app can load your mini-game:
-
-```typescript
-// In the host app
-const game = await loadRemote('{{PROJECT_NAME_SNAKE}}/App');
-```
-
-## Tips
-
-1. **Test on real devices** - Mock host simulates behavior, but test on device for real performance
-2. **Keep it fast** - Mini-games should load instantly; minimize bundle size
-3. **Handle errors** - Always check if `host` is defined before using
-4. **Dark theme** - Default tokens are dark-themed for immersive game feel
+Once ready, this mini-game can be loaded via Module Federation in the main Pika app.
 
-## License
+---
 
-MIT © {{YEAR}} Pika Team
+Created with `create-pika-minigame` v1.1.0

package/templates/app.json.template

@@ -4,11 +4,8 @@
     "slug": "{{PROJECT_NAME_KEBAB}}",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
     "userInterfaceStyle": "dark",
     "splash": {
-      "image": "./assets/splash.png",
-      "resizeMode": "contain",
       "backgroundColor": "#0B0B0B"
     },
     "ios": {
@@ -16,14 +13,7 @@
       "bundleIdentifier": "com.pika.minigame.{{PROJECT_NAME_KEBAB}}"
     },
     "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#0B0B0B"
-      },
       "package": "com.pika.minigame.{{PROJECT_NAME_SNAKE}}"
-    },
-    "plugins": [
-      "expo-router"
-    ]
+    }
   }
 }

package/templates/metro.config.js

@@ -0,0 +1,15 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// Isolate this project - don't resolve from parent directories
+config.watchFolders = [projectRoot];
+config.resolver.nodeModulesPaths = [path.resolve(projectRoot, 'node_modules')];
+
+// Disable looking up in parent directories
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;