From 63aa7fd550964340b668ccfd7d5be893d87e3620 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sat, 27 Dec 2025 22:15:19 +0100
Subject: [PATCH] Add toggle for showing/hiding the character in
 `RenderContainerComponent` and implement binding to `PlayerModelService`

---
 .../render-container.component.html             |  7 ++++++-
 .../render-container.component.ts               | 11 +++++++++++
 .../particles/services/player-model.service.ts  | 17 +++++++++++++----
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/pages/particles/components/render-container/render-container.component.html b/frontend/src/app/pages/particles/components/render-container/render-container.component.html
index 4d8525c..cc5392c 100644
--- a/frontend/src/app/pages/particles/components/render-container/render-container.component.html
+++ b/frontend/src/app/pages/particles/components/render-container/render-container.component.html
@@ -17,8 +17,13 @@
         <mat-icon>{{ onlyIntersecting ? 'visibility_off' : 'visibility' }}</mat-icon>
       </button>
 
+      <button mat-mini-fab color="primary" (click)="toggleShowCharacter()"
+              [matTooltip]="showCharacter ? 'Hide character' : 'Show character'">
+        <mat-icon>{{ showCharacter ? 'person' : 'person_off' }}</mat-icon>
+      </button>
+
       <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
-              [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
+              [matTooltip]="isPlaneLocked ? 'Unlock plane' : 'Lock plane'">
         <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
       </button>
     </div>
diff --git a/frontend/src/app/pages/particles/components/render-container/render-container.component.ts b/frontend/src/app/pages/particles/components/render-container/render-container.component.ts
index a517a80..99abd4b 100644
--- a/frontend/src/app/pages/particles/components/render-container/render-container.component.ts
+++ b/frontend/src/app/pages/particles/components/render-container/render-container.component.ts
@@ -102,6 +102,10 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     this.particleManagerService.onlyIntersectingParticles = !this.particleManagerService.onlyIntersectingParticles;
   }
 
+  public toggleShowCharacter(): void {
+    this.playerModelService.showCharacter = !this.playerModelService.showCharacter;
+  }
+
   /**
    * Get the current plane orientation
    */
@@ -116,6 +120,13 @@ export class RenderContainerComponent implements AfterViewInit, OnDestroy {
     return this.particleManagerService.onlyIntersectingParticles;
   }
 
+  /**
+   * Retrieves the value indicating whether the character is being rendered.
+   */
+  public get showCharacter(): boolean {
+    return this.playerModelService.showCharacter;
+  }
+
   /**
    * Set the plane orientation
    */
diff --git a/frontend/src/app/pages/particles/services/player-model.service.ts b/frontend/src/app/pages/particles/services/player-model.service.ts
index 70034a9..9785fca 100644
--- a/frontend/src/app/pages/particles/services/player-model.service.ts
+++ b/frontend/src/app/pages/particles/services/player-model.service.ts
@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import * as THREE from 'three';
 import {RendererService} from './renderer.service';
 
@@ -6,13 +6,13 @@ import {RendererService} from './renderer.service';
   providedIn: 'root'
 })
 export class PlayerModelService {
+  private readonly rendererService = inject(RendererService);
+
   private playerModel!: THREE.Group;
   private skinTexture!: THREE.Texture;
+  private characterVisible: boolean = true;
   private textureLoaded = false;
 
-  constructor(private rendererService: RendererService) {
-  }
-
   /**
    * Loads a Minecraft skin texture from a URL
    * @param textureUrl The URL of the skin texture to load
@@ -60,6 +60,15 @@ export class PlayerModelService {
     return this.playerModel;
   }
 
+  public get showCharacter(): boolean {
+    return this.characterVisible;
+  }
+
+  public set showCharacter(showCharacter: boolean) {
+    this.playerModel.visible = showCharacter;
+    this.characterVisible = showCharacter;
+  }
+
   /**
    * Creates a simple colored player model (without textures)
    */