fix(world): skybox model rendering

frontend/angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "../node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

frontend/src/app/animation/avatar-animation.service.ts

@@ -6,11 +6,6 @@ import {AvatarAnimationManager} from './avatar-animation.manager'
 import {Quaternion, Vector3} from 'three'
 import * as fflate from 'fflate'
 
-export interface AvatarSequences {
-  implicit: Map<string, string>
-  explicit: Map<string, string>
-}
-
 export interface ThreeSequence {
   original: ParsedSequence | null
   frames: {joints: Record<string, Quaternion>; location: Vector3}[]

frontend/src/app/engine/engine.service.ts

@@ -1,4 +1,5 @@
-import {BehaviorSubject, fromEvent, Subject, timer} from 'rxjs'
+import {fromEvent, Subject, timer} from 'rxjs'
+import {toObservable} from '@angular/core/rxjs-interop'
 import {effect, inject, Injectable, signal} from '@angular/core'
 import type {ElementRef} from '@angular/core'
 import {
@@ -76,7 +77,8 @@ const nearestChunkPattern = [
 @Injectable({providedIn: 'root'})
 export class EngineService {
   compassSub = new Subject<{pos: Vector3; theta: number}>()
-  fpsSub = new BehaviorSubject<string>('0')
+  fpsSignal = signal('0')
+  fpsObs = toObservable(this.fpsSignal)
   maxFps = signal(60)
   maxLights = signal(6)
   texturesAnimation = signal(0)
@@ -747,7 +749,7 @@ export class EngineService {
     if (this.deltaFps <= 1 / this.maxFps()) {
       return
     }
-    this.fpsSub.next((1 / this.deltaFps).toFixed())
+    this.fpsSignal.set((1 / this.deltaFps).toFixed())
     this.deltaSinceLastFrame = this.deltaFps
     this.deltaFps = (this.deltaFps % 1) / this.maxFps()
     this.renderer.clear()

frontend/src/app/network/http.service.ts

@@ -1,19 +1,24 @@
-import {BehaviorSubject, throwError} from 'rxjs'
-import type {Observable} from 'rxjs'
-import {inject, Injectable} from '@angular/core'
+import {throwError} from 'rxjs'
+import {inject, Injectable, signal} from '@angular/core'
+import type {WritableSignal} from '@angular/core'
 import {HttpClient} from '@angular/common/http'
 import type {HttpResponse} from '@angular/common/http'
 import {Router} from '@angular/router'
 import {environment} from '../../environments/environment'
 import {User} from '../user'
 import {catchError, map, tap} from 'rxjs/operators'
 
+export interface Avatar {
+  name: string
+  geometry: string
+  implicit: Map<string, string>
+  explicit: Map<string, string>
+}
+
 @Injectable({providedIn: 'root'})
 export class HttpService extends HttpClient {
   private baseUrl = environment.url.server
-  private userLogged: BehaviorSubject<User> = new BehaviorSubject<User>(
-    new User()
-  )
+  private userLogged = signal<User>(new User())
   #expiration = parseInt(localStorage.getItem('expiration') ?? '0', 10)
 
   private readonly router = inject(Router)
@@ -39,14 +44,14 @@ export class HttpService extends HttpClient {
   }
 
   setLogged(logged: User): void {
-    this.userLogged.next(logged)
+    this.userLogged.set(logged)
   }
 
-  getLogged(): Observable<User> {
-    if (this.userLogged.value.id == null) {
+  getLogged(): WritableSignal<User> {
+    if (this.userLogged().id == null) {
       this.session().subscribe()
     }
-    return this.userLogged.asObservable()
+    return this.userLogged
   }
 
   login(login: string, password: string) {
@@ -79,48 +84,43 @@ export class HttpService extends HttpClient {
   }
 
   avatars(path: string) {
-    const list: {
-      name: string
-      geometry: string
-      implicit: Map<string, string>
-      explicit: Map<string, string>
-    }[] = []
+    const list: Avatar[] = []
     let [readImp, readExp] = [false, false]
     return this.get(`${path}/avatars/avatars.dat`, {responseType: 'text'}).pipe(
-      map((a: string) => {
-        a.split('\n')
-          .map((l: string) => l.trim())
-          .forEach((line: string) => {
-            const i = list.length - 1
-            if (line === 'avatar') {
-              list.push({
-                name: '',
-                geometry: '',
-                implicit: new Map(),
-                explicit: new Map()
-              })
-            } else if (line.startsWith('name=')) {
-              list[i].name = line.substring(5)
-            } else if (line.startsWith('geometry=')) {
-              list[i].geometry = line.substring(9)
-            }
-            if (line.startsWith('beginimp')) {
-              readImp = true
-            } else if (line.startsWith('endimp')) {
-              readImp = false
-            } else if (line.startsWith('beginexp')) {
-              readExp = true
-            } else if (line.startsWith('endexp')) {
-              readExp = false
-            } else {
-              const values = line.split('=')
-              if (readImp && values.length === 2) {
-                list[i].implicit.set(values[0], values[1])
-              } else if (readExp && values.length === 2) {
-                list[i].explicit.set(values[0], values[1])
-              }
+      map((fileContent: string) => {
+        fileContent.split('\n').forEach((line: string) => {
+          line = line.trim()
+          const i = list.length - 1
+          if (line === 'avatar') {
+            list.push({
+              name: '',
+              geometry: '',
+              implicit: new Map<string, string>(),
+              explicit: new Map<string, string>()
+            })
+            return
+          }
+          if (line.startsWith('name=')) {
+            list[i].name = line.substring(5)
+          } else if (line.startsWith('geometry=')) {
+            list[i].geometry = line.substring(9)
+          } else if (line.startsWith('beginimp')) {
+            readImp = true
+          } else if (line.startsWith('endimp')) {
+            readImp = false
+          } else if (line.startsWith('beginexp')) {
+            readExp = true
+          } else if (line.startsWith('endexp')) {
+            readExp = false
+          } else {
+            const values = line.split('=')
+            if (readImp && values.length === 2) {
+              list[i].implicit.set(values[0], values[1])
+            } else if (readExp && values.length === 2) {
+              list[i].explicit.set(values[0], values[1])
             }
-          })
+          }
+        })
         return list
       })
     )

frontend/src/app/ui/ui-toolbar/ui-toolbar.component.ts

@@ -128,6 +128,31 @@ export class UiToolbarComponent implements OnInit, AfterViewInit {
       })
       this.cdRef.detectChanges()
     })
+
+    effect(() => {
+      const u = this.http.getLogged()()
+      this.userId = u.id
+      this.name = u.name
+      this.userSvc.currentName = u.name
+      if (u.id != null) {
+        this.http
+          .worlds()
+          .subscribe((w: {id: number; name: string; data: unknown}[]) => {
+            this.worldSvc.worldList = w
+            const home = this.settings.get('home')
+            this.home = {
+              world: home?.world,
+              position: home?.position,
+              isNew: true
+            }
+            if (this.home.world || this.home.position) {
+              this.teleportSvc.teleport.set(this.home)
+            }
+            this.cdRef.detectChanges()
+          })
+      }
+      this.cdRef.detectChanges()
+    })
   }
 
   changeVisibility(visibility: number) {
@@ -216,29 +241,6 @@ export class UiToolbarComponent implements OnInit, AfterViewInit {
 
   ngOnInit(): void {
     this.worldSvc.avatarSub.subscribe((avatarId) => (this.avatarId = avatarId))
-    this.http.getLogged().subscribe((u: User) => {
-      this.userId = u.id
-      this.name = u.name
-      this.userSvc.currentName = u.name
-      if (u.id != null) {
-        this.http
-          .worlds()
-          .subscribe((w: {id: number; name: string; data: unknown}[]) => {
-            this.worldSvc.worldList = w
-            const home = this.settings.get('home')
-            this.home = {
-              world: home?.world,
-              position: home?.position,
-              isNew: true
-            }
-            if (this.home.world || this.home.position) {
-              this.teleportSvc.teleport.set(this.home)
-            }
-            this.cdRef.detectChanges()
-          })
-      }
-      this.cdRef.detectChanges()
-    })
     this.settings.updated.subscribe(() => {
       const home = this.settings.get('home')
       this.home = {
@@ -280,7 +282,7 @@ export class UiToolbarComponent implements OnInit, AfterViewInit {
       })
 
     if (this.debug) {
-      this.engineSvc.fpsSub.pipe(throttleTime(1000)).subscribe((fps) => {
+      this.engineSvc.fpsObs.pipe(throttleTime(1000)).subscribe((fps) => {
         const memInfo = this.engineSvc.getMemInfo()
         this.strFps = `${fps} FPS ${memInfo[1]} draws`
         this.strMem = `${memInfo[0].geometries} Geom. ${memInfo[0].textures} Text.`

frontend/src/app/ui/ui-world-attribs/ui-world-attribs.component.html

@@ -119,8 +119,8 @@ <h1 mat-dialog-title>
           <input
             matInput
             type="text"
-            [ngModel]="worldSvc.skybox()"
-            (ngModelChange)="worldSvc.skybox.set($event)"
+            [ngModel]="skySvc.skybox()"
+            (ngModelChange)="skySvc.skybox.set($event)"
           />
         </mat-form-field>
         <div>
@@ -129,17 +129,17 @@ <h1 mat-dialog-title>
             <input
               matInput
               type="color"
-              [ngModel]="worldSvc.skyTop()"
-              (ngModelChange)="worldSvc.skyTop.set($event)"
+              [ngModel]="skySvc.skyTop()"
+              (ngModelChange)="skySvc.skyTop.set($event)"
             />
           </mat-form-field>
           <mat-form-field appearance="outline">
             <mat-label>Bottom</mat-label>
             <input
               matInput
               type="color"
-              [ngModel]="worldSvc.skyBottom()"
-              (ngModelChange)="worldSvc.skyBottom.set($event)"
+              [ngModel]="skySvc.skyBottom()"
+              (ngModelChange)="skySvc.skyBottom.set($event)"
             />
           </mat-form-field>
         </div>
@@ -149,17 +149,17 @@ <h1 mat-dialog-title>
             <input
               matInput
               type="color"
-              [ngModel]="worldSvc.skyNorth()"
-              (ngModelChange)="worldSvc.skyNorth.set($event)"
+              [ngModel]="skySvc.skyNorth()"
+              (ngModelChange)="skySvc.skyNorth.set($event)"
             />
           </mat-form-field>
           <mat-form-field appearance="outline">
             <mat-label>South</mat-label>
             <input
               matInput
               type="color"
-              [ngModel]="worldSvc.skySouth()"
-              (ngModelChange)="worldSvc.skySouth.set($event)"
+              [ngModel]="skySvc.skySouth()"
+              (ngModelChange)="skySvc.skySouth.set($event)"
             />
           </mat-form-field>
         </div>
@@ -169,17 +169,17 @@ <h1 mat-dialog-title>
             <input
               matInput
               type="color"
-              [ngModel]="worldSvc.skyEast()"
-              (ngModelChange)="worldSvc.skyEast.set($event)"
+              [ngModel]="skySvc.skyEast()"
+              (ngModelChange)="skySvc.skyEast.set($event)"
             />
           </mat-form-field>
           <mat-form-field appearance="outline">
             <mat-label>West</mat-label>
             <input
               matInput
               type="color"
-              [ngModel]="worldSvc.skyWest()"
-              (ngModelChange)="worldSvc.skyWest.set($event)"
+              [ngModel]="skySvc.skyWest()"
+              (ngModelChange)="skySvc.skyWest.set($event)"
             />
           </mat-form-field>
         </div>

frontend/src/app/ui/ui-world-attribs/ui-world-attribs.component.ts

@@ -15,6 +15,7 @@ import {MatSliderModule} from '@angular/material/slider'
 import {MatTabsModule} from '@angular/material/tabs'
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome'
 import {Utils} from '../../utils'
+import {SkyService} from '../../world/sky.service'
 import {WorldService} from '../../world/world.service'
 import {TerrainService} from '../../world/terrain.service'
 import {LightingService} from '../../world/lighting.service'
@@ -69,7 +70,8 @@ export class UiWorldAttribsComponent {
 
   private readonly terrainSvc = inject(TerrainService)
   private readonly lightingSvc = inject(LightingService)
-  readonly worldSvc = inject(WorldService)
+  private readonly worldSvc = inject(WorldService)
+  readonly skySvc = inject(SkyService)
 
   constructor() {
     this.terrain = signal(this.terrainSvc.terrain != null)
@@ -135,7 +137,7 @@ export class UiWorldAttribsComponent {
     effect(() => {
       this.terrainSvc.setWater({
         enabled: this.water(),
-        color: [...Utils.hexToRgb(Utils.colorStrToHex(this.waterColor()))],
+        color: Utils.hexToRgb(Utils.colorStrToHex(this.waterColor())),
         offset: this.waterLevel(),
         opacity: this.waterOpacity(),
         texture_bottom: this.waterTextureBottom(),

frontend/src/app/utils/utils.ts

@@ -74,7 +74,7 @@ export class Utils {
    * @param hex Color number
    * @returns RGB values array
    */
-  static hexToRgb(hex: number): number[] {
+  static hexToRgb(hex: number): [number, number, number] {
     return [(hex >> 16) & 255, (hex >> 8) & 255, hex & 255]
   }