Dev (#231)

.graphqlrc.json

@@ -1,4 +1,4 @@
 {
-	"schema": "https://localhost:4200/graphql",
+	"schema": "https://localhost:3000/graphql",
 	"documents": "apps/api/src/schema.gql"
 }

apps/api-e2e/jest.config.ts

@@ -1,19 +1,18 @@
-/* eslint-disable */
 export default {
-  displayName: 'api-e2e',
-  preset: '../../jest.preset.js',
-  globalSetup: '<rootDir>/src/support/global-setup.ts',
-  globalTeardown: '<rootDir>/src/support/global-teardown.ts',
-  setupFiles: ['<rootDir>/src/support/test-setup.ts'],
-  testEnvironment: 'node',
-  transform: {
-    '^.+\\.[tj]s$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-      },
-    ],
-  },
-  moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '../../coverage/api-e2e',
+	displayName: 'api-e2e',
+	preset: '../../jest.preset.js',
+	globalSetup: '<rootDir>/src/support/global-setup.ts',
+	globalTeardown: '<rootDir>/src/support/global-teardown.ts',
+	setupFiles: ['<rootDir>/src/support/test-setup.ts'],
+	testEnvironment: 'node',
+	transform: {
+		'^.+\\.[tj]s$': [
+			'ts-jest',
+			{
+				tsconfig: '<rootDir>/tsconfig.spec.json',
+			},
+		],
+	},
+	moduleFileExtensions: ['ts', 'js', 'html'],
+	coverageDirectory: '../../coverage/api-e2e',
 };

apps/api-e2e/src/support/global-setup.ts

@@ -2,9 +2,9 @@
 var __TEARDOWN_MESSAGE__: string;
 
 module.exports = async function () {
-  // Start services that that the app needs to run (e.g. database, docker-compose, etc.).
-  console.log('\nSetting up...\n');
+	// Start services that that the app needs to run (e.g. database, docker-compose, etc.).
+	console.log('\nSetting up...\n');
 
-  // Hint: Use `globalThis` to pass variables to global teardown.
-  globalThis.__TEARDOWN_MESSAGE__ = '\nTearing down...\n';
+	// Hint: Use `globalThis` to pass variables to global teardown.
+	globalThis.__TEARDOWN_MESSAGE__ = '\nTearing down...\n';
 };

apps/api-e2e/src/support/global-teardown.ts

@@ -1,7 +1,5 @@
-/* eslint-disable */
-
 module.exports = async function () {
-  // Put clean up logic here (e.g. stopping services, docker-compose, etc.).
-  // Hint: `globalThis` is shared between setup and teardown.
-  console.log(globalThis.__TEARDOWN_MESSAGE__);
+	// Put clean up logic here (e.g. stopping services, docker-compose, etc.).
+	// Hint: `globalThis` is shared between setup and teardown.
+	console.log(globalThis.__TEARDOWN_MESSAGE__);
 };

apps/app/jest.config.ts

@@ -1,22 +1,21 @@
-/* eslint-disable */
 export default {
-  displayName: 'app',
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
-  coverageDirectory: '../../coverage/apps/app',
-  transform: {
-    '^.+\\.(ts|mjs|js|html)$': [
-      'jest-preset-angular',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        stringifyContentPathRegex: '\\.(html|svg)$',
-      },
-    ],
-  },
-  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
-  snapshotSerializers: [
-    'jest-preset-angular/build/serializers/no-ng-attributes',
-    'jest-preset-angular/build/serializers/ng-snapshot',
-    'jest-preset-angular/build/serializers/html-comment',
-  ],
+	displayName: 'app',
+	preset: '../../jest.preset.js',
+	setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+	coverageDirectory: '../../coverage/apps/app',
+	transform: {
+		'^.+\\.(ts|mjs|js|html)$': [
+			'jest-preset-angular',
+			{
+				tsconfig: '<rootDir>/tsconfig.spec.json',
+				stringifyContentPathRegex: '\\.(html|svg)$',
+			},
+		],
+	},
+	transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+	snapshotSerializers: [
+		'jest-preset-angular/build/serializers/no-ng-attributes',
+		'jest-preset-angular/build/serializers/ng-snapshot',
+		'jest-preset-angular/build/serializers/html-comment',
+	],
 };

apps/app/src/app/app.component.html

