@umituz/react-native-mascot 1.0.1

package/src/infrastructure/managers/MascotFactory.ts

@@ -0,0 +1,239 @@
+/**
+ * Mascot Factory
+ * Creates pre-configured mascot instances
+ */
+
+import { Mascot } from '../../domain/entities/Mascot';
+import type { MascotConfig, MascotType } from '../../domain/types/MascotTypes';
+
+export class MascotFactory {
+  /**
+   * Create a mascot from predefined template
+   */
+  static createFromTemplate(
+    template: MascotTemplate,
+    customizations?: Partial<MascotConfig>
+  ): Mascot {
+    const config = this._getTemplateConfig(template);
+    const finalConfig = this._mergeConfigs(config, customizations);
+    return new Mascot(finalConfig);
+  }
+
+  /**
+   * Create a custom mascot
+   */
+  static createCustom(config: MascotConfig): Mascot {
+    return new Mascot(config);
+  }
+
+  /**
+   * Create a simple mascot with minimal configuration
+   */
+  static createSimple(options: {
+    id?: string;
+    name?: string;
+    type?: MascotType;
+    baseColor?: string;
+  }): Mascot {
+    const config: MascotConfig = {
+      id: options.id || 'simple-mascot',
+      name: options.name || 'Simple Mascot',
+      type: options.type || 'svg',
+      personality: {
+        mood: 'happy',
+        energy: 0.7,
+        friendliness: 0.8,
+        playfulness: 0.6,
+      },
+      appearance: {
+        baseColor: options.baseColor || '#FF6B6B',
+        accentColor: '#4ECDC4',
+        accessories: [],
+        style: 'minimal',
+        scale: 1,
+      },
+      animations: this._getDefaultAnimations(),
+      interactive: true,
+      touchEnabled: true,
+      soundEnabled: false,
+    };
+
+    return new Mascot(config);
+  }
+
+  // Private Methods
+  private static _getTemplateConfig(template: MascotTemplate): MascotConfig {
+    const templates: Record<MascotTemplate, MascotConfig> = {
+      'friendly-bot': {
+        id: 'friendly-bot',
+        name: 'Friendly Bot',
+        type: 'lottie',
+        personality: {
+          mood: 'happy',
+          energy: 0.8,
+          friendliness: 0.9,
+          playfulness: 0.7,
+        },
+        appearance: {
+          baseColor: '#4A90E2',
+          accentColor: '#50E3C2',
+          accessories: [],
+          style: 'cartoon',
+          scale: 1,
+        },
+        animations: this._getDefaultAnimations(),
+        interactive: true,
+        touchEnabled: true,
+        soundEnabled: false,
+      },
+      'cute-pet': {
+        id: 'cute-pet',
+        name: 'Cute Pet',
+        type: 'svg',
+        personality: {
+          mood: 'excited',
+          energy: 0.9,
+          friendliness: 1.0,
+          playfulness: 0.95,
+        },
+        appearance: {
+          baseColor: '#FFB6C1',
+          accentColor: '#FF69B4',
+          secondaryColor: '#FFF',
+          accessories: [
+            { id: 'bow', type: 'bow', color: '#FF69B4', visible: true },
+          ],
+          style: 'cartoon',
+          scale: 1,
+        },
+        animations: this._getDefaultAnimations(),
+        interactive: true,
+        touchEnabled: true,
+        soundEnabled: false,
+      },
+      'wise-owl': {
+        id: 'wise-owl',
+        name: 'Wise Owl',
+        type: 'lottie',
+        personality: {
+          mood: 'thinking',
+          energy: 0.4,
+          friendliness: 0.7,
+          playfulness: 0.3,
+        },
+        appearance: {
+          baseColor: '#8B4513',
+          accentColor: '#DAA520',
+          accessories: [
+            { id: 'glasses', type: 'glasses', visible: true },
+          ],
+          style: 'realistic',
+          scale: 1,
+        },
+        animations: this._getDefaultAnimations(),
+        interactive: true,
+        touchEnabled: true,
+        soundEnabled: false,
+      },
+      'pixel-hero': {
+        id: 'pixel-hero',
+        name: 'Pixel Hero',
+        type: 'svg',
+        personality: {
+          mood: 'happy',
+          energy: 0.85,
+          friendliness: 0.75,
+          playfulness: 0.8,
+        },
+        appearance: {
+          baseColor: '#3498DB',
+          accentColor: '#E74C3C',
+          secondaryColor: '#F1C40F',
+          accessories: [
+            { id: 'crown', type: 'crown', color: '#F1C40F', visible: true },
+          ],
+          style: 'pixel',
+          scale: 1,
+        },
+        animations: this._getDefaultAnimations(),
+        interactive: true,
+        touchEnabled: true,
+        soundEnabled: false,
+      },
+    };
+
+    return templates[template];
+  }
+
+  private static _mergeConfigs(
+    base: MascotConfig,
+    custom?: Partial<MascotConfig>
+  ): MascotConfig {
+    if (!custom) {
+      return base;
+    }
+
+    return {
+      ...base,
+      ...custom,
+      id: custom.id || base.id,
+      personality: {
+        ...base.personality,
+        ...custom.personality,
+      },
+      appearance: {
+        ...base.appearance,
+        ...custom.appearance,
+        accessories: custom.appearance?.accessories || base.appearance.accessories,
+      },
+      animations: custom.animations || base.animations,
+    };
+  }
+
+  private static _getDefaultAnimations() {
+    return [
+      {
+        id: 'idle',
+        name: 'Idle',
+        type: 'idle' as const,
+        source: 'idle.json',
+        loop: true,
+        autoplay: true,
+      },
+      {
+        id: 'wave',
+        name: 'Wave',
+        type: 'action' as const,
+        source: 'wave.json',
+        loop: false,
+      },
+      {
+        id: 'jump',
+        name: 'Jump',
+        type: 'action' as const,
+        source: 'jump.json',
+        loop: false,
+      },
+      {
+        id: 'success',
+        name: 'Success',
+        type: 'reaction' as const,
+        source: 'success.json',
+        loop: false,
+      },
+      {
+        id: 'error',
+        name: 'Error',
+        type: 'reaction' as const,
+        source: 'error.json',
+        loop: false,
+      },
+    ];
+  }
+}
+
+export type MascotTemplate =
+  | 'friendly-bot'
+  | 'cute-pet'
+  | 'wise-owl'
+  | 'pixel-hero';

