fix: restart of new game

YStemAndChess/src/app/pages/play-mentor/play-mentor.component.ts

@@ -1,27 +1,79 @@
 import { CookieService } from 'ngx-cookie-service';
 import { SocketService } from '../../services/socket/socket.service';
 import { Component, OnInit } from '@angular/core';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-play-mentor',
   templateUrl: './play-mentor.component.html',
-  styleUrls: ['./play-mentor.component.scss']
+  styleUrls: ['./play-mentor.component.scss'],
 })
 export class PlayMentorComponent implements OnInit {
+  meetingId;
+  displayMoves = [];
+  constructor(private socket: SocketService, private cookie: CookieService) {}
 
-  constructor(private socket: SocketService, private cookie: CookieService) { }
-
-  ngOnInit(): void { 
+  ngOnInit(): void {
+    let userContent;
+    if (this.cookie.check('login')) {
+      userContent = JSON.parse(atob(this.cookie.get('login').split('.')[1]));
+      this.httpGetAsync(
+        `${environment.urls.middlewareURL}/meetings/inMeeting`,
+        'GET',
+        (response) => {
+          if (
+            JSON.parse(response) ===
+            'There are no current meetings with this user.'
+          ) {
+            return;
+          }
+          let responseText = JSON.parse(response)[0];
+          this.meetingId = responseText.meetingId;
+        }
+      );
+    }
+  }
+  getMovesList = () => {
+    let url: string = '';
+    url = `${environment.urls.middlewareURL}/meetings/getBoardState?meetingId=${this.meetingId}`;
+    this.httpGetAsync(url, 'GET', (response) => {
+      response = JSON.parse(response);
+      this.displayMoves = response.moves || [];
+    });
+  };
+  private httpGetAsync(theUrl: string, method: string = 'POST', callback) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function () {
+      if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
+        callback(xmlHttp.responseText);
+    };
+    xmlHttp.open(method, theUrl, true); // true for asynchronous
+    xmlHttp.setRequestHeader(
+      'Authorization',
+      `Bearer ${this.cookie.get('login')}`
+    );
+    xmlHttp.send(null);
   }
-
   public flipBoard() {
-    let userContent = JSON.parse(atob(this.cookie.get("login").split(".")[1]));
-    this.socket.emitMessage("flipBoard", JSON.stringify({username: userContent.username}))
+    let userContent = JSON.parse(atob(this.cookie.get('login').split('.')[1]));
+    this.socket.emitMessage(
+      'flipBoard',
+      JSON.stringify({ username: userContent.username })
+    );
   }
 
   public newGame() {
-    let userContent = JSON.parse(atob(this.cookie.get("login").split(".")[1]));
-    this.socket.emitMessage("createNewGame", JSON.stringify({username: userContent.username}));
+    let userContent = JSON.parse(atob(this.cookie.get('login').split('.')[1]));
+    this.socket.emitMessage(
+      'createNewGame',
+      JSON.stringify({ username: userContent.username })
+    );
+    this.getMovesList();
+    let url: string;
+    url = `${environment.urls.middlewareURL}/meetings/newBoardState?meetingId=${this.meetingId}`;
+    this.httpGetAsync(url, 'POST', (response) => {
+      response = JSON.parse(response);
+      this.displayMoves = response.moves || [];
+    });
   }
-
 }

YStemAndChess/src/app/pages/play/play.component.html

@@ -14,47 +14,57 @@
         <span>Steps</span>
       </div>
       <div class="fwd-btns">
-        <p (click)="setMove(0)" [ngClass]="currentStep === 0 && 'isBlur'">
+        <p
+          (click)="setMove(0, 'backward')"
+          [ngClass]="currentStep === 0 && 'isBlur'"
+        >
           <img src="../../../assets/images/moves/icons8-rewind-100.png" />
         </p>
         <p
