@umituz/react-native-mascot 1.0.1

package/src/infrastructure/assets/lottie/dance.json

@@ -0,0 +1,61 @@
+{
+  "v": "5.9.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 120,
+  "w": 200,
+  "h": 200,
+  "nm": "Dance",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Body",
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "r": { "a": 1, "k": [
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 0, "s": [0] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 15, "s": [15] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 30, "s": [-15] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 45, "s": [15] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 60, "s": [-15] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 75, "s": [15] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 90, "s": [-15] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 105, "s": [15] },
+          { "t": 120, "s": [0] }
+        ]},
+        "p": {
+          "a": 1,
+          "k": [
+            { "i": { "x": 0.833, "y": 0.833 }, "o": { "x": 0.167, "y": 0.167 }, "t": 0, "s": [100, 100] },
+            { "i": { "x": 0.833, "y": 0 }, "o": { "x": 0.167, "y": 1 }, "t": 30, "s": [100, 90] },
+            { "i": { "x": 0.833, "y": 0.833 }, "o": { "x": 0.167, "y": 0.167 }, "t": 60, "s": [100, 100] },
+            { "i": { "x": 0.833, "y": 0 }, "o": { "x": 0.167, "y": 1 }, "t": 90, "s": [100, 90] },
+            { "t": 120, "s": [100, 100] }
+          ]
+        },
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "el",
+              "s": { "a": 0, "k": [150, 150] },
+              "p": { "a": 0, "k": [0, 0] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.95, 0.5, 0.35, 1] }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/infrastructure/assets/lottie/error.json

@@ -0,0 +1,48 @@
+{
+  "v": "5.9.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 60,
+  "w": 200,
+  "h": 200,
+  "nm": "Error",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Body",
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "r": { "a": 1, "k": [
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 0, "s": [0] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 15, "s": [-10] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 30, "s": [10] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 45, "s": [-10] },
+          { "t": 60, "s": [0] }
+        ]},
+        "p": { "a": 0, "k": [100, 100] },
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "el",
+              "s": { "a": 0, "k": [150, 150] },
+              "p": { "a": 0, "k": [0, 0] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.9, 0.3, 0.3, 1] }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/infrastructure/assets/lottie/idle.json

@@ -0,0 +1,49 @@
+{
+  "v": "5.9.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 60,
+  "w": 200,
+  "h": 200,
+  "nm": "Idle",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Body",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "r": {
+          "a": 1,
+          "k": [
+            { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 0, "s": [0] },
+            { "t": 60, "s": [5] }
+          ]
+        },
+        "p": { "a": 0, "k": [100, 100] },
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "el",
+              "s": { "a": 0, "k": [150, 150] },
+              "p": { "a": 0, "k": [0, 0] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.95, 0.5, 0.35, 1] }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/infrastructure/assets/lottie/jump.json

@@ -0,0 +1,48 @@
+{
+  "v": "5.9.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 60,
+  "w": 200,
+  "h": 200,
+  "nm": "Jump",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Body",
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "p": {
+          "a": 1,
+          "k": [
+            { "i": { "x": 0.833, "y": 0.833 }, "o": { "x": 0.167, "y": 0.167 }, "t": 0, "s": [100, 120] },
+            { "i": { "x": 0.833, "y": 0 }, "o": { "x": 0.167, "y": 1 }, "t": 30, "s": [100, 60] },
+            { "t": 60, "s": [100, 120] }
+          ]
+        },
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "el",
+              "s": { "a": 0, "k": [150, 150] },
+              "p": { "a": 0, "k": [0, 0] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.95, 0.5, 0.35, 1] }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/infrastructure/assets/lottie/success.json

@@ -0,0 +1,46 @@
+{
+  "v": "5.9.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 90,
+  "w": 200,
+  "h": 200,
+  "nm": "Success",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Body",
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "r": { "a": 1, "k": [
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 0, "s": [0] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 45, "s": [360] },
+          { "t": 90, "s": [360] }
+        ]},
+        "p": { "a": 0, "k": [100, 100] },
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "el",
+              "s": { "a": 0, "k": [150, 150] },
+              "p": { "a": 0, "k": [0, 0] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.2, 0.8, 0.4, 1] }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/infrastructure/assets/lottie/wave.json

