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

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

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

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

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

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

@ -52,7 +52,9 @@ function YellowAlert ({handleClose, text, icon}: AlertProps) {
<GiWingedSword />
) : ("")}
<div className="text_alert">
<h5>{text}</h5>
</div>
</motion.div>
</Backdrop>
)

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

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

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

@ -13,18 +13,24 @@ import GreenAlert from "../Alert/GreenAlert.tsx";
const dropIn = {
hidden:{y:"-100vh",
opacity: 0,},
visible:{y: "0",
hidden: {
y: "-100vh",
opacity: 0,
},
visible: {
y: "0",
opacity: 0,
transotion: {
duration: 0.1,
type: "spring",
damping: 100,
stiffness: 500,
}},
exit:{y: "100vh",
opacity: 0,},
}
},
exit: {
y: "100vh",
opacity: 0,
},
};
@ -76,8 +82,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
// Function to run when myVariable changes
const handleVariableChange = () => {
console.log('Variable changed:', privateConv);
if (privateConv === undefined)
{
if (privateConv === undefined) {
console.log("return")
return;
}
@ -174,8 +179,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
if (res.data === 2)
setUnban(true);
if (socket)
{
if (socket) {
console.log("emit to ban server")
socket.emit("ban", { username: selectedUser })
}
@ -196,6 +200,9 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
handleClose();
};
const [muteAlert, setMuteAlert] = useState(false);
const closeMuteAlert = () => setMuteAlert(false);
const handleMute = async (e: { key: string; }) => {
console.log(`e in press= ${e.key}`)
if (e.key != "Enter")
@ -204,7 +211,9 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
// console.log("value mute = ", e.target.value);
console.log("value mute = ", time);
try {
await api.post("/mute", {convId: convId, username: selectedUser, time: time})
const ret = await api.post("/mute", { convId: convId, username: selectedUser, time: time })
if (ret.data)
setMuteAlert(true);
} catch (err) {
console.log(err);
}
@ -268,6 +277,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
<input
onChange={(e) => setNewName(e.target.value)}
onKeyDown={handleName}
maxLength={25}
type="text"
className="in"
placeholder="New Name"
@ -291,7 +301,7 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
</option>
{users.map((item, index) => (
<option key={index} value={item.username}>
{item.username}
{item.nickname}
</option>
))}
</select>
@ -321,6 +331,9 @@ const ModalSetting = ({handleClose, convId, socket }: ModalSettingProps) => {
{unban ? (
<GreenAlert handleClose={closeUnban} text={selectedUser + ": was unbanned"} />
) : ("")}
{muteAlert ? (
<GreenAlert handleClose={closeMuteAlert} text="Mute"/>
):("")}
</AnimatePresence>
</motion.div>

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

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