@umituz/react-native-mascot 1.0.1

package/src/presentation/contexts/MascotContext.tsx

@@ -0,0 +1,141 @@
+/**
+ * Mascot Context
+ * Provides mascot state and functionality to components
+ */
+
+import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
+import { Mascot } from '../../domain/entities/Mascot';
+import type { MascotConfig, MascotMood } from '../../domain/types/MascotTypes';
+import { MascotFactory } from '../../infrastructure/managers/MascotFactory';
+import { AnimationController } from '../../infrastructure/controllers/AnimationController';
+import type { AnimationOptions } from '../../domain/interfaces/IAnimationController';
+
+export interface MascotContextValue {
+  mascot: Mascot | null;
+  isPlaying: boolean;
+  currentAnimation: string | null;
+  initializeMascot: (config: MascotConfig) => void;
+  initializeFromTemplate: (template: string, customizations?: Partial<MascotConfig>) => void;
+  setMood: (mood: MascotMood) => void;
+  playAnimation: (animationId: string, options?: AnimationOptions) => Promise<void>;
+  stopAnimation: () => void;
+  updateAppearance: (appearance: Partial<MascotConfig['appearance']>) => void;
+  setVisible: (visible: boolean) => void;
+}
+
+const MascotContext = createContext<MascotContextValue | undefined>(undefined);
+
+export interface MascotProviderProps extends React.PropsWithChildren {
+  initialConfig?: MascotConfig;
+  template?: string;
+}
+
+export const MascotProvider: React.FC<MascotProviderProps> = ({
+  children,
+  initialConfig: _initialConfig,
+  template: _template,
+}) => {
+  const [mascot, setMascot] = useState<Mascot | null>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentAnimation, setCurrentAnimation] = useState<string | null>(null);
+  const animationControllerRef = useRef<AnimationController | null>(null);
+
+  const initializeMascot = useCallback((config: MascotConfig) => {
+    const newMascot = new Mascot(config);
+    setMascot(newMascot);
+    if (!animationControllerRef.current) {
+      animationControllerRef.current = new AnimationController();
+    }
+  }, []);
+
+  const initializeFromTemplate = useCallback((
+    templateName: string,
+    customizations?: Partial<MascotConfig>
+  ) => {
+    const template = templateName as 'friendly-bot' | 'cute-pet' | 'wise-owl' | 'pixel-hero';
+    const newMascot = MascotFactory.createFromTemplate(template, customizations);
+    setMascot(newMascot);
+    if (!animationControllerRef.current) {
+      animationControllerRef.current = new AnimationController();
+    }
+  }, []);
+
+  const setMood = useCallback((mood: MascotMood) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setMood(mood);
+      return prev.clone();
+    });
+  }, []);
+
+  const playAnimation = useCallback(async (animationId: string, options?: AnimationOptions) => {
+    if (!mascot || !animationControllerRef.current) return;
+
+    const animation = mascot.getAnimation(animationId);
+    if (!animation) {
+      console.warn(`Animation ${animationId} not found`);
+      return;
+    }
+
+    setIsPlaying(true);
+    setCurrentAnimation(animationId);
+
+    if (animationControllerRef.current) {
+      await animationControllerRef.current.play(animation, options);
+    }
+
+    setIsPlaying(false);
+    setCurrentAnimation(null);
+  }, [mascot]);
+
+  const stopAnimation = useCallback(() => {
+    if (animationControllerRef.current) {
+      animationControllerRef.current.stop();
+    }
+    setIsPlaying(false);
+    setCurrentAnimation(null);
+  }, []);
+
+  const updateAppearance = useCallback((appearance: Partial<MascotConfig['appearance']>) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.updateAppearance(appearance);
+      return prev.clone();
+    });
+  }, []);
+
+  const setVisible = useCallback((visible: boolean) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setVisible(visible);
+      return prev.clone();
+    });
+  }, []);
+
+  const value: MascotContextValue = {
+    mascot,
+    isPlaying,
+    currentAnimation,
+    initializeMascot,
+    initializeFromTemplate,
+    setMood,
+    playAnimation,
+    stopAnimation,
+    updateAppearance,
+    setVisible,
+  };
+
+  return (
+    <MascotContext.Provider value={value}>
+      {children}
+    </MascotContext.Provider>
+  );
+};
+
+export const useMascotContext = (): MascotContextValue => {
+  const context = useContext(MascotContext);
+  if (!context) {
+    throw new Error('useMascotContext must be used within a MascotProvider');
+  }
+  return context;
+};

