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 = () => { )}
- upload + upload {/*
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