create-pika-minigame 2.6.2 → 2.6.4

package/bin/cli.js

@@ -274,6 +274,7 @@ ${colors.reset}
     'typescript': '~5.3.0',
     'serve': '^14.2.0',
     'eslint': '^8.0.0',
+    'pika-minigame-sdk': '^1.0.0',
   };
 
   // Add build and deploy scripts (use pika-build.sh for MF compatibility)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pika-minigame",
-  "version": "2.6.2",
+  "version": "2.6.4",
   "description": "CLI to scaffold Pika mini-game projects (bare React Native 0.77)",
   "author": "Pika Team",
   "license": "MIT",

package/templates/dev/MockHost.ts

@@ -13,6 +13,10 @@ let recordingStartTime = 0;
 
 // Configure mock behavior (edit these for testing)
 const MOCK_CONFIG = {
+  // Mock access token for API calls (replace with real token for testing)
+  accessToken: '__DEV_TOKEN__',
+  // Mock user ID
+  userId: 'dev-user-123',
   // Set to a number (0-100) to always return this score, or null for random
   fixedScore: null as number | null,
   // Minimum recording time in ms (like real API)
@@ -48,6 +52,16 @@ const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
  * Edit these to test different scenarios.
  */
 export const mockHost: HostBridge = {
+  auth: {
+    getAccessToken: () => {
+      console.log('[MockHost] getAccessToken called');
+      return MOCK_CONFIG.accessToken;
+    },
+    getUserId: () => {
+      console.log('[MockHost] getUserId called');
+      return MOCK_CONFIG.userId;
+    },
+  },
   pronunciation: {
     startRecording: async () => {
       if (isRecording) {
@@ -128,6 +142,7 @@ export const mockHost: HostBridge = {
  * Mock host that always fails - useful for testing error states.
  */
 export const mockHostWithErrors: HostBridge = {
+  auth: mockHost.auth,
   pronunciation: {
     startRecording: async () => {
       throw new Error('Microphone permission denied');
@@ -143,6 +158,7 @@ export const mockHostWithErrors: HostBridge = {
  * Mock host with slow responses - useful for testing loading states.
  */
 export const mockHostSlow: HostBridge = {
+  auth: mockHost.auth,
   pronunciation: {
     startRecording: async () => {
       await delay(2000);

package/templates/scripts/deploy-vercel.sh

@@ -135,9 +135,11 @@ cat > "$BUILD_DIR/index.html" << EOF
 </html>
 EOF
 
-# Create vercel.json for proper routing
+# Create vercel.json with project name for proper routing
+# Using project name ensures each game gets its own Vercel project
 cat > "$BUILD_DIR/vercel.json" << EOF
 {
+  "name": "${PROJECT_NAME}",
   "headers": [
     {
       "source": "/(.*)",

package/templates/scripts/pika-build.sh

@@ -2,8 +2,8 @@
 #
 # Pika Mini-Game Build Script
 #
-# Builds the mini-game using the Pika host's build environment to ensure
-# Module Federation compatibility.
+# Builds the mini-game for Module Federation compatibility.
+# Uses pika-minigame-sdk if installed, otherwise falls back to host repo.
 #
 # Usage:
 #   ./scripts/pika-build.sh ios
@@ -16,28 +16,44 @@ PLATFORM=${1:-ios}
 
 SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 PROJECT_DIR="$(dirname "$SCRIPT_DIR")"
-PROJECT_NAME=$(node -e "console.log(require('./app.json').name)" 2>/dev/null || basename "$PROJECT_DIR" | sed 's/-/_/g')
-
-# Pika host repo - contains the correct node_modules
-# Change this to your robotapp location or set PIKA_HOST_DIR env var
-PIKA_HOST_DIR="${PIKA_HOST_DIR:-$HOME/robotapp}"
+PROJECT_NAME=$(node -e "console.log(require('./package.json').name || require('./app.json').name)" 2>/dev/null || basename "$PROJECT_DIR" | sed 's/-/_/g')
+SCOPE=$(echo "$PROJECT_NAME" | sed 's/-/_/g' | tr '[:upper:]' '[:lower:]')
 
 echo "🎮 Pika Mini-Game Builder"
 echo "========================="
-echo "Project: ${PROJECT_NAME}"
+echo "Project: ${PROJECT_NAME} (scope: ${SCOPE})"
 echo "Platform: ${PLATFORM}"
-echo "Host dir: ${PIKA_HOST_DIR}"
 echo ""
 
+# Method 1: Check for pika-minigame-sdk (preferred)
+SDK_PATH="${PROJECT_DIR}/node_modules/pika-minigame-sdk"
+if [ -d "$SDK_PATH" ]; then
+    echo "📦 Using pika-minigame-sdk"
+
+    # Set public path if MF_PUBLIC_PATH is set
+    PUBLIC_PATH_ARG=""
+    if [ -n "$MF_PUBLIC_PATH" ]; then
+        PUBLIC_PATH_ARG="--public-path $MF_PUBLIC_PATH"
+    fi
+
+    npx pika-build ${PLATFORM} ${PUBLIC_PATH_ARG}
+    exit 0
+fi
+
+# Method 2: Fall back to Pika host repo
+PIKA_HOST_DIR="${PIKA_HOST_DIR:-$HOME/robotapp}"
+
+echo "📁 Using host repo: ${PIKA_HOST_DIR}"
+
 # Verify host directory exists
 if [ ! -d "${PIKA_HOST_DIR}/node_modules/@callstack/repack" ]; then
-    echo "❌ Error: Pika host not found at ${PIKA_HOST_DIR}"
     echo ""
-    echo "Please either:"
-    echo "  1. Set PIKA_HOST_DIR environment variable to your robotapp location"
-    echo "  2. Or clone robotapp to ~/robotapp and run 'npm install'"
+    echo "❌ Error: Build environment not found"
+    echo ""
+    echo "Please install pika-minigame-sdk:"
+    echo "  npm install pika-minigame-sdk --save-dev"
     echo ""
-    echo "Example:"
+    echo "Or set PIKA_HOST_DIR to your robotapp location:"
     echo "  export PIKA_HOST_DIR=/path/to/robotapp"
     echo "  ./scripts/pika-build.sh ios"
     exit 1
@@ -72,8 +88,8 @@ cat > "${WORKSPACE_DIR}/package.json" << EOF
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build:ios": "npx react-native webpack-bundle --platform ios --entry-file index.js --dev false --bundle-output build/outputs/ios/local/index.ios.bundle --assets-dest build/outputs/ios/local",
-    "build:android": "npx react-native webpack-bundle --platform android --entry-file index.js --dev false --bundle-output build/outputs/android/local/index.android.bundle --assets-dest build/outputs/android/local"
+    "build:ios": "npx react-native webpack-bundle --platform ios --entry-file index.js --dev false",
+    "build:android": "npx react-native webpack-bundle --platform android --entry-file index.js --dev false"
   },
   "peerDependencies": {
     "react": "18.3.1",

package/templates/src/App.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { TopBar, Button, Card } from './components';
 import { semantic, space, typography, color, radius } from './tokens';
 import { GameProps, Screen } from './types';
+import { getAccessToken, getUserId } from './hooks/useHostBridge';
 
 /**
  * {{PROJECT_NAME_PASCAL}} - Main App Component
@@ -16,6 +17,18 @@ const App: React.FC<GameProps> = ({ onExit, onGameOver, host }) => {
   const [screen, setScreen] = useState<Screen>('home');
   const [score, setScore] = useState(0);
 
+  // Example: Get access token from host (falls back to mock in dev mode)
+  const accessToken = getAccessToken(host);
+  const userId = getUserId(host);
+
+  // Example: Use token for API calls
+  useEffect(() => {
+    if (__DEV__) {
+      console.log('[Game] Access Token:', accessToken ? `${accessToken.substring(0, 20)}...` : 'none');
+      console.log('[Game] User ID:', userId);
+    }
+  }, [accessToken, userId]);
+
   const handleStartGame = useCallback(() => {
     setScreen('game');
     setScore(0);

package/templates/src/hooks/useHostBridge.ts

@@ -0,0 +1,78 @@
+/**
+ * Hook to access host bridge (auth, pronunciation, etc.)
+ * Falls back to mock values when running standalone (not in host app)
+ */
+
+export interface HostAuth {
+  getAccessToken: () => string;
+  getUserId: () => string | null;
+}
+
+export interface HostBridge {
+  auth: HostAuth;
+  pronunciation?: {
+    startRecording: () => Promise<void>;
+    stopAndCheck: (target: string) => Promise<any>;
+    cancel: () => Promise<void>;
+  };
+}
+
+export interface GameBridgeProps {
+  onExit: () => void;
+  onGameOver?: (result: { score: number }) => void;
+  host: HostBridge;
+}
+
+// Mock token for standalone development - replace with your test token
+const MOCK_ACCESS_TOKEN = '__DEV_TOKEN__';
+const MOCK_USER_ID = 'dev-user-123';
+
+/**
+ * Create a mock host bridge for standalone development
+ */
+export function createMockHostBridge(): HostBridge {
+  return {
+    auth: {
+      getAccessToken: () => MOCK_ACCESS_TOKEN,
+      getUserId: () => MOCK_USER_ID,
+    },
+    pronunciation: {
+      startRecording: async () => {
+        console.log('[MockHost] startRecording');
+      },
+      stopAndCheck: async (target: string) => {
+        console.log('[MockHost] stopAndCheck:', target);
+        return { totalScore: 85, words: [] };
+      },
+      cancel: async () => {
+        console.log('[MockHost] cancel');
+      },
+    },
+  };
+}
+
+/**
+ * Get access token from host bridge
+ * @param host - Host bridge from props (undefined when running standalone)
+ * @returns Access token string
+ */
+export function getAccessToken(host?: HostBridge): string {
+  if (host?.auth?.getAccessToken) {
+    return host.auth.getAccessToken();
+  }
+  // Fallback for standalone development
+  console.warn('[useHostBridge] No host bridge, using mock token');
+  return MOCK_ACCESS_TOKEN;
+}
+
+/**
+ * Get user ID from host bridge
+ * @param host - Host bridge from props (undefined when running standalone)
+ * @returns User ID or null
+ */
+export function getUserId(host?: HostBridge): string | null {
+  if (host?.auth?.getUserId) {
+    return host.auth.getUserId();
+  }
+  return MOCK_USER_ID;
+}

package/templates/src/types.ts

@@ -18,6 +18,13 @@ export interface PronunciationResult {
  * In dev mode, this is mocked by MockHost.
  */
 export interface HostBridge {
+  /** Auth info from host app */
+  auth: {
+    /** Get current access token (empty if not logged in) */
+    getAccessToken: () => string;
+    /** Get current user ID (null if not logged in) */
+    getUserId: () => string | null;
+  };
   pronunciation: {
     startRecording: () => Promise<void>;
     stopAndCheck: (target: string) => Promise<PronunciationResult>;