package/src/presentation/hooks/useMascot.ts

@@ -0,0 +1,224 @@
+/**
+ * useMascot Hook
+ * Main hook for mascot management
+ */
+
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { Mascot } from '../../domain/entities/Mascot';
+import type {
+  MascotConfig,
+  MascotMood,
+  MascotAppearance,
+} from '../../domain/types/MascotTypes';
+import { MascotFactory } from '../../infrastructure/managers/MascotFactory';
+import { AnimationController } from '../../infrastructure/controllers/AnimationController';
+import type { AnimationOptions } from '../../domain/interfaces/IAnimationController';
+
+export interface UseMascotOptions {
+  config?: MascotConfig;
+  template?: string;
+  autoInitialize?: boolean;
+}
+
+export interface UseMascotReturn {
+  mascot: Mascot | null;
+  isReady: boolean;
+  isPlaying: boolean;
+  currentAnimation: string | null;
+  initialize: (config: MascotConfig) => void;
+  initializeFromTemplate: (template: string, customizations?: Partial<MascotConfig>) => void;
+  setMood: (mood: MascotMood) => void;
+  setEnergy: (energy: number) => void;
+  playAnimation: (animationId: string, options?: AnimationOptions) => Promise<void>;
+  stopAnimation: () => void;
+  updateAppearance: (appearance: Partial<MascotAppearance>) => void;
+  setBaseColor: (color: string) => void;
+  setAccentColor: (color: string) => void;
+  addAccessory: (accessory: {
+    id: string;
+    type: string;
+    color?: string;
+    position?: { x: number; y: number };
+  }) => void;
+  removeAccessory: (accessoryId: string) => void;
+  setVisible: (visible: boolean) => void;
+  setPosition: (position: { x: number; y: number }) => void;
+}
+
+export function useMascot(options: UseMascotOptions = {}): UseMascotReturn {
+  const {
+    config: initialConfig,
+    template: initialTemplate,
+    autoInitialize = true,
+  } = options;
+
+  const [mascot, setMascot] = useState<Mascot | null>(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentAnimation, setCurrentAnimation] = useState<string | null>(null);
+
+  const animationControllerRef = useRef<AnimationController | null>(null);
+
+  // Initialize mascot
+  const initialize = useCallback((config: MascotConfig) => {
+    const newMascot = new Mascot(config);
+    setMascot(newMascot);
+    setIsReady(true);
+    if (!animationControllerRef.current) {
+      animationControllerRef.current = new AnimationController();
+    }
+  }, []);
+
+  const initializeFromTemplate = useCallback((
+    template: string,
+    customizations?: Partial<MascotConfig>
+  ) => {
+    const newMascot = MascotFactory.createFromTemplate(
+      template as 'friendly-bot' | 'cute-pet' | 'wise-owl' | 'pixel-hero',
+      customizations
+    );
+    setMascot(newMascot);
+    setIsReady(true);
+    if (!animationControllerRef.current) {
+      animationControllerRef.current = new AnimationController();
+    }
+  }, []);
+
+  // Mood management
+  const setMood = useCallback((mood: MascotMood) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setMood(mood);
+      return prev.clone();
+    });
+  }, []);
+
+  const setEnergy = useCallback((energy: number) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setEnergy(energy);
+      return prev.clone();
+    });
+  }, []);
+
+  // Animation management
+  const playAnimation = useCallback(async (animationId: string, options?: AnimationOptions) => {
+    if (!mascot || !animationControllerRef.current) return;
+
+    const animation = mascot.getAnimation(animationId);
+    if (!animation) {
+      console.warn(`Animation ${animationId} not found`);
+      return;
+    }
+
+    setIsPlaying(true);
+    setCurrentAnimation(animationId);
+
+    if (animationControllerRef.current) {
+      await animationControllerRef.current.play(animation, options);
+    }
+
+    setIsPlaying(false);
+    setCurrentAnimation(null);
+  }, [mascot]);
+
+  const stopAnimation = useCallback(() => {
+    if (animationControllerRef.current) {
+      animationControllerRef.current.stop();
+    }
+    setIsPlaying(false);
+    setCurrentAnimation(null);
+  }, []);
+
+  // Appearance management
+  const updateAppearance = useCallback((appearance: Partial<MascotAppearance>) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.updateAppearance(appearance);
+      return prev.clone();
+    });
+  }, []);
+
+  const setBaseColor = useCallback((color: string) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setBaseColor(color);
+      return prev.clone();
+    });
+  }, []);
+
+  const setAccentColor = useCallback((color: string) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setAccentColor(color);
+      return prev.clone();
+    });
+  }, []);
+
+  const addAccessory = useCallback((accessory: {
+    id: string;
+    type: string;
+    color?: string;
+    position?: { x: number; y: number };
+  }) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.addAccessory(accessory);
+      return prev.clone();
+    });
+  }, []);
+
+  const removeAccessory = useCallback((accessoryId: string) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.removeAccessory(accessoryId);
+      return prev.clone();
+    });
+  }, []);
+
+  // Visibility and position
+  const setVisible = useCallback((visible: boolean) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setVisible(visible);
+      return prev.clone();
+    });
+  }, []);
+
+  const setPosition = useCallback((position: { x: number; y: number }) => {
+    setMascot((prev) => {
+      if (!prev) return null;
+      prev.setPosition(position);
+      return prev.clone();
+    });
+  }, []);
+
+  // Auto-initialize
+  useEffect(() => {
+    if (autoInitialize && initialConfig) {
+      initialize(initialConfig);
+    } else if (autoInitialize && initialTemplate) {
+      initializeFromTemplate(initialTemplate);
+    }
+  }, [autoInitialize, initialConfig, initialTemplate, initialize, initializeFromTemplate]);
+
+  return {
+    mascot,
+    isReady,
+    isPlaying,
+    currentAnimation,
+    initialize,
+    initializeFromTemplate,
+    setMood,
+    setEnergy,
+    playAnimation,
+    stopAnimation,
+    updateAppearance,
+    setBaseColor,
+    setAccentColor,
+    addAccessory,
+    removeAccessory,
+    setVisible,
+    setPosition,
+  };
+}

