From 935a33b3981bb51cf34d4cbed22967255a066569 Mon Sep 17 00:00:00 2001 From: Erik Tallang Date: Tue, 25 Jun 2024 11:57:53 +0200 Subject: [PATCH 1/5] refactor: convert all components, directives and pipes to standalone --- src/app/admin/admin.component.ts | 7 +- .../dialog-template.component.ts | 15 +++- .../info-dialog/info-dialog.component.ts | 7 +- src/app/admin/info/info.component.ts | 9 ++- src/app/app.module.ts | 48 ++++++------ src/app/game/game-draw/game-draw.component.ts | 16 +++- src/app/game/game-info/game-info.component.ts | 15 +++- .../game-intermediate-result.component.ts | 16 +++- .../game-multiplayer/lobby/lobby.component.ts | 20 ++++- .../game-multiplayer/multiplayer.component.ts | 75 ++++++++++++------- .../game-multiplayer/multiplayer.module.ts | 3 +- .../game/game-result/game-result.component.ts | 17 ++++- .../game-word-to-draw.component.ts | 18 ++++- src/app/game/game.component.ts | 71 +++++++++++------- src/app/game/game.module.ts | 29 ++++--- .../idle-timeout/idle-timeout.component.ts | 21 ++++-- src/app/welcome/welcome.component.ts | 17 ++++- src/app/welcome/welcome.module.ts | 3 +- 18 files changed, 265 insertions(+), 142 deletions(-) diff --git a/src/app/admin/admin.component.ts b/src/app/admin/admin.component.ts index a139a9e2..3ec65bad 100644 --- a/src/app/admin/admin.component.ts +++ b/src/app/admin/admin.component.ts @@ -4,9 +4,10 @@ import { LoginService } from './login.service'; import { MatSnackBar } from '@angular/material/snack-bar'; @Component({ - selector: 'app-admin', - templateUrl: './admin.component.html', - styleUrls: ['./admin.component.scss'], + selector: 'app-admin', + templateUrl: './admin.component.html', + styleUrls: ['./admin.component.scss'], + standalone: true, }) export class AdminComponent { constructor(private router: Router, private loginService: LoginService, private _snackBar: MatSnackBar) {} diff --git a/src/app/admin/dialog-template/dialog-template.component.ts b/src/app/admin/dialog-template/dialog-template.component.ts index d4f7f313..66e72547 100644 --- a/src/app/admin/dialog-template/dialog-template.component.ts +++ b/src/app/admin/dialog-template/dialog-template.component.ts @@ -1,5 +1,6 @@ import { Component, Inject } from '@angular/core'; -import { MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MAT_DIALOG_DATA, MatDialogContent, MatDialogTitle } from '@angular/material/dialog'; +import { CdkScrollable } from '@angular/cdk/scrolling'; export interface DialogData { iterationName: string; @@ -8,9 +9,15 @@ export interface DialogData { } @Component({ - selector: 'app-dialog-template', - templateUrl: './dialog-template.component.html', - styleUrls: ['./dialog-template.component.scss'], + selector: 'app-dialog-template', + templateUrl: './dialog-template.component.html', + styleUrls: ['./dialog-template.component.scss'], + standalone: true, + imports: [ + CdkScrollable, + MatDialogContent, + MatDialogTitle, + ], }) export class DialogTemplateComponent { constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {} diff --git a/src/app/admin/info-dialog/info-dialog.component.ts b/src/app/admin/info-dialog/info-dialog.component.ts index 7ec18742..89684797 100644 --- a/src/app/admin/info-dialog/info-dialog.component.ts +++ b/src/app/admin/info-dialog/info-dialog.component.ts @@ -9,9 +9,10 @@ export interface DialogData { } @Component({ - selector: 'app-info-dialog', - templateUrl: './info-dialog.component.html', - styleUrls: ['./info-dialog.component.scss'], + selector: 'app-info-dialog', + templateUrl: './info-dialog.component.html', + styleUrls: ['./info-dialog.component.scss'], + standalone: true, }) export class InfoDialogComponent { constructor(public dialog: MatDialog) {} diff --git a/src/app/admin/info/info.component.ts b/src/app/admin/info/info.component.ts index 011c9658..66387b2e 100644 --- a/src/app/admin/info/info.component.ts +++ b/src/app/admin/info/info.component.ts @@ -4,11 +4,14 @@ import { LoginService } from '../login.service'; import { MatSnackBar } from '@angular/material/snack-bar'; import { InfoDialogComponent } from './../info-dialog/info-dialog.component'; import { PairingService } from '../../game/game-multiplayer/services/pairing.service'; +import { MatButton } from '@angular/material/button'; @Component({ - selector: 'app-info', - templateUrl: './info.component.html', - styleUrls: ['./info.component.scss'], + selector: 'app-info', + templateUrl: './info.component.html', + styleUrls: ['./info.component.scss'], + standalone: true, + imports: [MatButton], }) export class InfoComponent { datasetString = 'Nullstill treningssett til originalen'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f7ee790a..c6d13099 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,31 +22,27 @@ import { DialogTemplateComponent } from './admin/dialog-template/dialog-template import { CommonModule } from '@angular/common'; @NgModule({ - declarations: [ - AppComponent, - AdminComponent, - InfoComponent, - IdleTimeoutComponent, - InfoDialogComponent, - DialogTemplateComponent, - ], - - imports: [ - BrowserModule, - HttpClientModule, - AppRoutingModule, - WelcomeModule, - GameModule, - MultiplayerModule, - ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), - MatSnackBarModule, - MatDialogModule, - MaterialImportsModule, - BrowserAnimationsModule, - CommonModule, - ], - providers: [HttpClientModule, InfoDialogComponent, AuthGuard, { provide: MAT_DIALOG_DATA, useValue: {} }], - - bootstrap: [AppComponent], + declarations: [AppComponent], + imports: [ + BrowserModule, + HttpClientModule, + AppRoutingModule, + WelcomeModule, + GameModule, + MultiplayerModule, + ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), + MatSnackBarModule, + MatDialogModule, + MaterialImportsModule, + BrowserAnimationsModule, + CommonModule, + AdminComponent, + InfoComponent, + IdleTimeoutComponent, + InfoDialogComponent, + DialogTemplateComponent, + ], + providers: [HttpClientModule, InfoDialogComponent, AuthGuard, { provide: MAT_DIALOG_DATA, useValue: {} }], + bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/game/game-draw/game-draw.component.ts b/src/app/game/game-draw/game-draw.component.ts index a5053a90..c44a5dc1 100644 --- a/src/app/game/game-draw/game-draw.component.ts +++ b/src/app/game/game-draw/game-draw.component.ts @@ -6,11 +6,21 @@ import { DrawingService } from './services/drawing.service'; import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service'; import { Result } from '../../shared/models/interfaces'; import { SoundService } from './services/sound.service'; +import { NgIf, UpperCasePipe } from '@angular/common'; +import { MatIconButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; @Component({ - selector: 'app-drawing', - templateUrl: './game-draw.component.html', - styleUrls: ['./game-draw.component.scss'], + selector: 'app-drawing', + templateUrl: './game-draw.component.html', + styleUrls: ['./game-draw.component.scss'], + standalone: true, + imports: [ + MatIcon, + MatIconButton, + NgIf, + UpperCasePipe, + ], }) export class GameDrawComponent implements OnInit, OnDestroy { canvas = viewChild.required>('canvas'); diff --git a/src/app/game/game-info/game-info.component.ts b/src/app/game/game-info/game-info.component.ts index c729974c..d87e2015 100644 --- a/src/app/game/game-info/game-info.component.ts +++ b/src/app/game/game-info/game-info.component.ts @@ -4,11 +4,20 @@ import { routes } from '../../shared/models/routes'; import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service'; import { WebSocketService } from '../game-multiplayer/services/web-socket.service'; import { SocketEndpoints } from '../../shared/models/websocketEndpoints'; +import { MatButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'app-game-info', - templateUrl: './game-info.component.html', - styleUrls: ['./game-info.component.scss'], + selector: 'app-game-info', + templateUrl: './game-info.component.html', + styleUrls: ['./game-info.component.scss'], + standalone: true, + imports: [ + NgIf, + MatIcon, + MatButton, + ], }) export class GameInfoComponent implements OnInit { @Output() getDrawWord = new EventEmitter(); diff --git a/src/app/game/game-intermediate-result/game-intermediate-result.component.ts b/src/app/game/game-intermediate-result/game-intermediate-result.component.ts index 2cae6947..2c33f302 100644 --- a/src/app/game/game-intermediate-result/game-intermediate-result.component.ts +++ b/src/app/game/game-intermediate-result/game-intermediate-result.component.ts @@ -4,10 +4,20 @@ import { DrawingService } from '../game-draw/services/drawing.service'; import { MultiplayerService, GAMELEVEL } from '../game-multiplayer/services/multiplayer.service'; import { Router } from '@angular/router'; import { routes } from '../../shared/models/routes'; +import { MatProgressSpinner } from '@angular/material/progress-spinner'; +import { MatButton } from '@angular/material/button'; +import { NgIf, UpperCasePipe } from '@angular/common'; @Component({ - selector: 'app-game-intermediate-result', - templateUrl: './game-intermediate-result.component.html', - styleUrls: ['./game-intermediate-result.component.scss'], + selector: 'app-game-intermediate-result', + templateUrl: './game-intermediate-result.component.html', + styleUrls: ['./game-intermediate-result.component.scss'], + standalone: true, + imports: [ + NgIf, + MatButton, + MatProgressSpinner, + UpperCasePipe, + ], }) export class GameIntermediateResultComponent implements OnInit, OnDestroy { result: Result | undefined; diff --git a/src/app/game/game-multiplayer/lobby/lobby.component.ts b/src/app/game/game-multiplayer/lobby/lobby.component.ts index b8381fa5..cdd79808 100644 --- a/src/app/game/game-multiplayer/lobby/lobby.component.ts +++ b/src/app/game/game-multiplayer/lobby/lobby.component.ts @@ -1,11 +1,25 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { MultiplayerService } from '../services/multiplayer.service'; import { Subscription } from 'rxjs'; +import { MatButton } from '@angular/material/button'; +import { RouterLink, RouterLinkActive } from '@angular/router'; +import { MatIcon } from '@angular/material/icon'; +import { MatProgressSpinner } from '@angular/material/progress-spinner'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'app-lobby', - templateUrl: './lobby.component.html', - styleUrls: ['./lobby.component.scss'], + selector: 'app-lobby', + templateUrl: './lobby.component.html', + styleUrls: ['./lobby.component.scss'], + standalone: true, + imports: [ + NgIf, + MatProgressSpinner, + MatIcon, + RouterLink, + RouterLinkActive, + MatButton, + ], }) export class LobbyComponent implements OnInit, OnDestroy { waitingForOtherPlayer = true; diff --git a/src/app/game/game-multiplayer/multiplayer.component.ts b/src/app/game/game-multiplayer/multiplayer.component.ts index e11076ca..2a28a130 100644 --- a/src/app/game/game-multiplayer/multiplayer.component.ts +++ b/src/app/game/game-multiplayer/multiplayer.component.ts @@ -6,36 +6,55 @@ import { MultiplayerService, GAMELEVEL } from './services/multiplayer.service'; import { WebSocketService } from './services/web-socket.service'; import { routes } from '../../shared/models/routes'; import { Subscription } from 'rxjs'; +import { LobbyComponent } from './lobby/lobby.component'; +import { GameResultComponent } from '../game-result/game-result.component'; +import { GameIntermediateResultComponent } from '../game-intermediate-result/game-intermediate-result.component'; +import { GameDrawComponent } from '../game-draw/game-draw.component'; +import { GameWordToDrawComponent } from '../game-word-to-draw/game-word-to-draw.component'; +import { GameInfoComponent } from '../game-info/game-info.component'; +import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; @Component({ - selector: 'app-multiplayer', - templateUrl: './multiplayer.component.html', - styleUrls: ['./multiplayer.component.scss'], - animations: [ - trigger('enterAnimation', [ - transition(':enter', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', - }), - style({ right: '-100%', opacity: 0 }), - animate('.4s ease-out', style({ right: '0%', opacity: 1 })), - ]), - transition(':leave', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', - }), - animate('.4s ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), - ]), - ]), - ], + selector: 'app-multiplayer', + templateUrl: './multiplayer.component.html', + styleUrls: ['./multiplayer.component.scss'], + animations: [ + trigger('enterAnimation', [ + transition(':enter', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + height: '100%', + }), + style({ right: '-100%', opacity: 0 }), + animate('.4s ease-out', style({ right: '0%', opacity: 1 })), + ]), + transition(':leave', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + height: '100%', + }), + animate('.4s ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), + ]), + ]), + ], + standalone: true, + imports: [ + NgSwitch, + NgSwitchCase, + GameInfoComponent, + GameWordToDrawComponent, + GameDrawComponent, + GameIntermediateResultComponent, + GameResultComponent, + NgSwitchDefault, + LobbyComponent, + ], }) export class MultiplayerComponent implements OnInit, OnDestroy { gameLevel: string | undefined; diff --git a/src/app/game/game-multiplayer/multiplayer.module.ts b/src/app/game/game-multiplayer/multiplayer.module.ts index 1c7c7b22..6a847079 100644 --- a/src/app/game/game-multiplayer/multiplayer.module.ts +++ b/src/app/game/game-multiplayer/multiplayer.module.ts @@ -7,7 +7,6 @@ import { AppRoutingModule } from '../../app-routing.module'; import { GameModule } from '../game.module'; @NgModule({ - declarations: [LobbyComponent, MultiplayerComponent], - imports: [CommonModule, MaterialImportsModule, AppRoutingModule, GameModule], + imports: [CommonModule, MaterialImportsModule, AppRoutingModule, GameModule, LobbyComponent, MultiplayerComponent], }) export class MultiplayerModule {} diff --git a/src/app/game/game-result/game-result.component.ts b/src/app/game/game-result/game-result.component.ts index 08e2f3de..e21bb1f8 100644 --- a/src/app/game/game-result/game-result.component.ts +++ b/src/app/game/game-result/game-result.component.ts @@ -3,11 +3,22 @@ import { DrawingService } from '../game-draw/services/drawing.service'; import { Result } from '../../shared/models/interfaces'; import { Router } from '@angular/router'; import { MultiplayerService } from '../game-multiplayer/services/multiplayer.service'; +import { MatButton } from '@angular/material/button'; +import { MatCardImage } from '@angular/material/card'; +import { NgIf, NgFor, TitleCasePipe } from '@angular/common'; @Component({ - selector: 'app-game-result', - templateUrl: './game-result.component.html', - styleUrls: ['./game-result.component.scss'], + selector: 'app-game-result', + templateUrl: './game-result.component.html', + styleUrls: ['./game-result.component.scss'], + standalone: true, + imports: [ + NgIf, + NgFor, + MatCardImage, + MatButton, + TitleCasePipe, + ], }) export class GameResultComponent implements OnInit { results: Result[] = []; diff --git a/src/app/game/game-word-to-draw/game-word-to-draw.component.ts b/src/app/game/game-word-to-draw/game-word-to-draw.component.ts index fda2f644..ffc9eb6f 100644 --- a/src/app/game/game-word-to-draw/game-word-to-draw.component.ts +++ b/src/app/game/game-word-to-draw/game-word-to-draw.component.ts @@ -5,11 +5,23 @@ 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 { MatIcon } from '@angular/material/icon'; +import { MatButton } from '@angular/material/button'; +import { MatProgressSpinner } from '@angular/material/progress-spinner'; +import { NgIf, UpperCasePipe } from '@angular/common'; @Component({ - selector: 'app-game-word-to-draw', - templateUrl: './game-word-to-draw.component.html', - styleUrls: ['./game-word-to-draw.component.scss'], + selector: 'app-game-word-to-draw', + templateUrl: './game-word-to-draw.component.html', + styleUrls: ['./game-word-to-draw.component.scss'], + standalone: true, + imports: [ + NgIf, + MatProgressSpinner, + MatButton, + MatIcon, + UpperCasePipe, + ], }) export class GameWordToDrawComponent implements OnInit, OnDestroy { constructor( diff --git a/src/app/game/game.component.ts b/src/app/game/game.component.ts index 47b3e07b..55b2e843 100644 --- a/src/app/game/game.component.ts +++ b/src/app/game/game.component.ts @@ -2,36 +2,51 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { trigger, style, animate, transition } from '@angular/animations'; import { DrawingService } from './game-draw/services/drawing.service'; +import { GameWordToDrawComponent } from './game-word-to-draw/game-word-to-draw.component'; +import { GameResultComponent } from './game-result/game-result.component'; +import { GameIntermediateResultComponent } from './game-intermediate-result/game-intermediate-result.component'; +import { GameDrawComponent } from './game-draw/game-draw.component'; +import { GameInfoComponent } from './game-info/game-info.component'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'app-game', - templateUrl: './game.component.html', - styleUrls: ['./game.component.scss'], - animations: [ - trigger('enterAnimation', [ - transition(':enter', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', - }), - style({ right: '-100%', opacity: 0 }), - animate('.4s ease-out', style({ right: '0%', opacity: 1 })), - ]), - transition(':leave', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', - }), - animate('.4s ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), - ]), - ]), - ], + selector: 'app-game', + templateUrl: './game.component.html', + styleUrls: ['./game.component.scss'], + animations: [ + trigger('enterAnimation', [ + transition(':enter', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + height: '100%', + }), + style({ right: '-100%', opacity: 0 }), + animate('.4s ease-out', style({ right: '0%', opacity: 1 })), + ]), + transition(':leave', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + height: '100%', + }), + animate('.4s ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), + ]), + ]), + ], + standalone: true, + imports: [ + NgIf, + GameInfoComponent, + GameDrawComponent, + GameIntermediateResultComponent, + GameResultComponent, + GameWordToDrawComponent, + ], }) export class GameComponent implements OnInit, OnDestroy { newGame = false; diff --git a/src/app/game/game.module.ts b/src/app/game/game.module.ts index a23be1d9..c43f75f5 100644 --- a/src/app/game/game.module.ts +++ b/src/app/game/game.module.ts @@ -8,21 +8,18 @@ import { GameIntermediateResultComponent } from './game-intermediate-result/game import { GameResultComponent } from './game-result/game-result.component'; import { GameWordToDrawComponent } from './game-word-to-draw/game-word-to-draw.component'; @NgModule({ - declarations: [ - GameInfoComponent, - GameDrawComponent, - GameComponent, - GameIntermediateResultComponent, - GameResultComponent, - GameWordToDrawComponent, - ], - exports: [ - GameInfoComponent, - GameWordToDrawComponent, - GameDrawComponent, - GameIntermediateResultComponent, - GameResultComponent, - ], - imports: [CommonModule, MaterialImportsModule], + exports: [ + GameInfoComponent, + GameWordToDrawComponent, + GameDrawComponent, + GameIntermediateResultComponent, + GameResultComponent, + ], + imports: [CommonModule, MaterialImportsModule, GameInfoComponent, + GameDrawComponent, + GameComponent, + GameIntermediateResultComponent, + GameResultComponent, + GameWordToDrawComponent], }) export class GameModule {} diff --git a/src/app/idle-timeout/idle-timeout.component.ts b/src/app/idle-timeout/idle-timeout.component.ts index a0584ccf..a148b2a6 100644 --- a/src/app/idle-timeout/idle-timeout.component.ts +++ b/src/app/idle-timeout/idle-timeout.component.ts @@ -1,14 +1,25 @@ import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router } from '@angular/router'; -import { MatDialogRef } from '@angular/material/dialog'; +import { MatDialogRef, MatDialogContent, MatDialogActions } from '@angular/material/dialog'; import { ViewEncapsulation } from '@angular/core'; import { routes } from '../shared/models/routes'; +import { MatIcon } from '@angular/material/icon'; +import { MatButton } from '@angular/material/button'; +import { CdkScrollable } from '@angular/cdk/scrolling'; @Component({ - selector: 'app-idle-timeout', - templateUrl: './idle-timeout.component.html', - styleUrls: ['./idle-timeout.component.scss'], - encapsulation: ViewEncapsulation.None, + selector: 'app-idle-timeout', + templateUrl: './idle-timeout.component.html', + styleUrls: ['./idle-timeout.component.scss'], + encapsulation: ViewEncapsulation.None, + standalone: true, + imports: [ + CdkScrollable, + MatDialogContent, + MatDialogActions, + MatButton, + MatIcon, + ], }) export class IdleTimeoutComponent implements OnInit, OnDestroy { constructor(private router: Router, private dialogRef: MatDialogRef) {} diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts index e5deeed1..c32953fe 100644 --- a/src/app/welcome/welcome.component.ts +++ b/src/app/welcome/welcome.component.ts @@ -1,11 +1,20 @@ import { Component, OnInit } from '@angular/core'; import { MultiplayerService } from '../game/game-multiplayer/services/multiplayer.service'; import { DrawingService } from '../game/game-draw/services/drawing.service'; -import { Router } from '@angular/router'; +import { Router, RouterLink, RouterLinkActive } from '@angular/router'; +import { MatIcon } from '@angular/material/icon'; +import { MatButton } from '@angular/material/button'; @Component({ - selector: 'app-welcome', - templateUrl: './welcome.component.html', - styleUrls: ['./welcome.component.scss'], + selector: 'app-welcome', + templateUrl: './welcome.component.html', + styleUrls: ['./welcome.component.scss'], + standalone: true, + imports: [ + RouterLink, + RouterLinkActive, + MatButton, + MatIcon, + ], }) export class WelcomeComponent implements OnInit { private headerClicks = 0; diff --git a/src/app/welcome/welcome.module.ts b/src/app/welcome/welcome.module.ts index 97ae7995..e4ee9492 100644 --- a/src/app/welcome/welcome.module.ts +++ b/src/app/welcome/welcome.module.ts @@ -5,7 +5,6 @@ import { MaterialImportsModule } from '../shared/material-imports/material-impor import { RouterModule } from '@angular/router'; @NgModule({ - declarations: [WelcomeComponent], - imports: [CommonModule, MaterialImportsModule, RouterModule], + imports: [CommonModule, MaterialImportsModule, RouterModule, WelcomeComponent], }) export class WelcomeModule {} From 63ddb32b774aa5d27f249b4b177ff8aeac0f8595 Mon Sep 17 00:00:00 2001 From: Erik Tallang Date: Tue, 25 Jun 2024 12:00:16 +0200 Subject: [PATCH 2/5] refactor: boot application using standalone apis --- src/app/app.component.ts | 10 +++++---- src/app/app.module.ts | 48 ---------------------------------------- src/main.ts | 29 ++++++++++++++++++++---- 3 files changed, 31 insertions(+), 56 deletions(-) delete mode 100644 src/app/app.module.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 23af807a..33801e2f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,10 +9,12 @@ import { routeTransitionAnimations } from './route-transition-animations'; import { environment } from '../environments/environment'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], - animations: [routeTransitionAnimations], + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + animations: [routeTransitionAnimations], + standalone: true, + imports: [RouterOutlet], }) export class AppComponent implements OnInit { title = 'Teknisk Museum'; diff --git a/src/app/app.module.ts b/src/app/app.module.ts deleted file mode 100644 index c6d13099..00000000 --- a/src/app/app.module.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { BrowserModule } from '@angular/platform-browser'; -import { HttpClientModule } from '@angular/common/http'; -import { NgModule } from '@angular/core'; -import { MatDialogModule } from '@angular/material/dialog'; -import { ServiceWorkerModule } from '@angular/service-worker'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { AppRoutingModule } from './app-routing.module'; -import { AppComponent } from './app.component'; -import { WelcomeModule } from './welcome/welcome.module'; -import { GameModule } from './game/game.module'; -import { MultiplayerModule } from '../app/game/game-multiplayer/multiplayer.module'; -import { environment } from '../environments/environment'; -import { MaterialImportsModule } from './shared/material-imports/material-imports.module'; -import { IdleTimeoutComponent } from './idle-timeout/idle-timeout.component'; -import { AdminComponent } from './admin/admin.component'; -import { InfoComponent } from './admin/info/info.component'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; -import { InfoDialogComponent } from './admin/info-dialog/info-dialog.component'; -import { MAT_DIALOG_DATA } from '@angular/material/dialog'; -import { AuthGuard } from './admin/auth-guard'; -import { DialogTemplateComponent } from './admin/dialog-template/dialog-template.component'; -import { CommonModule } from '@angular/common'; - -@NgModule({ - declarations: [AppComponent], - imports: [ - BrowserModule, - HttpClientModule, - AppRoutingModule, - WelcomeModule, - GameModule, - MultiplayerModule, - ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), - MatSnackBarModule, - MatDialogModule, - MaterialImportsModule, - BrowserAnimationsModule, - CommonModule, - AdminComponent, - InfoComponent, - IdleTimeoutComponent, - InfoDialogComponent, - DialogTemplateComponent, - ], - providers: [HttpClientModule, InfoDialogComponent, AuthGuard, { provide: MAT_DIALOG_DATA, useValue: {} }], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/src/main.ts b/src/main.ts index d9a2e7e4..c58b1289 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,13 +1,34 @@ -import { enableProdMode } from '@angular/core'; +import { enableProdMode, importProvidersFrom } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; + import { environment } from './environments/environment'; +import { AppComponent } from './app/app.component'; +import { CommonModule } from '@angular/common'; +import { provideAnimations } from '@angular/platform-browser/animations'; +import { MaterialImportsModule } from './app/shared/material-imports/material-imports.module'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { ServiceWorkerModule } from '@angular/service-worker'; +import { MultiplayerModule } from './app/game/game-multiplayer/multiplayer.module'; +import { GameModule } from './app/game/game.module'; +import { WelcomeModule } from './app/welcome/welcome.module'; +import { AppRoutingModule } from './app/app-routing.module'; +import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; +import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; +import { AuthGuard } from './app/admin/auth-guard'; +import { InfoDialogComponent } from './app/admin/info-dialog/info-dialog.component'; +import { HttpClientModule, withInterceptorsFromDi, provideHttpClient } from '@angular/common/http'; if (environment.production) { enableProdMode(); } -platformBrowserDynamic() - .bootstrapModule(AppModule) +bootstrapApplication(AppComponent, { + providers: [ + importProvidersFrom(BrowserModule, AppRoutingModule, WelcomeModule, GameModule, MultiplayerModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), MatSnackBarModule, MatDialogModule, MaterialImportsModule, CommonModule), + HttpClientModule, InfoDialogComponent, AuthGuard, { provide: MAT_DIALOG_DATA, useValue: {} }, + provideHttpClient(withInterceptorsFromDi()), + provideAnimations(), + ] +}) .catch((err) => console.error(err)); From 033be2ddb273061b58b74bdb2b496a45b899d4a6 Mon Sep 17 00:00:00 2001 From: Erik Tallang Date: Tue, 25 Jun 2024 12:02:30 +0200 Subject: [PATCH 3/5] feat: automatically generate standalone components through the cli --- angular.json | 51 +++++++++++++++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/angular.json b/angular.json index 242c7ad6..c77718cb 100644 --- a/angular.json +++ b/angular.json @@ -3,9 +3,7 @@ "version": 1, "cli": { "packageManager": "bun", - "schematicCollections": [ - "@angular-eslint/schematics" - ] + "schematicCollections": ["@angular-eslint/schematics"] }, "newProjectRoot": "projects", "projects": { @@ -13,7 +11,32 @@ "projectType": "application", "schematics": { "@schematics/angular:component": { - "style": "scss" + "style": "scss", + "skipTests": true, + "standalone": true + }, + "@schematics/angular:class": { + "skipTests": true + }, + "@schematics/angular:directive": { + "skipTests": true, + "standalone": true + }, + "@schematics/angular:guard": { + "skipTests": true + }, + "@schematics/angular:interceptor": { + "skipTests": true + }, + "@schematics/angular:pipe": { + "skipTests": true, + "standalone": true + }, + "@schematics/angular:resolver": { + "skipTests": true + }, + "@schematics/angular:service": { + "skipTests": true } }, "root": "", @@ -29,20 +52,11 @@ }, "index": "src/index.html", "browser": "src/main.ts", - "polyfills": [ - "zone.js" - ], + "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": [ - "src/favicon.ico", - "src/assets", - "src/manifest.webmanifest" - ], - "styles": [ - "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", - "src/styles.scss" - ], + "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"], + "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"], "scripts": [] }, "configurations": { @@ -116,10 +130,7 @@ "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } } } From 3360571def2ab70061f1cc56bd2c399a2651ede5 Mon Sep 17 00:00:00 2001 From: Erik Tallang Date: Tue, 25 Jun 2024 12:15:01 +0200 Subject: [PATCH 4/5] chore: remove unnecessary modules --- src/app/admin/auth-guard.ts | 24 +++--- .../game-multiplayer/multiplayer.component.ts | 80 +++++++++---------- .../game-multiplayer/multiplayer.module.ts | 12 --- src/app/game/game.module.ts | 25 ------ src/app/{app-routing.module.ts => routes.ts} | 17 ++-- .../material-imports.module.ts | 33 -------- src/app/welcome/welcome.module.ts | 10 --- src/main.ts | 33 +++----- 8 files changed, 68 insertions(+), 166 deletions(-) delete mode 100644 src/app/game/game-multiplayer/multiplayer.module.ts delete mode 100644 src/app/game/game.module.ts rename src/app/{app-routing.module.ts => routes.ts} (72%) delete mode 100644 src/app/shared/material-imports/material-imports.module.ts delete mode 100644 src/app/welcome/welcome.module.ts diff --git a/src/app/admin/auth-guard.ts b/src/app/admin/auth-guard.ts index 08be7096..a83ab8f4 100644 --- a/src/app/admin/auth-guard.ts +++ b/src/app/admin/auth-guard.ts @@ -1,16 +1,14 @@ -import { Injectable } from '@angular/core'; -import { Router } from '@angular/router'; +import { inject } from '@angular/core'; +import { CanActivateFn, Router } from '@angular/router'; import { LoginService } from './login.service'; -import { CanActivate } from '@angular/router'; -@Injectable() -export class AuthGuard implements CanActivate { - constructor(private loginService: LoginService, private router: Router) {} - canActivate() { - if (!this.loginService.isLoggedIn()) { - this.router.navigate(['admin']); - return false; - } - return true; +export const authGuard: CanActivateFn = () => { + const loginService = inject(LoginService); + const router = inject(Router); + + if (!loginService.isLoggedIn()) { + router.navigate(['admin']); + return false; } -} + return true; +}; diff --git a/src/app/game/game-multiplayer/multiplayer.component.ts b/src/app/game/game-multiplayer/multiplayer.component.ts index 2a28a130..d6ba69b7 100644 --- a/src/app/game/game-multiplayer/multiplayer.component.ts +++ b/src/app/game/game-multiplayer/multiplayer.component.ts @@ -15,46 +15,46 @@ import { GameInfoComponent } from '../game-info/game-info.component'; import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; @Component({ - selector: 'app-multiplayer', - templateUrl: './multiplayer.component.html', - styleUrls: ['./multiplayer.component.scss'], - animations: [ - trigger('enterAnimation', [ - transition(':enter', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', - }), - style({ right: '-100%', opacity: 0 }), - animate('.4s ease-out', style({ right: '0%', opacity: 1 })), - ]), - transition(':leave', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - height: '100%', - }), - animate('.4s ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), - ]), - ]), - ], - standalone: true, - imports: [ - NgSwitch, - NgSwitchCase, - GameInfoComponent, - GameWordToDrawComponent, - GameDrawComponent, - GameIntermediateResultComponent, - GameResultComponent, - NgSwitchDefault, - LobbyComponent, - ], + selector: 'app-multiplayer', + templateUrl: './multiplayer.component.html', + styleUrls: ['./multiplayer.component.scss'], + animations: [ + trigger('enterAnimation', [ + transition(':enter', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + height: '100%', + }), + style({ right: '-100%', opacity: 0 }), + animate('.4s ease-out', style({ right: '0%', opacity: 1 })), + ]), + transition(':leave', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + height: '100%', + }), + animate('.4s ease-out', style({ transform: 'translateX(-100%)', opacity: 0 })), + ]), + ]), + ], + standalone: true, + imports: [ + NgSwitch, + NgSwitchCase, + GameInfoComponent, + GameWordToDrawComponent, + GameDrawComponent, + GameIntermediateResultComponent, + GameResultComponent, + NgSwitchDefault, + LobbyComponent, + ], }) export class MultiplayerComponent implements OnInit, OnDestroy { gameLevel: string | undefined; diff --git a/src/app/game/game-multiplayer/multiplayer.module.ts b/src/app/game/game-multiplayer/multiplayer.module.ts deleted file mode 100644 index 6a847079..00000000 --- a/src/app/game/game-multiplayer/multiplayer.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { MaterialImportsModule } from '../../shared/material-imports/material-imports.module'; -import { LobbyComponent } from './lobby/lobby.component'; -import { MultiplayerComponent } from './multiplayer.component'; -import { AppRoutingModule } from '../../app-routing.module'; -import { GameModule } from '../game.module'; - -@NgModule({ - imports: [CommonModule, MaterialImportsModule, AppRoutingModule, GameModule, LobbyComponent, MultiplayerComponent], -}) -export class MultiplayerModule {} diff --git a/src/app/game/game.module.ts b/src/app/game/game.module.ts deleted file mode 100644 index c43f75f5..00000000 --- a/src/app/game/game.module.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { GameInfoComponent } from './game-info/game-info.component'; -import { GameDrawComponent } from './game-draw/game-draw.component'; -import { GameComponent } from './game.component'; -import { MaterialImportsModule } from '../shared/material-imports/material-imports.module'; -import { GameIntermediateResultComponent } from './game-intermediate-result/game-intermediate-result.component'; -import { GameResultComponent } from './game-result/game-result.component'; -import { GameWordToDrawComponent } from './game-word-to-draw/game-word-to-draw.component'; -@NgModule({ - exports: [ - GameInfoComponent, - GameWordToDrawComponent, - GameDrawComponent, - GameIntermediateResultComponent, - GameResultComponent, - ], - imports: [CommonModule, MaterialImportsModule, GameInfoComponent, - GameDrawComponent, - GameComponent, - GameIntermediateResultComponent, - GameResultComponent, - GameWordToDrawComponent], -}) -export class GameModule {} diff --git a/src/app/app-routing.module.ts b/src/app/routes.ts similarity index 72% rename from src/app/app-routing.module.ts rename to src/app/routes.ts index 6a122def..207e058c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/routes.ts @@ -1,5 +1,4 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; +import { Routes } from '@angular/router'; import { WelcomeComponent } from './welcome/welcome.component'; import { GameComponent } from './game/game.component'; import { routes as r } from './shared/models/routes'; @@ -7,10 +6,10 @@ import { GameResultComponent } from './game/game-result/game-result.component'; import { GameDrawComponent } from './game/game-draw/game-draw.component'; import { AdminComponent } from './admin/admin.component'; import { InfoComponent } from './admin/info/info.component'; -import { AuthGuard } from './admin/auth-guard'; -import { MultiplayerComponent } from '../app/game/game-multiplayer/multiplayer.component'; +import { authGuard } from './admin/auth-guard'; +import { MultiplayerComponent } from './game/game-multiplayer/multiplayer.component'; -const routes: Routes = [ +export const routes: Routes = [ { path: r.LANDING, component: WelcomeComponent, @@ -44,12 +43,6 @@ const routes: Routes = [ { path: 'admin/info', component: InfoComponent, - canActivate: [AuthGuard], + canActivate: [authGuard], }, ]; - -@NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/src/app/shared/material-imports/material-imports.module.ts b/src/app/shared/material-imports/material-imports.module.ts deleted file mode 100644 index fc139d5c..00000000 --- a/src/app/shared/material-imports/material-imports.module.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { MatButtonModule } from '@angular/material/button'; -import { MatIconModule } from '@angular/material/icon'; -import { MatToolbarModule } from '@angular/material/toolbar'; -import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { MatSidenavModule } from '@angular/material/sidenav'; -import { MatMenuModule } from '@angular/material/menu'; -import { MatListModule } from '@angular/material/list'; -import { MatCardModule } from '@angular/material/card'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatInputModule } from '@angular/material/input'; - -const materialModules = [ - MatButtonModule, - MatIconModule, - MatToolbarModule, - MatProgressSpinnerModule, - MatSidenavModule, - MatListModule, - MatCardModule, - MatMenuModule, - BrowserAnimationsModule, - MatInputModule, -]; - -@NgModule({ - declarations: [], - imports: [CommonModule, ...materialModules], - exports: [...materialModules], -}) -export class MaterialImportsModule {} diff --git a/src/app/welcome/welcome.module.ts b/src/app/welcome/welcome.module.ts deleted file mode 100644 index e4ee9492..00000000 --- a/src/app/welcome/welcome.module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { WelcomeComponent } from './welcome.component'; -import { MaterialImportsModule } from '../shared/material-imports/material-imports.module'; -import { RouterModule } from '@angular/router'; - -@NgModule({ - imports: [CommonModule, MaterialImportsModule, RouterModule, WelcomeComponent], -}) -export class WelcomeModule {} diff --git a/src/main.ts b/src/main.ts index c58b1289..3b09bf31 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,34 +1,25 @@ import { enableProdMode, importProvidersFrom } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - import { environment } from './environments/environment'; import { AppComponent } from './app/app.component'; -import { CommonModule } from '@angular/common'; import { provideAnimations } from '@angular/platform-browser/animations'; -import { MaterialImportsModule } from './app/shared/material-imports/material-imports.module'; -import { MatSnackBarModule } from '@angular/material/snack-bar'; import { ServiceWorkerModule } from '@angular/service-worker'; -import { MultiplayerModule } from './app/game/game-multiplayer/multiplayer.module'; -import { GameModule } from './app/game/game.module'; -import { WelcomeModule } from './app/welcome/welcome.module'; -import { AppRoutingModule } from './app/app-routing.module'; -import { BrowserModule, bootstrapApplication } from '@angular/platform-browser'; -import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog'; -import { AuthGuard } from './app/admin/auth-guard'; +import { routes } from './app/routes'; +import { bootstrapApplication } from '@angular/platform-browser'; import { InfoDialogComponent } from './app/admin/info-dialog/info-dialog.component'; -import { HttpClientModule, withInterceptorsFromDi, provideHttpClient } from '@angular/common/http'; +import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http'; +import { provideRouter } from '@angular/router'; if (environment.production) { enableProdMode(); } bootstrapApplication(AppComponent, { - providers: [ - importProvidersFrom(BrowserModule, AppRoutingModule, WelcomeModule, GameModule, MultiplayerModule, ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }), MatSnackBarModule, MatDialogModule, MaterialImportsModule, CommonModule), - HttpClientModule, InfoDialogComponent, AuthGuard, { provide: MAT_DIALOG_DATA, useValue: {} }, - provideHttpClient(withInterceptorsFromDi()), - provideAnimations(), - ] -}) - .catch((err) => console.error(err)); + providers: [ + importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })), + InfoDialogComponent, + provideHttpClient(withInterceptorsFromDi()), + provideRouter(routes), + provideAnimations(), + ], +}).catch((err) => console.error(err)); From 8fa66d5b4b8c0f4bf749672bf6690defab0f43dc Mon Sep 17 00:00:00 2001 From: Erik Tallang Date: Tue, 25 Jun 2024 12:15:36 +0200 Subject: [PATCH 5/5] chore: format project using prettier --- src/app/app.component.ts | 132 +++++++++--------- src/app/route-transition-animations.ts | 80 +++++------ src/app/routes.ts | 96 ++++++------- src/environments/environment.computas.ts | 16 +-- src/environments/environment.dev.ts | 14 +- .../environment.tekniskmuseumprod.ts | 16 +-- src/environments/environment.ts | 44 +++--- 7 files changed, 199 insertions(+), 199 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 33801e2f..d5ad8d50 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,66 +1,66 @@ -import { Component, HostListener, OnInit } from '@angular/core'; -import { Subject } from 'rxjs'; -import { Router } from '@angular/router'; -import { MatDialog } from '@angular/material/dialog'; -import { RouterOutlet } from '@angular/router'; - -import { IdleTimeoutComponent } from './idle-timeout/idle-timeout.component'; -import { routeTransitionAnimations } from './route-transition-animations'; -import { environment } from '../environments/environment'; - -@Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'], - animations: [routeTransitionAnimations], - standalone: true, - imports: [RouterOutlet], -}) -export class AppComponent implements OnInit { - title = 'Teknisk Museum'; - - userActivity = 0; - userInactive = new Subject(); - - isDialogOpen = false; - inactivityTime = environment.inactivityTime; - - constructor(private router: Router, public dialog: MatDialog) {} - - ngOnInit(): void { - this.setDialogTimeout(); - this.userInactive.subscribe(() => { - if (this.router.url !== '/' && this.router.url !== '/admin') { - this.openDialog(); - } - }); - } - - openDialog() { - if (!this.isDialogOpen) { - this.dialog - .open(IdleTimeoutComponent) - .afterClosed() - .subscribe(() => { - this.isDialogOpen = false; - }); - this.isDialogOpen = true; - } - } - - setDialogTimeout() { - this.userActivity = window.setTimeout(() => this.userInactive.next(undefined), this.inactivityTime); - } - - prepareRoute(outlet: RouterOutlet) { - const animationState = 'animationState'; - return outlet && outlet.activatedRouteData && outlet.activatedRouteData[animationState]; - } - - @HostListener('window:mousemove') - @HostListener('document:touchmove') - refreshUserState() { - clearTimeout(this.userActivity); - this.setDialogTimeout(); - } -} +import { Component, HostListener, OnInit } from '@angular/core'; +import { Subject } from 'rxjs'; +import { Router } from '@angular/router'; +import { MatDialog } from '@angular/material/dialog'; +import { RouterOutlet } from '@angular/router'; + +import { IdleTimeoutComponent } from './idle-timeout/idle-timeout.component'; +import { routeTransitionAnimations } from './route-transition-animations'; +import { environment } from '../environments/environment'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + animations: [routeTransitionAnimations], + standalone: true, + imports: [RouterOutlet], +}) +export class AppComponent implements OnInit { + title = 'Teknisk Museum'; + + userActivity = 0; + userInactive = new Subject(); + + isDialogOpen = false; + inactivityTime = environment.inactivityTime; + + constructor(private router: Router, public dialog: MatDialog) {} + + ngOnInit(): void { + this.setDialogTimeout(); + this.userInactive.subscribe(() => { + if (this.router.url !== '/' && this.router.url !== '/admin') { + this.openDialog(); + } + }); + } + + openDialog() { + if (!this.isDialogOpen) { + this.dialog + .open(IdleTimeoutComponent) + .afterClosed() + .subscribe(() => { + this.isDialogOpen = false; + }); + this.isDialogOpen = true; + } + } + + setDialogTimeout() { + this.userActivity = window.setTimeout(() => this.userInactive.next(undefined), this.inactivityTime); + } + + prepareRoute(outlet: RouterOutlet) { + const animationState = 'animationState'; + return outlet && outlet.activatedRouteData && outlet.activatedRouteData[animationState]; + } + + @HostListener('window:mousemove') + @HostListener('document:touchmove') + refreshUserState() { + clearTimeout(this.userActivity); + this.setDialogTimeout(); + } +} diff --git a/src/app/route-transition-animations.ts b/src/app/route-transition-animations.ts index d438ddd6..0bc2f3f4 100644 --- a/src/app/route-transition-animations.ts +++ b/src/app/route-transition-animations.ts @@ -1,40 +1,40 @@ -import { trigger, transition, style, query, animateChild, group, animate } from '@angular/animations'; - -export const routeTransitionAnimations = trigger('triggerName', [ - transition('welcome => game', [ - style({ position: 'relative' }), - query(':enter, :leave', [ - style({ - position: 'absolute', - top: 0, - right: 0, - width: '100%', - }), - ]), - query(':enter', [style({ right: '-100%', opacity: 0 })]), - query(':leave', animateChild()), - group([ - query(':leave', [animate('0.4s ease-out', style({ right: '100%', opacity: 0 }))]), - query(':enter', [animate('0.4s ease-out', style({ right: '0%', opacity: 1 }))]), - ]), - query(':enter', animateChild()), - ]), - transition('game => welcome, game => game', [ - style({ position: 'relative' }), - query(':enter, :leave', [ - style({ - position: 'absolute', - top: 0, - left: 0, - width: '100%', - }), - ]), - query(':enter', [style({ left: '-100%', opacity: 0 })]), - query(':leave', animateChild()), - group([ - query(':leave', [animate('0.4s ease-out', style({ left: '100%', opacity: 0 }))]), - query(':enter', [animate('0.4s ease-out', style({ left: '0%', opacity: 1 }))]), - ]), - query(':enter', animateChild()), - ]), -]); +import { trigger, transition, style, query, animateChild, group, animate } from '@angular/animations'; + +export const routeTransitionAnimations = trigger('triggerName', [ + transition('welcome => game', [ + style({ position: 'relative' }), + query(':enter, :leave', [ + style({ + position: 'absolute', + top: 0, + right: 0, + width: '100%', + }), + ]), + query(':enter', [style({ right: '-100%', opacity: 0 })]), + query(':leave', animateChild()), + group([ + query(':leave', [animate('0.4s ease-out', style({ right: '100%', opacity: 0 }))]), + query(':enter', [animate('0.4s ease-out', style({ right: '0%', opacity: 1 }))]), + ]), + query(':enter', animateChild()), + ]), + transition('game => welcome, game => game', [ + style({ position: 'relative' }), + query(':enter, :leave', [ + style({ + position: 'absolute', + top: 0, + left: 0, + width: '100%', + }), + ]), + query(':enter', [style({ left: '-100%', opacity: 0 })]), + query(':leave', animateChild()), + group([ + query(':leave', [animate('0.4s ease-out', style({ left: '100%', opacity: 0 }))]), + query(':enter', [animate('0.4s ease-out', style({ left: '0%', opacity: 1 }))]), + ]), + query(':enter', animateChild()), + ]), +]); diff --git a/src/app/routes.ts b/src/app/routes.ts index 207e058c..72b020ee 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -1,48 +1,48 @@ -import { Routes } from '@angular/router'; -import { WelcomeComponent } from './welcome/welcome.component'; -import { GameComponent } from './game/game.component'; -import { routes as r } from './shared/models/routes'; -import { GameResultComponent } from './game/game-result/game-result.component'; -import { GameDrawComponent } from './game/game-draw/game-draw.component'; -import { AdminComponent } from './admin/admin.component'; -import { InfoComponent } from './admin/info/info.component'; -import { authGuard } from './admin/auth-guard'; -import { MultiplayerComponent } from './game/game-multiplayer/multiplayer.component'; - -export const routes: Routes = [ - { - path: r.LANDING, - component: WelcomeComponent, - data: { animationState: 'welcome' }, - }, - { - path: r.SINGLEPLAYER, - component: GameComponent, - data: { animationState: 'game' }, - }, - { - path: r.MULTIPLAYER, - component: MultiplayerComponent, - }, - { - path: 'summary', - component: GameResultComponent, - }, - { - path: 'summary/multiplayer', - component: GameResultComponent, - }, - { - path: 'drawing', - component: GameDrawComponent, - }, - { - path: 'admin', - component: AdminComponent, - }, - { - path: 'admin/info', - component: InfoComponent, - canActivate: [authGuard], - }, -]; +import { Routes } from '@angular/router'; +import { WelcomeComponent } from './welcome/welcome.component'; +import { GameComponent } from './game/game.component'; +import { routes as r } from './shared/models/routes'; +import { GameResultComponent } from './game/game-result/game-result.component'; +import { GameDrawComponent } from './game/game-draw/game-draw.component'; +import { AdminComponent } from './admin/admin.component'; +import { InfoComponent } from './admin/info/info.component'; +import { authGuard } from './admin/auth-guard'; +import { MultiplayerComponent } from './game/game-multiplayer/multiplayer.component'; + +export const routes: Routes = [ + { + path: r.LANDING, + component: WelcomeComponent, + data: { animationState: 'welcome' }, + }, + { + path: r.SINGLEPLAYER, + component: GameComponent, + data: { animationState: 'game' }, + }, + { + path: r.MULTIPLAYER, + component: MultiplayerComponent, + }, + { + path: 'summary', + component: GameResultComponent, + }, + { + path: 'summary/multiplayer', + component: GameResultComponent, + }, + { + path: 'drawing', + component: GameDrawComponent, + }, + { + path: 'admin', + component: AdminComponent, + }, + { + path: 'admin/info', + component: InfoComponent, + canActivate: [authGuard], + }, +]; diff --git a/src/environments/environment.computas.ts b/src/environments/environment.computas.ts index dd18bd73..92dd1a66 100644 --- a/src/environments/environment.computas.ts +++ b/src/environments/environment.computas.ts @@ -1,8 +1,8 @@ -export const environment = { - production: true, - WS_ENDPOINT: 'wss://teknisk-museum-backend.azurewebsites.net', - // TEKNISKBACKEND_ENDPOINT :'https://tekniskback.azurewebsites.net', - TEKNISKBACKEND_ENDPOINT: 'https://teknisk-museum-backend-singleplayer.azurewebsites.net', - inactivityTime: 60 * 1000, - PAIR_ID: 'f368b28b-4d39-4362-8c8c-c1f230c64fb0', -}; +export const environment = { + production: true, + WS_ENDPOINT: 'wss://teknisk-museum-backend.azurewebsites.net', + // TEKNISKBACKEND_ENDPOINT :'https://tekniskback.azurewebsites.net', + TEKNISKBACKEND_ENDPOINT: 'https://teknisk-museum-backend-singleplayer.azurewebsites.net', + inactivityTime: 60 * 1000, + PAIR_ID: 'f368b28b-4d39-4362-8c8c-c1f230c64fb0', +}; diff --git a/src/environments/environment.dev.ts b/src/environments/environment.dev.ts index f3427ca9..48486d5b 100644 --- a/src/environments/environment.dev.ts +++ b/src/environments/environment.dev.ts @@ -1,7 +1,7 @@ -export const environment = { - production: false, - WS_ENDPOINT: 'ws://localhost:8000', - TEKNISKBACKEND_ENDPOINT : 'http://localhost:8000', - inactivityTime: 60 * 1000, - PAIR_ID: 'dev-1' -}; +export const environment = { + production: false, + WS_ENDPOINT: 'ws://localhost:8000', + TEKNISKBACKEND_ENDPOINT: 'http://localhost:8000', + inactivityTime: 60 * 1000, + PAIR_ID: 'dev-1', +}; diff --git a/src/environments/environment.tekniskmuseumprod.ts b/src/environments/environment.tekniskmuseumprod.ts index 9d7052a5..20582715 100644 --- a/src/environments/environment.tekniskmuseumprod.ts +++ b/src/environments/environment.tekniskmuseumprod.ts @@ -1,8 +1,8 @@ -export const environment = { - production: true, - WS_ENDPOINT: 'wss://tekniskmuseumbackendmultiplayer.azurewebsites.net', - // TEKNISKBACKEND_ENDPOINT :'https://tekniskback.azurewebsites.net', - TEKNISKBACKEND_ENDPOINT :'https://tekniskmuseumbackendsingleplayer-dev.azurewebsites.net', - inactivityTime: 60 * 1000, - PAIR_ID: 'teknisk-1' -}; +export const environment = { + production: true, + WS_ENDPOINT: 'wss://tekniskmuseumbackendmultiplayer.azurewebsites.net', + // TEKNISKBACKEND_ENDPOINT :'https://tekniskback.azurewebsites.net', + TEKNISKBACKEND_ENDPOINT: 'https://tekniskmuseumbackendsingleplayer-dev.azurewebsites.net', + inactivityTime: 60 * 1000, + PAIR_ID: 'teknisk-1', +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 00dcb965..8e77b9a4 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,22 +1,22 @@ -// This file can be replaced during build by using the `fileReplacements` array. -// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. -// The list of file replacements can be found in `angular.json`. - -export const environment = { - production: false, - // WS_ENDPOINT: 'wss://tekniskback-mp.azurewebsites.net', - WS_ENDPOINT: 'ws://localhost:5000', - TEKNISKBACKEND_ENDPOINT: 'http://localhost:8000', - inactivityTime: 600 * 1000, - // Maximum length of value is 32 characters - PAIR_ID: 'local-1' -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/dist/zone-error'; // Included with Angular CLI. +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. + +export const environment = { + production: false, + // WS_ENDPOINT: 'wss://tekniskback-mp.azurewebsites.net', + WS_ENDPOINT: 'ws://localhost:5000', + TEKNISKBACKEND_ENDPOINT: 'http://localhost:8000', + inactivityTime: 600 * 1000, + // Maximum length of value is 32 characters + PAIR_ID: 'local-1', +}; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI.