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

Merge remote-tracking branch 'origin/dipper' into reborn

Browse Source
This commit is contained in:
Alexandre POMMIER 2023-06-26 06:05:44 +02:00
commit 42cdd645c8
7 changed files with 245 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
containers/react/src/components/Alert/GreenAlert.tsx
View File

@ -20,11 +20,11 @@ const dropIn = {
interface AlertProps { interface AlertProps {
handleClose: Function, handleClose: Function,
text: string text: string
} }
function GreenAlert ({handleClose, text}: AlertProps){ function GreenAlert({ handleClose, text }: AlertProps) {
{setTimeout(handleClose, 1500)} { setTimeout(handleClose, 1500) }
return( return (
<Backdrop onClick={handleClose}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
@ -35,8 +35,10 @@ function GreenAlert ({handleClose, text}: AlertProps){
animate="visible" animate="visible"
exit="exit" exit="exit"
> >
<AiOutlineCheckCircle/> <AiOutlineCheckCircle />
<p>{text}</p> <div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

4
containers/react/src/components/Alert/RedAlert.tsx
View File

@ -35,7 +35,9 @@ function RedAlert ({handleClose, text}: AlertProps) {
exit="exit" exit="exit"
> >
<BiErrorCircle/> <BiErrorCircle/>
<p>{text}</p> <div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

26
containers/react/src/components/Alert/YellowAlert.tsx
View File

@ -22,11 +22,11 @@ interface AlertProps {
handleClose: Function, handleClose: Function,
text: string, text: string,
icon: number icon: number
} }
function YellowAlert ({handleClose, text, icon}: AlertProps) { function YellowAlert({ handleClose, text, icon }: AlertProps) {
{setTimeout(handleClose, 3000)} { setTimeout(handleClose, 3000) }
return( return (
<Backdrop onClick={handleClose}> <Backdrop onClick={handleClose}>
<motion.div <motion.div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -38,21 +38,23 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
> >
{icon === 0 ? ( {icon === 0 ? (
<GrTrophy/> <GrTrophy />
):("")} ) : ("")}
{icon === 1 ? ( {icon === 1 ? (
<MdQrCodeScanner/> <MdQrCodeScanner />
):("")} ) : ("")}
{icon === 2 ? ( {icon === 2 ? (
<GiCrownedSkull/> <GiCrownedSkull />
):("")} ) : ("")}
{icon === 3 ? ( {icon === 3 ? (
<GiWingedSword/> <GiWingedSword />
):("")} ) : ("")}
<div className="text_alert">
<h5>{text}</h5> <h5>{text}</h5>
</div>
</motion.div> </motion.div>
</Backdrop> </Backdrop>
) )

2
containers/react/src/components/Messages/Chats.tsx
View File

@ -444,7 +444,7 @@ function Chats(){
}</option> }</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => ( {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
{item.username} {item.nickname}
</option> </option>
))} ))}
</select> </select>

2
containers/react/src/components/Messages/GameModal.tsx
View File

@ -122,7 +122,7 @@ const GameModal = ({ handleClose }: ModalGame) => {
<option value="">Select a user</option> <option value="">Select a user</option>
{users.map((user: User) => ( {users.map((user: User) => (
<option key={user.id} value={user.username}> <option key={user.id} value={user.username}>
{user.username} {user.nickname}
</option> </option>
))} ))}
</select> </select>

145
containers/react/src/components/Messages/ModalSetting.tsx
View File

@ -7,24 +7,30 @@ import { GrAdd } from "react-icons/gr";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import api from "../../script/axiosApi.tsx"; import api from "../../script/axiosApi.tsx";
import React from "react"; import React from "react";
import {User} from "../../../interfaces.tsx" import { User } from "../../../interfaces.tsx"
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import GreenAlert from "../Alert/GreenAlert.tsx"; import GreenAlert from "../Alert/GreenAlert.tsx";
const dropIn = { const dropIn = {
hidden:{y:"-100vh", hidden: {
opacity: 0,}, y: "-100vh",
visible:{y: "0",
opacity: 0, opacity: 0,
transotion:{ },
duration:0.1, visible: {
type:"spring", y: "0",
opacity: 0,
transotion: {
duration: 0.1,
type: "spring",
damping: 100, damping: 100,
stiffness: 500, stiffness: 500,
}}, }
exit:{y: "100vh", },
opacity: 0,}, exit: {
y: "100vh",
opacity: 0,
},
}; };
@ -34,10 +40,10 @@ interface ModalSettingProps {
socket: Socket | null, socket: Socket | null,
} }
const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => { const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => {
const [password, setPassword] = useState(false); const [password, setPassword] = useState(false);
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: '' }]);
const [selectedUser, setSelectedUser] = useState(""); const [selectedUser, setSelectedUser] = useState("");
const [newName, setNewName] = useState(""); const [newName, setNewName] = useState("");
const [time, setTime] = useState(""); const [time, setTime] = useState("");
@ -51,12 +57,12 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
const lightMute = () => setMute(true); const lightMute = () => setMute(true);
useEffect(()=> { useEffect(() => {
console.log("convid =", convId) console.log("convid =", convId)
const getUsers = async ()=>{ const getUsers = async () => {
try { try {
const currentConv = await api.post("/convId", {convId: convId}); const currentConv = await api.post("/convId", { convId: convId });
// console.log("conv private =================== ", ) // console.log("conv private =================== ", )
if (currentConv.data.private) if (currentConv.data.private)
@ -65,7 +71,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
console.log("users=", tmpUsers.data); console.log("users=", tmpUsers.data);
setUsers(tmpUsers.data); setUsers(tmpUsers.data);
setLoading(false); setLoading(false);
} catch(err){ } catch (err) {
console.log(err) console.log(err)
} }
} }
@ -76,17 +82,16 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
// Function to run when myVariable changes // Function to run when myVariable changes
const handleVariableChange = () => { const handleVariableChange = () => {
console.log('Variable changed:', privateConv); console.log('Variable changed:', privateConv);
if (privateConv === undefined) if (privateConv === undefined) {
{
console.log("return") console.log("return")
return ; return;
} }
try { try {
if (privateConv) if (privateConv)
api.post("/private", {convId: convId}) api.post("/private", { convId: convId })
else else
api.post("/public", {convId: convId}) api.post("/public", { convId: convId })
} catch (err){ } catch (err) {
console.log(err); console.log(err);
} }
}; };
@ -139,24 +144,24 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
// } // }
// } // }
const handleName = async (e: { key: string; })=>{ const handleName = async (e: { key: string; }) => {
if (e.key !== "Enter") if (e.key !== "Enter")
return ; return;
try{ try {
api.post("/name", {convId: convId, name: newName}) api.post("/name", { convId: convId, name: newName })
window.location.reload() window.location.reload()
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
} }
const handlePassword = async (e: { key: string; })=>{ const handlePassword = async (e: { key: string; }) => {
if (e.key !== "Enter") if (e.key !== "Enter")
return ; return;
try{ try {
await api.post("/password", {convId: convId, password: newPassword}) await api.post("/password", { convId: convId, password: newPassword })
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
@ -166,20 +171,19 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
const closeUnban = () => setUnban(false); const closeUnban = () => setUnban(false);
const handleBan = async () => { const handleBan = async () => {
// console.log("ban option= ", selectedUser) // console.log("ban option= ", selectedUser)
try{ try {
// console.log("user select=", selectedUser.length) // console.log("user select=", selectedUser.length)
if (!selectedUser.length) if (!selectedUser.length)
return ; return;
const res = await api.post("/ban", {convId: convId, username: selectedUser}) const res = await api.post("/ban", { convId: convId, username: selectedUser })
if (res.data === 2) if (res.data === 2)
setUnban(true); setUnban(true);
if (socket) if (socket) {
{
console.log("emit to ban server") console.log("emit to ban server")
socket.emit("ban", {username: selectedUser}) socket.emit("ban", { username: selectedUser })
} }
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
@ -187,47 +191,52 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
const handleAdmin = async () => { const handleAdmin = async () => {
if (!selectedUser.length) if (!selectedUser.length)
return ; return;
try{ try {
await api.post("/admin", {convId: convId, username: selectedUser}) await api.post("/admin", { convId: convId, username: selectedUser })
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
}; };
const [muteAlert, setMuteAlert] = useState(false);
const closeMuteAlert = () => setMuteAlert(false);
const handleMute = async (e: { key: string; }) => { const handleMute = async (e: { key: string; }) => {
console.log(`e in press= ${e.key}`) console.log(`e in press= ${e.key}`)
if (e.key != "Enter") if (e.key != "Enter")
return ; return;
// console.log("value mute = ", e.target.value); // console.log("value mute = ", e.target.value);
console.log("value mute = ", time); console.log("value mute = ", time);
try{ try {
await api.post("/mute", {convId: convId, username: selectedUser, time: time}) const ret = await api.post("/mute", { convId: convId, username: selectedUser, time: time })
} catch(err) { if (ret.data)
setMuteAlert(true);
} catch (err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
}; };
const handleInvite = async () => { const handleInvite = async () => {
try{ try {
console.log("post invite bitch"); console.log("post invite bitch");
await api.post("/inviteConv", {convId: convId, username: selectedUser}); await api.post("/inviteConv", { convId: convId, username: selectedUser });
} catch(err) { } catch (err) {
console.log(err); console.log(err);
} }
handleClose(); handleClose();
}; };
const handleKeyPress = async (e: { key: string; })=> { const handleKeyPress = async (e: { key: string; }) => {
if (e.key !== "Enter") if (e.key !== "Enter")
return ; return;
try{ try {
} }
catch(err){ catch (err) {
} }
} }
@ -242,15 +251,15 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
exit="exit" exit="exit"
> >
{/* First selection */} {/* First selection */}
<div className="settingFirstPart"> <div className="settingFirstPart">
<div> <div>
<div> <div>
<Link to="#" onClick={light} className={ privateConv ? "submit" : "darkSubmit"}>Public</Link> <Link to="#" onClick={light} className={privateConv ? "submit" : "darkSubmit"}>Public</Link>
<Link to="#" onClick={dark} className={ privateConv ? "darkSubmit" : "submit"}>Private</Link> <Link to="#" onClick={dark} className={privateConv ? "darkSubmit" : "submit"}>Private</Link>
</div> </div>
{/* <p className="checkbox">Private<input className="check"type="checkbox" value="private" onChange={handleCheckPriv}/></p> */} {/* <p className="checkbox">Private<input className="check"type="checkbox" value="private" onChange={handleCheckPriv}/></p> */}
<p className="checkbox">Password<input className="inside_ckeckbox" type="checkbox" value="password" checked={password} onChange={handleCheckPass}/> </p> <p className="checkbox">Password<input className="inside_ckeckbox" type="checkbox" value="password" checked={password} onChange={handleCheckPass} /> </p>
{password ? ( {password ? (
@ -259,8 +268,8 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
onKeyDown={handlePassword} onKeyDown={handlePassword}
type="password" type="password"
className="in" className="in"
placeholder="Password"/> placeholder="Password" />
): ) :
("")} ("")}
</div> </div>
@ -268,6 +277,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
<input <input
onChange={(e) => setNewName(e.target.value)} onChange={(e) => setNewName(e.target.value)}
onKeyDown={handleName} onKeyDown={handleName}
maxLength={25}
type="text" type="text"
className="in" className="in"
placeholder="New Name" placeholder="New Name"
@ -275,7 +285,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
</div> </div>
</div> </div>
{/* Second selection */} {/* Second selection */}
<div className="settingSecondPart"> <div className="settingSecondPart">
@ -291,7 +301,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
</option> </option>
{users.map((item, index) => ( {users.map((item, index) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
{item.username} {item.nickname}
</option> </option>
))} ))}
</select> </select>
@ -302,7 +312,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
<div> <div>
<Link to="#" onClick={handleInvite} className="submit">Invite</Link> <Link to="#" onClick={handleInvite} className="submit">Invite</Link>
<Link to="#" onClick={handleBan} className="submit">Ban</Link> <Link to="#" onClick={handleBan} className="submit">Ban</Link>
<Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit": "submit"}>Mute</Link> <Link to="#" onClick={mute ? darkMute : lightMute} className={mute ? "darkSubmit" : "submit"}>Mute</Link>
<Link to="#" onClick={handleAdmin} className="submit">Admin</Link> <Link to="#" onClick={handleAdmin} className="submit">Admin</Link>
</div> </div>
@ -316,11 +326,14 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
value={time} value={time}
onChange={(e) => setTime(e.target.value)} onChange={(e) => setTime(e.target.value)}
/> />
):("")} ) : ("")}
<AnimatePresence initial={false} onExitComplete={() => null}> <AnimatePresence initial={false} onExitComplete={() => null}>
{unban ? ( {unban ? (
<GreenAlert handleClose={closeUnban} text={selectedUser+": was unbanned"} /> <GreenAlert handleClose={closeUnban} text={selectedUser + ": was unbanned"} />
): ("")} ) : ("")}
{muteAlert ? (
<GreenAlert handleClose={closeMuteAlert} text="Mute"/>
):("")}
</AnimatePresence> </AnimatePresence>
</motion.div> </motion.div>

39
containers/react/src/styles/Messages.css
View File

@ -266,7 +266,7 @@ p {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.redAlert{ /* .redAlert{
width: clamp(50%, 500px, 90%); width: clamp(50%, 500px, 90%);
height: min(50%, 100px); height: min(50%, 100px);
@ -275,23 +275,30 @@ p {
border-radius: 12px; border-radius: 12px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-align: center;
background-color: rgba(133, 6, 6, 0.7);
font-size: 25px;
color: rgba(255, 255, 255, 1);
} */
.redAlert{
width: clamp(50%, 500px, 90%);
height: min(50%, 100px);
margin: auto;
padding: 1rem;
border-radius: 12px;
flex-direction: row;
text-align: center;
/* align-items: center; */
background-color: rgba(133, 6, 6, 0.7); background-color: rgba(133, 6, 6, 0.7);
font-size: 25px; font-size: 25px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.redAlert{ .text_alert{
width: clamp(50%, 500px, 90%); text-align: center;
height: min(50%, 100px); justify-content: center;
margin: auto;
padding: 1rem;
border-radius: 12px;
flex-direction: row;
align-items: center;
background-color: rgba(133, 6, 6, 0.7);
font-size: 25px;
color: rgba(255, 255, 255, 1);
} }
.yellowAlert{ .yellowAlert{
@ -303,17 +310,13 @@ p {
border-radius: 12px; border-radius: 12px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-align: center;
background-color: rgba(212, 175, 55, 0.7); background-color: rgba(212, 175, 55, 0.7);
font-size: 25px; font-size: 25px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
flex-wrap: wrap; flex-wrap: wrap;
} }
.yellowAlert::p {
overflow-wrap: break-word;
max-width: 1000px;
}
.modalSetting{ .modalSetting{
width: clamp(50%, 700px, 90%); width: clamp(50%, 700px, 90%);
height: min(50%, 300px); height: min(50%, 300px);