feat: initial client integrations

Author: marcus-sa

apps/client/project.json

@@ -24,8 +24,7 @@
           "format-util"
         ],
         "styles": ["apps/client/src/styles.css"],
-        "scripts": [],
-        "buildLibsFromSource": false
+        "scripts": []
       },
       "configurations": {
         "production": {

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

@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
 import { Dialog, DialogModule } from '@angular/cdk/dialog';
 import { NgIf } from '@angular/common';
 
-import { Scuti } from '@apex/scuti-renderer';
+// import { Scuti } from '@apex/scuti-renderer';
 
 @Component({
   selector: 'apex-root',
@@ -25,7 +25,8 @@ export class AppComponent implements OnInit {
   @ViewChild('init', { static: true })
   readonly initTemplateRef: TemplateRef<unknown>;
 
-  renderer: Scuti;
+  // renderer: Scuti;
+
   assetsLoaded = signal(false);
 
   constructor(private readonly dialog: Dialog) {}
@@ -34,15 +35,15 @@ export class AppComponent implements OnInit {
     const dialogRef = this.dialog.open(this.initTemplateRef, {
       hasBackdrop: true,
     });
-    this.renderer = new Scuti({
-      width: window.innerWidth,
-      height: window.innerHeight,
-      canvas: this.canvasElementRef.nativeElement,
-      resources: 'http://localhost:8083',
-      backgroundColor: 0x212225,
-      resizeTo: window,
-    });
-    await this.renderer.load();
+    // this.renderer = new Scuti({
+    //   width: window.innerWidth,
+    //   height: window.innerHeight,
+    //   canvas: this.canvasElementRef.nativeElement,
+    //   resources: 'http://localhost:8083',
+    //   backgroundColor: 0x212225,
+    //   resizeTo: window,
+    // });
+    // await this.renderer.load();
     this.assetsLoaded.set(true);
     dialogRef.close();
   }

apps/client/src/app/app.config.ts

@@ -2,13 +2,14 @@ import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { deserialize } from '@deepkit/type';
 
-import { ApexClientConfig } from '@apex/client';
+import { ApexClientConfig, importProvidersDynamicallyFrom } from '@apex/client';
 
 import { routes } from './routes';
 import { provideRpcClient } from './utils';
 import { GameController } from './game';
 import { MessengerController } from './messenger';
 import { RoomController } from './room';
+import { IntegrationsModule } from './integrations';
 
 export const clientConfig = deserialize<ApexClientConfig>(
   (window as any)['APEX_CLIENT_CONFIG'],
@@ -26,5 +27,8 @@ export const appConfig: ApplicationConfig = {
       provide: ApexClientConfig,
       useValue: clientConfig,
     },
+    importProvidersDynamicallyFrom(
+      new IntegrationsModule(clientConfig.integrations),
+    ),
   ],
 };

apps/client/src/app/integrations/index.ts

@@ -0,0 +1 @@
+export * from './integrations.module';

apps/client/src/app/integrations/integrations.module.ts

@@ -0,0 +1,14 @@
+import { DynamicNgModule, IntegrationsConfig } from '@apex/client';
+import { SupabaseModule } from '@apex/integrations/supabase/client';
+
+export class IntegrationsModule extends DynamicNgModule<IntegrationsModule> {
+  constructor(private readonly config: IntegrationsConfig) {
+    super();
+  }
+
+  process() {
+    if (this.config.supabase) {
+      this.addImport(SupabaseModule);
+    }
+  }
+}

apps/client/src/app/room/room.component.ts

@@ -1,18 +1,16 @@
-import { Component, DestroyRef, Inject, OnInit, signal } from '@angular/core';
+import { Component, DestroyRef, OnInit } from '@angular/core';
 import { Dialog } from '@angular/cdk/dialog';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Observable } from 'rxjs';
 
 import { Room, RoomState } from '@apex/api/shared';
-import {
-  FloorMaterial as ScutiFloorMaterial,
-  Room as ScutiRoom,
-  WallMaterial as ScutiWallMaterial,
-} from '@apex/scuti-renderer';
-
 import { JoinRoomOptions } from '@apex/api/server';
 import { RoomChatMessageEvent } from '@apex/api/client';
+// import {
+//   FloorMaterial as ScutiFloorMaterial,
+//   Room as ScutiRoom,
+//   WallMaterial as ScutiWallMaterial,
+// } from '@apex/scuti-renderer';
 
 import { AppComponent } from '../app.component';
 import { RoomService } from './room.service';
@@ -26,7 +24,7 @@ import { RoomController } from './room.controller';
   templateUrl: './room.component.html',
 })
 export class RoomComponent implements OnInit {
-  scutiRoom?: ScutiRoom;
+  // scutiRoom?: ScutiRoom;
 
   constructor(
     private readonly app: AppComponent,
@@ -39,18 +37,18 @@ export class RoomComponent implements OnInit {
   ) {}
 
   private render(room: Room) {
-    this.scutiRoom = new ScutiRoom({
-      heightMap: room.map,
-      dragging: true,
-      centerCamera: true,
-      floorMaterial: new ScutiFloorMaterial(101),
-      floorThickness: 8,
-      wallMaterial: new ScutiWallMaterial(108),
-      wallThickness: 8,
-      wallHeight: -1,
-    });
-
-    this.app.renderer.add(this.scutiRoom);
+    // this.scutiRoom = new ScutiRoom({
+    //   heightMap: room.map,
+    //   dragging: true,
+    //   centerCamera: true,
+    //   floorMaterial: new ScutiFloorMaterial(101),
+    //   floorThickness: 8,
+    //   wallMaterial: new ScutiWallMaterial(108),
+    //   wallThickness: 8,
+    //   wallHeight: -1,
+    // });
+    //
+    // this.app.renderer.add(this.scutiRoom);
   }
 
   private async join(id: Room['id'], options?: JoinRoomOptions): Promise<Room> {
@@ -67,7 +65,9 @@ export class RoomComponent implements OnInit {
         if (!this.service.isOwner(this.user.me, room)) {
           // room.users.length === room.capacity
           if (room.state === RoomState.FULL) {
+            /* eslint-disable no-empty */
           } else if (room.state === RoomState.LOCKED) {
+            /* eslint-disable no-empty */
           } else if (room.state === RoomState.PASSWORD_PROTECTED) {
             const dialogRef = this.dialog.open(
               PasswordProtectedRoomDialogComponent,

apps/client/src/index.html

@@ -6,7 +6,7 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <script src=http://localhost:8080/config.js"></script>
+    <script src="http://localhost:8080/config.js"></script>
     <!--<link
       rel="stylesheet"
       rel="preload"

apps/client/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "target": "es2022",
     "useDefineForClassFields": false,
@@ -28,15 +29,10 @@
       "path": "./tsconfig.worker.json"
     }
   ],
-  "extends": "../../tsconfig.base.json",
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  },
-  "reflection": [
-    "src/**/*.controller.ts",
-    "src/**/*-dialog.component.ts"
-  ]
+  }
 }

apps/client/vite.config.ts

@@ -1,4 +1,4 @@
-import { join } from 'node:path';
+import { join } from 'path';
 import { defineConfig } from 'vite';
 import { deepkitType } from '@deepkit/vite';
 import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';

libs/api/client/package.json

@@ -2,8 +2,7 @@
   "name": "@apex/api/client",
   "version": "0.0.1",
   "dependencies": {},
-  "type": "commonjs",
-  "main": "./index.cjs",
+  "type": "module",
   "module": "./index.js",
   "reflection": true
 }