package/src/presentation/hooks/useMascotAnimation.ts

@@ -0,0 +1,168 @@
+/**
+ * useMascotAnimation Hook
+ * Advanced animation control with queue and sequencing
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import type { Mascot } from '../../domain/entities/Mascot';
+import type { AnimationSpeed } from '../../domain/types/MascotTypes';
+import { AnimationController } from '../../infrastructure/controllers/AnimationController';
+import type { AnimationOptions } from '../../domain/interfaces/IAnimationController';
+
+export interface UseMascotAnimationOptions {
+  mascot: Mascot | null;
+  autoplay?: boolean;
+  queue?: boolean;
+  speed?: AnimationSpeed;
+}
+
+export interface UseMascotAnimationReturn {
+  isPlaying: boolean;
+  currentAnimation: string | null;
+  progress: number;
+  queue: string[];
+  play: (animationId: string, options?: AnimationOptions) => Promise<void>;
+  pause: () => void;
+  resume: () => void;
+  stop: () => void;
+  setSpeed: (speed: number) => void;
+  setProgress: (progress: number) => void;
+  queueAnimation: (animationId: string) => void;
+  clearQueue: () => void;
+  playSequence: (animationIds: string[]) => Promise<void>;
+  processQueue: () => Promise<void>;
+}
+
+const SPEED_MULTIPLIERS: Record<AnimationSpeed, number> = {
+  'very-slow': 0.25,
+  'slow': 0.5,
+  'normal': 1,
+  'fast': 1.5,
+  'very-fast': 2,
+};
+
+export function useMascotAnimation(
+  options: UseMascotAnimationOptions
+): UseMascotAnimationReturn {
+  const { mascot, speed = 'normal' } = options;
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentAnimation, setCurrentAnimation] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [queue, setQueue] = useState<string[]>([]);
+
+  const animationControllerRef = useRef<AnimationController | null>(null);
+  const isProcessingQueueRef = useRef(false);
+
+  // Initialize animation controller
+  if (!animationControllerRef.current) {
+    animationControllerRef.current = new AnimationController();
+  }
+
+  // Setup progress tracking
+  const animationController = animationControllerRef.current;
+  animationController.on('progress', (data: unknown) => {
+    const { progress: newProgress } = data as { progress: number };
+    setProgress(newProgress);
+  });
+
+  const play = useCallback(async (animationId: string, options?: AnimationOptions) => {
+    if (!mascot) {
+      console.warn('Mascot not initialized');
+      return;
+    }
+
+    const animation = mascot.getAnimation(animationId);
+    if (!animation) {
+      console.warn(`Animation ${animationId} not found`);
+      return;
+    }
+
+    setIsPlaying(true);
+    setCurrentAnimation(animationId);
+
+    const speedMultiplier = SPEED_MULTIPLIERS[speed];
+    const finalOptions: AnimationOptions = {
+      ...options,
+      speed: (options?.speed || 1) * speedMultiplier,
+    };
+
+    await animationController.play(animation, finalOptions);
+
+    setIsPlaying(false);
+    setCurrentAnimation(null);
+    setProgress(0);
+  }, [mascot, speed, animationController]);
+
+  const pause = useCallback(() => {
+    animationController.pause();
+  }, [animationController]);
+
+  const resume = useCallback(() => {
+    animationController.resume();
+  }, [animationController]);
+
+  const stop = useCallback(() => {
+    animationController.stop();
+    setIsPlaying(false);
+    setCurrentAnimation(null);
+    setProgress(0);
+  }, [animationController]);
+
+  const setSpeed = useCallback((newSpeed: number) => {
+    animationController.setSpeed(newSpeed);
+  }, [animationController]);
+
+  const setProgressValue = useCallback((newProgress: number) => {
+    animationController.setProgress(newProgress);
+    setProgress(newProgress);
+  }, [animationController]);
+
+  const queueAnimation = useCallback((animationId: string) => {
+    setQueue((prev) => [...prev, animationId]);
+  }, []);
+
+  const clearQueue = useCallback(() => {
+    setQueue([]);
+  }, []);
+
+  const playSequence = useCallback(async (animationIds: string[]) => {
+    for (const animationId of animationIds) {
+      await play(animationId);
+    }
+  }, [play]);
+
+  // Process queue automatically
+  const processQueue = useCallback(async () => {
+    if (isProcessingQueueRef.current || queue.length === 0 || !mascot) {
+      return;
+    }
+
+    isProcessingQueueRef.current = true;
+
+    while (queue.length > 0) {
+      const nextAnimation = queue[0];
+      setQueue((prev) => prev.slice(1));
+      await play(nextAnimation);
+    }
+
+    isProcessingQueueRef.current = false;
+  }, [queue, mascot, play]);
+
+  return {
+    isPlaying,
+    currentAnimation,
+    progress,
+    queue,
+    play,
+    pause,
+    resume,
+    stop,
+    setSpeed,
+    setProgress: setProgressValue,
+    queueAnimation,
+    clearQueue,
+    playSequence,
+    processQueue,
+  };
+}