Spaces:
Sleeping
Sleeping
File size: 4,107 Bytes
e49fcf4 5ed1690 e49fcf4 5ed1690 e49fcf4 5ed1690 e49fcf4 5ed1690 e49fcf4 5ed1690 e49fcf4 5ed1690 e49fcf4 5ed1690 e49fcf4 5ed1690 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 122 123 124 125 126 127 128 129 |
'use client';
import { FC, useEffect, useState } from 'react';
import Image from 'next/image';
interface Verdict {
verdict: boolean;
argument: string;
prisonYears: number;
}
interface EndSceneProps {
language: 'fr' | 'en' | 'es';
setNextScene: () => void;
verdict: Verdict | null;
}
const EndScene: FC<EndSceneProps> = ({
language,
setNextScene,
verdict
}) => {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (verdict) {
console.log('End verdict:', verdict)
setIsLoading(false);
}
}, [verdict]);
const getLoadingText = () => {
if (language === 'fr') {
return 'Le juge délibère...';
} else if (language === 'en') {
return 'The judge is deliberating...';
} else {
return 'El juez está deliberando...';
}
};
const getVerdictText = () => {
if (language === 'fr') {
return verdict?.verdict ? 'NON COUPABLE' : 'COUPABLE';
} else if (language === 'en') {
return verdict?.verdict ? 'NOT GUILTY' : 'GUILTY';
} else {
return verdict?.verdict ? 'NO CULPABLE' : 'CULPABLE';
}
};
const getSentenceText = () => {
if (language === 'fr') {
return verdict?.prisonYears && verdict?.prisonYears > 0
? `${verdict?.prisonYears} ans de prison`
: 'Libéré';
} else if (language === 'en') {
return verdict?.prisonYears && verdict?.prisonYears > 0
? `${verdict?.prisonYears} years in prison`
: 'Released';
} else {
return verdict?.prisonYears && verdict?.prisonYears > 0
? `${verdict?.prisonYears} años de prisión`
: 'Liberado';
}
};
return (
<div className="relative w-screen h-screen">
<Image
src={isLoading
? "https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/court_M-RO6txqB.png?updatedAt=1737835884433"
: "https://ik.imagekit.io/z0tzxea0wgx/MistralGameJam/DD_judge1_Bn04jNl_E.png?updatedAt=1737835883169"
}
alt="Background"
fill
className="object-cover"
priority
/>
<div className="absolute inset-0 flex items-center justify-center">
<div className="bg-black/60 border-8 border-black w-[600px] aspect-square p-8 m-8 flex flex-col items-center justify-center">
{isLoading ? (
<div className="text-center">
<h1 className="text-4xl text-white roboto-slab mb-8">
{getLoadingText()}
</h1>
<div className="animate-bounce">
<svg className="w-16 h-16 text-white mx-auto" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
) : (
<div className="text-center flex flex-col items-center justify-between h-full">
<h1 className="text-5xl text-white roboto-slab mb-8">
{language === 'fr'
? 'Verdict'
: language === 'en'
? 'Verdict'
: 'Veredicto'
}
</h1>
<h2 className={`text-7xl mb-8 roboto-slab ${verdict?.verdict ? 'text-green-500' : 'text-red-500'}`}>
{getVerdictText()}
</h2>
<p className="text-3xl text-white mb-8 roboto-slab">
{getSentenceText()}
</p>
<p className="text-2xl text-white mb-8 roboto-slab italic max-w-[80%]">
{verdict?.argument}
</p>
<button
onClick={setNextScene}
className="px-12 py-6 text-2xl font-bold text-white bg-sky-500 hover:bg-blue-700 transition-colors roboto-slab mt-auto"
>
{language === 'fr' ? 'Rejouer' : language === 'en' ? 'Play again' : 'Jugar de nuevo'}
</button>
</div>
)}
</div>
</div>
</div>
);
};
export default EndScene; |