@umituz/react-native-mascot 1.0.3 → 1.0.4

package/src/presentation/hooks/useMascot.ts

@@ -1,22 +1,23 @@
 /**
  * useMascot Hook
- * Main hook for mascot management
+ * Thin wrapper that delegates to MascotService
  */
 
 import { useCallback, useEffect, useState, useRef } from 'react';
-import { Mascot } from '../../domain/entities/Mascot';
+import type { 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';
+import type { MascotService } from '../../application/services/MascotService';
+import { DIContainer } from '../../infrastructure/di/Container';
+import type { MascotTemplate } from '../../application/services/MascotService';
 
 export interface UseMascotOptions {
   config?: MascotConfig;
-  template?: string;
+  template?: MascotTemplate;
   autoInitialize?: boolean;
 }
 
@@ -25,12 +26,18 @@ export interface UseMascotReturn {
   isReady: boolean;
   isPlaying: boolean;
   currentAnimation: string | null;
-  initialize: (config: MascotConfig) => void;
-  initializeFromTemplate: (template: string, customizations?: Partial<MascotConfig>) => void;
+  initialize: (config: MascotConfig) => Promise<void>;
+  fromTemplate: (template: MascotTemplate, customizations?: Partial<MascotConfig>) => Promise<void>;
   setMood: (mood: MascotMood) => void;
   setEnergy: (energy: number) => void;
+  setFriendliness: (friendliness: number) => void;
+  setPlayfulness: (playfulness: number) => void;
+  cheerUp: () => void;
+  boostEnergy: (amount: number) => void;
   playAnimation: (animationId: string, options?: AnimationOptions) => Promise<void>;
   stopAnimation: () => void;
+  pauseAnimation: () => void;
+  resumeAnimation: () => void;
   updateAppearance: (appearance: Partial<MascotAppearance>) => void;
   setBaseColor: (color: string) => void;
   setAccentColor: (color: string) => void;
@@ -46,179 +53,77 @@ export interface UseMascotReturn {
 }
 
 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();
+  const { config: initialConfig, template: initialTemplate, autoInitialize = true } = options;
+
+  const [state, setState] = useState(() => ({
+    mascot: null as Mascot | null,
+    isReady: false,
+    isPlaying: false,
+    currentAnimation: null as string | null,
+  }));
+
+  const serviceRef = useRef<MascotService | null>(null);
+
+  // ✅ Initialize service once
+  if (!serviceRef.current) {
+    const container = DIContainer.getInstance();
+    serviceRef.current = container.getMascotService();
+
+    // Subscribe to service changes
+    serviceRef.current.subscribe(() => {
+      const service = serviceRef.current!;
+      setState({
+        mascot: service.mascot,
+        isReady: service.isReady,
+        isPlaying: service.isPlaying,
+        currentAnimation: service.currentAnimation,
+      });
     });
-  }, []);
-
-  // 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();
-    });
-  }, []);
+  const service = serviceRef.current;
 
-  // Auto-initialize
+  // ✅ Auto-initialize
   useEffect(() => {
     if (autoInitialize && initialConfig) {
-      initialize(initialConfig);
+      service.initialize(initialConfig);
     } else if (autoInitialize && initialTemplate) {
-      initializeFromTemplate(initialTemplate);
+      service.fromTemplate(initialTemplate);
     }
-  }, [autoInitialize, initialConfig, initialTemplate, initialize, initializeFromTemplate]);
+  }, [autoInitialize, initialConfig, initialTemplate]);
 
