create-pika-minigame 2.6.1 → 2.6.3

package/bin/cli.js

@@ -291,7 +291,26 @@ ${colors.reset}
 
   fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
 
-  log.step(5, 'Project created successfully!');
+  // Step 5: Update .gitignore for Vercel
+  log.step(5, 'Updating .gitignore...');
+  const gitignorePath = path.join(targetDir, '.gitignore');
+  if (fs.existsSync(gitignorePath)) {
+    let gitignore = fs.readFileSync(gitignorePath, 'utf8');
+    if (!gitignore.includes('.vercel-prod-url')) {
+      gitignore += `
+# Vercel
+.vercel
+.vercel-prod-url
+
+# Build outputs
+build/
+`;
+      fs.writeFileSync(gitignorePath, gitignore);
+      log.success('Updated .gitignore');
+    }
+  }
+
+  log.step(6, 'Project created successfully!');
 
   console.log(`
 ${colors.green}Success!${colors.reset} Created ${colors.bright}${pascalName}${colors.reset} at ${targetDir}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-pika-minigame",
-  "version": "2.6.1",
+  "version": "2.6.3",
   "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

@@ -8,17 +8,16 @@ set -e
 # Usage:
 #   ./scripts/deploy-vercel.sh [--prod]
 #
-# Environment variables:
-#   VERCEL_PROD_URL - Production URL (e.g., https://my-game.vercel.app)
-#                     Required for --prod to set correct publicPath
+# First deploy creates a new Vercel project and saves the production URL.
+# Subsequent deploys use the saved URL automatically.
+#
+# To reset and create a new Vercel project:
+#   rm -rf .vercel .vercel-prod-url && ./scripts/deploy-vercel.sh --prod
 #
 # Prerequisites:
 #   - Vercel CLI: npm i -g vercel
 #   - Logged in: vercel login
 #
-# Example:
-#   VERCEL_PROD_URL=https://deploy-pink-mu.vercel.app ./scripts/deploy-vercel.sh --prod
-#
 # =============================================================================
 
 # Colors
@@ -41,16 +40,23 @@ fi
 
 # Parse arguments
 PROD_FLAG=""
+PROD_URL_FILE=".vercel-prod-url"
+
 if [[ "$1" == "--prod" ]]; then
     PROD_FLAG="--prod"
     log_info "Deploying to PRODUCTION"
 
-    # Check for VERCEL_PROD_URL
+    # Check for saved production URL (project-local)
+    if [[ -f "$PROD_URL_FILE" ]]; then
+        SAVED_PROD_URL=$(cat "$PROD_URL_FILE" | tr -d '[:space:]')
+        if [[ -n "$SAVED_PROD_URL" ]]; then
+            log_info "Using saved production URL: $SAVED_PROD_URL"
+            VERCEL_PROD_URL="$SAVED_PROD_URL"
+        fi
+    fi
+
     if [[ -z "$VERCEL_PROD_URL" ]]; then
-        log_warn "VERCEL_PROD_URL not set. Will try to auto-detect, but may not work correctly."
-        log_warn "For reliable deploys, set: VERCEL_PROD_URL=https://your-project.vercel.app"
-    else
-        log_info "Production URL: $VERCEL_PROD_URL"
+        log_info "No saved production URL found. Will detect after first deploy."
     fi
 else
     log_info "Deploying to PREVIEW (add --prod for production)"
@@ -129,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": "/(.*)",
@@ -168,11 +176,12 @@ fi
 # For production, use VERCEL_PROD_URL if set, otherwise try to auto-detect
 if [[ "$PROD_FLAG" == "--prod" ]]; then
     if [[ -n "$VERCEL_PROD_URL" ]]; then
-        # Use the explicitly set production URL
+        # Use the saved/provided production URL
         DEPLOY_URL="$VERCEL_PROD_URL"
-        log_info "Using provided production URL: $DEPLOY_URL"
+        log_info "Using production URL: $DEPLOY_URL"
     else
-        log_info "Trying to detect production alias..."
+        log_info "Detecting production alias from Vercel..."
+
         # Try to get alias from the deployed URL
         PROD_DOMAIN=$(vercel inspect "$DEPLOY_URL" --json 2>/dev/null | node -e "
             const data = JSON.parse(require('fs').readFileSync('/dev/stdin', 'utf8'));
@@ -186,8 +195,13 @@ if [[ "$PROD_FLAG" == "--prod" ]]; then
             DEPLOY_URL="https://$PROD_DOMAIN"
             log_info "Detected production alias: $DEPLOY_URL"
         else
-            log_warn "Could not detect production alias, using deployment URL: $DEPLOY_URL"
+            # Use the deployment URL as-is (first deploy)
+            log_info "Using deployment URL as production URL: $DEPLOY_URL"
         fi
+
+        # Save for future deploys
+        echo "$DEPLOY_URL" > "$PROD_URL_FILE"
+        log_success "Saved production URL to $PROD_URL_FILE"
     fi
 fi
 

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>;