Merge pull request #74 from theImmortalCoders/dev

Release 0.8

Dockerfile

@@ -0,0 +1,29 @@
+FROM --platform=$BUILDPLATFORM node:20.11.1-bullseye-slim as builder
+
+RUN mkdir /project
+WORKDIR /project
+
+RUN npm install -g @angular/cli@18
+
+COPY "rag-2-frontend/package.json" "rag-2-frontend/package-lock.json" ./
+RUN npm ci
+
+COPY . .
+CMD ["ng", "serve", "--host", "0.0.0.0"]
+
+FROM builder as dev-envs
+
+RUN <<EOF
+apt-get update
+apt-get install -y --no-install-recommends git
+EOF
+
+RUN <<EOF
+useradd -s /bin/bash -m vscode
+groupadd docker
+usermod -aG docker vscode
+EOF
+
+COPY "rag-2-frontend/" .
+
+CMD ["ng", "serve", "--host", "0.0.0.0"]

src/app/game/components/ai-socket-menu/ai-socket-menu.component.spec.ts

@@ -1,10 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { AiSocketMenuComponent } from './ai-socket-menu.component';
-import { PlayerSourceType } from 'app/game/models/player-source-type.enum';
-import { TExchangeData } from 'app/game/models/exchange-data.type';
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { Player } from 'app/game/models/player.class';
+import { TExchangeData } from '@gameModels/exchange-data.type';
+import { Player } from '@gameModels/player.class';
+import { PlayerSourceType } from 'app/shared/models/player-source-type.enum';
 
 @Component({
   selector: 'app-player-socket-menu',

src/app/game/components/ai-socket-menu/ai-socket-menu.component.ts

@@ -1,11 +1,11 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TExchangeData } from '../../models/exchange-data.type';
+import { TExchangeData } from '@gameModels/exchange-data.type';
 import { SocketDomainInputComponent } from './components/components/components/socket-domain-input/socket-domain-input.component';
 import { SocketConnectedMenuComponent } from './components/components/components/socket-connected-menu/socket-connected-menu.component';
 import { DebugModeMenuComponent } from './components/components/components/debug-mode-menu/debug-mode-menu.component';
 import { DebugModePanelComponent } from './components/components/components/debug-mode-panel/debug-mode-panel.component';
-import { Player } from 'app/game/models/player.class';
-import { PlayerSourceType } from 'app/game/models/player-source-type.enum';
+import { Player } from '@gameModels/player.class';
+import { PlayerSourceType } from 'app/shared/models/player-source-type.enum';
 import { PlayerSocketMenuComponent } from './components/player-socket-menu.component';
 import { Observable, Subscription } from 'rxjs';
 

src/app/game/components/ai-socket-menu/components/components/components/debug-mode-panel/debug-mode-panel.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { TExchangeData } from '../../../../../../models/exchange-data.type';
+import { TExchangeData } from '@gameModels/exchange-data.type';
 import { KeyValuePipe } from '@angular/common';
-import { Player } from 'app/game/models/player.class';
+import { Player } from '@gameModels/player.class';
 
 @Component({
   selector: 'app-debug-mode-panel',

src/app/game/components/ai-socket-menu/components/components/components/socket-connected-menu/socket-connected-menu.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core';
+import { AfterViewInit, Component, inject, Input, OnInit } from '@angular/core';
+import { UrlParamService } from 'app/shared/services/url-param.service';
 
 @Component({
   selector: 'app-socket-connected-menu',
@@ -25,9 +26,7 @@ import { Component, Input } from '@angular/core';
         max="1000"
         step="10"
         [defaultValue]="vSendingInterval.value"
-        (change)="
-          vSendingInterval.value = sendingIntervalInput.valueAsNumber
-        " />
+        (change)="updateValue(sendingIntervalInput.valueAsNumber)" />
       <button
         [attr.disabled]="isPaused ? 'disabled' : null"
         (click)="startDataExchange(vSendingInterval.value)"
@@ -39,7 +38,7 @@ import { Component, Input } from '@angular/core';
     }
   `,
 })
-export class SocketConnectedMenuComponent {
+export class SocketConnectedMenuComponent implements OnInit {
   @Input({ required: true }) public isDataSendingActive = false;
   @Input({ required: true }) public vSendingInterval = { value: 100 };
   @Input({ required: true }) public socket: WebSocket | null = null;
@@ -52,4 +51,38 @@ export class SocketConnectedMenuComponent {
     console.log('stopDataExchange');
   };
   @Input({ required: true }) public isPaused = false;
+  @Input({ required: true }) public playerId!: number;
+
+  private _urlParamService = inject(UrlParamService);
+
+  public ngOnInit(): void {
+    this.syncPropsWithUrl();
+  }
+
+  public updateValue(value: number): void {
+    this.vSendingInterval.value = value;
+
+    this._urlParamService.setQueryParam(
+      'player-' + this.playerId + '-sending-interval',
+      this.vSendingInterval.value.toString()
+    );
+  }
+
+  //
+
+  private syncPropsWithUrl(): void {
+    setTimeout(() => {
+      const sendingInterval = this._urlParamService.getQueryParam(
+        'player-' + this.playerId + '-sending-interval'
+      );
+      if (sendingInterval !== null) {
+        this.vSendingInterval.value = sendingInterval as unknown as number;
+      } else {
+        this._urlParamService.setQueryParam(
+          'player-' + this.playerId + '-sending-interval',
+          this.vSendingInterval.value.toString()
+        );
+      }
+    });
+  }
 }

src/app/game/components/ai-socket-menu/components/components/components/socket-domain-input/socket-domain-input.component.ts

@@ -10,6 +10,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
       #socketDomain
       placeholder="localhost:8001"
       type="text"
+      [value]="initialValue"
       (change)="socketDomainEmitter.emit(socketDomain.value)"
       list="recentPhrases" />
     <datalist id="recentPhrases">
@@ -22,6 +23,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 })
 export class SocketDomainInputComponent implements OnInit {
   @Input({ required: true }) public gameName = '';
+  @Input() public initialValue = '';
   @Output() public socketDomainEmitter = new EventEmitter<string>();
   @Output() public recentPhrasesEmitter = new EventEmitter<string[]>();
 

src/app/game/components/ai-socket-menu/components/components/player-socket-connection-menu.component.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   Component,
   EventEmitter,
   inject,
@@ -8,12 +9,14 @@ import {
   Output,
 } from '@angular/core';
 import { AiSocketService } from '../../services/ai-socket.service';
-import { TExchangeData } from 'app/game/models/exchange-data.type';
-import { PlayerSourceType } from 'app/game/models/player-source-type.enum';
-import { Player } from 'app/game/models/player.class';
+import { TExchangeData } from '@gameModels/exchange-data.type';
+import { PlayerSourceType } from 'app/shared/models/player-source-type.enum';
+import { Player } from '@gameModels/player.class';
 import { SocketDomainInputComponent } from './components/socket-domain-input/socket-domain-input.component';
 import { SocketConnectedMenuComponent } from './components/socket-connected-menu/socket-connected-menu.component';
 import { Observable, Subscription } from 'rxjs';
+import { PageVisibilityService } from 'app/shared/services/page-visibility.service';
+import { UrlParamService } from 'app/shared/services/url-param.service';
 
 @Component({
   selector: 'app-player-socket-connection-menu',
@@ -24,6 +27,7 @@ import { Observable, Subscription } from 'rxjs';
     <div class="flex flex-col w-full">
       <app-socket-domain-input
         class="mb-2"
+        [initialValue]="socketUrl"
         [gameName]="gameName"
         (socketDomainEmitter)="socketUrl = $event"
         (recentPhrasesEmitter)="recentPhrases = $event" />
@@ -37,7 +41,8 @@ import { Observable, Subscription } from 'rxjs';
           [socket]="aiSocketService.getSocket()"
           [startDataExchange]="onStartDataExchangeClick"
           [stopDataExchange]="aiSocketService.stopDataExchange"
-          [isPaused]="isPaused" />
+          [isPaused]="isPaused"
+          [playerId]="player.id" />
       } @else {
         <button
           (click)="onConnectButtonClick()"
@@ -60,6 +65,8 @@ export class PlayerSocketConnectionMenuComponent implements OnInit, OnDestroy {
 
   @Output() public receivedDataEmitter = new EventEmitter<TExchangeData>();
 
+  private _pageVisibilityService = inject(PageVisibilityService);
+  private _urlParamService = inject(UrlParamService);
   private _pauseSubscription = new Subscription();
   private _restartSubscription = new Subscription();
 
@@ -73,7 +80,7 @@ export class PlayerSocketConnectionMenuComponent implements OnInit, OnDestroy {
 
   public ngOnInit(): void {
     this._restartSubscription = this.gameRestart.subscribe(() => {
-      console.log('Restart - ai socket');
+      console.log('Restart - ai socket'); //can be used
     });
     this._pauseSubscription = this.gamePause.subscribe(value => {
       if (value) {
@@ -83,10 +90,25 @@ export class PlayerSocketConnectionMenuComponent implements OnInit, OnDestroy {
         this.isPaused = false;
         this.aiSocketService.resumeDataExchange(
           this.vSendingInterval.value,
-          this.player.inputData
+          this.player.inputData,
+          this.player.id
         );
       }
     });
+
+    this._pageVisibilityService.getVisibilityState().subscribe(isVisible => {
+      if (!isVisible) {
+        this.aiSocketService.pauseDataExchange();
+      } else if (!this.isPaused) {
+        this.aiSocketService.resumeDataExchange(
+          this.vSendingInterval.value,
+          this.player.inputData,
+          this.player.id
+        );
+      }
+    });
+
+    this.syncPropsWithUrl();
   }
 
   public ngOnDestroy(): void {
@@ -107,12 +129,18 @@ export class PlayerSocketConnectionMenuComponent implements OnInit, OnDestroy {
         console.log('onConnectButtonClick');
       }
     );
+
+    this._urlParamService.setQueryParam(
+      'player-' + this.player.id + '-socketUrl',
+      this.socketUrl
+    );
   }
 
   public onStartDataExchangeClick = (): void => {
     this.aiSocketService.startDataExchange(
       this.vSendingInterval.value,
-      this.player.inputData
+      this.player.inputData,
+      this.player.id
     );
   };
 
@@ -135,4 +163,21 @@ export class PlayerSocketConnectionMenuComponent implements OnInit, OnDestroy {
       JSON.stringify(this.recentPhrases)
     );
   }
+
+  private syncPropsWithUrl(): void {
+    setTimeout(() => {
+      const socketUrl = this._urlParamService.getQueryParam(
+        'player-' + this.player.id + '-socketUrl'
+      );
+
+      if (socketUrl !== null) {
+        this.socketUrl = socketUrl;
+      } else {
+        this._urlParamService.setQueryParam(
+          'player-' + this.player.id + '-socketUrl',
+          this.socketUrl
+        );
+      }
+    });
+  }
 }

src/app/game/components/ai-socket-menu/components/player-socket-menu.component.spec.ts

@@ -1,13 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PlayerSocketMenuComponent } from './player-socket-menu.component';
-import { Player } from 'app/game/models/player.class';
+import { Player } from '@gameModels/player.class';
 import { DebugModeMenuComponent } from './components/components/debug-mode-menu/debug-mode-menu.component';
 import { DebugModePanelComponent } from './components/components/debug-mode-panel/debug-mode-panel.component';
 import { SocketDomainInputComponent } from './components/components/socket-domain-input/socket-domain-input.component';
 import { SocketConnectedMenuComponent } from './components/components/socket-connected-menu/socket-connected-menu.component';
 import { AiSocketService } from '../services/ai-socket.service';
 import { By } from '@angular/platform-browser';
-import { PlayerSourceType } from 'app/game/models/player-source-type.enum';
+import { PlayerSourceType } from 'app/shared/models/player-source-type.enum';
 
 describe('PlayerSocketMenuComponent', () => {
   let component: PlayerSocketMenuComponent;

src/app/game/components/ai-socket-menu/components/player-socket-menu.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TExchangeData } from 'app/game/models/exchange-data.type';
-import { Player } from 'app/game/models/player.class';
+import { TExchangeData } from '@gameModels/exchange-data.type';
+import { Player } from '@gameModels/player.class';
 import { DebugModeMenuComponent } from './components/components/debug-mode-menu/debug-mode-menu.component';
 import { DebugModePanelComponent } from './components/components/debug-mode-panel/debug-mode-panel.component';
 import { SocketDomainInputComponent } from './components/components/socket-domain-input/socket-domain-input.component';

src/app/game/components/ai-socket-menu/services/ai-socket.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { TExchangeData } from '../../../models/exchange-data.type';
+import { TExchangeData } from '@gameModels/exchange-data.type';
 
 @Injectable({
   providedIn: 'root',
@@ -41,10 +41,11 @@ export class AiSocketService {
 
   public startDataExchange = (
     sendingInterval: number,
-    expectedDataToReceive: TExchangeData
+    expectedDataToReceive: TExchangeData,
+    playerId: number
   ): void => {
     this.isDataExchangeDesired = true;
-    this.resumeDataExchange(sendingInterval, expectedDataToReceive);
+    this.resumeDataExchange(sendingInterval, expectedDataToReceive, playerId);
   };
 
   public stopDataExchange = (): void => {
@@ -57,17 +58,21 @@ export class AiSocketService {
   public pauseDataExchange = (): void => {
     this.isDataSendingActive = false;
     clearInterval(this._sendingIntervalID as number);
-    console.log('Data exchange stopped', this._sendingIntervalID as number);
+    console.log(
+      'Data exchange stopped on interval: ',
+      this._sendingIntervalID as number
+    );
   };
 
   public resumeDataExchange = (
     sendingInterval: number,
-    expectedDataToReceive: TExchangeData
+    expectedDataToReceive: TExchangeData,
+    playerId: number
   ): void => {
     if (!this.isDataExchangeDesired) return;
     this.isDataSendingActive = true;
     this._sendingIntervalID = setInterval(() => {
-      this.sendDataToSocket(this._dataToSend, expectedDataToReceive);
+      this.sendDataToSocket(this._dataToSend, expectedDataToReceive, playerId);
     }, sendingInterval);
   };
 
@@ -91,18 +96,20 @@ export class AiSocketService {
 
   private sendDataToSocket(
     dataToSend: TExchangeData,
-    expectedDataToReceive: TExchangeData
+    expectedDataToReceive: TExchangeData,
+    playerId: number
   ): void {
     if (this._socket && this.isSocketConnected) {
       this._socket.send(
         JSON.stringify({
           name: dataToSend['name'],
+          playerId: playerId,
           state: dataToSend['state'],
           players: dataToSend['players'],
-          expected_input: expectedDataToReceive,
+          expectedInput: expectedDataToReceive,
         })
       );
-      console.log('Data sent', this._sendingIntervalID as number);
+      // console.log('Data sent', this._sendingIntervalID as number);
     }
   }
 }

src/app/game/components/canvas/canvas.component.ts

@@ -19,13 +19,13 @@ import * as feather from 'feather-icons';
         [attr.width]="width"
         [attr.height]="height"
         class="border-mainOrange border-2"></canvas>
-      <button
+      <!-- <button
         (click)="toggleFullscreen()"
         class="absolute -bottom-16 -right-16">
         <i
           data-feather="maximize"
           class="size-9 hover:size-10 opacity-70 hover:opacity-100 transition-all ease-in-out duration-100"></i>
-      </button>
+      </button> -->
     </div>
   `,
 })