Untitled

import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { motion } from 'framer-motion';
import { useEffect } from 'react';

// Tuodaan Howler.js ääniefektien toistoon
import { Howl } from 'howler';

// Äänitiedostojen nimet (vältetään suoraa polkua)
const fartSounds = [
  'fart1.mp3',
  'fart2.mp3',
  'fart3.mp3',
  'fart4.mp3',
  'fart5.mp3',
];

// Äänten lataus Howler-objekteiksi.  Käytetään useEffect:iä.
const useFartSounds = () => {
    const [sounds, setSounds] = useState<Howl[]>([]);
    const [loading, setLoading] = useState(true); // Lisätään lataustilan hallinta

    useEffect(() => {
        const loadedSounds: Howl[] = [];
        let loadCount = 0;

        fartSounds.forEach((soundFile) => {
            const sound = new Howl({
                src: [soundFile], // Käytetään vain tiedostonimeä
                onload: () => {
                    loadCount++;
                    if (loadCount === fartSounds.length) {
                        setSounds(loadedSounds);
                        setLoading(false); // Asetetaan lataustila valmiiksi
                    }
                },
                onloaderror: (id, err) => {
                  console.error('Error loading sound', soundFile, err);
                  loadCount++; // Ensure loading completes even with errors
                    if (loadCount === fartSounds.length) {
                        setSounds(loadedSounds);
                        setLoading(false);
                    }
                }
            });
            loadedSounds.push(sound);
        });
        return () => {
          // Siivoa äänet kun komponentti poistetaan
          loadedSounds.forEach(sound => sound.unload());
        }
    }, []);

    return { sounds, loading };
};


const FartApp = () => {
  const [fartCount, setFartCount] = useState(0);
  const { sounds, loading } = useFartSounds();

  const playRandomFart = () => {
    if (loading || sounds.length === 0) return; // Älä toista jos ladataan tai ääniä ei ole

    const randomIndex = Math.floor(Math.random() * sounds.length);
    sounds[randomIndex].play();
    setFartCount(prevCount => prevCount + 1);
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
      <Card className="w-full max-w-md bg-white dark:bg-gray-800 shadow-lg rounded-xl">
        <CardHeader>
          <CardTitle className="text-2xl font-bold text-gray-900 dark:text-white text-center">Pierukone</CardTitle>
          <CardDescription className="text-gray-500 dark:text-gray-400 text-center">Paina nappia kuullaksesi pierun!</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="text-lg text-gray-700 dark:text-gray-200 text-center"
          >
            Pieruja laskettu: {fartCount}
          </motion.p>
          <motion.div
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="flex justify-center"
          >
            <Button
              onClick={playRandomFart}
              className="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-6 rounded-full transition-colors duration-300 shadow-md"
              disabled={loading} // Disable button during loading
            >
              {loading ? 'Ladataan...' : 'Päästä pieru!'}
            </Button>
          </motion.div>
           {loading && (
                <p className="text-center text-gray-500 dark:text-gray-400">Ladataan ääniä...</p>
            )}
        </CardContent>
      </Card>
    </div>
  );
};

export default FartApp;