diff --git a/cryptide_project/src/Components/ProfilePDP.tsx b/cryptide_project/src/Components/ProfilePDP.tsx
index 7395740..aa1f004 100644
--- a/cryptide_project/src/Components/ProfilePDP.tsx
+++ b/cryptide_project/src/Components/ProfilePDP.tsx
@@ -38,9 +38,9 @@ const ProfilePDP = () => {
)}
-

+

{/*
Cliquer ici pour ajouter une image
*/}
-
Taille recommandée : 100px
+ {/*
Taille recommandée : 100px
*/}
diff --git a/cryptide_project/src/Pages/Lobby.tsx b/cryptide_project/src/Pages/Lobby.tsx
index 5219059..176879c 100644
--- a/cryptide_project/src/Pages/Lobby.tsx
+++ b/cryptide_project/src/Pages/Lobby.tsx
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from 'react';
+
+/* Style */
import './Lobby.css';
import { useTheme } from '../Style/ThemeContext';
@@ -8,35 +10,45 @@ import PersonImg from '../res/img/Person.png';
import param from '../res/icon/param.png';
import cible from '../res/icon/cible.png';
+import defaultImg from "../res/img/Person.png"
+
/* Component */
import ButtonImgNav from '../Components/ButtonImgNav';
+
import { io } from 'socket.io-client';
import { Link } from 'react-router-dom';
+
+/* Context */
+import { useGame } from '../Contexts/GameContext';
+import { useAuth } from '../Contexts/AuthContext';
+
+/* Model */
import PersonNetwork from '../model/PersonsNetwork';
import Person from '../model/Person';
import GameCreator from '../model/GameCreator';
-import { useGame } from '../Contexts/GameContext';
-import JSONParser from '../JSONParser';
import Indice from '../model/Indices/Indice';
-import { useNavigate } from 'react-router-dom';
-import { socket } from "../SocketConfig";
-import { random } from 'lodash';
+import JSONParser from '../JSONParser';
import Player from '../model/Player';
import EasyBot from '../model/EasyBot';
import Bot from '../model/Bot';
import User from '../model/User';
-import { useAuth } from '../Contexts/AuthContext';
-import SessionService from '../services/SessionService';
-import defaultImg from "../res/img/Person.png"
import {loadImageAsync} from "../ImageHelper"
+/* nav */
+import { useNavigate } from 'react-router-dom';
+
+/* serv */
+import { socket } from "../SocketConfig";
+import SessionService from '../services/SessionService';
+import { random } from 'lodash';
+
let gameStarted = false
function Lobby() {
const theme=useTheme();
const navigate = useNavigate();
-
+
const { indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, setActualPlayerIndexData, setTurnPlayerIndexData, setRoomData } = useGame();
diff --git a/cryptide_project/src/Pages/Profile.css b/cryptide_project/src/Pages/Profile.css
index a83adb7..3090ae4 100644
--- a/cryptide_project/src/Pages/Profile.css
+++ b/cryptide_project/src/Pages/Profile.css
@@ -1,5 +1,6 @@
.mainContainer{
display: flex;
+ /* flex-direction: column; */
justify-content: center;
align-items: center;
margin: 50px;
@@ -20,6 +21,8 @@
min-height: 250px;
}
+/*Lpart*/
+
.imgContainer{
border: 5px solid black;
border-radius: 50px;
@@ -28,6 +31,60 @@
+/*Rpart*/
+
+.Rpart{
+
+ min-width: 40%;
+ min-height: 250px;
+ margin: 20px;
+ padding: 20px;
+
+ background-color: white;
+
+ border: solid 1px whitesmoke;
+ border-radius: 15px;
+}
+
+
+.username-display{
+ display: flex;
+}
+
+.editbutton{
+ border-color: white;
+ background-color: white;
+ border: none;
+
+ margin-left: 15px;
+ height: 25px;
+ width: 25px;
+}
+.inputpseudo{
+ display: 'flex';
+ justify-content: 'flex-start';
+ align-items: 'center';
+ flex-direction: 'row';
+
+ width: 20vw;
+ padding: 5;
+
+ border:none;
+ border-bottom: solid 2px gray;
+ border-radius: 5;
+
+ font-size: 40px;
+}
+
+.bottom{
+ display: flex;
+ flex-direction: column;
+ justify-content: end;
+ align-items: end;
+
+ height: 100px;
+}
+
/*File upload*/
.parent {
/* width: 250px; */
@@ -43,8 +100,9 @@
/* padding: 1.5rem; */
position: relative;
cursor: pointer;
- max-width: 100px;
- max-height: 50px;
+ width: 100px;
+ height: 50px;
+
}
.file-upload p {
font-size: 0.5rem;
diff --git a/cryptide_project/src/Pages/Profile.tsx b/cryptide_project/src/Pages/Profile.tsx
index 463e1fd..ccb8af3 100644
--- a/cryptide_project/src/Pages/Profile.tsx
+++ b/cryptide_project/src/Pages/Profile.tsx
@@ -1,30 +1,159 @@
import React, { useEffect, useState } from 'react';
import ProfilePDP from '../Components/ProfilePDP';
-import './Profile.css'
-
-
import SessionService from '../services/SessionService';
import { PlayerProps } from '../types/Player';
import { update } from 'lodash';
-import User from '../model/User';
import { socket } from '../SocketConfig';
+
+/* Style */
+import './Profile.css'
+import Edit from "../res/icon/edit-pen.png"
+import Coche from '../res/icon/coche.png'
+import Cancel from '../res/icon/cancel.png'
+
+/* Model */
+import User from '../model/User';
+
+/* Context */
import { useAuth } from '../Contexts/AuthContext';
+/* Boostrap */
+import Button from 'react-bootstrap/Button';
+import Alert from 'react-bootstrap/Alert';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
//@ts-ignore
const Profile = () => {
+
//let player;
const {user} = useAuth()
+
+ const [editingUsername, setEditingUsername] = useState(false);
+ const [newUsername, setNewUsername] = useState(user?.pseudo);
+
+ //@ts-ignore
+ const onUsernameChange = (newUsername) => {
+ console.log("nouveau pseudo : " + newUsername)
+ if(user?.pseudo != null){
+ user.pseudo = newUsername;
+ }
+ }
- //! useeffect pour l'instant, il faudra voir pour changer la facons de prendre une session
+ const handleUsernameChange = () => {
+ // Maj du pseudo
+ onUsernameChange(newUsername);
+ // Désactiver le mode d'édition
+ setEditingUsername(false);
+ };
+
+
+ //* Gestion Modal de suppression :
+ const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+ const handleShowDeleteModal = () => {
+ setShowDeleteModal(true);
+ };
+
+ const handleCloseDeleteModal = () => {
+ setShowDeleteModal(false);
+ };
+
+ // Confirmation avec la phrase :
+ const [confirmationPhrase, setConfirmationPhrase] = useState('');
+
+ //@ts-ignore
+ const handleConfirmationPhraseChange = (e) => {
+ setConfirmationPhrase(e.target.value);
+ };
+
+ const handleDeleteAccount = () => {
+ // Verification de la phrase
+ if (confirmationPhrase.toLowerCase() === 'supprimer mon compte') {
+ console.log('Compte supprimé !');
+ handleCloseDeleteModal();
+ } else {
+ console.error('Phrase de confirmation incorrecte.');
+ }
+ };
+
+
return (
+ <>
+ Mon Compte
-
-
{user?.pseudo}
+
+
+ {editingUsername ? (
+
+
setNewUsername(e.target.value)}
+ />
+
+
+
+ ) : (
+
+
{user?.pseudo}
+
+
+ )
+ }
+
+ {!editingUsername ? (
+
+ ) : (
+
+ Vous êtes en mode "édition".
+
+ )}
+
+ <>
+
+
+
+
+ Confirmation de suppression
+
+
+
+ Pour confirmer la suppression de votre compte, veuillez
+ entrer la phrase : "supprimer mon compte".
+
+
+
+
+
+
+
+
+ >
+
+
+
+ >
);
};
diff --git a/cryptide_project/src/res/icon/cancel.png b/cryptide_project/src/res/icon/cancel.png
new file mode 100644
index 0000000..1181afb
Binary files /dev/null and b/cryptide_project/src/res/icon/cancel.png differ
diff --git a/cryptide_project/src/res/icon/coche.png b/cryptide_project/src/res/icon/coche.png
new file mode 100644
index 0000000..6ff1304
Binary files /dev/null and b/cryptide_project/src/res/icon/coche.png differ
diff --git a/cryptide_project/src/res/icon/edit-pen.png b/cryptide_project/src/res/icon/edit-pen.png
new file mode 100644
index 0000000..2a41928
Binary files /dev/null and b/cryptide_project/src/res/icon/edit-pen.png differ
diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db
index d53b462..8e9aa24 100644
Binary files a/cryptide_project/src/server/db/socialgraph.db and b/cryptide_project/src/server/db/socialgraph.db differ