responsive pages/game nickname already Taken/Nickname too short

containers/react/src/components/Profile/EditName.tsx

@@ -1,4 +1,4 @@
-import {motion} from "framer-motion"
+import { AnimatePresence, motion } from "framer-motion"
 // import Backdrop from "../Sidebar/Backdrop"
 import { Link } from 'react-router-dom';
 // import { UserProfile } from "../../DataBase/DataUserProfile";
@@ -30,46 +30,45 @@ const dropIn = {
 const ModalEdit = (handleClose) => {
 	// let new_name = "";
 	const [nickname, setNickname] = useState("");
-	const [closeModal, setModalClose] = useState(false);
-	const [err, setErr] = useState(false);
-	const close = () => setErr(false);
+	const [errTaken, setErrTaken] = useState(false);
+	const closeTaken = () => setErrTaken(false);
+	const [errTooShort, setErrTooShort] = useState(false);
+	const closeTooShort = () => setErrTooShort(false);
 
-	const handler = e =>
-	{
+	const handler = e => {
 		setNickname(e.target.value);
 		console.log("testeeeee")
 		const postNickname = async () => {
-			try{
-				await api.post("/nickname", {nickname: nickname})
-				// setUser(tmpUser.data);
-				// setIsLoading(false)
-			}
-			catch(err){
-				console.log(err);
-			}
+			// try{
+			// 	await api.post("/nickname", {nickname: nickname})
+			// 	// setUser(tmpUser.data);
+			// 	// setIsLoading(false)
+			// }
+			// catch(err){
+			// 	console.log(err);
+			// }
 		};
 		postNickname();
 	}
 
-	const handlePostNickname = async () => 
-	{
+	const handlePostNickname = async () => {
 		console.log("nickname=", nickname)
 		try {
 			const ret = await api.post("/nickname", { nickname: nickname });
 			// console.log("cest ici = ",ret);
 			// if (!ret)
 			console.log("test ret =", ret.data);
-			if(ret.data)
-			{
-				console.log ("ici error = ", ret.data);
-				// window.location.reload();
+			if (nickname.length < 3) {
+				setErrTooShort(true);
 			}
-			else if (!ret.data)
-			{
+			else if (ret.data) {
+				console.log("ici error = ", ret.data);
+				window.location.reload();
+			}
+			else {
 				console.log("nickname already set = ", ret.data);
 
-				setErr(true);
-				setModalClose(true);
+				setErrTaken(true);
 			}
 
 
@@ -99,15 +98,21 @@ const ModalEdit = ( handleClose ) => {
 					change
 					{/* <Link className="button" to={""}>change</Link> */}
 				</div>
+				<AnimatePresence initial={false} onExitComplete={() => null}>
 				{
-					err ? (
-						<RedAlert handleClose={close} text="Nickname already taken"/>
+					errTaken ? (
+						<RedAlert handleClose={closeTaken} text="Error: Nickname already taken" />
 					) : ("")
 				}
+				{
+					errTooShort ? (
+						<RedAlert handleClose={closeTooShort} text="Error: Nickname it too short" />
+					) : ("")
+				}
+
+				</AnimatePresence>
 			</div>
 		</motion.div>
-			
-			
 	)
 }
 

containers/react/src/pages/Home.tsx

@@ -6,7 +6,7 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/23 22:46:23 by sadjigui         ###   ########.fr       */
+/*   Updated: 2023/06/24 14:31:22 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -20,7 +20,7 @@ import { motion, AnimatePresence } from 'framer-motion'
 // import { GrClose } from 'react-icons/gr'
 import { Link } from "react-router-dom";
 import ModalEdit from "../components/Profile/EditName.tsx";
-import {AiOutlineHistory} from 'react-icons/ai'
+import {AiOutlineCloseCircle, AiOutlineHistory} from 'react-icons/ai'
 import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md';
 import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
 
@@ -274,7 +274,7 @@ function Home () {
 				className="div_history"
 			// className="history"
 				onClick={ () => setmove(!move)}>
-					<Link to="#" className="history"><AiOutlineHistory/>  Match History</Link>
+					<Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)}  Match History</Link>
 			</motion.div>
 			<AnimatePresence initial={false} onExitComplete={() => null}>
           		{successQr ? (

containers/react/src/styles/Game.css

@@ -3,6 +3,7 @@
 	margin: 50px;
 }
 
+
 .rank_elements {
 	border-width:1px;
 	border-style:solid;
@@ -26,3 +27,13 @@
 	width: 30px;
 	border-radius: 50%;
 }
+
+@media screen and (max-width: 755px){
+	.game{
+		display: grid;
+		height: 20vh;
+	}
+	.scroll{
+		height: 20vh;
+	}
+  }

containers/react/src/styles/field.css

@@ -11,6 +11,10 @@
 	font-size: 300%;
   }
 
+  .inside_checkbox{
+	height : 70%;
+	width:  70%;
+  }
   
   .field {
 	background-color: rgb(249, 249, 249);
@@ -65,6 +69,18 @@
   }
 }
 
+.responsive{
+	display: flex;
+	flex-direction: column;
+}
+
+/* @media screen and (max-width: 350px){
+	.responsive{
+		display:list-item;
+		flex-direction: column;
+	}
+  } */
+
 #myCanvas {
 	background-color: rgb(124, 47, 47);
 	/* position: absolute; */