50 lines
2.8 KiB
JavaScript
50 lines
2.8 KiB
JavaScript
import {useState} from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import img from "../poseimg";
|
|
|
|
|
|
function CardMission({theme}) {
|
|
|
|
const id = theme.id;
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const [validate,setValidate] = useState(false);
|
|
let transi = validate ? "right-0" : "right-dfull";
|
|
let group1 = validate ? "left-0" : "left-1/4";
|
|
let group2 = validate ? "left-1/4" : "left-1/2";
|
|
let group3 = validate ? "left-1/2" : "left-3/4";
|
|
let group4 = validate ? "left-3/4" : "left-full";
|
|
|
|
function changeTransi(id) {
|
|
setValidate(!validate);
|
|
setTimeout(() => {
|
|
navigate('/game/'+id);
|
|
}, 1000);
|
|
}
|
|
|
|
return(
|
|
<div className="h-60 w-72 bg-slate-200 flex flex-col justify-start items-center gap-5 rounded-md">
|
|
<h2 className="">{theme.theme}</h2>
|
|
<div>
|
|
<img src={img[id]} alt="perso" className="h-28 w-28 rounded-full object-cover object-left-top"/>
|
|
</div>
|
|
<button className="px-4 py-3 text-white bg-darkBlue" onClick={() => changeTransi(id)}>Play</button>
|
|
<div id={"transi-"+id} className={"fixed w-full h-1/2 top-1/4 py-4 bg-red-700 transition-all flex justify-center items-center "+transi}>
|
|
<img src={img[id]} alt="perso" className="h-full"/>
|
|
{/* <div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/3 transition duration-1000 "+group1}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-2/3 transition duration-1000 "+group1}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/4 transition duration-1000 "+group2}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/2 transition duration-1000 "+group2}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-3/4 transition duration-1000 "+group2}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/3 transition duration-1000 "+group3}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-2/3 transition duration-1000 "+group3}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/4 transition duration-1000 "+group4}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-1/2 transition duration-1000 "+group4}></div>
|
|
<div className={"h-2 w-24 rounded-full bg-white blur-sm shadow shadow-white fixed top-3/4 transition duration-1000 "+group4}></div> */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CardMission; |