Merge pull request #24 from HuyenThoaiVuaHung/hotfix

[fix] unnecessary imports and styling issues.

angular.json

@@ -30,8 +30,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
-            "scripts": ["node_modules/video.js/dist/video.min.js"]
+            "styles": ["src/styles.scss"]
           },
           "configurations": {
             "production": {

src/app/admin/control-khoi-dong/control-khoi-dong.component.html

@@ -7,16 +7,7 @@
       </mat-card-subtitle>
     </mat-card-header>
     <mat-card-content class="overflow-y-auto">
-      <table
-        mat-table
-        [dataSource]="
-          kdData().gamemode == 'S'
-            ? kdData().questions.singleplayer[
-                kdData().currentSingleplayerPlayer
-              ]
-            : kdData().questions.multiplayer
-        "
-      >
+      <table mat-table [dataSource]="currentQuestionList()">
         <ng-container matColumnDef="question">
           <th mat-header-cell *matHeaderCellDef>Câu hỏi</th>
           <td
@@ -61,7 +52,7 @@
         <mat-icon>visibility_off</mat-icon>
         Ẩn câu hỏi
       </button>
-      <button mat-button (click)="(undefined)">
+      <button mat-button (click)="editQuestion()">
         <mat-icon>edit</mat-icon>
         Chỉnh sửa
       </button>

src/app/admin/control-khoi-dong/control-khoi-dong.component.ts

@@ -10,7 +10,9 @@ import { Router } from "@angular/router";
 import { MatDialog } from "@angular/material/dialog";
 import { FormPlayerComponent } from "../../components/forms/form-player/form-player.component";
 import { AuthService } from "../../services/auth.service";
-import { KdData } from "../../services/types/game";
+import { KdData, KdQuestion, KdQuestions } from "../../services/types/game";
+import { FormQKdComponent } from "src/app/components/forms/form-q-kd/form-q-kd.component";
+import { firstValueFrom } from "rxjs";
 
 @Component({
   selector: "app-control-khoi-dong",
@@ -33,7 +35,13 @@ export class ControlKhoiDongComponent implements OnInit {
   currentQuestionNo: number = 0;
 
   public readonly kdData: WritableSignal<KdData> = signal({} as KdData);
-
+  public readonly currentQuestionList: Signal<KdQuestion[]> = computed(() => {
+    return this.kdData().gamemode == "S"
+      ? this.kdData().questions.singleplayer[
+          this.kdData().currentSingleplayerPlayer
+        ]
+      : this.kdData().questions.multiplayer;
+  });
   currentQuestionListName: Signal<string> = computed(() => {
     if (this.kdData().gamemode == "M") return "Đối kháng";
     if (this.kdData().gamemode == "S")
@@ -54,9 +62,8 @@ export class ControlKhoiDongComponent implements OnInit {
       this.kdData.set(callback);
     });
     this.auth.socket.emit("change-match-position", "KD");
-    // this.auth.matchData = this.auth.matchData;
 
-    this.auth.socket.on("update-kd-data-admin", (data) => {
+    this.auth.socket.on(" -admin", (data) => {
       this.kdData.set(data);
     });
     this.auth.socket.on("update-number-question-kd", (max, curr) => {
@@ -129,28 +136,29 @@ export class ControlKhoiDongComponent implements OnInit {
   onGamemodeChange($event: any) {
     this.auth.socket.emit("change-kd-gamemode", this.kdData().gamemode);
   }
-  // editQuestion() {
-  //   let question =
-  //     this.kdData().questions[this.kdData().questions.indexOf(this.chosenRow)];
-  //   const dialogRef = this.dialog.open(FormQKdComponent, {
-  //     data: question,
-  //   });
-  //   dialogRef.afterClosed().subscribe((result) => {
-  //     if (result) {
-  //       var payload: any = {
-  //         question: result,
-  //         index: this.kdData().questions.indexOf(this.chosenRow),
-  //       };
-  //       this.auth.socket.emit(
-  //         "edit-kd-question",
-  //         payload,
-  //         (callback: { message: any }) => {
-  //           console.debug(callback.message);
-  //         }
-  //       );
-  //     }
-  //   });
-  // }
+  async editQuestion() {
+    const questionIndex = this.currentQuestionList().indexOf(this.chosenRow);
+    const questionData = await firstValueFrom(
+      this.dialog
+        .open<FormQKdComponent, KdQuestion, KdQuestion>(FormQKdComponent, {
+          data: this.chosenRow,
+        })
+        .afterClosed()
+    );
+    if (questionData) {
+      this.kdData.update((data) => {
+        if (this.kdData().gamemode == "S") {
+          this.kdData().questions.singleplayer[
+            this.kdData().currentSingleplayerPlayer
+          ][questionIndex] = questionData;
+        } else {
+          data.questions.multiplayer[questionIndex] = questionData;
+        }
+        return data;
+      });
+      this.auth.socket.emit("update-kd-data", this.kdData());
+    }
+  }
   choosePlayer(row: any) {
     this.chosenPlayer = row;
   }
@@ -221,7 +229,11 @@ export class ControlKhoiDongComponent implements OnInit {
         }
       );
       this.currentQuestionCount += 1;
-      this.auth.socket.emit('update-number-question-kd', this.currentMaxQuestionNo, this.currentQuestionCount);
+      this.auth.socket.emit(
+        "update-number-question-kd",
+        this.currentMaxQuestionNo,
+        this.currentQuestionCount
+      );
     } else {
       this.auth.socket.emit("stop-kd-sound");
       console.debug("Last question reached");

src/app/admin/dashboard/dashboard.component.html

@@ -100,7 +100,7 @@
         <mat-card-content>
           @if (this.chosenRow){ @switch (chosenRow.type) { @case (type.NORMAL) {
           Không có media } @case (type.AUDIO) {
-          <audio controls>
+          <audio controls >
             <source
               src="../../../assets/audio-questions/{{
                 currentQuestionList()
@@ -110,7 +110,7 @@
             Your browser does not support the audio element.
           </audio>
           } @case (type.VIDEO) {
-          <video controls>
+          <video controls  >
             <source
               src="../../../assets/video-questions/{{
                 currentQuestionList()

src/app/admin/dashboard/dashboard.component.scss

@@ -1,4 +1,4 @@
-mat-card-content > img {
+mat-card-content > img, video, audio {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;

src/app/mc/mc.component.html

@@ -13,7 +13,6 @@ <h6>Thí sinh trả lời CNV</h6>
     <player-list
       [players]="auth.matchData().players"
       [highlightIndex]="vdData ? vdData.currentPlayerId - 1 : -1"
-      ;
       [turnIndex]="
         auth.matchData().matchPos == 'VD'
           ? stealingPlayerIndex
@@ -83,25 +82,12 @@ <h6>Thí sinh trả lời CNV</h6>
       </span>
       <div class="float-left">
         <span>
-          HN1: {{ vcnvData.questions[0].answer }} |
-          {{ VCNVStrings[0].length }} Kí tự
+          @for (index of [0,1,2,3,4,5]; track $index) {
+          {{ index == 5 ? "HN" + (index + 1) : "CNV" }}:
+          {{ vcnvData.questions[index].answer }} |
+          {{ getVcnvAnswerLength(index) }} Kí tự
           <br />
-          HN2: {{ vcnvData.questions[1].answer }} |
-          {{ VCNVStrings[1].length }} Kí tự
-          <br />
-          HN3: {{ vcnvData.questions[2].answer }} |
-          {{ VCNVStrings[2].length }} Kí tự
-          <br />
-          HN4: {{ vcnvData.questions[3].answer }} |
-          {{ VCNVStrings[3].length }} Kí tự
-          <br />
-          HN5: {{ vcnvData.questions[4].answer }} |
-          {{ VCNVStrings[4].length }} Kí tự
-          <br />
-          CNV: {{ vcnvData.questions[5].answer }} |
-          {{ VCNVStrings[5].length }} Kí tự
-          <br />
-          Giải thích: {{ vcnvData.questions[5].question }}
+          } Giải thích: {{ vcnvData.questions[5].question }}
         </span>
       </div>
       <div class="float-right">

src/app/mc/mc.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
-import { io, Socket } from "socket.io-client";
-import { environment } from "src/environments/environment";
 import { AuthService } from "../services/auth.service";
 import { TtData, VcnvData, VdData } from "../services/types/game";
 import { Player } from "../services/types/match.data";
@@ -46,7 +44,6 @@ export class McComponent implements OnInit {
     });
     this.auth.socket.emit("get-vcnv-data", (callback: VcnvData) => {
       this.vcnvData = callback;
-      this.formatStrings();
       this.imagePath =
         "../../../assets/picture-questions/vcnv/" +
         this.vcnvData.questions[5].picFileName;
@@ -84,7 +81,6 @@ export class McComponent implements OnInit {
     });
     this.auth.socket.on("update-vcnv-data", (data: VcnvData) => {
       this.vcnvData = data;
-      this.formatStrings();
       this.imagePath =
         "../../../assets/picture-questions/vcnv/" +
         this.vcnvData.questions[5].picFileName;
@@ -97,28 +93,7 @@ export class McComponent implements OnInit {
       this.ttData.playerAnswers.sort(sortByTimestamp);
     });
   }
-  VCNVStrings: string[] = [];
-  formatStrings() {
-    if (!this.vcnvData) {
-      return;
-    }
-    for (let i: number = 0; i <= 5; i++) {
-      this.VCNVStrings[i] = this.vcnvData.questions[i].answer;
-    }
-    this.VCNVStrings.forEach((element, index) => {
-      element = element.replace(/\s/g, "");
-      element = element.toUpperCase();
-      if (this.vcnvData)
-        if (this.vcnvData.questions[index].ifOpen == false) {
-          let processedString = "";
-          for (let i = 0; i < element.length; i++) {
-            processedString += "◯";
-          }
-          element = processedString;
-        }
-      this.VCNVStrings[index] = element;
-    });
-  }
+
   resolveCnvPlayers(cnvPlayers): Player[] {
     return cnvPlayers.map((player) => this.auth.matchData().players[player.id]);
   }
@@ -142,7 +117,11 @@ export class McComponent implements OnInit {
     }
     return readableTime;
   }
+  public getVcnvAnswerLength(index: number) {
+    return this.vcnvData!.questions[index].answer.replace(/\s+/, '').length;
+  }
 }
+
 function sortByTimestamp(a, b) {
   if (a.timestamp < b.timestamp) {
     return -1;