package/src/infrastructure/repositories/MascotRepository.ts

@@ -0,0 +1,93 @@
+/**
+ * Mascot Repository Implementation
+ * In-memory repository with support for persistence (can be extended)
+ */
+
+import type { IMascotRepository } from '../../domain/interfaces/IMascotRepository';
+import type { MascotConfig } from '../../domain/types/MascotTypes';
+import { Mascot } from '../../domain/entities/Mascot';
+
+export class MascotRepository implements IMascotRepository {
+  private readonly _storage: Map<string, MascotConfig>;
+  private readonly _mascotCache: Map<string, Mascot>;
+
+  constructor() {
+    this._storage = new Map();
+    this._mascotCache = new Map();
+  }
+
+  save(config: MascotConfig): Promise<void> {
+    this._storage.set(config.id, config);
+    this._mascotCache.delete(config.id); // Invalidate cache
+    return Promise.resolve();
+  }
+
+  load(id: string): Promise<Mascot | null> {
+    // Check cache first
+    if (this._mascotCache.has(id)) {
+      return Promise.resolve(this._mascotCache.get(id)!);
+    }
+
+    const config = this._storage.get(id);
+    if (!config) {
+      return Promise.resolve(null);
+    }
+
+    const mascot = new Mascot(config);
+    this._mascotCache.set(id, mascot);
+    return Promise.resolve(mascot);
+  }
+
+  async loadAll(): Promise<Mascot[]> {
+    const mascots: Mascot[] = [];
+    for (const config of this._storage.values()) {
+      const mascot = await this.load(config.id);
+      if (mascot !== null) {
+        mascots.push(mascot);
+      }
+    }
+    return mascots;
+  }
+
+  delete(id: string): Promise<void> {
+    this._storage.delete(id);
+    this._mascotCache.delete(id);
+    return Promise.resolve();
+  }
+
+  update(id: string, config: Partial<MascotConfig>): Promise<void> {
+    const existing = this._storage.get(id);
+    if (!existing) {
+      throw new Error(`Mascot ${id} not found`);
+    }
+
+    const updated: MascotConfig = {
+      ...existing,
+      ...config,
+      id, // Ensure ID cannot be changed
+    };
+
+    this._storage.set(id, updated);
+    this._mascotCache.delete(id);
+    return Promise.resolve();
+  }
+
+  exists(id: string): Promise<boolean> {
+    return Promise.resolve(this._storage.has(id));
+  }
+
+  /**
+   * Clear all stored mascots
+   */
+  clear(): void {
+    this._storage.clear();
+    this._mascotCache.clear();
+  }
+
+  /**
+   * Get storage size
+   */
+  get size(): number {
+    return this._storage.size;
+  }
+}