@@ -0,0 +1,46 @@
+{
+  "v": "5.9.0",
+  "fr": 60,
+  "ip": 0,
+  "op": 90,
+  "w": 200,
+  "h": 200,
+  "nm": "Wave",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Body",
+      "ks": {
+        "o": { "a": 0, "k": 100 },
+        "r": { "a": 1, "k": [
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 0, "s": [-20] },
+          { "i": { "x": [0.833], "y": [0.833] }, "o": { "x": [0.167], "y": [0.167] }, "t": 30, "s": [20] },
+          { "t": 60, "s": [-20] }
+        ]},
+        "p": { "a": 0, "k": [100, 100] },
+        "a": { "a": 0, "k": [0, 0] },
+        "s": { "a": 0, "k": [100, 100] }
+      },
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "ty": "el",
+              "s": { "a": 0, "k": [150, 150] },
+              "p": { "a": 0, "k": [0, 0] }
+            },
+            {
+              "ty": "fl",
+              "c": { "a": 0, "k": [0.95, 0.5, 0.35, 1] }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/infrastructure/assets/svg/cartoon-bot.svg

@@ -0,0 +1,20 @@
+<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Body -->
+  <rect x="25" y="30" width="50" height="45" rx="10" fill="currentColor" id="body"/>
+  <!-- Head -->
+  <rect x="20" y="20" width="60" height="40" rx="8" fill="currentColor" id="head"/>
+  <!-- Antenna -->
+  <line x1="50" y1="20" x2="50" y2="10" stroke="#666" stroke-width="3" id="antenna"/>
+  <circle cx="50" cy="8" r="4" fill="#FF6B6B" id="antenna-ball"/>
+  <!-- Eyes -->
+  <circle cx="35" cy="38" r="8" fill="#FFF" id="left-eye-bg"/>
+  <circle cx="35" cy="38" r="4" fill="#00F" id="left-eye"/>
+  <circle cx="65" cy="38" r="8" fill="#FFF" id="right-eye-bg"/>
+  <circle cx="65" cy="38" r="4" fill="#00F" id="right-eye"/>
+  <!-- Mouth -->
+  <rect x="40" y="48" width="20" height="6" rx="3" fill="#333" id="mouth"/>
+  <!-- Buttons -->
+  <circle cx="40" cy="65" r="3" fill="#FFD700" id="button-1"/>
+  <circle cx="50" cy="65" r="3" fill="#FFD700" id="button-2"/>
+  <circle cx="60" cy="65" r="3" fill="#FFD700" id="button-3"/>
+</svg>

package/src/infrastructure/assets/svg/minimal-cat.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Base face -->
+  <circle cx="50" cy="50" r="40" fill="currentColor" id="face"/>
+  <!-- Ears -->
+  <path d="M 20 30 L 15 15 L 35 25 Z" fill="currentColor" id="left-ear"/>
+  <path d="M 80 30 L 85 15 L 65 25 Z" fill="currentColor" id="right-ear"/>
+  <!-- Eyes -->
+  <circle cx="35" cy="45" r="5" fill="#000" id="left-eye"/>
+  <circle cx="65" cy="45" r="5" fill="#000" id="right-eye"/>
+  <!-- Nose -->
+  <path d="M 48 55 L 52 55 L 50 58 Z" fill="#FF9999" id="nose"/>
+  <!-- Mouth -->
+  <path d="M 45 60 Q 50 65 55 60" stroke="#000" stroke-width="2" fill="none" id="mouth"/>
+  <!-- Whiskers -->
+  <line x1="20" y1="55" x2="35" y2="58" stroke="#000" stroke-width="1" id="left-whisker-1"/>
+  <line x1="20" y1="60" x2="35" y2="60" stroke="#000" stroke-width="1" id="left-whisker-2"/>
+  <line x1="65" y1="58" x2="80" y2="55" stroke="#000" stroke-width="1" id="right-whisker-1"/>
+  <line x1="65" y1="60" x2="80" y2="60" stroke="#000" stroke-width="1" id="right-whisker-2"/>
+</svg>

package/src/infrastructure/controllers/AnimationController.ts

@@ -0,0 +1,163 @@
+/**
+ * Animation Controller Implementation
+ * Controls Lottie and SVG animations with unified API
+ */
+
+import type {
+  IAnimationController,
+  AnimationOptions,
+  AnimationEvent,
+} from '../../domain/interfaces/IAnimationController';
+import type { MascotAnimation } from '../../domain/types/MascotTypes';
+
+export class AnimationController implements IAnimationController {
+  private _currentAnimation: MascotAnimation | null = null;
+  private _isPlaying: boolean = false;
+  private _isPaused: boolean = false;
+  private _progress: number = 0;
+  private _speed: number = 1;
+  private _eventListeners: Map<AnimationEvent, Set<(data?: unknown) => void>>;
+
+  constructor() {
+    this._eventListeners = new Map();
+    this._initializeEventListeners();
+  }
+
+  play(
+    animation: MascotAnimation,
+    options?: AnimationOptions
+  ): Promise<void> {
+    this._currentAnimation = animation;
+    this._isPlaying = true;
+    this._isPaused = false;
+
+    if (options?.speed !== undefined) {
+      this._speed = options.speed;
+    }
+
+    this._emit('start', { animation: animation.id });
+
+    // Simulate animation completion
+    // In real implementation, this would be controlled by LottieView
+    const duration = animation.duration || 2000;
+    const adjustedDuration = duration / this._speed;
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        if (this._isPlaying && !this._isPaused) {
+          this._isPlaying = false;
+          this._progress = 1;
+          this._emit('finish', { animation: animation.id });
+          options?.onFinish?.();
+        }
+        resolve();
+      }, adjustedDuration);
+
+      options?.onStart?.();
+    });
+  }
+
+  pause(): void {
+    if (!this._isPlaying || this._isPaused) {
+      return;
+    }
+
+    this._isPaused = true;
+    this._emit('pause');
+  }
+
+  resume(): void {
+    if (!this._isPaused) {
+      return;
+    }
+
+    this._isPaused = false;
+    this._emit('resume');
+  }
+
+  stop(): void {
+    this._isPlaying = false;
+    this._isPaused = false;
+    this._progress = 0;
+    this._currentAnimation = null;
+  }
+
+  getProgress(): number {
+    return this._progress;
+  }
+
+  setProgress(progress: number): void {
+    if (progress < 0 || progress > 1) {
+      throw new Error('Progress must be between 0 and 1');
+    }
+    this._progress = progress;
+    this._emit('progress', { progress });
+  }
+
+  setSpeed(speed: number): void {
+    if (speed <= 0) {
+      throw new Error('Speed must be greater than 0');
+    }
+    this._speed = speed;
+  }
+
+  isPlaying(): boolean {
+    return this._isPlaying && !this._isPaused;
+  }
+
+  on(event: AnimationEvent, callback: (data?: unknown) => void): () => void {
+    if (!this._eventListeners.has(event)) {
+      this._eventListeners.set(event, new Set());
+    }
+
+    this._eventListeners.get(event)!.add(callback);
+
+    // Return unsubscribe function
+    return () => {
+      this.off(event, callback);
+    };
+  }
+
+  off(event: AnimationEvent, callback: (data?: unknown) => void): void {
+    const listeners = this._eventListeners.get(event);
+    if (listeners) {
+      listeners.delete(callback);
+    }
+  }
+
+  // Private Methods
+  private _initializeEventListeners(): void {
+    const events: AnimationEvent[] = ['start', 'finish', 'pause', 'resume', 'progress', 'error'];
+    events.forEach((event) => {
+      if (!this._eventListeners.has(event)) {
+        this._eventListeners.set(event, new Set());
+      }
+    });
+  }
+
+  private _emit(event: AnimationEvent, data?: unknown): void {
+    const listeners = this._eventListeners.get(event);
+    if (listeners) {
+      listeners.forEach((callback) => {
+        try {
+          callback(data);
+        } catch (error) {
+          console.error(`Error in ${event} event listener:`, error);
+        }
+      });
+    }
+  }
+
+  // Getters
+  get currentAnimation(): MascotAnimation | null {
+    return this._currentAnimation;
+  }
+
+  get speed(): number {
+    return this._speed;
+  }
+
+  get isPaused(): boolean {
+    return this._isPaused;
+  }
+}

