diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8ea9a2a433151c465c2fc9c8134eb30af3e878f8..42ac44798ea67d7de18b588fd2a2c5dfa3ec3be3 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 2609f4da7964951d1b0bac2b5995224ad5c4b3f1..6feb11a815a21dd638a2011614e80a2aebf78315 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 ba311e0d7efed0f343180aed24bbf45fd87542ad..30ca58ed4d86650ad1b9baf8e215c5e2d4a5b49a 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 f060dbd6f02b951ce3c5b521d5f8478dc8975989..9e0ceceeae17115209a5c8fa051bfbbddef81b1a 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 5b6f0e9046b0a274e39e137288eb2b934bc1febe..90ccfa25e1092d835d200d50294ebd26d091da03 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(