Spaces:
Sleeping
Sleeping
File size: 2,877 Bytes
7afe4cc |
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 |
'use client';
import { FC } from 'react';
import Image from 'next/image';
interface Story {
accusation: {
description: string;
alibi: string[];
problematic: string[];
};
}
interface AccusationSceneProps {
language: 'fr' | 'en' | 'es';
story: Story | null;
setNextScene: () => void;
}
const AccusationScene: FC<AccusationSceneProps> = ({
language,
story,
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=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-8 space-y-8">
<div className="max-w-3xl w-full space-y-8">
{/* Description */}
<div>
<h2 className="text-2xl font-bold text-white mb-4 roboto-slab">
{language === 'fr' ? "Chef d'accusation" : language === 'en' ? 'Accusation' : 'Acusación'}
</h2>
<p className="text-xl text-white roboto-slab">
{story?.accusation.description}
</p>
</div>
{/* Alibis */}
<div>
<h2 className="text-2xl font-bold text-white mb-4 roboto-slab">
{language === 'fr' ? 'Alibis' : language === 'en' ? 'Alibis' : 'Coartadas'}
</h2>
<ul className="list-disc list-inside text-white space-y-2 roboto-slab">
{story?.accusation.alibi.map((alibi, index) => (
<li key={index} className="text-xl">{alibi}</li>
))}
</ul>
</div>
{/* Points problématiques */}
<div>
<h2 className="text-2xl font-bold text-white mb-4 roboto-slab">
{language === 'fr' ? 'Points problématiques' : language === 'en' ? 'Problematic points' : 'Puntos problemáticos'}
</h2>
<ul className="list-disc list-inside text-white space-y-2 roboto-slab">
{story?.accusation.problematic.map((point, index) => (
<li key={index} className="text-xl">{point}</li>
))}
</ul>
</div>
</div>
<button
onClick={setNextScene}
className="px-8 py-4 text-xl font-bold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors roboto-slab"
>
{language === 'fr' ? 'Continuer' : language === 'en' ? 'Continue' : 'Continuar'}
</button>
</div>
</div>
</div>
);
};
export default AccusationScene; |