+  // ✅ All methods delegate to service - NO business logic!
   return {
-    mascot,
-    isReady,
-    isPlaying,
-    currentAnimation,
-    initialize,
-    initializeFromTemplate,
-    setMood,
-    setEnergy,
-    playAnimation,
-    stopAnimation,
-    updateAppearance,
-    setBaseColor,
-    setAccentColor,
-    addAccessory,
-    removeAccessory,
-    setVisible,
-    setPosition,
+    ...state,
+    initialize: useCallback((config: MascotConfig) => service.initialize(config), [service]),
+    fromTemplate: useCallback(
+      (template: MascotTemplate, customizations?: Partial<MascotConfig>) =>
+        service.fromTemplate(template, customizations),
+      [service]
+    ),
+    setMood: useCallback((mood: MascotMood) => service.setMood(mood), [service]),
+    setEnergy: useCallback((energy: number) => service.setEnergy(energy), [service]),
+    setFriendliness: useCallback((friendliness: number) => service.setFriendliness(friendliness), [service]),
+    setPlayfulness: useCallback((playfulness: number) => service.setPlayfulness(playfulness), [service]),
+    cheerUp: useCallback(() => service.cheerUp(), [service]),
+    boostEnergy: useCallback((amount: number) => service.boostEnergy(amount), [service]),
+    playAnimation: useCallback(
+      (animationId: string, opts?: AnimationOptions) => service.playAnimation(animationId, opts),
+      [service]
+    ),
+    stopAnimation: useCallback(() => service.stopAnimation(), [service]),
+    pauseAnimation: useCallback(() => service.pauseAnimation(), [service]),
+    resumeAnimation: useCallback(() => service.resumeAnimation(), [service]),
+    updateAppearance: useCallback((appearance: Partial<MascotAppearance>) => service.updateAppearance(appearance), [service]),
+    setBaseColor: useCallback((color: string) => service.setBaseColor(color), [service]),
+    setAccentColor: useCallback((color: string) => service.setAccentColor(color), [service]),
+    addAccessory: useCallback(
+      (accessory: { id: string; type: string; color?: string; position?: { x: number; y: number } }) =>
+        service.addAccessory(accessory),
+      [service]
+    ),
+    removeAccessory: useCallback((accessoryId: string) => service.removeAccessory(accessoryId), [service]),
+    setVisible: useCallback((visible: boolean) => service.setVisible(visible), [service]),
+    setPosition: useCallback((position: { x: number; y: number }) => service.setPosition(position), [service]),
   };
 }

package/src/presentation/hooks/useMascotAnimation.ts

@@ -1,16 +1,16 @@
 /**
  * useMascotAnimation Hook
- * Advanced animation control with queue and sequencing
+ * Simplified - delegates to MascotService
  */
 
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, 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';
+import type { AnimationSpeed, AnimationOptions } from '../../domain/types/MascotTypes';
+import type { MascotService } from '../../application/services/MascotService';
+import { DIContainer } from '../../infrastructure/di/Container';
 
 export interface UseMascotAnimationOptions {
-  mascot: Mascot | null;
+  mascot?: Mascot | null;
   autoplay?: boolean;
   queue?: boolean;
   speed?: AnimationSpeed;
@@ -42,81 +42,47 @@ const SPEED_MULTIPLIERS: Record<AnimationSpeed, number> = {
 };
 
 export function useMascotAnimation(
-  options: UseMascotAnimationOptions
+  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 container = DIContainer.getInstance();
+  const service = container.getMascotService();
+
+  const play = useCallback(
+    async (animationId: string, options?: AnimationOptions) => {
+      const speedMultiplier = SPEED_MULTIPLIERS[speed];
+      const finalOptions: AnimationOptions = {
+        ...options,
+        speed: (options?.speed || 1) * speedMultiplier,
+      };
+      await service.playAnimation(animationId, finalOptions);
+    },
+    [service, speed]
+  );
 
   const pause = useCallback(() => {
-    animationController.pause();
-  }, [animationController]);
+    service.pauseAnimation();
+  }, [service]);
 
   const resume = useCallback(() => {
-    animationController.resume();
-  }, [animationController]);
+    service.resumeAnimation();
+  }, [service]);
 
   const stop = useCallback(() => {
-    animationController.stop();
-    setIsPlaying(false);
-    setCurrentAnimation(null);
-    setProgress(0);
-  }, [animationController]);
+    service.stopAnimation();
+  }, [service]);
 
-  const setSpeed = useCallback((newSpeed: number) => {
-    animationController.setSpeed(newSpeed);
-  }, [animationController]);
+  const setSpeed = useCallback(() => {
+    // Speed is handled via options in play()
+    console.warn('setSpeed: Use play() with speed option instead');
+  }, []);
 
-  const setProgressValue = useCallback((newProgress: number) => {
-    animationController.setProgress(newProgress);
-    setProgress(newProgress);
-  }, [animationController]);
+  const setProgress = useCallback(() => {
+    // Progress tracking would need AnimationController reference
+    console.warn('setProgress: Not implemented in service layer yet');
+  }, []);
 
   const queueAnimation = useCallback((animationId: string) => {
     setQueue((prev) => [...prev, animationId]);
@@ -126,40 +92,34 @@ export function useMascotAnimation(
     setQueue([]);
   }, []);
 
-  const playSequence = useCallback(async (animationIds: string[]) => {
-    for (const animationId of animationIds) {
-      await play(animationId);
-    }
-  }, [play]);
+  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]);
+  }, [queue, play]);
 
   return {
-    isPlaying,
-    currentAnimation,
-    progress,
+    isPlaying: service.isPlaying,
+    currentAnimation: service.currentAnimation,
+    progress: 0, // Would need AnimationController reference
     queue,
     play,
     pause,
     resume,
     stop,
     setSpeed,
-    setProgress: setProgressValue,
+    setProgress,
     queueAnimation,
     clearQueue,
     playSequence,