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

color for qr input + text in chat input + w = wall

Browse Source
This commit is contained in:
Lara REALI 2023-06-26 00:32:42 +02:00
parent 1e9946859c
commit b61531d8d2
4 changed files with 44 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
containers/react/src/components/Game/PlayButton.tsx
View File

@ -8,27 +8,27 @@ function PlayButton() {
const history = useNavigate(); const history = useNavigate();
// const handleButtonClick = () => { // const handleButtonClick = () => {
// let path = `play`; // let path = `play`;
// history(path); // history(path);
// }; // };
const handleButtonClick = () => { const handleButtonClick = () => {
let path = `play?`; let path = `play?`;
const superpowerCheckbox = document.querySelector<HTMLInputElement>('input[value="superpower"]'); const superpowerCheckbox = document.querySelector<HTMLInputElement>('input[value="superpower"]');
if (superpowerCheckbox && superpowerCheckbox.checked) { if (superpowerCheckbox && superpowerCheckbox.checked) {
path += 'superpower=true&'; path += 'superpower=true&';
} }
const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]'); const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
if (obstacleCheckbox && obstacleCheckbox.checked) { if (obstacleCheckbox && obstacleCheckbox.checked) {
path += 'obstacle=true&'; path += 'obstacle=true&';
} }
const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]'); const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
if (speedCheckbox && speedCheckbox.checked) { if (speedCheckbox && speedCheckbox.checked) {
path += 'speed=true&'; path += 'speed=true&';
} }
// Remove the trailing '&' character // Remove the trailing '&' character
path = path.slice(0, -1); path = path.slice(0, -1);
console.log(path) console.log(path)
@ -40,7 +40,7 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button> <button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */} {/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'> <div className='checkbox'>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p> <p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p> <p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p> <p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</div> </div>
@ -48,4 +48,4 @@ function PlayButton() {
); );
} }
export default PlayButton; export default PlayButton;

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

