File size: 2,987 Bytes
e49fcf4 f89ae7e e49fcf4 f89ae7e 6845a0a f89ae7e 6845a0a f89ae7e 6845a0a f89ae7e 6845a0a f89ae7e 6845a0a f89ae7e 6845a0a f89ae7e 6845a0a f89ae7e e49fcf4 6845a0a e49fcf4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
'use client';
import { FC, useEffect, useRef } from 'react';
import Image from 'next/image';
interface Story {
accusation: {
description: string;
alibi: string[];
};
}
interface IntroSceneProps {
intro: {
fr: {
title: string;
description: string;
start: string;
};
en: {
title: string;
description: string;
start: string;
};
es: {
title: string;
description: string;
start: string;
};
},
language: 'fr' | 'en' | 'es';
setNextScene: () => void;
story: Story | null;
}
const IntroScene: FC<IntroSceneProps> = ({
intro,
language,
setNextScene,
story,
}) => {
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
const audio = new Audio();
audio.id = 'introAudio';
document.body.appendChild(audio);
audioRef.current = audio;
const loadAndPlayAudio = async () => {
try {
if (language === 'en') {
audio.src = '/sounds/intro_en.mp3';
} else if (language === 'fr') {
audio.src = '/sounds/intro_fr.mp3';
} else if (language === 'es') {
audio.src = '/sounds/intro_es.mp3';
}
await audio.load();
await audio.play();
} catch (error) {
console.log('Audio playback error:', error);
}
};
loadAndPlayAudio();
return () => {
if (audioRef.current) {
audioRef.current.pause();
document.body.removeChild(audioRef.current);
audioRef.current = null;
}
};
}, [language]);
const handleContinue = () => {
console.log('handleContinue:')
if (audioRef.current) {
audioRef.current.pause();
document.body.removeChild(audioRef.current);
audioRef.current = null;
}
setNextScene();
};
return (
<div className="relative w-screen h-screen">
{/* Image de fond */}
<Image
src="https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_BG1_rva-mKDVA.jpg?updatedAt=1737835881047https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_BG1_rva-mKDVA.jpg?updatedAt=1737835881047"
alt="Background"
fill
className="object-cover"
priority
/>
{/* Overlay noir */}
<div className="absolute inset-0 bg-black/70">
{/* Contenu */}
<div className="relative z-10 flex flex-col items-center justify-center h-full p-4">
<p className="text-4xl text-white text-center mb-8 roboto-slab max-w-2xl">
{intro[language].description}
</p>
<button
onClick={() => handleContinue()}
className={`px-8 py-4 text-xl font-bold text-white rounded-lg transition-colors roboto-slab
${story ? 'bg-blue-600 hover:bg-blue-700' : 'bg-gray-500 cursor-not-allowed'}`}
disabled={!story}
>
{intro[language].start}
</button>
</div>
</div>
</div>
);
};
export default IntroScene; |