create-pika-minigame 1.0.0

package/templates/src/components/TopBar.tsx

@@ -0,0 +1,109 @@
+import React, { useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { semantic, space, typography } from '../tokens';
+
+export type LeftPreset = 'back' | 'close';
+
+export interface TopBarProps {
+  left?: LeftPreset | React.ReactNode;
+  onLeftPress?: () => void;
+  title?: string;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const SIDE_SLOT = 40;
+const BAR_HEIGHT = 56;
+
+function PressableSlot({
+  onPress,
+  accessibilityLabel,
+  children,
+}: {
+  onPress?: () => void;
+  accessibilityLabel: string;
+  children: React.ReactNode;
+}) {
+  const scale = useRef(new Animated.Value(1)).current;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => Animated.timing(scale, { toValue: 0.92, duration: 80, useNativeDriver: true }).start()}
+      onPressOut={() => Animated.spring(scale, { toValue: 1, friction: 8, tension: 200, useNativeDriver: true }).start()}
+      accessibilityLabel={accessibilityLabel}
+      hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
+      style={styles.sideSlot}
+    >
+      <Animated.View style={{ transform: [{ scale }] }}>{children}</Animated.View>
+    </Pressable>
+  );
+}
+
+export function TopBar({ left, onLeftPress, title, center, right, style }: TopBarProps) {
+  const leftNode = (() => {
+    if (!left) return <View style={styles.sideSlot} />;
+    if (left === 'back') {
+      return (
+        <PressableSlot onPress={onLeftPress} accessibilityLabel="Back">
+          <Text style={styles.backIcon}>←</Text>
+        </PressableSlot>
+      );
+    }
+    if (left === 'close') {
+      return (
+        <PressableSlot onPress={onLeftPress} accessibilityLabel="Close">
+          <Text style={styles.closeIcon}>✕</Text>
+        </PressableSlot>
+      );
+    }
+    return <View style={styles.sideSlot}>{left}</View>;
+  })();
+
+  const centerNode = (() => {
+    if (center) return <View style={styles.center}>{center}</View>;
+    if (title) {
+      return (
+        <View style={styles.center}>
+          <Text style={styles.title} numberOfLines={1}>{title}</Text>
+        </View>
+      );
+    }
+    return <View style={styles.center} />;
+  })();
+
+  const rightNode = right ? <View style={styles.rightSlot}>{right}</View> : <View style={styles.sideSlot} />;
+
+  return (
+    <SafeAreaView edges={['top']} style={[styles.safeArea, style]}>
+      <View style={styles.row}>
+        {leftNode}
+        {centerNode}
+        {rightNode}
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: { backgroundColor: semantic.bg },
+  row: { height: BAR_HEIGHT, flexDirection: 'row', alignItems: 'center', paddingHorizontal: space[3] },
+  sideSlot: { width: SIDE_SLOT, height: SIDE_SLOT, alignItems: 'center', justifyContent: 'center' },
+  rightSlot: { minWidth: SIDE_SLOT, height: SIDE_SLOT, alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row' },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: space[2] },
+  title: { color: semantic.text, fontSize: typography.title2.size, fontWeight: typography.title2.fontWeight, textAlign: 'center' },
+  backIcon: { color: semantic.textSecondary, fontSize: 20 },
+  closeIcon: { color: semantic.textSecondary, fontSize: 16 },
+});
+
+export default TopBar;

package/templates/src/components/index.ts

@@ -0,0 +1,11 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardPadding } from './Card';
+
+export { TopBar } from './TopBar';
+export type { TopBarProps, LeftPreset } from './TopBar';
+
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize } from './Spinner';

package/templates/src/tokens.ts

