diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..7a73a41b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/containers/react/src/components/Alert/RedAlert.tsx b/containers/react/src/components/Alert/RedAlert.tsx index df1fa99e..28264f64 100644 --- a/containers/react/src/components/Alert/RedAlert.tsx +++ b/containers/react/src/components/Alert/RedAlert.tsx @@ -29,7 +29,6 @@ function RedAlert ({handleClose, text}: AlertProps) { e.stopPropagation()} className="redAlert" - // variant={dropIn} initial="hidden" animate="visible" exit="exit" diff --git a/containers/react/src/components/Alert/YellowAlert.tsx b/containers/react/src/components/Alert/YellowAlert.tsx index 9ad761e2..0d382905 100644 --- a/containers/react/src/components/Alert/YellowAlert.tsx +++ b/containers/react/src/components/Alert/YellowAlert.tsx @@ -31,7 +31,6 @@ function YellowAlert({ handleClose, text, icon }: AlertProps) { e.stopPropagation()} className="yellowAlert" - // variant={dropIn} initial="hidden" animate="visible" exit="exit" diff --git a/containers/react/src/components/Game/PlayButton.tsx b/containers/react/src/components/Game/PlayButton.tsx index 2d40c3eb..4adc7985 100644 --- a/containers/react/src/components/Game/PlayButton.tsx +++ b/containers/react/src/components/Game/PlayButton.tsx @@ -19,14 +19,13 @@ function PlayButton() { } path = path.slice(0, -1); - console.log(path) history(path); }; return (
- {/* !buttonClicked && */} + {}

Super Power
( w = wall power )

Faster and Faster

