diff --git a/front/dist/resources/logos/boy.svg b/front/dist/resources/logos/boy.svg
new file mode 100644
index 00000000..d6d9582e
--- /dev/null
+++ b/front/dist/resources/logos/boy.svg
@@ -0,0 +1,77 @@
+
+
+
+
diff --git a/front/dist/resources/logos/discussion.svg b/front/dist/resources/logos/discussion.svg
new file mode 100644
index 00000000..1b4572b3
--- /dev/null
+++ b/front/dist/resources/logos/discussion.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index d0f0e68b..d1f5e7f7 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -686,3 +686,128 @@ div.modal-report-user{
max-width: calc(800px - 60px); /* size of modal - padding*/
}
+/*MESSAGE*/
+.discussion{
+ position: fixed;
+ right: -300px;
+ width: 220px;
+ height: 100%;
+ background-color: #000000;
+ padding: 20px;
+}
+.discussion.active{
+ right: 0;
+}
+.discussion .toggle-btn{
+ display: none;
+ cursor: pointer;
+ height: 50px;
+ width: 50px;
+ background-color: #2d2d2dba;
+ position: absolute;
+ top: calc(50% - 25px);
+ margin-left: -125px;
+ border-radius: 50%;
+ border: none;
+ transition: all 0.5s ease;
+}
+.discussion .toggle-btn.active{
+ display: block;
+}
+.discussion .toggle-btn:hover {
+ transform: scale(1.1) rotateY(3.142rad);
+}
+.discussion .toggle-btn img{
+ width: 26px;
+ height: 26px;
+ margin: 13px 5px;
+}
+.discussion p{
+ color: white;
+ font-size: 22px;
+ padding-left: 10px;
+ margin: 0;
+}
+
+.discussion .participants{
+ height: 200px;
+ margin: 10px 0;
+}
+
+.discussion .participants .participant{
+ display: flex;
+ margin: 5px 10px;
+ background-color: #ffffff69;
+ padding: 5px;
+ border-radius: 15px;
+ cursor: pointer;
+}
+
+.discussion .participants .participant:hover{
+ background-color: #ffffff;
+}
+.discussion .participants .participant:hover p{
+ color: black;
+}
+
+.discussion .participants .participant:before {
+ content: '';
+ height: 10px;
+ width: 10px;
+ background-color: #1e7e34;
+ position: absolute;
+ margin-left: 18px;
+ border-radius: 50%;
+ margin-top: 18px;
+}
+
+.discussion .participants .participant img{
+ width: 26px;
+ height: 26px;
+}
+
+.discussion .participants .participant p{
+ font-size: 16px;
+ margin-left: 10px;
+ margin-top: 8px;
+}
+
+.discussion .participants .participant button.report-btn{
+ cursor: pointer;
+ position: absolute;
+ background-color: #2d2d2dba;
+ right: 34px;
+ margin: 0px;
+ padding: 6px 0px;
+ border-radius: 15px;
+ border: none;
+ color: white;
+ width: 0px;
+ overflow: hidden;
+ transition: all .5s ease;
+}
+
+.discussion .participants .participant:hover button.report-btn{
+ width: 70px;
+}
+
+.discussion .messages{
+ position: absolute;
+ height: calc(100% - 300px);
+}
+
+.discussion .messages .message{
+ margin: 5px;
+ float: right;
+ text-align: right;
+}
+
+.discussion .messages .message.me{
+ float: left;
+ text-align: left;
+}
+
+.discussion .messages .message p{
+ font-size: 12px;
+}
+
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 2c5c1882..55321124 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -9,6 +9,7 @@ import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
import {localUserStore} from "../../Connexion/LocalUserStore";
+import {Discussion} from "../../WebRtc/Discussion";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@@ -74,6 +75,13 @@ export class LoginScene extends ResizableScene {
});
cypressAsserter.initFinished();
+
+ const discussion = new Discussion('test');
+ discussion.addParticipant('GRP');
+ discussion.addParticipant('LOL');
+
+ discussion.addMessage('GRP', 'ceci est un test d\'envoi de message', true);
+ discussion.addMessage('LOL', 'ceci est un test d\'envoi de message');
}
update(time: number, delta: number): void {
diff --git a/front/src/WebRtc/Discussion.ts b/front/src/WebRtc/Discussion.ts
new file mode 100644
index 00000000..b7307745
--- /dev/null
+++ b/front/src/WebRtc/Discussion.ts
@@ -0,0 +1,124 @@
+import {HtmlUtils} from "./HtmlUtils";
+
+export class Discussion {
+
+ private mainContainer: HTMLDivElement;
+
+ private divDiscuss?: HTMLDivElement;
+ private divParticipants?: HTMLDivElement;
+ private nbpParticipants?: HTMLParagraphElement;
+ private divMessages?: HTMLParagraphElement;
+
+ private participants: Map = new Map();
+
+ private activeDiscussion: boolean = false;
+
+ constructor(name: string) {
+ this.mainContainer = HtmlUtils.getElementByIdOrFail('main-container');
+ this.createDiscussPart(name);
+ }
+
+ private createDiscussPart(name: string) {
+ this.divDiscuss = document.createElement('div');
+ this.divDiscuss.classList.add('discussion');
+
+ const buttonToggleDiscussion = document.createElement('button');
+ buttonToggleDiscussion.classList.add('toggle-btn');
+ buttonToggleDiscussion.classList.add('active');
+ buttonToggleDiscussion.innerHTML = `
`;
+ buttonToggleDiscussion.addEventListener('click', () => {
+ if(this.activeDiscussion){
+ this.activeDiscussion = false;
+ this.divDiscuss?.classList.remove('active');
+ buttonToggleDiscussion.classList.add('active');
+ }else{
+ this.activeDiscussion = true;
+ this.divDiscuss?.classList.add('active');
+ buttonToggleDiscussion.classList.remove('active');
+ }
+ });
+ this.divDiscuss.appendChild(buttonToggleDiscussion);
+
+ const myName = document.createElement('p');
+ myName.innerText = name.toUpperCase();
+ this.nbpParticipants = document.createElement('p');
+ this.nbpParticipants.innerText = 'PARTICIPANTS (1)';
+
+ this.divParticipants = document.createElement('div');
+ this.divParticipants.classList.add('participants');
+
+ this.divMessages = document.createElement('div');
+ this.divMessages.classList.add('messages');
+
+ this.divDiscuss.appendChild(myName);
+ this.divDiscuss.appendChild(this.nbpParticipants);
+ this.divDiscuss.appendChild(this.divParticipants);
+ this.divDiscuss.appendChild(this.divMessages);
+
+ //append in main container
+ this.mainContainer.appendChild(this.divDiscuss);
+ }
+
+ public addParticipant(name: string, img?: string) {
+ const divParticipant = document.createElement('div');
+ divParticipant.classList.add('participant');
+
+ const divImgParticipant = document.createElement('img');
+ divImgParticipant.src = 'resources/logos/boy.svg';
+ if (img) {
+ divImgParticipant.src = img;
+ }
+ const divPParticipant = document.createElement('p');
+ divPParticipant.innerText = name;
+
+ const reportBanUserAction = document.createElement('button');
+ reportBanUserAction.classList.add('report-btn')
+ reportBanUserAction.innerText = 'Report';
+ reportBanUserAction.addEventListener('click', () => {
+ //TODO report user
+ console.log('report');
+ });
+
+ divParticipant.appendChild(divImgParticipant);
+ divParticipant.appendChild(divPParticipant);
+ divParticipant.appendChild(reportBanUserAction);
+
+ this.divParticipants?.appendChild(divParticipant);
+ this.participants.set(name, divParticipant);
+
+ this.updateParticipant(this.participants.size);
+ }
+
+ public updateParticipant(nb: number) {
+ if (!this.nbpParticipants) {
+ return;
+ }
+ this.nbpParticipants.innerText = `PARTICIPANTS (${nb})`;
+ }
+
+ public addMessage(name: string, message: string, isMe: boolean = false) {
+ const divMessage = document.createElement('div');
+ divMessage.classList.add('message');
+ if(isMe){
+ divMessage.classList.add('me');
+ }
+
+ const pMessage = document.createElement('p');
+ const date = new Date();
+ if(isMe){
+ name = 'Moi';
+ }
+ pMessage.innerHTML = `${name}
+
+ ${date.getHours()}:${date.getMinutes()}
+ `;
+ divMessage.appendChild(pMessage);
+
+ const userMessage = document.createElement('p');
+ userMessage.innerText = message;
+ divMessage.appendChild(userMessage);
+
+ this.divMessages?.appendChild(divMessage);
+ }
+
+}
\ No newline at end of file