Untitled
unknown
plain_text
a month ago
4.0 kB
3
Indexable
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;
Editor is loading...
Leave a Comment