diff --git a/containers/react/src/components/Game/Rank.tsx b/containers/react/src/components/Game/Rank.tsx index e6f94b81..8c16948e 100644 --- a/containers/react/src/components/Game/Rank.tsx +++ b/containers/react/src/components/Game/Rank.tsx @@ -30,10 +30,7 @@ function Rank({user, index}: RankProps){ useEffect(() => { const fetchProfilePicture = async () => { try { - // const user = await api.get("/profile"); const pic = await api.post("/getPicture", {username: user.username}) - // console.log(`user naem profile pic222= ${currentUser.username}`) - // console.log(` profile pic222= ${pic.data}`) setProfilePicture(pic.data); } catch (error) { console.error('Error fetching profile picture:', error); @@ -43,11 +40,9 @@ function Rank({user, index}: RankProps){ fetchProfilePicture(); }, []) - // console.log(index); return (
- {/*

{(index + 1).toString()}

*/}

{(index + 1)}

{user.rank}: {user.nickname} {profilePicture ? ( @@ -55,10 +50,8 @@ function Rank({user, index}: RankProps){ ) : ( Default Profile Picture )} - {/* */}

- {/*

{user.opponent}

*/}
) } diff --git a/containers/react/src/components/Game/Ranking.tsx b/containers/react/src/components/Game/Ranking.tsx index 9410f119..0f651b13 100644 --- a/containers/react/src/components/Game/Ranking.tsx +++ b/containers/react/src/components/Game/Ranking.tsx @@ -14,13 +14,8 @@ function Ranking(){ const getRanking = async ()=>{ try{ - // const tmpFriends = await api.get("/friends") const Ranking = await api.get("/ranking") setRanking(Ranking.data); - console.log(`ranking= ${Ranking.data}`) - // setFriends(tmpFriends.data); - // return tmpUser; - // console.log(`user= ${tmpUser.data.username}`); setIsLoading(false); } catch(err){ @@ -29,14 +24,12 @@ function Ranking(){ }; getRanking(); }, []); - console.log(`ranking after= ${ranking}`); return (
{isLoading ? ( <> ) : ( - //

Ranking

{ranking.map((user, index) => ( diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx index 907a7c21..8661115a 100644 --- a/containers/react/src/components/Messages/Chats.tsx +++ b/containers/react/src/components/Messages/Chats.tsx @@ -80,8 +80,8 @@ function Chats(){ const [conversations, setConversation] = useState([]); const [partyInvite, setPartyInvite] = useState([]); const [user, setUser] = useState(); - const [currentChat, setCurrentChat] = useState(); // false is good? - const [isAdmin, setIsAdmin] = useState(false); // false is good? + const [currentChat, setCurrentChat] = useState(); + const [isAdmin, setIsAdmin] = useState(false); const [messages, setMessage] = useState([]); const [newMessages, setNewMessage] = useState(""); const [incomingMessage, setIncomingMessage] = useState(); @@ -98,8 +98,6 @@ function Chats(){ const tmpUser = await api.get("/profile") const tmpUsers = await api.get("/users"); - console.log(convs); - setPartyInvite(tmpInvite.data); setUser(tmpUser.data); setConversation(convs.data); @@ -107,19 +105,13 @@ function Chats(){ socket.current = io('http://' + process.env.REACT_APP_SOCKET_URL + ':4001', { transports: ['polling'] }); socket.current.emit('connection', {username: tmpUser.data.username}) - socket.current.on('message', (data) => { //data should be a message ?) + socket.current.on('message', (data) => { setIncomingMessage(data); }); socket.current.on('ban', (data) => { window.location.reload() }); - - // socket.current.on('mute', (data) => { - // console.log("muted hehe"); - // //set mute var to true and do nothing - // }); - setIsLoading(false) } @@ -149,7 +141,6 @@ function Chats(){ console.log(err); } } - // console.log(`result1 = ${currentChat.id !== incomingMessage.convId}`) if (currentChat && incomingMessage && currentChat.id === incomingMessage.convId) setMessage((prev) => [...prev, incomingMessage]); } @@ -253,9 +244,7 @@ function Chats(){ const handleAddFriend = async () => { try{ - console.log("friend= ", friend); const res = await api.post("/invite", {username: friend}) - console.log("res in friend= ", res.data) if(res.data === 1) { setAddFriend(true); @@ -302,7 +291,6 @@ function Chats(){ }; const handleOptionChange = (selectId: number, selectedOption: string) => { - console.log("selected Option=", selectedOption) setFriend(selectedOption); setSelectTag((prevTags) => prevTags.map((tag) => @@ -431,7 +419,6 @@ function Chats(){

{c.name}

- {/* Desc? */}
diff --git a/containers/react/src/components/Messages/GameModal.tsx b/containers/react/src/components/Messages/GameModal.tsx index 399342fc..263ad4b9 100644 --- a/containers/react/src/components/Messages/GameModal.tsx +++ b/containers/react/src/components/Messages/GameModal.tsx @@ -5,7 +5,6 @@ import { useState, useEffect } from "react"; import api from "../../script/axiosApi.tsx"; import React from "react"; import {User} from "../../../interfaces.tsx" -// import { useNavigate } from "react-router-dom"; const dropIn = { hidden: { y: "-100vh", opacity: 0 }, @@ -24,27 +23,18 @@ const dropIn = { interface ModalGame { handleClose: Function, - // convId: string } const GameModal = ({ handleClose }: ModalGame) => { const [users, setUsers] = useState([]); -// const [user, setUser] = useState(); const [selectedUser, setSelectedUser] = useState(''); -// const [convs, setConvs] = useState([]); const [channel, setChannel] = useState(''); -// const history = useNavigate(); - useEffect(() => { const fetchData = async () => { try { const tmpUsers = await api.get("/users"); - // const tmpUser = await api.get("/profile"); - // const tmpConvs = await api.get("/convs"); setUsers(tmpUsers.data); - // setUser(tmpUser.data); - // setConvs(tmpConvs.data); } catch (err) { console.log(err); } @@ -56,21 +46,8 @@ const GameModal = ({ handleClose }: ModalGame) => { setSelectedUser(event.target.value); }; -// const joinChannel = async () => { -// try { -// await api.post("/join", { convId: channel }); -// } catch (err) { -// console.log(err); -// } -// }; - -// const handleCheckButtonClick = () => { -// // Perform your check action here -// console.log("Checking user:", selectedUser); -// }; const handleButtonClick = async () => { - // let path = `play?`; let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?`; @@ -86,21 +63,11 @@ const GameModal = ({ handleClose }: ModalGame) => { } if (selectedUser.length > 0) - path += 'username=' + selectedUser;//important here + path += 'username=' + selectedUser; - // Remove the trailing '&' character - // path = path.slice(0, -1); - // console.log(path) - - // await api.post("/partyInvite", {username: selectedUser, gameId}) - - // console.log("path= ", path) - // history(path, { replace: true }); - // window.location.replace(path); window.history.pushState({}, '', path); window.location.reload(); - // history(path); }; return ( @@ -108,7 +75,6 @@ const GameModal = ({ handleClose }: ModalGame) => { e.stopPropagation()} className="modal" - // variant={dropIn} initial="hidden" animate="visible" exit="exit" @@ -125,20 +91,12 @@ const GameModal = ({ handleClose }: ModalGame) => {
- {/* */}

Super Power

Faster and Faster

- {/* */}
- - {/*
- -
*/} ); diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx index 7483bb16..b7f09aa0 100644 --- a/containers/react/src/components/Messages/Message.tsx +++ b/containers/react/src/components/Messages/Message.tsx @@ -14,8 +14,6 @@ import { useEffect, useState, useRef } from "react"; import api from '../../script/axiosApi.tsx'; import styled from "styled-components" import DefaultPicture from '../../assets/profile.jpg' -// import { useRef } from "react"; -// import { useEffect } from "react"; import '../../styles/Messages.css' import {User, Conv, Message} from "../../../interfaces.tsx" import React from "react"; @@ -51,15 +49,10 @@ function MessageMe({message, own}: MessageMeProps){ useEffect(() => { const fetchProfilePicture = async () => { try { - console.log("useEffect message") - // const user = await api.get("/profile"); const tmpSender = await api.post("/user", {username: message.sender}) const tmpConv = await api.post("/convId", {convId: message.convId}) - // const tmpSender = await api.post("/user", {username: message.sender}) const tmpUser = await api.get("/profile") const pic = await api.post("/getPicture", {username: message.sender}) - // console.log(`user naem profile pic222= ${currentUser.username}`) - // console.log(` profile pic222= ${pic.data}`) setConv(tmpConv.data); setUser(tmpUser.data); setSender(tmpSender.data); @@ -75,32 +68,13 @@ function MessageMe({message, own}: MessageMeProps){ if (!sender) return ; let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${sender.username}`; - // console.log("path= ", path) - // history(path, { replace: true }); - // window.location.replace(path); window.history.pushState({}, '', path); window.location.reload(); }; - // const isAllowed = async () => { - // const ret = await api.post("/allowed", {convId: message.convId}); - // return ret.data; - // } if (!user || !sender || !conv) return (<>); - // console.log("result includes=", conv.banned.includes(user.username)) - // console.log("result includes=", conv.blocked.includes(user.username)) - // const conv2: Conv = getConv(); - // if (!conv) - // isAllowed().then((ret: number) => { - // if (!ret) - // { - // console.log("return not allowed"); - // return ; - // } - // // Use the resolved currentConv here - // }); if (user.blocked && user.blocked.includes(message.sender)) return (<>); @@ -108,11 +82,8 @@ function MessageMe({message, own}: MessageMeProps){ return (<>); else if (conv.muted && conv.muted.includes(user.username)) { - // console.log("muted00") return (<>); } - // if (user.blocked.includes(message.sender))/ - console.log("no return message good"); return (
@@ -122,7 +93,6 @@ function MessageMe({message, own}: MessageMeProps){ handleButtonClick()} src={DefaultPicture} alt="Default Profile Picture" /> )}
- {/*
{message.senderNickname}
*/} {sender ? (
{sender.nickname}
): ""} diff --git a/containers/react/src/components/Messages/MessageMe.tsx b/containers/react/src/components/Messages/MessageMe.tsx index 82baac78..9278fbdc 100644 --- a/containers/react/src/components/Messages/MessageMe.tsx +++ b/containers/react/src/components/Messages/MessageMe.tsx @@ -14,7 +14,6 @@ const MeStyleP = styled.p` ` function MessageMe(){ - // const scrollRef = useRef(); const scrollRef = useRef(null); useEffect(() => { diff --git a/containers/react/src/components/Messages/Modal.tsx b/containers/react/src/components/Messages/Modal.tsx index 54e8cc44..6ea8d64a 100644 --- a/containers/react/src/components/Messages/Modal.tsx +++ b/containers/react/src/components/Messages/Modal.tsx @@ -1,6 +1,5 @@ import { motion } from "framer-motion"; import Backdrop from "../Sidebar/Backdrop.tsx"; -// import { Rank } from "../../DataBase/DataRank" import '../../styles/Messages.css' import { useState, useEffect } from "react"; import { GrAdd } from "react-icons/gr"; @@ -43,8 +42,6 @@ const Modal = ({handleClose}: ModalProps) => { const tmpUsers = await api.get("/users"); const tmpUser = await api.get("/profile"); const tmpConvs = await api.get("/convs"); - console.log("users=", tmpUsers.data); - console.log("convs=", tmpConvs.data); setUsers(tmpUsers.data); setUser(tmpUser.data); setConvs(tmpConvs.data); @@ -60,8 +57,6 @@ const Modal = ({handleClose}: ModalProps) => { useEffect(()=> { const getConv = async ()=>{ - console.log("chan changed") - console.log("chan = ", channel); try{ const tmpConv = await api.post("/convId", {convId: channel}); @@ -71,10 +66,6 @@ const Modal = ({handleClose}: ModalProps) => { catch(err){ console.log(err); } - // if (channel.password) - // console.log("password true") - // else - // console.log("password false") } getConv(); }, [channel]); @@ -84,10 +75,6 @@ const Modal = ({handleClose}: ModalProps) => { return; try { const ret = await api.post("/verifyPassword", {convId: channel, password: PassWord}) - if (ret) - console.log("ici ret password", ret); - - // window.location.reload(); } catch (err) { console.log(err); } @@ -95,7 +82,6 @@ const Modal = ({handleClose}: ModalProps) => { } const handleOptionChange = (selectId: number, selectedOption: string) => { - console.log("selected Option=", selectedOption) setSelectTag((prevTags) => prevTags.map((tag) => tag.id === selectId ? { ...tag, selectedOption } : tag @@ -106,14 +92,10 @@ const Modal = ({handleClose}: ModalProps) => { const addNewSelectedTag = () => { const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1; setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]); - console.log(selectTags) }; const joinChannel = async () => { try { - console.log("channel= ", channel) - console.log("ici test channel= ", channel) - await api.post("/join", {convId: channel}) window.location.reload(); } catch(err) { @@ -124,7 +106,6 @@ const Modal = ({handleClose}: ModalProps) => { const saveSelectedOptions = async () => { const selectedOptions = selectTags.map((tag) => tag.selectedOption).filter((option) => option !== ''); - console.log("selected= ", selectedOptions); const data = { members: selectedOptions, } diff --git a/containers/react/src/components/Messages/ModalSetting.tsx b/containers/react/src/components/Messages/ModalSetting.tsx index cd4dcd57..40e1e713 100644 --- a/containers/react/src/components/Messages/ModalSetting.tsx +++ b/containers/react/src/components/Messages/ModalSetting.tsx @@ -34,14 +34,12 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { useEffect(() => { - console.log("convid =", convId) const getUsers = async () => { try { const currentConv = await api.post("/convId", { convId: convId }); if (currentConv.data.private) setPrivateConv(true); const tmpUsers = await api.get("/users"); - console.log("users=", tmpUsers.data); setUsers(tmpUsers.data); setLoading(false); } catch (err) { @@ -53,9 +51,7 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { useEffect(() => { const handleVariableChange = () => { - console.log('Variable changed:', privateConv); if (privateConv === undefined) { - console.log("return") return; } try { @@ -72,8 +68,6 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { }, [privateConv]); const handleOptionChange = (selectId: number, selectedOption: string) => { - console.log("tag= ", selectTags) - console.log("option= ", selectedOption) setSelectTag((prevTags) => prevTags.map((tag) => tag.id === selectId ? { ...tag, selectedOption } : tag @@ -84,7 +78,6 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { const handleCheckPass = (e: { target: { checked: boolean | ((prevState: boolean) => boolean); }; }) => { setPassword(e.target.checked); - console.log("password??", e.target.checked); } const handleName = async (e: { key: string; }) => { @@ -118,14 +111,11 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { if (!selectedUser.length) return; const res = await api.post("/ban", { convId: convId, username: selectedUser }) - console.log("res of ban", res.data) if (res.data === 2) { - console.log("hehe true"); setUnban(true); } if (socket) { - console.log("emit to ban server") socket.emit("ban", { username: selectedUser }) } } catch (err) { @@ -149,10 +139,8 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { const closeMuteAlert = () => setMuteAlert(false); const handleMute = async (e: { key: string; }) => { - console.log(`e in press= ${e.key}`) if (e.key != "Enter") return; - console.log("value mute = ", time); try { const ret = await api.post("/mute", { convId: convId, username: selectedUser, time: time }) if (ret.data) @@ -165,7 +153,6 @@ const ModalSetting = ({ handleClose, convId, socket }: ModalSettingProps) => { const handleInvite = async () => { try { - console.log("post invite bitch"); await api.post("/inviteConv", { convId: convId, username: selectedUser }); } catch (err) { console.log(err); diff --git a/containers/react/src/components/Messages/PartyInvite.tsx b/containers/react/src/components/Messages/PartyInvite.tsx index 791d632b..1e76bb3e 100644 --- a/containers/react/src/components/Messages/PartyInvite.tsx +++ b/containers/react/src/components/Messages/PartyInvite.tsx @@ -53,19 +53,13 @@ export default function PartyInvite({currentInvite}: UserProps) const [profilePicture, setProfilePicture] = useState(''); const [request, setRequest] = useState(); //user who invite const [clickEvent, setClickEvent] = useState(false); - // const [user, setUser] = useState(null); useEffect(() => { const fetchProfilePicture = async () => { try { - // const user = await api.get("/profile");\ - // const tmpUser = await api.get("/profile") const pic = await api.post("/getPicture", {username: currentInvite.username}) const tmpRequest = await api.post("/user", {username: currentInvite.username}) - // setUser(tmpUser.data); setRequest(tmpRequest.data); - // console.log(`user naem profile pic222= ${currentInvite.username}`) - // console.log(` profile pic222= ${pic.data}`) setProfilePicture(pic.data); } catch (error) { console.error('Error fetching profile picture:', error); @@ -77,45 +71,33 @@ export default function PartyInvite({currentInvite}: UserProps) const handleButtonClick = (user: InviteProps) => { let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; - // history(path, { replace: true }); - // window.location.replace(path); window.history.pushState({}, '', path); window.location.reload(); }; const Accept = async (request: User) => { try{ - //call canvas ?? - // await api.post("/friend", {username: request.username}) await api.post("/deleteInvite", {username: request.username}) let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?` path += 'username=' + request.username; path += '&gameId=' + currentInvite.gameId; - // setClickEvent(true); window.history.pushState({}, '', path); window.location.reload(); } catch(err) { console.log(err); } - console.log("accept") - console.log(`request = ${request}`) } const Refuse = async (request: User) => { try{ await api.post("/deleteInvite", {username: request.username}) - // await api.post("/refuseInvite", {username: request.username}) setClickEvent(true); } catch(err) { console.log(err); } - console.log("refuse") - console.log(`request = ${request}`) } - // Vérifier si le contenu doit être caché if (clickEvent) { - console.log("retrun true") return null; // Rendre null pour ne pas afficher le contenu } diff --git a/containers/react/src/pages/index.tsx b/containers/react/src/pages/index.tsx new file mode 100644 index 00000000..7d885fba --- /dev/null +++ b/containers/react/src/pages/index.tsx @@ -0,0 +1,24 @@ + +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; + +import Header from '../components/Header.tsx'; +import Head from './Head.tsx'; +import App from '../components/App.tsx'; +import { BrowserRouter } from 'react-router-dom'; + +import './styles/index.css'; +import './styles/App.css' + +ReactDOM.render( + + + +
+ + + , + document.getElementById('root') as HTMLElement +); + +