Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive pages/game nickname already Taken/Nickname too short

Browse Source
This commit is contained in:
Elisee ADJIGUIDI 2023-06-24 14:35:50 +02:00
parent de59d21671
commit 44fb3cdecd
4 changed files with 99 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
containers/react/src/components/Profile/EditName.tsx
View File

@ -1,8 +1,8 @@
import {motion} from "framer-motion" import { AnimatePresence, motion } from "framer-motion"
// import Backdrop from "../Sidebar/Backdrop" // import Backdrop from "../Sidebar/Backdrop"
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
// import { UserProfile } from "../../DataBase/DataUserProfile"; // import { UserProfile } from "../../DataBase/DataUserProfile";
import {useState} from 'react'; import { useState } from 'react';
import "../../styles/Profile.css" import "../../styles/Profile.css"
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi.tsx';
@ -22,61 +22,60 @@ const dropIn = {
} }
// const changeName = ({handleclose, name}) => { // const changeName = ({handleclose, name}) => {
// return ( // return (
// UserProfile.UserName = name // UserProfile.UserName = name
// ) // )
// } // }
const ModalEdit = ( handleClose ) => { const ModalEdit = (handleClose) => {
// let new_name = ""; // let new_name = "";
const [nickname, setNickname] = useState(""); const [nickname, setNickname] = useState("");
const [closeModal, setModalClose] = useState(false); const [errTaken, setErrTaken] = useState(false);
const [err, setErr] = useState(false); const closeTaken = () => setErrTaken(false);
const close = () => setErr(false); const [errTooShort, setErrTooShort] = useState(false);
const closeTooShort = () => setErrTooShort(false);
const handler = e => const handler = e => {
{
setNickname(e.target.value); setNickname(e.target.value);
console.log("testeeeee") console.log("testeeeee")
const postNickname = async ()=>{ const postNickname = async () => {
try{ // try{
await api.post("/nickname", {nickname: nickname}) // await api.post("/nickname", {nickname: nickname})
// setUser(tmpUser.data); // // setUser(tmpUser.data);
// setIsLoading(false) // // setIsLoading(false)
} // }
catch(err){ // catch(err){
console.log(err); // console.log(err);
} // }
}; };
postNickname(); postNickname();
} }
const handlePostNickname = async () => const handlePostNickname = async () => {
{ console.log("nickname=", nickname)
console.log("nickname=" ,nickname) try {
try{ const ret = await api.post("/nickname", { nickname: nickname });
const ret = await api.post("/nickname", {nickname: nickname});
// console.log("cest ici = ",ret); // console.log("cest ici = ",ret);
// if (!ret) // if (!ret)
console.log("test ret =",ret.data); console.log("test ret =", ret.data);
if(ret.data) if (nickname.length < 3) {
{ setErrTooShort(true);
console.log ("ici error = ", ret.data);
// window.location.reload();
} }
else if (!ret.data) else if (ret.data) {
{ console.log("ici error = ", ret.data);
console.log ("nickname already set = ", ret.data); window.location.reload();
}
else {
console.log("nickname already set = ", ret.data);
setErr(true); setErrTaken(true);
setModalClose(true);
} }
// setUser(tmpUser.data); // setUser(tmpUser.data);
// setIsLoading(false) // setIsLoading(false)
} }
catch(err){ catch (err) {
console.log(err); console.log(err);
} }
} }
@ -86,29 +85,35 @@ const ModalEdit = ( handleClose ) => {
// //do nothing // //do nothing
// } // }
return ( return (
<motion.div <motion.div
className="modal" className="modal"
variants={dropIn} variants={dropIn}
initial="hidden" initial="hidden"
animate="visible" animate="visible"
exit="exit"> exit="exit">
<h2>Type your new name</h2> <h2>Type your new name</h2>
<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler}/> <input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler} />
<div> <div>
<div className="button" onClick={handlePostNickname}> <div className="button" onClick={handlePostNickname}>
change change
{/* <Link className="button" to={""}>change</Link> */} {/* <Link className="button" to={""}>change</Link> */}
</div> </div>
<AnimatePresence initial={false} onExitComplete={() => null}>
{ {
err ? ( errTaken ? (
<RedAlert handleClose={close} text="Nickname already taken"/> <RedAlert handleClose={closeTaken} text="Error: Nickname already taken" />
) : ("")
}
{
errTooShort ? (
<RedAlert handleClose={closeTooShort} text="Error: Nickname it too short" />
) : ("") ) : ("")
} }
</div>
</motion.div>
</AnimatePresence>
</div>
</motion.div>
)
}
) export default ModalEdit
}
export default ModalEdit

6
containers/react/src/pages/Home.tsx
View File

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

11
containers/react/src/styles/Game.css
View File

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

16
containers/react/src/styles/field.css
View File

@ -11,6 +11,10 @@
font-size: 300%; font-size: 300%;
} }
.inside_checkbox{
height : 70%;
width: 70%;
}
.field { .field {
background-color: rgb(249, 249, 249); 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 { #myCanvas {
background-color: rgb(124, 47, 47); background-color: rgb(124, 47, 47);
/* position: absolute; */ /* position: absolute; */