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

longeur messages et logueur modal nouveau message

Browse Source
This commit is contained in:
Little Dipper 2023-06-18 23:04:49 +02:00
parent 263e3332a1
commit f9a26e8e0f
6 changed files with 24 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
containers/react/src/components/Game/Rank.tsx
View File

@ -13,12 +13,13 @@
// import React from "react" // import React from "react"
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
// import {Rank} from '../../DataBase/DataRank.js' // import {Rank} from '../../DataBase/DataRank.js'
import DefaultPicture from '../../assets/profile.jpg' // import DefaultPicture from '../../assets/profile.jpg'
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi';
function Rank({user, index}){ function Rank({user, index}){
const [profilePicture, setProfilePicture] = useState(''); const [profilePicture, setProfilePicture] = useState('');
const DefaultPicture:string = '../../assets/profile.jpg';
useEffect(() => { useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {

10
containers/react/src/components/Messages/Message.tsx
View File

@ -10,10 +10,11 @@
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import React, { HtmlHTMLAttributes } from "react";
import { useEffect, useState, useRef } from "react"; import { useEffect, useState, useRef } from "react";
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi';
import styled from "styled-components" import styled from "styled-components"
import DefaultPicture from '../../assets/profile.jpg' // import DefaultPicture from '../../assets/profile.jpg'
// import { useRef } from "react"; // import { useRef } from "react";
// import { useEffect } from "react"; // import { useEffect } from "react";
import '../../styles/Messages.css' import '../../styles/Messages.css'
@ -25,12 +26,11 @@ const MeStyleP = styled.p`
color: white; color: white;
margin-right: 20px; margin-right: 20px;
` `
function MessageMe({message, own}){ function MessageMe({message, own}){
const [profilePicture, setProfilePicture] = useState(''); const [profilePicture, setProfilePicture] = useState('');
const scrollRef = useRef(); const scrollRef = useRef<HTMLDivElement>(null);
const DefaultPicture: string = '../../assets/profile.jpg'
useEffect(() => { useEffect(() => {
if (scrollRef.current) if (scrollRef.current)
{ {

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

@ -1,11 +1,11 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import Backdrop from "../Sidebar/Backdrop.tsx"; import Backdrop from "../Sidebar/Backdrop";
// import { Rank } from "../../DataBase/DataRank" // import { Rank } from "../../DataBase/DataRank"
import '../../styles/Messages.css' import '../../styles/Messages.css'
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { GrAdd } from "react-icons/gr"; 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";
import React from "react"; import React from "react";
const dropIn = { const dropIn = {

6
containers/react/src/components/Profile/Win_Loss.tsx
View File

@ -46,7 +46,7 @@ import '../../styles/Win_Loss.css'
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import api from '../../script/axiosApi.tsx'; import api from '../../script/axiosApi';
function WinLoss() { function WinLoss() {
@ -99,8 +99,8 @@ function WinLoss() {
<div key={index} className='elements'> <div key={index} className='elements'>
<li key={index}> <li key={index}>
{/* <h4 className='content'>{c.id}</h4> */} {/* <h4 className='content'>{c.id}</h4> */}
<div className='content2nd'> <div key={index} className='content2nd'>
<h4 className='me'>{user.username}</h4> <h4 className='score'>{c.myScore} - {c.opScore} </h4> <h4 className="opponent">{c.opponent}</h4> <h4 key={index} className='me'>{user.username}</h4> <h4 key={index} className='score'>{c.myScore} - {c.opScore} </h4> <h4 key={index} className="opponent">{c.opponent}</h4>
</div> </div>
{/* <h4 className='content'>{c.openent}</h4> */} {/* <h4 className='content'>{c.openent}</h4> */}
</li> </li>

25
containers/react/src/components/Sidebar/Modal.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import {motion} from "framer-motion" import {motion} from "framer-motion"
import Backdrop from "./Backdrop.tsx" import Backdrop from "./Backdrop"
import { SidebarData } from "./SidebarData.tsx" import { SidebarData } from "./SidebarData"
import {Link} from 'react-router-dom'; import {Link} from 'react-router-dom';
import * as AiIcons from 'react-icons/ai'; import * as AiIcons from 'react-icons/ai';
@ -19,26 +20,6 @@ const dropIn = {
}, },
} }
// function showBar (){
// return (
// {SidebarData.map((item, index) => {
// return (
// <motion.div
// className="nav-menu"
// // whileHover={{scale: 1.1}}
// >
// <li key={index} className={item.cName}>
// <Link to={item.path}>
// {item.icon}
// <span>{item.title}</span>
// </Link>
// </li>
// </motion.div>
// )
// })}
// )
// }
const Modal = ({ handleclose }) => { const Modal = ({ handleclose }) => {
return ( return (
<Backdrop onClick={handleclose}> <Backdrop onClick={handleclose}>

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

@ -32,6 +32,7 @@ select{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-x: scroll;
} }
.scroll{ .scroll{
@ -173,11 +174,17 @@ input{
.messageContent{ .messageContent{
display: flex; display: flex;
flex-wrap: wrap;
flex-direction: column; flex-direction: column;
max-width: 80%; max-width: 80%;
gap: 10px; gap: 10px;
} }
p {
overflow-wrap: break-word;
max-width: 300px;
}
.meMessage{ .meMessage{
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;