managarten/maerchenzauber/apps/mobile/components/atoms/TimeOfDayParticles.tsx

/**
 * TimeOfDayParticles Component
 * Renders animated particles based on time of day (birds, clouds, lanterns, stars)
 * Reusable for EndScreen, SplashScreen, or any other screen
 */

import React, { useEffect, useRef } from 'react';
import { View, StyleSheet, Animated, Dimensions } from 'react-native';
import { TimeOfDayTheme } from '../../src/constants/timeOfDayThemes';

const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

interface TimeOfDayParticlesProps {
  theme: TimeOfDayTheme;
  intensity?: 'low' | 'medium' | 'high'; // Controls animation speed
}

export default function TimeOfDayParticles({
  theme,
  intensity = 'medium'
}: TimeOfDayParticlesProps) {
  const particles = useRef<Animated.Value[]>([]).current;

  // Initialize animation values
  useEffect(() => {
    particles.length = 0;
    for (let i = 0; i < theme.particleCount; i++) {
      particles.push(new Animated.Value(0));
    }
  }, [theme.particleCount]);

  // Start animations
  useEffect(() => {
    const animations = particles.map((particle, index) => {
      const delay = index * 300; // Stagger animations
      const duration = getDuration(theme.particleType, intensity);

      return Animated.loop(
        Animated.sequence([
          Animated.delay(delay),
          Animated.timing(particle, {
            toValue: 1,
            duration,
            useNativeDriver: true,
          }),
        ])
      );
    });

    animations.forEach(anim => anim.start());

    return () => {
      animations.forEach(anim => anim.stop());
    };
  }, [particles, theme.particleType, intensity]);

  const renderParticle = (particle: Animated.Value, index: number) => {
    const particleStyle = getParticleStyle(particle, index, theme);

    return (
      <Animated.View
        key={`particle-${index}`}
        style={[
          styles.particle,
          particleStyle,
          {
            backgroundColor: theme.particleColors[index % theme.particleColors.length],
          },
        ]}
      />
    );
  };

  return (
    <View style={styles.container} pointerEvents="none">
      {particles.map((particle, index) => renderParticle(particle, index))}
    </View>
  );
}

// Helper: Get animation duration based on particle type and intensity
function getDuration(particleType: string, intensity: 'low' | 'medium' | 'high'): number {
  const baseSpeed = {
    low: 1.5,
    medium: 1.0,
    high: 0.7,
  }[intensity];

  const durations = {
    birds: 8000,
    clouds: 12000,
    lanterns: 6000,
    stars: 3000,
  };

  return (durations[particleType as keyof typeof durations] || 8000) * baseSpeed;
}

// Helper: Get particle position and animation style
function getParticleStyle(
  particle: Animated.Value,
  index: number,
  theme: TimeOfDayTheme
): any {
  const { particleType } = theme;

  // Random initial positions
  const startY = Math.random() * SCREEN_HEIGHT;
  const startX = Math.random() * SCREEN_WIDTH;

  switch (particleType) {
    case 'birds':
      // Birds fly from right to left, slightly wavy
      return {
        width: 8,
        height: 8,
        borderRadius: 4,
        opacity: particle.interpolate({
          inputRange: [0, 0.1, 0.9, 1],
          outputRange: [0, 1, 1, 0],
        }),
        transform: [
          {
            translateX: particle.interpolate({
              inputRange: [0, 1],
              outputRange: [SCREEN_WIDTH + 20, -20],
            }),
          },
          {
            translateY: particle.interpolate({
              inputRange: [0, 0.5, 1],
              outputRange: [startY * 0.3, startY * 0.3 - 15, startY * 0.3], // Slight wave motion
            }),
          },
        ],
      };

    case 'clouds':
      // Clouds float slowly from left to right
      return {
        width: 30 + index * 5,
        height: 15,
        borderRadius: 15,
        opacity: 0.6,
        transform: [
          {
            translateX: particle.interpolate({
              inputRange: [0, 1],
              outputRange: [-50, SCREEN_WIDTH + 50],
            }),
          },
          {
            translateY: startY * 0.4,
          },
        ],
      };

    case 'lanterns':
      // Lanterns float up slowly with slight sway
      return {
        width: 12,
        height: 12,
        borderRadius: 6,
        opacity: particle.interpolate({
          inputRange: [0, 0.1, 0.9, 1],
          outputRange: [0, 0.8, 0.8, 0],
        }),
        transform: [
          {
            translateX: particle.interpolate({
              inputRange: [0, 0.5, 1],
              outputRange: [startX, startX + 10, startX], // Slight sway
            }),
          },
          {
            translateY: particle.interpolate({
              inputRange: [0, 1],
              outputRange: [SCREEN_HEIGHT + 20, -20],
            }),
          },
        ],
      };

    case 'stars':
      // Stars twinkle in place
      return {
        width: 3 + (index % 3),
        height: 3 + (index % 3),
        borderRadius: 2,
        opacity: particle.interpolate({
          inputRange: [0, 0.5, 1],
          outputRange: [0.3, 1, 0.3], // Twinkle effect
        }),
        transform: [
          {
            translateX: startX,
          },
          {
            translateY: startY,
          },
          {
            scale: particle.interpolate({
              inputRange: [0, 0.5, 1],
              outputRange: [0.8, 1.2, 0.8], // Pulse effect
            }),
          },
        ],
      };

    default:
      return {};
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    overflow: 'hidden',
  },
  particle: {
    position: 'absolute',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
});