package/src/infrastructure/managers/AssetManager.ts

@@ -0,0 +1,159 @@
+/**
+ * Asset Manager Implementation
+ * Loads and caches Lottie and SVG assets
+ */
+
+import type {
+  IAssetManager,
+  AssetCache,
+} from '../../domain/interfaces/IAssetManager';
+import type { MascotAnimation } from '../../domain/types/MascotTypes';
+
+export class AssetManager implements IAssetManager {
+  private readonly _cache: AssetCache;
+  private readonly _loadedAssets: Set<string>;
+  private readonly _maxCacheSize: number = 50 * 1024 * 1024; // 50MB
+  private _currentCacheSize: number = 0;
+
+  constructor() {
+    this._cache = {};
+    this._loadedAssets = new Set();
+  }
+
+  loadLottieAnimation(
+    source: string | object
+  ): Promise<MascotAnimation> {
+    const assetId = this._getAssetId(source);
+
+    if (this._isAssetLoaded(assetId)) {
+      return Promise.resolve(this._cache[assetId].data as MascotAnimation);
+    }
+
+    // Simulate loading - in real implementation, this would actually load the file
+    const animation: MascotAnimation = {
+      id: assetId,
+      name: typeof source === 'string' ? source.split('/').pop() || 'unknown' : 'custom',
+      type: 'idle',
+      source,
+      loop: false,
+      autoplay: false,
+    };
+
+    this._cacheAsset(assetId, animation);
+    return Promise.resolve(animation);
+  }
+
+  loadSVGAsset(source: string): Promise<string> {
+    if (this._isAssetLoaded(source)) {
+      return Promise.resolve(this._cache[source].data as string);
+    }
+
+    // Simulate loading - in real implementation, this would load the SVG file
+    const svgContent = this._loadSVGFromFile(source);
+    this._cacheAsset(source, svgContent);
+    return Promise.resolve(svgContent);
+  }
+
+  async preloadAnimations(sources: Array<string | object>): Promise<void> {
+    const promises = sources.map((source) =>
+      this.loadLottieAnimation(source)
+    );
+    await Promise.all(promises);
+  }
+
+  clearCache(): void {
+    Object.keys(this._cache).forEach((key) => {
+      delete this._cache[key];
+    });
+    this._loadedAssets.clear();
+    this._currentCacheSize = 0;
+  }
+
+  getAssetUrl(assetId: string): string | null {
+    if (this._isAssetLoaded(assetId)) {
+      return assetId;
+    }
+    return null;
+  }
+
+  isAssetLoaded(assetId: string): boolean {
+    return this._loadedAssets.has(assetId);
+  }
+
+  getLoadedAssets(): string[] {
+    return Array.from(this._loadedAssets);
+  }
+
+  // Private Methods
+  private _getAssetId(source: string | object): string {
+    if (typeof source === 'string') {
+      return source;
+    }
+    return JSON.stringify(source);
+  }
+
+  private _cacheAsset(assetId: string, data: unknown): void {
+    const size = this._estimateSize(data);
+
+    // Check if cache is full
+    if (this._currentCacheSize + size > this._maxCacheSize) {
+      this._evictOldestAssets();
+    }
+
+    this._cache[assetId] = {
+      data,
+      timestamp: Date.now(),
+      size,
+    };
+
+    this._loadedAssets.add(assetId);
+    this._currentCacheSize += size;
+  }
+
+  private _isAssetLoaded(assetId: string): boolean {
+    return this._loadedAssets.has(assetId) && !!this._cache[assetId];
+  }
+
+  private _evictOldestAssets(): void {
+    const sortedAssets = Object.entries(this._cache)
+      .sort(([, a], [, b]) => a.timestamp - b.timestamp);
+
+    let freedSpace = 0;
+    const targetSpace = this._maxCacheSize * 0.3; // Evict 30% of cache
+
+    for (const [assetId, asset] of sortedAssets) {
+      if (freedSpace >= targetSpace) {
+        break;
+      }
+
+      delete this._cache[assetId];
+      this._loadedAssets.delete(assetId);
+      freedSpace += asset.size;
+      this._currentCacheSize -= asset.size;
+    }
+  }
+
+  private _estimateSize(data: unknown): number {
+    // Rough estimation in bytes
+    return JSON.stringify(data).length * 2; // 2 bytes per char (UTF-16)
+  }
+
+  private _loadSVGFromFile(_source: string): string {
+    // In real implementation, this would use FileSystem or require()
+    // For now, return a placeholder
+    return `<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="currentColor"/></svg>`;
+  }
+
+  // Getters
+  get cacheSize(): number {
+    return this._currentCacheSize;
+  }
+
+  get cacheStats(): { size: number; count: number; maxSize: number } {
+    return {
+      size: this._currentCacheSize,
+      count: this._loadedAssets.size,
+      maxSize: this._maxCacheSize,
+    };
+  }
+}