namechange (GAMELEVEL -> GAMESTATE), to logically match the functiona…

…lity of game + make static variable dynamic

angular.json

@@ -5,7 +5,8 @@
     "packageManager": "bun",
     "schematicCollections": [
       "@angular-eslint/schematics"
-    ]
+    ],
+    "analytics": "97ed279a-5c3e-4be1-903e-cfa6db37bd8a"
   },
   "newProjectRoot": "projects",
   "projects": {

src/app/game/game-draw/game-draw.component.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject, interval, Observable, Subscription } from 'rxjs';
 import { ImageService } from './services/image.service';
 import { take } from 'rxjs/operators';
 import { DrawingService } from './services/drawing.service';
-import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service';
+import { MultiplayerService, GAMESTATE } from '../game-multiplayer/services/multiplayer.service';
 import { Result } from '../../shared/models/interfaces';
 import { SoundService } from './services/sound.service';
 
@@ -29,10 +29,10 @@ export class GameDrawComponent implements OnInit, OnDestroy {
 
   isDrawing = false;
   hasLeftCanvas = false;
-  timeLeft = 20.0;
+  timeLeft = 20.0; //bad
   isBlankImage = true;
 
-  score = 333;
+  score = 333; //bad
 
   clockColor = 'initial';
   private readonly resultImageSize = 1024;
@@ -113,7 +113,7 @@ export class GameDrawComponent implements OnInit, OnDestroy {
     this.addResultAndResize(result).subscribe({
       next: (dataUrlHighRes) => {
         this.drawingService.lastResult.imageData = dataUrlHighRes;
-        this.multiplayerService.changestate(GAMELEVEL.intermediateResult);
+        this.multiplayerService.changestate(GAMESTATE.intermediateResult);
       },
     });
   }

src/app/game/game-draw/services/drawing.service.ts

@@ -11,7 +11,7 @@ import { endpoints } from '../../../shared/models/endpoints';
 })
 export class DrawingService {
   baseUrl = endpoints.TEKNISKBACKEND;
-  totalGuess = 3;
+  totalGuess = 4; //bad
   playerid = '';
   labels = [];
   label = '';

src/app/game/game-info/game-info.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
 import { routes } from '../../shared/models/routes';
-import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service';
+import { MultiplayerService, GAMESTATE } from '../game-multiplayer/services/multiplayer.service';
 import { WebSocketService } from '../game-multiplayer/services/web-socket.service';
 import { SocketEndpoints } from '../../shared/models/websocketEndpoints';
 
@@ -31,7 +31,7 @@ export class GameInfoComponent implements OnInit {
           this.multiplayerService.stateInfo = {
             ...this.multiplayerService.stateInfo,
             label: res.label,
-            gameLevel: GAMELEVEL.waitingForWord,
+            gameState: GAMESTATE.waitingForWord,
           };
         }
       });

src/app/game/game-intermediate-result/game-intermediate-result.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, EventEmitter, Output, OnDestroy } from '@angular/core';
 import { Result } from '../../shared/models/interfaces';
 import { DrawingService } from '../game-draw/services/drawing.service';
