From f04ea2557409f391ebad4494907b1889429e9e48 Mon Sep 17 00:00:00 2001
From: Little Dipper <little_dipper@rayman.rayman.virtualbox.org>
Date: Thu, 22 Jun 2023 00:31:59 +0200
Subject: [PATCH] remise des success a 0 ajout de l'interaction

---
 .../src/components/Alert/YellowAlert.tsx      | 26 ++++++++--
 containers/react/src/components/Header.tsx    | 13 +----
 containers/react/src/pages/Home.tsx           | 47 ++++++++++++++-----
 containers/react/src/styles/Messages.css      |  6 +++
 4 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/containers/react/src/components/Alert/YellowAlert.tsx b/containers/react/src/components/Alert/YellowAlert.tsx
index 1537dd54..eab74971 100644
--- a/containers/react/src/components/Alert/YellowAlert.tsx
+++ b/containers/react/src/components/Alert/YellowAlert.tsx
@@ -3,6 +3,8 @@ import { motion } from 'framer-motion'
 import { GrTrophy } from "react-icons/gr";
 import '../../styles/Messages.css'
 import React from "react";
+import { MdQrCodeScanner } from "react-icons/md";
+import { GiCrownedSkull, GiWingedSword } from "react-icons/gi";
 
 const dropIn = {
     hidden: {
@@ -18,10 +20,11 @@ const dropIn = {
 
 interface AlertProps {
 	handleClose: Function,
-	text: string
+	text: string,
+    icon: number
   }
 
-function YellowAlert ({handleClose, text}: AlertProps) {
+function YellowAlert ({handleClose, text, icon}: AlertProps) {
     return(
         <Backdrop onClick={handleClose}>
         <motion.div
@@ -32,8 +35,23 @@ function YellowAlert ({handleClose, text}: AlertProps) {
                 animate="visible"
                 exit="exit"
             >
-            <GrTrophy/>
-            <p>{text}</p>
+
+            {icon === 0 ? (
+                <GrTrophy/>
+            ):("")}
+            {icon === 1 ? (
+                <MdQrCodeScanner/>
+            ):("")}
+
+            {icon === 2 ? (
+                <GiCrownedSkull/>
+            ):("")}
+            
+            {icon === 3 ? (
+                <GiWingedSword/>
+            ):("")}
+
+            <h5>{text}</h5>
             </motion.div>
             {setTimeout(handleClose, 3000)}
         </Backdrop>
diff --git a/containers/react/src/components/Header.tsx b/containers/react/src/components/Header.tsx
index 9a607f9a..27ce65a3 100644
--- a/containers/react/src/components/Header.tsx
+++ b/containers/react/src/components/Header.tsx
@@ -53,18 +53,7 @@ function Header() {
 				</Link>
 		</motion.div>
 		<div className='end'>
-
-			{success.otp_verified ? (
-					<MdQrCodeScanner className='success' />
-			):("")}
-			{success.win >= 2 ? (
-				<GiWingedSword className="success" />
-			):("")}
-
-			{success.win >= 5 ? (
-				<GiCrownedSkull className="success" />
-			):("")}
-			
+				
 			<Link to="/profile" className='menu-bars'>
 			<div>
 				
diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx
index 9bb31121..ecfbc71e 100644
--- a/containers/react/src/pages/Home.tsx
+++ b/containers/react/src/pages/Home.tsx
@@ -36,6 +36,7 @@ import { IoCloseCircleOutline } from "react-icons/io5";
 import React, { useState, useEffect, useRef, ChangeEventHandler } from "react";
 import { useParams } from 'react-router-dom';
 import {User, Conv} from "../../interfaces.tsx"
+import YellowAlert from '../components/Alert/YellowAlert.tsx';
 	// axios.get("http://localhost/api")
 	// .then((response) => {
 	// 	response = response.json()
@@ -185,8 +186,8 @@ function Profile () {
 
 			  {mine ? (
 			<div>
-				<motion.div  onClick={() => (modalOpen ? close() : open())}>
-					<Link to="#" className="edit_name">
+				<motion.div >
+					<Link to="#" className="edit_name" onClick={() => (modalOpen ? close() : open())}>
 						{modalOpen === true ?  <IoCloseCircleOutline/> : <CgEditMarkup/>}
 					</Link>
 					{modalOpen === true ? ("") : (
@@ -220,6 +221,15 @@ function Profile () {
 function Home () {
 	const [move, setmove ] = useState(false);
 	const [user, setUser] = useState([]);
+
+	const [successQr, setSuccessQr] = useState(false);
+	const [successSword, setSuccessSword] = useState(false);
+	const [successCrown, setSuccessCrown] = useState(false);
+	const closeQr = () => setSuccessQr(false);
+	const closeSword = () => setSuccessSword(false);
+	const closeCrown = () => setSuccessCrown(false);
+
+
 	useEffect(() => {
 		const fetchSuccess = async () => {
 			try {
@@ -240,16 +250,16 @@ function Home () {
 		animate={{opacity: 1}}
 		exit={{opacity: -1}}>
 			<div>
-				{/* {user.otp_verified ? ( */}
-					<MdQrCodeScanner className='success' />
-				{/* ):("")} */}
-				{/* {user.win >= 2 ? ( */}
-					<GiWingedSword className="success" />
-				{/* ):("")} */}
+				{user.otp_verified ? (
+					<MdQrCodeScanner className='success' onClick={() => setSuccessQr(true)}/>
+					 ):("")} 
+				{user.win >= 2 ? (
+					<GiWingedSword className="success" onClick={() => setSuccessSword(true)}/>
+					 ):("")} 
 
-				{/* {user.win >= 5 ? ( */}
-					<GiCrownedSkull className="success" />
-				{/* ):("")} */}
+				{user.win >= 5 ? (
+					<GiCrownedSkull className="success" onClick={() => setSuccessCrown(true)}/>
+					 ):("")} 
 			</div>
 		<div className="home">
 			<motion.div animate={{x: move ? -200: 120}}
@@ -266,7 +276,20 @@ function Home () {
 				onClick={ () => setmove(!move)}>
 					<Link to="#" className="history"><AiOutlineHistory/>  Match History</Link>
 			</motion.div>
-		</motion.div>
+			<AnimatePresence initial={false} onExitComplete={() => null}>
+          		{successQr ? (
+			  	<YellowAlert handleClose={closeQr} text={"Success: You have the 2fa success!"} icon={1} />
+			  	) : ("")}
+
+				{successCrown ? (
+			  	<YellowAlert handleClose={closeCrown} text={"Success: 5 victory ? You won king slayer success!"} icon={2}/>
+			  	) : ("")}
+
+				{successSword ? (
+			  	<YellowAlert handleClose={closeSword} text={"Success: 2 victory ? You won the noobi warrior success!"} icon={3}/>
+			  	) : ("")}
+        </AnimatePresence>
+		</motion.div> 
     )
 }
 
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 39c457fc..81d05423 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -288,6 +288,12 @@ p {
 	background-color: rgba(212, 175, 55, 0.7);
 	font-size: 25px;
 	color: rgba(255, 255, 255, 1);
+	flex-wrap: wrap;
+}
+
+.yellowAlert::p {
+	overflow-wrap: break-word;
+	max-width: 1000px;
 }
 
 .modalSetting{