@@ -0,0 +1,109 @@
+/**
+ * Mini-game design tokens — aligned with Pika Design System.
+ * Dark theme variant for immersive game experience.
+ */
+
+export const color = {
+  // Pika brand primary
+  cyan: {
+    100: '#A5E1EB',
+    200: '#78D2E1',
+    400: '#46C4D7',
+    500: '#3AABBC',
+    600: '#2E95A4',
+  },
+  // Error / destructive / recording state
+  red: {
+    100: '#FFDFE0',
+    400: '#FF4B4B',
+    500: '#EA2B2B',
+    light: '#FF8A80',
+  },
+  // Success / good score
+  green: {
+    400: '#2E7D32',
+    500: '#1B5E20',
+  },
+  // Medium score
+  orange: {
+    400: '#FF9600',
+    500: '#B26A00',
+  },
+  // Dark theme neutrals
+  neutral: {
+    900: '#0B0B0B',
+    800: '#1A1A1A',
+    700: '#2A2A2A',
+    600: '#3A3A3A',
+    500: 'rgba(255,255,255,0.6)',
+    400: 'rgba(255,255,255,0.4)',
+    200: 'rgba(255,255,255,0.14)',
+    100: 'rgba(255,255,255,0.08)',
+  },
+  white: '#FFFFFF',
+} as const;
+
+export const semantic = {
+  primary: color.cyan[400],
+  primaryDark: color.cyan[600],
+  error: color.red[400],
+  errorLight: color.red.light,
+  success: color.green[400],
+  warning: color.orange[500],
+  recording: color.red[400],
+  bg: color.neutral[900],
+  surface: color.neutral[100],
+  surfaceElevated: color.neutral[200],
+  text: color.white,
+  textSecondary: color.neutral[500],
+  textDisabled: color.neutral[400],
+} as const;
+
+export const space = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  10: 40,
+  12: 48,
+  14: 56,
+  16: 64,
+  24: 96,
+} as const;
+
+export const radius = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  '2xl': 24,
+  '3xl': 32,
+  pill: 9999,
+} as const;
+
+export const typography = {
+  display: { size: 64, fontWeight: '900' as const },
+  wordDisplay: { size: 52, fontWeight: '800' as const },
+  title1: { size: 28, fontWeight: '800' as const },
+  title2: { size: 17, fontWeight: '700' as const },
+  body: { size: 16, fontWeight: '400' as const },
+  bodyBold: { size: 15, fontWeight: '700' as const },
+  caption: { size: 14, fontWeight: '600' as const },
+  label: { size: 13, lineHeight: 18 },
+  tag: { size: 12, fontWeight: '400' as const },
+  icon: { lg: 44, md: 28, sm: 24 },
+} as const;
+
+export const sizing = {
+  micButton: 96,
+  gameIcon: 56,
+  minTouch: 44,
+} as const;
+
+export const scoreColor = (score: number): string =>
+  score >= 80 ? color.green[400] : score >= 50 ? color.orange[500] : color.red[400];

package/templates/src/types.ts

@@ -0,0 +1,53 @@
+/**
+ * Type definitions for Pika mini-game host bridge.
+ * These types define the contract between mini-game and host app.
+ */
+
+export interface LetterScore {
+  letter: string;
+  score: number;
+}
+
+export interface PronunciationResult {
+  totalScore: number;
+  words: { word: string; score: number; letters: LetterScore[] }[];
+}
+
+/**
+ * Host bridge interface - provided by the main app.
+ * In dev mode, this is mocked by MockHost.
+ */
+export interface HostBridge {
+  pronunciation: {
+    startRecording: () => Promise<void>;
+    stopAndCheck: (target: string) => Promise<PronunciationResult>;
+    cancel: () => Promise<void>;
+  };
+  // Add more capabilities here as needed:
+  // audio: { play: (url: string) => Promise<void>; stop: () => void; };
+  // haptics: { impact: (style: 'light' | 'medium' | 'heavy') => void; };
+  // analytics: { track: (event: string, props?: object) => void; };
+}
+
+/**
+ * Props passed to the mini-game App component.
+ */
+export interface GameProps {
+  /** Called when user wants to exit the game */
+  onExit?: () => void;
+  /** Called when game ends with a result */
+  onGameOver?: (result: { score: number }) => void;
+  /** Host bridge for native capabilities (undefined in standalone dev mode uses mock) */
+  host?: HostBridge;
+}
+
+/**
+ * Navigation screens in your mini-game.
+ * Add more screens as your game grows.
+ */
+export type Screen = 'home' | 'game' | 'result';
+
+/**
+ * Game phase states.
+ */
+export type Phase = 'idle' | 'playing' | 'checking' | 'result' | 'error';

package/templates/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "build"]
+}