-import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service';
+import { MultiplayerService, GAMESTATE } from '../game-multiplayer/services/multiplayer.service';
 import { Router } from '@angular/router';
 import { routes } from '../../shared/models/routes';
 @Component({
@@ -43,7 +43,7 @@ export class GameIntermediateResultComponent implements OnInit, OnDestroy {
         if (res) {
           this.multiplayerService.stateInfo = {
             ...this.multiplayerService.stateInfo,
-            gameLevel: GAMELEVEL.waitingForWord,
+            gameState: GAMESTATE.waitingForWord,
           };
         }
       });
@@ -68,7 +68,7 @@ export class GameIntermediateResultComponent implements OnInit, OnDestroy {
     if (this.multiplayerService.isMultiplayer && this.multiplayerService.stateInfo.ready) {
       this.multiplayerService.stateInfo = {
         ...this.multiplayerService.stateInfo,
-        gameLevel: GAMELEVEL.waitingForWord,
+        gameState: GAMESTATE.waitingForWord,
       };
     } else {
       this.nextGuess.next(true);
@@ -79,7 +79,7 @@ export class GameIntermediateResultComponent implements OnInit, OnDestroy {
     if (this.multiplayerService.isMultiplayer && this.gameOver) {
       this.multiplayerService.stateInfo = {
         ...this.multiplayerService.stateInfo,
-        gameLevel: GAMELEVEL.showResult,
+        gameState: GAMESTATE.showResult,
       };
     } else {
       this.finalResult.next(true);

src/app/game/game-multiplayer/multiplayer.component.html

@@ -1,11 +1,11 @@
-<div [ngSwitch]="gameLevel">
-  <div *ngSwitchCase="GAMELEVEL.howToPlay" [@enterAnimation]><app-game-info></app-game-info></div>
-  <div *ngSwitchCase="GAMELEVEL.waitingForWord" [@enterAnimation]><app-game-word-to-draw></app-game-word-to-draw></div>
-  <div *ngSwitchCase="GAMELEVEL.drawing" [@enterAnimation]><app-drawing></app-drawing></div>
-  <div *ngSwitchCase="GAMELEVEL.intermediateResult" [@enterAnimation]>
+<div [ngSwitch]="gameState">
+  <div *ngSwitchCase="GAMESTATE.howToPlay" [@enterAnimation]><app-game-info></app-game-info></div>
+  <div *ngSwitchCase="GAMESTATE.waitingForWord" [@enterAnimation]><app-game-word-to-draw></app-game-word-to-draw></div>
+  <div *ngSwitchCase="GAMESTATE.drawing" [@enterAnimation]><app-drawing></app-drawing></div>
+  <div *ngSwitchCase="GAMESTATE.intermediateResult" [@enterAnimation]>
     <app-game-intermediate-result></app-game-intermediate-result>
   </div>
-  <div *ngSwitchCase="GAMELEVEL.showResult" [@enterAnimation]>
+  <div *ngSwitchCase="GAMESTATE.showResult" [@enterAnimation]>
     <app-game-result></app-game-result>
   </div>
   <div *ngSwitchDefault [@enterAnimation]>

src/app/game/game-multiplayer/multiplayer.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { trigger, style, animate, transition } from '@angular/animations';
 import { Router } from '@angular/router';
 
-import { MultiplayerService, GAMELEVEL } from './services/multiplayer.service';
+import { MultiplayerService, GAMESTATE } from './services/multiplayer.service';
 import { WebSocketService } from './services/web-socket.service';
 import { routes } from '../../shared/models/routes';
 import { Subscription } from 'rxjs';
@@ -38,8 +38,8 @@ import { Subscription } from 'rxjs';
   ],
 })
 export class MultiplayerComponent implements OnInit, OnDestroy {
-  gameLevel: string | undefined;
-  GAMELEVEL = GAMELEVEL;
+  gameState: string | undefined;
+  GAMESTATE = GAMESTATE;
   constructor(
     private multiplayerService: MultiplayerService,
     private webSocketService: WebSocketService,
@@ -54,15 +54,15 @@ export class MultiplayerComponent implements OnInit, OnDestroy {
       this.multiplayerService.isMultiplayer = true;
     }
     this.webSocketService.startSockets();
-    this.gameLevel = this.multiplayerService.stateInfo.gameLevel;
+    this.gameState = this.multiplayerService.stateInfo.gameState;
     this.subs.add(
       this.multiplayerService.roundOverListener().subscribe(() => {
         this.multiplayerService.stateInfo = { ...this.multiplayerService.stateInfo, ready: true };
       })
     );
     this.subs.add(
       this.multiplayerService.stateInfo$.subscribe((data) => {
-        this.gameLevel = data.gameLevel;
+        this.gameState = data.gameState;
       })
     );
     this.subs.add(

src/app/game/game-multiplayer/services/multiplayer.service.ts

@@ -5,7 +5,7 @@ import { map, take, tap } from 'rxjs/operators';
 import { SocketEndpoints } from '../../../shared/models/websocketEndpoints';
 import { PairingService } from './pairing.service';
 
-export enum GAMELEVEL {
+export enum GAMESTATE { //bad (illogical) -- endre til 'GAMESTATE'??
   lobby = 'LOBBY',
   drawing = 'DRAWING',
   intermediateResult = 'INTERMEDIATERESULT',
@@ -18,7 +18,7 @@ export interface GameState {
   player_id: string | undefined;
   game_id: string | undefined;
   ready: boolean | undefined;
-  gameLevel: GAMELEVEL | undefined;
+  gameState: GAMESTATE | undefined;
   guessUsed: number | undefined;
   score: number | undefined;
   label: string | undefined;
@@ -37,7 +37,7 @@ export class MultiplayerService {
 
   private initialState: GameState = {
     player_nr: undefined,
-    gameLevel: GAMELEVEL.lobby,
+    gameState: GAMESTATE.lobby,
     game_id: undefined,
     player_id: undefined,
     guessUsed: 0,
@@ -68,7 +68,7 @@ export class MultiplayerService {
           this.stateInfo = el;
         }
         if (el.ready) {
-          this.stateInfo = { ...this.stateInfo, ready: el.ready, gameLevel: GAMELEVEL.howToPlay };
+          this.stateInfo = { ...this.stateInfo, ready: el.ready, gameState: GAMESTATE.howToPlay };
         }
       })
     );
@@ -119,10 +119,10 @@ export class MultiplayerService {
     this.webSocketService.disconnect();
   }
 
-  changestate(gameLevel: GAMELEVEL) {
+  changestate(gameState: GAMESTATE) {
     this.stateInfo = {
       ...this.stateInfo,
-      gameLevel,
+      gameState,
     };
   }
 

src/app/game/game-word-to-draw/game-word-to-draw.component.html

@@ -3,7 +3,7 @@
     <div><img class="logo" src="assets/logo/IO-logo-inverted_transparent-bg.png" alt="logo" /></div>
     <h1 class="playernr" *ngIf="isMultiPlayer">Spiller {{ playernr }}</h1>
     <div class="word-text">
-      <div class="words-remaining">{{ guessUsed }}/3</div>
+      <div class="words-remaining">{{ guessUsed }}/{{ totalGuess }}</div>
       <p class="word-draw">Tegn:</p>
       <div *ngIf="loading">
         <mat-spinner class="white-spinner" id="white"></mat-spinner>

src/app/game/game-word-to-draw/game-word-to-draw.component.ts

@@ -4,7 +4,7 @@ import { take, tap } from 'rxjs/operators';
 import { DrawingService } from '../game-draw/services/drawing.service';
 import { Router } from '@angular/router';
 import { routes } from '../../shared/models/routes';
-import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service';
+import { MultiplayerService, GAMESTATE } from '../game-multiplayer/services/multiplayer.service';
 
 @Component({
   selector: 'app-game-word-to-draw',
@@ -22,8 +22,9 @@ export class GameWordToDrawComponent implements OnInit, OnDestroy {
   @Output() drawWord = new EventEmitter();
   word = '';
   guessUsed = 1;
+  totalGuess = this.drawingService.totalGuess;
 
-  timeLeft = 5;
+  timeLeft = 5; //bad
 
   loading = true;
   playernr = '';
@@ -32,13 +33,15 @@ export class GameWordToDrawComponent implements OnInit, OnDestroy {
   timerSubscription: Subscription | undefined;
 
   ngOnInit(): void {
+
     if (this.router.url === `/${routes.SINGLEPLAYER}`) {
       this.isSinglePlayer = true;
     } else {
       this.isMultiPlayer = true;
     }
     if (this.isSinglePlayer) {
       if (this.drawingService.gameHasStarted) {
+
         this.subscriptions.add(
           this.drawingService.getLabel().subscribe((res) => {
             this.word = res.label;
@@ -92,7 +95,7 @@ export class GameWordToDrawComponent implements OnInit, OnDestroy {
         tap(() => {
           this.timeLeft--;
           if (this.timeLeft <= 0) {
-            this.multiplayerService.stateInfo = { ...this.multiplayerService.stateInfo, gameLevel: GAMELEVEL.drawing };
+            this.multiplayerService.stateInfo = { ...this.multiplayerService.stateInfo, gameState: GAMESTATE.drawing };
           }
         })
       );

src/app/game/game.component.ts

@@ -48,8 +48,8 @@ export class GameComponent implements OnInit, OnDestroy {
     this.drawingService.endGame();
   }
   ngOnInit(): void {
-    this.drawingService.totalGuess = 3;
-    this.drawingService.guessUsed = 1;
+    //this.drawingService.totalGuess = 3; 
+    this.drawingService.guessUsed = 1; //bad?
     this.drawingService.guessDone$.subscribe({
       next: (value) => {
         this.showIntermediateResult = value;