package/src/presentation/components/MascotView.tsx

@@ -0,0 +1,296 @@
+/**
+ * MascotView Component
+ * Main component for rendering mascots
+ */
+
+import React, { useRef, useEffect, useState } from 'react';
+import { View, StyleSheet, Animated, TouchableOpacity, ViewStyle } from 'react-native';
+import LottieView from 'lottie-react-native';
+import type { AnimationObject } from 'lottie-react-native';
+import { Svg } from 'react-native-svg';
+import type { Mascot } from '../../domain/entities/Mascot';
+import type { MascotAnimation } from '../../domain/types/MascotTypes';
+
+type LottieAnimationSource = string | AnimationObject | { uri: string };
+
+export interface MascotViewProps {
+  mascot: Mascot | null;
+  animation?: MascotAnimation | null;
+  size?: number;
+  style?: ViewStyle;
+  testID?: string;
+  onPress?: () => void;
+  onLongPress?: () => void;
+  onAnimationFinish?: () => void;
+  resizeMode?: 'cover' | 'contain' | 'center';
+}
+
+export const MascotView: React.FC<MascotViewProps> = ({
+  mascot,
+  animation,
+  size = 200,
+  style,
+  testID = 'mascot-view',
+  onPress,
+  onLongPress,
+  onAnimationFinish,
+  resizeMode = 'contain',
+}) => {
+  const [opacity] = useState(new Animated.Value(0));
+  const [scale] = useState(new Animated.Value(0));
+
+  useEffect(() => {
+    if (mascot?.state.isVisible) {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.spring(scale, {
+          toValue: 1,
+          friction: 8,
+          tension: 40,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    } else {
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [mascot?.state.isVisible, opacity, scale]);
+
+  const handlePress = () => {
+    if (mascot?.touchEnabled && onPress) {
+      onPress();
+    }
+  };
+
+  const handleLongPress = () => {
+    if (mascot?.touchEnabled && onLongPress) {
+      onLongPress();
+    }
+  };
+
+  if (!mascot || !mascot.state.isVisible) {
+    return null;
+  }
+
+  const animatedStyle = {
+    opacity,
+    transform: [{ scale }],
+  };
+
+  const containerStyle = [
+    styles.container,
+    { width: size, height: size },
+    style,
+  ];
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      testID={testID}
+    >
+      <TouchableOpacity
+        style={containerStyle}
+        onPress={handlePress}
+        onLongPress={handleLongPress}
+        disabled={!mascot.touchEnabled}
+        activeOpacity={0.8}
+      >
+        {mascot.type === 'lottie' ? (
+          <LottieMascot
+            mascot={mascot}
+            animation={animation}
+            resizeMode={resizeMode}
+            onAnimationFinish={onAnimationFinish}
+          />
+        ) : (
+          <SVGMascot
+            mascot={mascot}
+            size={size}
+          />
+        )}
+      </TouchableOpacity>
+    </Animated.View>
+  );
+};
+
+// Lottie Mascot Component
+interface LottieMascotProps {
+  mascot: Mascot;
+  animation?: MascotAnimation | null;
+  resizeMode?: 'cover' | 'contain' | 'center';
+  onAnimationFinish?: () => void;
+}
+
+const LottieMascot: React.FC<LottieMascotProps> = ({
+  mascot,
+  animation,
+  resizeMode = 'contain',
+  onAnimationFinish,
+}) => {
+  const lottieRef = useRef<LottieView>(null);
+
+  useEffect(() => {
+    if (animation && lottieRef.current) {
+      lottieRef.current.play();
+    }
+  }, [animation]);
+
+  const source = animation?.source || mascot.animations.find((a) => a.type === 'idle')?.source;
+
+  if (!source) {
+    return <FallbackMascot mascot={mascot} />;
+  }
+
+  return (
+    <LottieView
+      ref={lottieRef}
+      source={source as LottieAnimationSource}
+      style={styles.lottie}
+      resizeMode={resizeMode}
+      autoPlay={animation?.autoplay}
+      loop={animation?.loop}
+      onAnimationFinish={onAnimationFinish}
+    />
+  );
+};
+
+// SVG Mascot Component
+interface SVGMascotProps {
+  mascot: Mascot;
+  size: number;
+}
+
+const SVGMascot: React.FC<SVGMascotProps> = ({ mascot, size }) => {
+  const { appearance } = mascot;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 100 100">
+      {/* Base shape */}
+      <circle
+        cx="50"
+        cy="50"
+        r="40"
+        fill={appearance.baseColor}
+      />
+      {/* Accent */}
+      <circle
+        cx="50"
+        cy="50"
+        r="35"
+        fill={appearance.accentColor}
+        opacity="0.3"
+      />
+      {/* Face */}
+      <circle cx="35" cy="40" r="5" fill="#000" />
+      <circle cx="65" cy="40" r="5" fill="#000" />
+      {/* Mouth based on mood */}
+      <MoodMood mood={mascot.personality.mood} />
+    </Svg>
+  );
+};
+
+// Mood-based mouth
+interface MoodMoodProps {
+  mood: string;
+}
+
+const MoodMood: React.FC<MoodMoodProps> = ({ mood }) => {
+  switch (mood) {
+    case 'happy':
+    case 'excited':
+      return (
+        <path
+          d="M 35 60 Q 50 75 65 60"
+          stroke="#000"
+          strokeWidth="3"
+          fill="none"
+        />
+      );
+    case 'sad':
+    case 'angry':
+      return (
+        <path
+          d="M 35 70 Q 50 55 65 70"
+          stroke="#000"
+          strokeWidth="3"
+          fill="none"
+        />
+      );
+    case 'surprised':
+      return (
+        <circle
+          cx="50"
+          cy="65"
+          r="8"
+          fill="#000"
+        />
+      );
+    case 'thinking':
+      return (
+        <path
+          d="M 40 65 L 60 65"
+          stroke="#000"
+          strokeWidth="3"
+          fill="none"
+        />
+      );
+    default:
+      return (
+        <path
+          d="M 40 65 L 60 65"
+          stroke="#000"
+          strokeWidth="3"
+          fill="none"
+        />
+      );
+  }
+};
+
+// Fallback Mascot
+interface FallbackMascotProps {
+  mascot: Mascot;
+}
+
+const FallbackMascot: React.FC<FallbackMascotProps> = ({ mascot }) => {
+  const { appearance } = mascot;
+
+  return (
+    <View style={[styles.fallback, { backgroundColor: appearance.baseColor }]}>
+      <View style={[styles.eye, { left: '30%' }]} />
+      <View style={[styles.eye, { right: '30%' }]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  lottie: {
+    width: '100%',
+    height: '100%',
+  },
+  fallback: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  eye: {
+    position: 'absolute',
+    width: 10,
+    height: 10,
+    backgroundColor: '#000',
+    borderRadius: 5,
+    top: '40%',
+  },
+});