create-pika-minigame 1.2.0 → 1.4.0

package/package.json

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

package/templates/README.md

@@ -161,10 +161,46 @@ pod install
 cd ..
 ```
 
+## Deployment
+
+### Deploy to Vercel
+
+```bash
+# Install Vercel CLI (first time only)
+npm i -g vercel
+vercel login
+
+# Deploy preview
+npm run deploy
+
+# Deploy production
+npm run deploy:prod
+```
+
+After deployment, you'll get URLs like:
+```
+https://your-game.vercel.app/ios/mf-manifest.json
+https://your-game.vercel.app/android/mf-manifest.json
+```
+
+### Register with Backend
+
+```json
+{
+  "id": "{{PROJECT_NAME_KEBAB}}",
+  "name": "{{PROJECT_NAME_PASCAL}}",
+  "scope": "{{PROJECT_NAME_SNAKE}}",
+  "module": "./App",
+  "container_url": "https://your-game.vercel.app/ios/mf-manifest.json",
+  "version": "1.0.0",
+  "min_host_version": "1.0.0"
+}
+```
+
 ## Integration with Pika App
 
-Once ready, this mini-game can be loaded via Module Federation in the main Pika app.
+Once deployed and registered, the game will appear in the Pika app's Games hub and can be loaded via Module Federation.
 
 ---
 
-Created with `create-pika-minigame` v1.1.0
+Created with `create-pika-minigame`

package/templates/dev/MockHost.ts

@@ -9,6 +9,19 @@ import { HostBridge, PronunciationResult } from '../src/types';
 
 // Simulate recording state
 let isRecording = false;
+let recordingStartTime = 0;
+
+// Configure mock behavior (edit these for testing)
+const MOCK_CONFIG = {
+  // 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)
+  minRecordingMs: 700,
+  // Simulate network delay range [min, max] ms
+  networkDelay: [800, 1300] as [number, number],
+  // Chance to throw error (0-1), set > 0 to test error handling
+  errorChance: 0,
+};
 
 /**
  * Generate a random score for testing different UI states.
@@ -43,41 +56,56 @@ export const mockHost: HostBridge = {
       }
       console.log('[MockHost] 🎤 Recording started...');
       isRecording = true;
+      recordingStartTime = Date.now();
       // Simulate recording initialization delay
       await delay(100);
     },
 
-    stopAndCheck: async (targetWord: string): Promise<PronunciationResult> => {
+    stopAndCheck: async (targetText: string): Promise<PronunciationResult> => {
       if (!isRecording) {
         console.warn('[MockHost] Not recording');
         throw new Error('Not recording');
       }
 
-      console.log(`[MockHost] 🛑 Recording stopped. Checking: "${targetWord}"`);
+      const elapsed = Date.now() - recordingStartTime;
+      console.log(`[MockHost] 🛑 Recording stopped (${elapsed}ms). Checking: "${targetText}"`);
       isRecording = false;
 
-      // Simulate processing delay (like API call)
-      await delay(800 + Math.random() * 500);
+      // Check minimum recording time (like real API)
+      if (elapsed < MOCK_CONFIG.minRecordingMs) {
+        throw new Error('Giữ nút lâu hơn (1–2 giây) rồi nói to, rõ nhé.');
+      }
 
-      // Generate mock result
-      const wordScore = randomScore(50, 100);
-      const letters = generateLetterScores(targetWord);
-      const totalScore = Math.round(
-        letters.reduce((sum, l) => sum + l.score, 0) / letters.length
+      // Simulate random errors for testing
+      if (MOCK_CONFIG.errorChance > 0 && Math.random() < MOCK_CONFIG.errorChance) {
+        throw new Error('Chưa nghe rõ, thử lại nhé');
+      }
+
+      // Simulate network delay
+      const [minDelay, maxDelay] = MOCK_CONFIG.networkDelay;
+      await delay(minDelay + Math.random() * (maxDelay - minDelay));
+
+      // Split into words (real API does this)
+      const wordList = targetText.trim().split(/\s+/);
+
+      // Generate scores for each word
+      const words = wordList.map((word) => {
+        const letters = generateLetterScores(word);
+        // Use fixed score if configured, otherwise use average of letters
+        const wordScore = MOCK_CONFIG.fixedScore ?? Math.round(
+          letters.reduce((sum, l) => sum + l.score, 0) / letters.length
+        );
+        return { word, score: wordScore, letters };
+      });
+
+      // Total score is average of all words
+      const totalScore = MOCK_CONFIG.fixedScore ?? Math.round(
+        words.reduce((sum, w) => sum + w.score, 0) / words.length
       );
 
-      console.log(`[MockHost] ✅ Score: ${totalScore}`);
-
-      return {
-        totalScore,
-        words: [
-          {
-            word: targetWord,
-            score: wordScore,
-            letters,
-          },
-        ],
-      };
+      console.log(`[MockHost] ✅ Score: ${totalScore} (${words.length} word${words.length > 1 ? 's' : ''})`);
+
+      return { totalScore, words };
     },
 
     cancel: async () => {

package/templates/package.json.template

@@ -3,22 +3,22 @@
   "version": "1.0.0",
   "private": true,
   "description": "Pika mini-game: {{PROJECT_NAME_PASCAL}}",
-  "main": "dev/index.js",
+  "main": "index.js",
   "scripts": {
-    "dev": "expo start",
-    "dev:ios": "expo run:ios",
-    "dev:android": "expo run:android",
-    "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",
+    "start": "react-native start",
+    "ios": "react-native run-ios",
+    "android": "react-native run-android",
+    "build:ios": "npx react-native webpack-bundle --platform ios --entry-file index.js --dev false --bundle-output build/outputs/ios/remotes/{{PROJECT_NAME_SNAKE}}.container.js.bundle",
+    "build:android": "npx react-native webpack-bundle --platform android --entry-file index.js --dev false --bundle-output build/outputs/android/remotes/{{PROJECT_NAME_SNAKE}}.container.js.bundle",
+    "build:all": "npm run build:ios && npm run build:android",
     "serve:ios": "npx serve build/outputs/ios/remotes -l 9000 --cors",
     "serve:android": "npx serve build/outputs/android/remotes -l 9000 --cors",
-    "deploy": "echo 'Configure your deployment in package.json scripts'",
-    "lint": "eslint src/ dev/",
+    "deploy": "./scripts/deploy-vercel.sh",
+    "deploy:prod": "./scripts/deploy-vercel.sh --prod",
+    "lint": "eslint src/",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "expo": "~52.0.0",
-    "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
     "react-native": "0.77.0",
     "react-native-gesture-handler": "~2.20.0",
@@ -29,13 +29,8 @@
   "devDependencies": {
     "@babel/core": "^7.25.0",
     "@callstack/repack": "^5.0.0",
-    "@callstack/repack-plugin-reanimated": "^1.0.0",
     "@types/react": "~18.3.0",
-    "typescript": "~5.3.0"
-  },
-  "peerDependencies": {
-    "react": "18.3.1",
-    "react-native": "0.77.0",
-    "react-native-reanimated": "~3.16.0"
+    "typescript": "~5.3.0",
+    "serve": "^14.2.0"
   }
 }

package/templates/scripts/deploy-vercel.sh

@@ -0,0 +1,202 @@
+#!/bin/bash
+set -e
+
+# =============================================================================
+# Deploy Pika Mini-Game to Vercel
+# =============================================================================
+#
+# Usage:
+#   ./scripts/deploy-vercel.sh [--prod]
+#
+# Prerequisites:
+#   - Vercel CLI: npm i -g vercel
+#   - Logged in: vercel login
+#
+# =============================================================================
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+
+log_info() { echo -e "${CYAN}[INFO]${NC} $1"; }
+log_success() { echo -e "${GREEN}[SUCCESS]${NC} $1"; }
+log_warn() { echo -e "${YELLOW}[WARN]${NC} $1"; }
+log_error() { echo -e "${RED}[ERROR]${NC} $1"; }
+
+# Check if vercel CLI is installed
+if ! command -v vercel &> /dev/null; then
+    log_error "Vercel CLI not found. Install with: npm i -g vercel"
+    exit 1
+fi
+
+# Parse arguments
+PROD_FLAG=""
+if [[ "$1" == "--prod" ]]; then
+    PROD_FLAG="--prod"
+    log_info "Deploying to PRODUCTION"
+else
+    log_info "Deploying to PREVIEW (add --prod for production)"
+fi
+
+# Get project info from package.json
+PROJECT_NAME=$(node -p "require('./package.json').name")
+PROJECT_VERSION=$(node -p "require('./package.json').version")
+
+log_info "Project: $PROJECT_NAME v$PROJECT_VERSION"
+
+# =============================================================================
+# Step 1: Build for all platforms
+# =============================================================================
+log_info "Building mini-game bundles..."
+
+# Create build output directory
+BUILD_DIR="build/deploy"
+rm -rf "$BUILD_DIR"
+mkdir -p "$BUILD_DIR/ios" "$BUILD_DIR/android"
+
+# We'll set MF_PUBLIC_PATH after we know the Vercel URL
+# For now, build with a placeholder that we'll update
+
+log_info "Building iOS bundle..."
+npx react-native webpack-bundle \
+    --platform ios \
+    --entry-file index.js \
+    --dev false \
+    --bundle-output build/outputs/ios/remotes/${PROJECT_NAME//-/_}.container.js.bundle \
+    2>&1 | tail -5
+
+log_info "Building Android bundle..."
+npx react-native webpack-bundle \
+    --platform android \
+    --entry-file index.js \
+    --dev false \
+    --bundle-output build/outputs/android/remotes/${PROJECT_NAME//-/_}.container.js.bundle \
+    2>&1 | tail -5
+
+# Copy to deploy directory with platform subdirs
+cp -r build/outputs/ios/remotes/* "$BUILD_DIR/ios/"
+cp -r build/outputs/android/remotes/* "$BUILD_DIR/android/"
+
+# Create index.html for Vercel (shows deployment info)
+cat > "$BUILD_DIR/index.html" << EOF
+<!DOCTYPE html>
+<html>
+<head>
+    <title>${PROJECT_NAME} - Pika Mini-Game</title>
+    <style>
+        body { font-family: -apple-system, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
+        h1 { color: #0B0B0B; }
+        code { background: #f4f4f4; padding: 2px 8px; border-radius: 4px; }
+        .platform { margin: 20px 0; padding: 15px; background: #f9f9f9; border-radius: 8px; }
+        .platform h3 { margin-top: 0; }
+        a { color: #46C4D7; }
+    </style>
+</head>
+<body>
+    <h1>🎮 ${PROJECT_NAME}</h1>
+    <p>Version: <code>${PROJECT_VERSION}</code></p>
+    <p>Deployed: <code>$(date -u +"%Y-%m-%d %H:%M:%S UTC")</code></p>
+
+    <div class="platform">
+        <h3>📱 iOS</h3>
+        <p>Container: <a href="./ios/${PROJECT_NAME//-/_}.container.js.bundle">ios/${PROJECT_NAME//-/_}.container.js.bundle</a></p>
+        <p>Manifest: <a href="./ios/mf-manifest.json">ios/mf-manifest.json</a></p>
+    </div>
+
+    <div class="platform">
+        <h3>🤖 Android</h3>
+        <p>Container: <a href="./android/${PROJECT_NAME//-/_}.container.js.bundle">android/${PROJECT_NAME//-/_}.container.js.bundle</a></p>
+        <p>Manifest: <a href="./android/mf-manifest.json">android/mf-manifest.json</a></p>
+    </div>
+
+    <h2>Integration</h2>
+    <p>Register this game with your backend:</p>
+    <pre><code>{
+  "scope": "${PROJECT_NAME//-/_}",
+  "module": "./App",
+  "container_url": "[VERCEL_URL]/ios/mf-manifest.json",
+  "version": "${PROJECT_VERSION}"
+}</code></pre>
+</body>
+</html>
+EOF
+
+# Create vercel.json for proper routing
+cat > "$BUILD_DIR/vercel.json" << EOF
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Access-Control-Allow-Origin", "value": "*" },
+        { "key": "Access-Control-Allow-Methods", "value": "GET, OPTIONS" },
+        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
+      ]
+    }
+  ]
+}
+EOF
+
+log_success "Build complete: $BUILD_DIR"
+
+# =============================================================================
+# Step 2: Deploy to Vercel
+# =============================================================================
+log_info "Deploying to Vercel..."
+
+# Deploy and capture the URL
+DEPLOY_OUTPUT=$(vercel "$BUILD_DIR" $PROD_FLAG --yes 2>&1)
+DEPLOY_URL=$(echo "$DEPLOY_OUTPUT" | grep -E "https://" | tail -1 | tr -d ' ')
+
+if [[ -z "$DEPLOY_URL" ]]; then
+    log_error "Failed to get deployment URL"
+    echo "$DEPLOY_OUTPUT"
+    exit 1
+fi
+
+log_success "Deployed to: $DEPLOY_URL"
+
+# =============================================================================
+# Step 3: Show integration info
+# =============================================================================
+echo ""
+echo "=============================================="
+echo -e "${GREEN}🎉 Deployment Complete!${NC}"
+echo "=============================================="
+echo ""
+echo -e "URL: ${CYAN}$DEPLOY_URL${NC}"
+echo ""
+echo "iOS manifest:     $DEPLOY_URL/ios/mf-manifest.json"
+echo "Android manifest: $DEPLOY_URL/android/mf-manifest.json"
+echo ""
+echo "Register with backend API:"
+echo ""
+cat << EOF
+{
+  "id": "${PROJECT_NAME}",
+  "name": "${PROJECT_NAME}",
+  "scope": "${PROJECT_NAME//-/_}",
+  "module": "./App",
+  "container_url": "$DEPLOY_URL/ios/mf-manifest.json",
+  "version": "${PROJECT_VERSION}",
+  "min_host_version": "1.0.0"
+}
+EOF
+echo ""
+
+# Save deployment info
+cat > "deploy-info.json" << EOF
+{
+  "url": "$DEPLOY_URL",
+  "project": "$PROJECT_NAME",
+  "version": "$PROJECT_VERSION",
+  "deployed_at": "$(date -u +"%Y-%m-%dT%H:%M:%SZ")",
+  "ios_manifest": "$DEPLOY_URL/ios/mf-manifest.json",
+  "android_manifest": "$DEPLOY_URL/android/mf-manifest.json"
+}
+EOF
+
+log_success "Deployment info saved to deploy-info.json"