From 44fb3cdecda5d16a9176795cfe756a53f076f9ce Mon Sep 17 00:00:00 2001 From: Elisee ADJIGUIDI Date: Sat, 24 Jun 2023 14:35:50 +0200 Subject: [PATCH] responsive pages/game nickname already Taken/Nickname too short --- .../react/src/components/Profile/EditName.tsx | 131 +++++++++--------- containers/react/src/pages/Home.tsx | 6 +- containers/react/src/styles/Game.css | 13 +- containers/react/src/styles/field.css | 16 +++ 4 files changed, 99 insertions(+), 67 deletions(-) diff --git a/containers/react/src/components/Profile/EditName.tsx b/containers/react/src/components/Profile/EditName.tsx index c3f058f0..da364971 100644 --- a/containers/react/src/components/Profile/EditName.tsx +++ b/containers/react/src/components/Profile/EditName.tsx @@ -1,8 +1,8 @@ -import {motion} from "framer-motion" +import { AnimatePresence, motion } from "framer-motion" // import Backdrop from "../Sidebar/Backdrop" -import {Link} from 'react-router-dom'; +import { Link } from 'react-router-dom'; // import { UserProfile } from "../../DataBase/DataUserProfile"; -import {useState} from 'react'; +import { useState } from 'react'; import "../../styles/Profile.css" import api from '../../script/axiosApi.tsx'; @@ -22,61 +22,60 @@ const dropIn = { } // const changeName = ({handleclose, name}) => { - // return ( - // UserProfile.UserName = name +// return ( +// UserProfile.UserName = name // ) // } -const ModalEdit = ( handleClose ) => { +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 handler = e => - { + const [errTaken, setErrTaken] = useState(false); + const closeTaken = () => setErrTaken(false); + const [errTooShort, setErrTooShort] = useState(false); + const closeTooShort = () => setErrTooShort(false); + + 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); - } + const postNickname = async () => { + // try{ + // await api.post("/nickname", {nickname: nickname}) + // // setUser(tmpUser.data); + // // setIsLoading(false) + // } + // catch(err){ + // console.log(err); + // } }; postNickname(); } - - const handlePostNickname = async () => - { - console.log("nickname=" ,nickname) - try{ - const ret = await api.post("/nickname", {nickname: nickname}); + + 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(); + console.log("test ret =", ret.data); + if (nickname.length < 3) { + setErrTooShort(true); } - else if (!ret.data) - { - console.log ("nickname already set = ", 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); } - - + + // setUser(tmpUser.data); // setIsLoading(false) } - catch(err){ + catch (err) { console.log(err); } } @@ -86,29 +85,35 @@ const ModalEdit = ( handleClose ) => { // //do nothing // } return ( - -

Type your new name

- -
-
- change - {/* change */} -
+ +

Type your new name

+ +
+
+ change + {/* change */} +
+ null}> { - err ? ( - + errTaken ? ( + ) : ("") } -
- - - - ) - } - - export default ModalEdit \ No newline at end of file + { + errTooShort ? ( + + ) : ("") + } + + +
+ + ) +} + +export default ModalEdit \ No newline at end of file diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx index 2e2dba72..cd381f6e 100644 --- a/containers/react/src/pages/Home.tsx +++ b/containers/react/src/pages/Home.tsx @@ -6,7 +6,7 @@ /* By: sadjigui +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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)}> - Match History + {move ? ():()} Match History null}> {successQr ? ( diff --git a/containers/react/src/styles/Game.css b/containers/react/src/styles/Game.css index 28cc1795..94adce85 100644 --- a/containers/react/src/styles/Game.css +++ b/containers/react/src/styles/Game.css @@ -3,6 +3,7 @@ margin: 50px; } + .rank_elements { border-width:1px; border-style:solid; @@ -25,4 +26,14 @@ height: 30px; width: 30px; border-radius: 50%; -} \ No newline at end of file +} + +@media screen and (max-width: 755px){ + .game{ + display: grid; + height: 20vh; + } + .scroll{ + height: 20vh; + } + } \ No newline at end of file diff --git a/containers/react/src/styles/field.css b/containers/react/src/styles/field.css index bb3ad554..828dddc0 100644 --- a/containers/react/src/styles/field.css +++ b/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; */