-          (click)="setMove(currentStep - 1)"
+          (click)="setMove(currentStep - 1, 'backward')"
           [ngClass]="currentStep <= 0 && 'isBlur'"
         >
           <img src="../../../assets/images/moves/icons8-less-than-60.png" />
         </p>
         <p
-          (click)="setMove(currentStep + 1)"
+          (click)="setMove(currentStep + 1, 'forward')"
           [ngClass]="currentStep === displayMoves.length - 1 && 'isBlur'"
         >
           <img src="../../../assets/images/moves/icons8-more-than-60.png" />
         </p>
         <p
-          (click)="setMove(displayMoves.length - 1)"
+          (click)="setMove(displayMoves.length - 1, 'forward')"
           [ngClass]="currentStep === displayMoves.length - 1 && 'isBlur'"
         >
           <img src="../../../assets/images/moves/icons8-fast-forward-100.png" />
         </p>
       </div>
       <div class="display-step" (scroll)="scrolled($event)" #scrollframe>
         <div class="table-moves" #item>
-          <div>
+          <div style="width: 100px">
             <div
               *ngFor="let item of displayMoves; let i = index"
-              (click)="setMove(i)"
+              (click)="setMove(i, 'direct')"
             >
-              <p *ngIf="i % 2 === 0">
-                <img [src]="imgPos(i)" alt="" width="40%" /> {{ item.pos }}
+              <p
+                *ngIf="i % 2 === 0"
+                [class.tableMove-selected]="i == currentStep"
+              >
+                <img [src]="imgPos(i)" alt="" class="imgRes" />
+                {{ item.pos }}
               </p>
             </div>
           </div>
-          <div>
+          <div style="width: 100px">
             <div
               *ngFor="let item of displayMoves; let i = index"
-              (click)="setMove(i)"
+              (click)="setMove(i, 'direct')"
             >
-              <p *ngIf="i % 2 !== 0">
-                <img [src]="imgPos(i)" alt="" width="40%" />{{ item.pos }}
+              <p
+                *ngIf="i % 2 !== 0"
+                [class.tableMove-selected]="i == currentStep"
+              >
+                <img [src]="imgPos(i)" alt="" class="imgRes" />{{ item.pos }}
               </p>
             </div>
           </div>

YStemAndChess/src/app/pages/play/play.component.scss

@@ -46,13 +46,24 @@
   justify-content: center;
   align-items: center;
 }