@ -36,7 +36,7 @@ const TouchDiv = styled.div`
margin-top: 21px; margin-top: 21px;
cursor: pointer; cursor: pointer;
justify-content: space-around; justify-content: space-around;
&:hover { &:hover {
color: #F4F3EF; color: #F4F3EF;
} }
@ -71,7 +71,7 @@ const SideP = styled.p`
//======================================================================================================== //========================================================================================================
//======================================================================================================== //========================================================================================================
// Logical part // Logical part
//======================================================================================================== //========================================================================================================
//======================================================================================================== //========================================================================================================
@ -84,7 +84,7 @@ interface MessageProps {
} }
function Chats(){ function Chats(){
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [conversations, setConversation] = useState([]); const [conversations, setConversation] = useState([]);
const [partyInvite, setPartyInvite] = useState([]); const [partyInvite, setPartyInvite] = useState([]);
@ -100,7 +100,7 @@ function Chats(){
const socket = useRef<Socket | null>(null); const socket = useRef<Socket | null>(null);
// const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null // const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null
// socket = useRef( useRef<SocketIOClient.Socket | null>(null)); // socket = useRef( useRef<SocketIOClient.Socket | null>(null));
useEffect(()=> { useEffect(()=> {
@ -137,7 +137,7 @@ function Chats(){
console.log("muted hehe"); console.log("muted hehe");
//set mute var to true and do nothing //set mute var to true and do nothing
}); });
setIsLoading(false) setIsLoading(false)
} }
@ -159,7 +159,7 @@ function Chats(){
}, []) }, [])
useEffect(()=> { useEffect(()=> {
const updateChat = async ()=> { const updateChat = async ()=> {
// if (currentChat) // if (currentChat)
// console.log(currentChat.id) // console.log(currentChat.id)
@ -188,7 +188,7 @@ function Chats(){
}, [incomingMessage, currentChat]) }, [incomingMessage, currentChat])
useEffect(()=> { useEffect(()=> {
const getMessage = async ()=> const getMessage = async ()=>
{ {
if (!currentChat) if (!currentChat)
@ -238,7 +238,7 @@ function Chats(){
setNewMessage(""); setNewMessage("");
if (socket.current) if (socket.current)
socket.current.emit('sendMessage', message); socket.current.emit('sendMessage', message);
} }
catch(err){ catch(err){
console.log(err) console.log(err)
} }
@ -252,7 +252,7 @@ function Chats(){
} }
const [friend, setFriend] = useState(""); const [friend, setFriend] = useState("");
// const [modalOpen, setModalOpen] = useState(false); // const [modalOpen, setModalOpen] = useState(false);
const [addFriend, setAddFriend] = useState(false); const [addFriend, setAddFriend] = useState(false);
@ -269,19 +269,19 @@ function Chats(){
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const openNewGameModal = () => { const openNewGameModal = () => {
setNewGameModalOpen(true); setNewGameModalOpen(true);
}; };
const closeNewGameModal = () => { const closeNewGameModal = () => {
setNewGameModalOpen(false); setNewGameModalOpen(false);
}; };
const openNewConversationModal = () => { const openNewConversationModal = () => {
setNewConversationModalOpen(true); setNewConversationModalOpen(true);
}; };
const closeNewConversationModal = () => { const closeNewConversationModal = () => {
setNewConversationModalOpen(false); setNewConversationModalOpen(false);
}; };
@ -300,7 +300,7 @@ function Chats(){
const handleFriend = (event: { target: { value: React.SetStateAction<string>; }; }) => { const handleFriend = (event: { target: { value: React.SetStateAction<string>; }; }) => {
setFriend(event.target.value); setFriend(event.target.value);
}; };
const handleAddFriend = async () => { const handleAddFriend = async () => {
try{ try{
console.log("friend= ", friend); console.log("friend= ", friend);
@ -321,7 +321,7 @@ function Chats(){
console.log(err) console.log(err)
} }
}; };
const handleBlockFriend = async () => { const handleBlockFriend = async () => {
try{ try{
const res = await api.post("/block", {username: friend}) const res = await api.post("/block", {username: friend})
@ -339,12 +339,12 @@ function Chats(){
console.log(err) console.log(err)
} }
}; };
const closeAddFriend = () => { const closeAddFriend = () => {
setAddFriend(false); setAddFriend(false);
setShowAddFriendAlert(false); setShowAddFriendAlert(false);
}; };
const closeBlock = () => { const closeBlock = () => {
setBlock(false); setBlock(false);
setShowBlockAlert(false); setShowBlockAlert(false);
@ -353,7 +353,7 @@ function Chats(){
const handleOptionChange = (selectId: number, selectedOption: string) => { const handleOptionChange = (selectId: number, selectedOption: string) => {
console.log("selected Option=", selectedOption) console.log("selected Option=", selectedOption)
setFriend(selectedOption); setFriend(selectedOption);
setSelectTag((prevTags) => setSelectTag((prevTags) =>
prevTags.map((tag) => prevTags.map((tag) =>
tag.id === selectId ? { ...tag, selectedOption } : tag tag.id === selectId ? { ...tag, selectedOption } : tag
) )
@ -362,14 +362,14 @@ function Chats(){
//======================================================================================================== //========================================================================================================
//======================================================================================================== //========================================================================================================
// HTML // HTML
//======================================================================================================== //========================================================================================================
//======================================================================================================== //========================================================================================================
return ( return (
<div className="chat"> <div className="chat">
<div className='navbar'> <div className='navbar'>
{/* <img src={DefaultPic} alt="profile" className="pic"/> */} {/* <img src={DefaultPic} alt="profile" className="pic"/> */}
<IoLogoOctocat className="catchat"/> <IoLogoOctocat className="catchat"/>
@ -395,7 +395,7 @@ function Chats(){
</AnimatePresence> </AnimatePresence>
</TouchDiv> </TouchDiv>
<TouchDiv> <TouchDiv>
<motion.div <motion.div
onClick={() => (block ? setBlock(false) : setBlock(true))} onClick={() => (block ? setBlock(false) : setBlock(true))}
> >
<ImBlocked/> <ImBlocked/>
@ -410,7 +410,7 @@ function Chats(){
{currentChat ? ( {currentChat ? (
<TouchDiv> <TouchDiv>
<motion.div <motion.div
onClick={() => (setting ? setSetting(false) : setSetting(true))} onClick={() => (setting ? setSetting(false) : setSetting(true))}
> >
<RiListSettingsLine/> <RiListSettingsLine/>
@ -434,7 +434,7 @@ function Chats(){
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)} onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
> >
<option value="">{ <option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option" selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</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}>
@ -472,7 +472,7 @@ function Chats(){
</TouchDiv> </TouchDiv>
{currentChat && isAdmin ? ( {currentChat && isAdmin ? (
<TouchDiv> <TouchDiv>
<motion.div <motion.div
onClick={() => (setting ? setSetting(false) : setSetting(true))} onClick={() => (setting ? setSetting(false) : setSetting(true))}
> >
<RiListSettingsLine/> <RiListSettingsLine/>
@ -533,7 +533,7 @@ function Chats(){
</div> </div>
</UserChat> </UserChat>
</div> </div>
)})} )})}
</div> </div>
@ -569,7 +569,7 @@ function Chats(){
</div> </div>
</div> </div>
// </div> // </div>
); );
} }
export default Chats export default Chats

14
containers/react/src/components/Messages/Modal.tsx
View File

@ -59,7 +59,7 @@ const Modal = ({handleClose}: ModalProps) => {
const handleOptionChange = (selectId: number, selectedOption: string) => { const handleOptionChange = (selectId: number, selectedOption: string) => {
console.log("selected Option=", selectedOption) console.log("selected Option=", selectedOption)
setSelectTag((prevTags) => setSelectTag((prevTags) =>
prevTags.map((tag) => prevTags.map((tag) =>
tag.id === selectId ? { ...tag, selectedOption } : tag tag.id === selectId ? { ...tag, selectedOption } : tag
) )
@ -123,7 +123,7 @@ const Modal = ({handleClose}: ModalProps) => {
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)} onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
> >
<option value="">{ <option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option" selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</option> }</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => ( {users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => (
<option key={index} value={item.username}> <option key={index} value={item.username}>
@ -137,9 +137,7 @@ const Modal = ({handleClose}: ModalProps) => {
<GrAdd onClick={addNewSelectedTag}/> <GrAdd onClick={addNewSelectedTag}/>
</div> </div>
<div className="div_submit"> <div className="div_submit">
<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link> <Link to='#' className="submit" onClick={saveSelectedOptions}>Submit</Link>
<Link to="#" className="submit" onClick={() => handleClose}>Cancel</Link>
</div> </div>
</div> </div>
@ -150,9 +148,9 @@ const Modal = ({handleClose}: ModalProps) => {
<select <select
value={channel} value={channel}
onChange={(event) => setChannel(event.target.value)} onChange={(event) => setChannel(event.target.value)}
> >
<option value="">Select an option</option> <option value="">Select a channel</option>
{convs.map((conv) => ( {convs.map((conv) => (
!(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && ( !(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && (
<option key={conv.id} value={conv.id}> <option key={conv.id} value={conv.id}>
@ -179,4 +177,4 @@ const Modal = ({handleClose}: ModalProps) => {
) )
} }
export default Modal export default Modal

7
containers/react/src/styles/App.css
View File

@ -15,9 +15,10 @@ input.qr{
border-radius: 5px; border-radius: 5px;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
margin : 1%; margin : 1%;
color:rgb(42, 41, 41); border-color:rgb(42, 41, 41);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
color: #ccc;
} }
.desactivate { .desactivate {