From 38037132f7e9174f74afb97e758422b005cbd42a Mon Sep 17 00:00:00 2001
From: "alec.schmidt" <alec.schmidt@etu.hesge.ch>
Date: Thu, 15 Jun 2023 23:50:39 +0200
Subject: [PATCH] chatroom tweaks
---
frontend/package-lock.json | 12 ++++++++++++
frontend/package.json | 2 ++
frontend/src/app/chatroom/chatroom.component.html | 6 +++---
frontend/src/app/chatroom/chatroom.component.ts | 8 ++++++--
frontend/src/app/services/socket.service.ts | 2 +-
5 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 8ea9a2a..42ac447 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16,7 +16,9 @@
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
+ "@videsk/tailwind-random-color": "^0.2.0-beta",
"jwt-decode": "^3.1.2",
+ "Math": "^0.0.1-security",
"ngx-socket-io": "^4.5.1",
"rxjs": "~7.8.0",
"socket.io-client": "^4.6.2",
@@ -3400,6 +3402,11 @@
"@types/node": "*"
}
},
+ "node_modules/@videsk/tailwind-random-color": {
+ "version": "0.2.0-beta",
+ "resolved": "https://registry.npmjs.org/@videsk/tailwind-random-color/-/tailwind-random-color-0.2.0-beta.tgz",
+ "integrity": "sha512-RSwT59cb4qihrTRXiLTxCYNXfv+q1BXphaZKPTetXtCIR9nCKaPreENxUASgzgr+LFgS0efT4aw2iStUT12EWQ=="
+ },
"node_modules/@vitejs/plugin-basic-ssl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.0.1.tgz",
@@ -7918,6 +7925,11 @@
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
"dev": true
},
+ "node_modules/Math": {
+ "version": "0.0.1-security",
+ "resolved": "https://registry.npmjs.org/Math/-/Math-0.0.1-security.tgz",
+ "integrity": "sha512-JFs/4QolpT0mrK13IY6A5JECh4UKBTa7jwOLM977XkFfFg7tyiOlkEmXvjQZSEBX01I1nkA1owLyJ25vWPkq2w=="
+ },
"node_modules/media-typer": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2609f4d..6feb11a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@angular/router": "^16.0.0",
+ "@videsk/tailwind-random-color": "^0.2.0-beta",
"jwt-decode": "^3.1.2",
+ "Math": "^0.0.1-security",
"ngx-socket-io": "^4.5.1",
"rxjs": "~7.8.0",
"socket.io-client": "^4.6.2",
diff --git a/frontend/src/app/chatroom/chatroom.component.html b/frontend/src/app/chatroom/chatroom.component.html
index ba311e0..30ca58e 100644
--- a/frontend/src/app/chatroom/chatroom.component.html
+++ b/frontend/src/app/chatroom/chatroom.component.html
@@ -1,10 +1,10 @@
<div class="bg-white border-black border-2 rounded-lg p-2 w-[75vw] h-96">
<h1>Chat :</h1>
<li *ngFor="let msg of chatlog" class="list-none">
- <span>{{msg.sender}}</span>: <span>{{msg.msg}}</span>
+ <span class="text-blue-600">{{msg.sender}}</span>: <span>{{msg.msg}}</span>
</li>
- <form [formGroup]="chatForm" (ngSubmit)="onSubmit()" class="bottom-0">
- <input class="border-b-4 mt-2" type="text" placeholder="Your message" formControlName="message">
+ <form [formGroup]="chatForm" (ngSubmit)="onSubmit()" class="absolute bottom-0 mb-4">
+ <input type="text" placeholder="Your message" formControlName="message">
<button class="border-2 border-black rounded-lg px-2 hover:bg-gray-300 mt-2" type="submit">Send</button>
</form>
</div>
\ No newline at end of file
diff --git a/frontend/src/app/chatroom/chatroom.component.ts b/frontend/src/app/chatroom/chatroom.component.ts
index f060dbd..9e0cece 100644
--- a/frontend/src/app/chatroom/chatroom.component.ts
+++ b/frontend/src/app/chatroom/chatroom.component.ts
@@ -14,11 +14,15 @@ export class ChatroomComponent implements OnInit {
message: new FormControl('', Validators.required)
});
- constructor(private socket: SocketService) {}
+ constructor(private socket: SocketService ) {}
ngOnInit(): void {
this.socket.message.subscribe(chat => {
- this.chatlog.push(chat as Message);
+ if (chat !== null){
+ this.chatlog.push(chat as Message);
+ }
+ if (this.chatlog.length >= 12)
+ this.chatlog.splice(0, 1);
})
}
diff --git a/frontend/src/app/services/socket.service.ts b/frontend/src/app/services/socket.service.ts
index 5b6f0e9..90ccfa2 100644
--- a/frontend/src/app/services/socket.service.ts
+++ b/frontend/src/app/services/socket.service.ts
@@ -14,7 +14,7 @@ export class SocketService {
private _currentQuestion = new BehaviorSubject<string>("");
private _currentAnswers = new BehaviorSubject<Answer[]>([]);
private _points = new BehaviorSubject<number>(0);
- private _message = new BehaviorSubject<Message>({msg:"", sender:""});
+ private _message = new BehaviorSubject<Message>(null);
private _scoreboard = new BehaviorSubject<{ [username: string] : number; }>({});
constructor(
--
GitLab