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.