+.tableMove-selected {
+  background-color: white !important;
+}
+.imgRes {
+  height: 30px !important;
+  width: 30px !important;
+  margin: 0px 0px 8px;
+  padding: 3.2px;
+}
 
 .display-step {
   display: block;
   height: 20rem;
   overflow: hidden scroll;
   cursor: pointer;
   background-color: lightgray;
+  padding: 7%;
+  width: fit-content;
 }
 table {
   text-align: center;

YStemAndChess/src/app/pages/play/play.component.ts

@@ -64,7 +64,6 @@ export class PlayComponent implements OnInit {
   @ViewChildren('item') itemElements: QueryList<any>;
   ngOnInit() {
     let userContent;
-
     if (this.cookie.check('login')) {
       userContent = JSON.parse(atob(this.cookie.get('login').split('.')[1]));
       this.httpGetAsync(
@@ -206,18 +205,18 @@ export class PlayComponent implements OnInit {
             })
           );
           this.socket.listen('boardState').subscribe((data) => {
-            setTimeout(()=>{              
+            setTimeout(() => {
               this.getMovesList();
-              setTimeout(()=>{              
+              setTimeout(() => {
                 this.scrollToBottom();
-            }, 500);
-          }, 1000);
+              }, 1000);
+            }, 1000);
             if (this.isReady && this.isStepLast) {
               let newData = JSON.parse(<string>data);
               var chessBoard = (<HTMLFrameElement>(
                 document.getElementById('chessBd')
               )).contentWindow;
-              this.getMovesList();
+              //this.getMovesList();
               chessBoard.postMessage(
                 JSON.stringify({
                   boardState: newData.boardState,
@@ -259,7 +258,7 @@ export class PlayComponent implements OnInit {
             let info = e.data;
             const temp = info.split(':');
             const piece = info.split('-');
-          
+
             if (info == 'ReadyToRecieve') {
               this.isReady = true;
               this.sendFromQueue();
@@ -317,7 +316,12 @@ export class PlayComponent implements OnInit {
     url = `${environment.urls.middlewareURL}/meetings/getBoardState?meetingId=${this.meetingId}`;
     this.httpGetAsync(url, 'GET', (response) => {
       response = JSON.parse(response);
-      this.displayMoves = response.moves || [];
+      let finalMove =
+        response.moves.length > 0
+          ? response.moves[response.moves.length - 1]
+          : response.moves;
+      this.displayMoves = finalMove || [];
+      this.currentStep = finalMove.length > 0 ? finalMove.length - 1 : 0;
     });
   };
   private sendFromQueue() {
@@ -372,22 +376,25 @@ export class PlayComponent implements OnInit {
       'newState',
       JSON.stringify({ boardState: data, username: userContent.username })
     );
-    this.getMovesList();
+    // this.getMovesList();
     let url: string;
     url = `${environment.urls.middlewareURL}/meetings/boardState?meetingId=${this.meetingId}&fen=${data}&pos=${this.move}&image=${this.pieceImage}`;
     this.httpGetAsync(url, 'POST', (response) => {
       response = JSON.parse(response);
-      this.displayMoves = response.moves || [];
+      let finalMove =
+        response.moves.length > 0
+          ? response.moves[response.moves.length - 1]
+          : response.moves;
+      this.displayMoves = finalMove || [];
       this.scrollToBottom();
     });
-      setTimeout(()=>{              
-        this.getMovesList();
-          setTimeout(()=>{              
-            this.scrollToBottom();
-        }, 500);
+    setTimeout(() => {
+      this.getMovesList();
+      setTimeout(() => {
+        this.scrollToBottom();
+      }, 500);
     }, 1000);
   }
-
   public createNewGame() {
     let userContent = JSON.parse(atob(this.cookie.get('login').split('.')[1]));
     this.socket.emitMessage(
@@ -403,20 +410,35 @@ export class PlayComponent implements OnInit {
       JSON.stringify({ username: userContent.username })
     );
   }
-  setMove(index) {
+  setMove(index, direction) {
     this.currentStep =
       index <= 0
         ? 0
         : index > this.displayMoves.length - 1
         ? this.displayMoves.length - 1
         : index;
-    if (this.displayMoves.length - 1 === index) {
-      this.isStepLast = true;
-      this.reload();
+    if (direction != 'backward') {
+      if (this.displayMoves.length - 1 === index) {
+        this.isStepLast = true;
+        this.reload();
+      } else {
+        this.isStepLast = false;
+      }
+    } else {
+      if (this.displayMoves.length <= index) {
+        this.isStepLast = true;
+        this.reload();
+      } else {
+        this.isStepLast = false;
+      }
+    }
+    let movePos = 0;
+    if (index <= 0) {
+      movePos = 0;
     } else {
-      this.isStepLast = false;
+      movePos = index - 1;
     }
-    this.changeBoardState(this.displayMoves[index]?.fen);
+    this.changeBoardState(this.displayMoves[movePos]?.fen);
     if (this.isNearBottom) {
       this.scrollToBottom();
     }
@@ -430,7 +452,7 @@ export class PlayComponent implements OnInit {
   }
 
   private scrollToBottom(): void {
-    this.scrollContainer = this.scrollFrame.nativeElement;
+    this.scrollContainer = this.scrollFrame?.nativeElement;
     this.scrollContainer?.scroll({
       top: this.scrollContainer?.scrollHeight,
       left: 0,