@@ -1,6 +1,11 @@
 @if (loadFinish() === false) {
 	<app-splash-screen />
 } @else {
+	<!-- <ul>
+		@for (message of messages(); track $index) {
+			<li>{{ message }}</li>
+		}
+	</ul> -->
 	<router-outlet />
 	<span id="app-version" class="text-sm align-self-center mb-md" [attr.data-text]="'v' + version">
 		v{{ version }}

apps/app/src/app/app.component.ts

@@ -1,33 +1,34 @@
-import { Component, effect, inject } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { Component, OnInit, effect, inject, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { SendPingGQL } from '@playsetonline/apollo-definitions';
 
 import { pingValue as pingValueConfig } from './app.config';
 import { SplashScreenComponent } from './component/splash-screen/splash-screen.component';
-import { GameOfflineStore } from './page/game/store/game-offline.store';
 import { AppLoaderService } from './service/app-loader.service';
 import { UserStore } from './store/user.store';
 
 import { version } from '@package';
 
 @Component({
-	standalone: true,
 	selector: 'app-root',
 	templateUrl: './app.component.html',
 	styleUrl: './app.component.scss',
 	imports: [RouterOutlet, SplashScreenComponent],
-	providers: [SendPingGQL],
+	providers: [SendPingGQL, DatePipe],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 	private readonly sendPing = inject(SendPingGQL);
 	private readonly userStore = inject(UserStore);
-	private readonly gameOfflineStore = inject(GameOfflineStore);
 	private readonly appLoaderService = inject(AppLoaderService);
+	private readonly datePipe = inject(DatePipe);
 
 	readonly version = version;
 	readonly loadFinish = this.appLoaderService.loadFinish;
 
+	messages = signal<string[]>([]);
+
 	constructor() {
 		this.userStore.fetchData();
 
@@ -39,4 +40,25 @@ export class AppComponent {
 			}
 		});
 	}
+
+	ngOnInit(): void {
+		this.checkPageVisibility();
+	}
+
+	checkPageVisibility() {
+		document.addEventListener('visibilitychange', () => {
+			const date = this.datePipe.transform(new Date(), 'HH:mm:ss');
+			if (document.hidden) {
+				this.messages.update((messages) => [
+					`[${date}] - La aplicación está en segundo plano.`,
+					...messages,
+				]);
+			} else {
+				this.messages.update((messages) => [
+					`[${date}] - La aplicación está en primer plano.`,
+					...messages,
+				]);
+			}
+		});
+	}
 }

apps/app/src/app/component/card-shape/card-shape.component.ts

@@ -3,7 +3,6 @@ import { Component, computed, input } from '@angular/core';
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
 
 @Component({
-	standalone: true,
 	selector: 'app-card-shape',
 	templateUrl: './card-shape.component.html',
 	styleUrl: './card-shape.component.scss',

apps/app/src/app/component/card/card.component.ts

@@ -5,7 +5,6 @@ import { CardColor, CardShading, CardShape } from '@playsetonline/api-definition
 import { CardShapeComponent } from '../card-shape/card-shape.component';
 
 @Component({
-	standalone: true,
 	selector: 'app-card',
 	templateUrl: './card.component.html',
 	styleUrl: './card.component.scss',

apps/app/src/app/component/glitch-svg/glitch-svg.component.ts

@@ -2,7 +2,6 @@ import { NgStyle } from '@angular/common';
 import { Component, OnInit, computed, input } from '@angular/core';
 
 @Component({
-	standalone: true,
 	selector: 'app-glitch-svg',
 	templateUrl: './glitch-svg.component.html',
 	styleUrl: './glitch-svg.component.scss',

apps/app/src/app/component/media-debug/media-debug.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-	standalone: true,
 	selector: 'app-media-debug',
 	template: `<ul class="flex-row gap-sm lg:gap-md">
 		<li class="round-sm p-xs px-sm surface-radiant color-vivid xs-e:hide">xs</li>

apps/app/src/app/component/splash-screen/splash-screen.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-	standalone: true,
 	selector: 'app-splash-screen',
 	template: `
 		<div class="splash-screen">

apps/app/src/app/definition/card.interface.ts

@@ -1,6 +1,6 @@
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
 
-export interface CardInterface {
+export interface Card {
 	id: string;
 	shape: CardShape;
 	color: CardColor;

apps/app/src/app/interceptor/auth.interceptor.ts

@@ -41,7 +41,7 @@ export class AuthInterceptor implements HttpInterceptor {
 			switchMap((event) => {
 				return this.handleErrorOrEvent(req, next, event);
 			}),
-			catchError((error: HttpEvent<unknown>) => {
+			catchError((error: unknown) => {
 				return this.handleErrorOrEvent(req, next, error);
 			}),
 		);

apps/app/src/app/layout/main/main.layout.scss

@@ -12,10 +12,6 @@
 		}
 
 		.background {
-			@supports not (-webkit-touch-callout: none) {
-				display: none;
-			}
-
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -25,6 +21,10 @@
 			width: 100%;
 			height: 100%;
 
+			@supports not (-webkit-touch-callout: none) {
+				display: none;
+			}
+
 			app-card-shape {
 				position: absolute;
 				height: 60px;

apps/app/src/app/layout/main/main.layout.ts

@@ -18,7 +18,6 @@ import { AuthStore } from '../../store/auth.store';
 import { UserStore } from '../../store/user.store';
 
 @Component({
-	standalone: true,
 	templateUrl: './main.layout.html',
 	styleUrl: './main.layout.scss',
 	imports: [

apps/app/src/app/nx-welcome.component.ts

@@ -4,7 +4,6 @@ import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
 	selector: 'app-nx-welcome',
-	standalone: true,
 	imports: [CommonModule],
 	template: `
 		<!--

apps/app/src/app/page/example/component/menu/example-menu.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-	standalone: true,
 	selector: 'app-example-menu',
 	imports: [NgTemplateOutlet, RouterModule],
 	template: `

apps/app/src/app/page/example/example.page.ts

@@ -17,7 +17,6 @@ import { ApiClient } from '../../service/api-client.service';
 import ExampleMenuComponent from './component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	templateUrl: './example.page.html',
 	styleUrl: './example.page.scss',
 	imports: [JsonPipe, ExampleMenuComponent, ReactiveFormsModule, GlitchSvgComponent],
@@ -49,8 +48,10 @@ export class ExamplePage {
 			next: (data) => {
 				this.data.set(`Now: ${data.data.getUsers.length} users.`);
 			},
-			error: (error) => {
-				this.data.set(error.message);
+			error: (error: unknown) => {
+				if (error instanceof Error) {
+					this.data.set(error.message);
+				}
 			},
 		});
 	}
@@ -62,8 +63,10 @@ export class ExamplePage {
 					this.getManySubscription.set(data.data.getManySubscription);
 				}
 			},
-			error: (error) => {
-				this.getManySubscription.set(error.message);
+			error: (error: unknown) => {
+				if (error instanceof Error) {
+					this.getManySubscription.set(error.message);
+				}
 			},
 		});
 
@@ -73,8 +76,11 @@ export class ExamplePage {
 					this.getPings.set(data.data.getPings);
 				}
 			},
-			error: (error) => {
-				this.getPings.set(error.message);
+			error: (error: unknown) => {
+				console.log({ error });
+				// if (error instanceof Error) {
+				// 	this.getPings.set(error.message);
+				// }
 			},
 		});
 	}

apps/app/src/app/page/example/section/border-radius/border-radius.page.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	imports: [ExampleMenuComponent],
 	styles: `
 		main {

apps/app/src/app/page/example/section/card/card.page.ts

@@ -7,7 +7,6 @@ import { CardShapeComponent } from '../../../../component/card-shape/card-shape.
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	templateUrl: './card.page.html',
 	styleUrl: './card.page.scss',
 	imports: [ExampleMenuComponent, CardShapeComponent, CardComponent],

apps/app/src/app/page/example/section/color/color.page.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	templateUrl: './color.page.html',
 	imports: [ExampleMenuComponent],
 })

apps/app/src/app/page/example/section/shadow/shadow.page.ts

@@ -1,13 +1,11 @@
 import { Component } from '@angular/core';
 
-import { CardComponent } from '../../../../component/card/card.component';
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	templateUrl: './shadow.page.html',
 	styleUrl: './shadow.page.scss',
-	imports: [ExampleMenuComponent, CardComponent],
+	imports: [ExampleMenuComponent],
 })
 export class ShadowPage {
 	shadows = ['sm', 'md', 'lg', 'xl', 'xxl'];

apps/app/src/app/page/example/section/spacing/spacing.page.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	templateUrl: './spacing.page.html',
 	styleUrl: './spacing.page.scss',
 	imports: [ExampleMenuComponent],

apps/app/src/app/page/example/section/typography/typography.page.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
-	standalone: true,
 	templateUrl: './typography.page.html',
 	imports: [ExampleMenuComponent],
 })