create-pika-minigame 2.6.2 → 2.6.3

package/package.json

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

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