From 5aec42320ac22c042bc24ec32c32c43f1b430c86 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Sat, 5 Apr 2025 18:52:29 +0200
Subject: [PATCH] Add background image support to header components

Updated header components to accept and render background images via a new `[background_image]` input property. Modified relevant templates to apply the background image dynamically and updated usage in `home` and `map` components.
---
 frontend/src/app/header/header.component.html | 2 +-
 frontend/src/app/header/header.component.ts   | 1 +
 frontend/src/app/home/home.component.html     | 3 ++-
 frontend/src/app/map/map.component.html       | 3 ++-
 4 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/header/header.component.html b/frontend/src/app/header/header.component.html
index 888156b..27fb7db 100644
--- a/frontend/src/app/header/header.component.html
+++ b/frontend/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <ng-container>
-  <header id="top">
+  <header id="top" [ngStyle]="{ 'background-image': 'url(' + background_image + ')'}">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">
diff --git a/frontend/src/app/header/header.component.ts b/frontend/src/app/header/header.component.ts
index c876530..ea96257 100644
--- a/frontend/src/app/header/header.component.ts
+++ b/frontend/src/app/header/header.component.ts
@@ -11,6 +11,7 @@ export class HeaderComponent {
   @Input() title: string = '';
   @Input() sub_title: string = '';
   @Input() current_page: string = '';
+  @Input() background_image: string = '';
 
   public active: string = '';
 
diff --git a/frontend/src/app/home/home.component.html b/frontend/src/app/home/home.component.html
index 0bd7b51..a071f19 100644
--- a/frontend/src/app/home/home.component.html
+++ b/frontend/src/app/home/home.component.html
@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [title]="'Altitude'" [current_page]="'home'"></app-header>
+  <app-header [title]="'Altitude'" [current_page]="'home'"
+              [background_image]="'/public/img/backgrounds/120spawn-min.png'"></app-header>
   <main>
     <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
       <!--      TODO load player count from old api or backend?-->
diff --git a/frontend/src/app/map/map.component.html b/frontend/src/app/map/map.component.html
index 9f3c8b5..be15f77 100644
--- a/frontend/src/app/map/map.component.html
+++ b/frontend/src/app/map/map.component.html
@@ -1,5 +1,6 @@
 <ng-container>
-  <app-header [title]="'Dynmap'" [current_page]="'map'"></app-header>
+  <app-header [title]="'Dynmap'" [current_page]="'map'"
+              [background_image]="'public/img/backgrounds/map.jpg'"></app-header>
 
   <div style="height: 100vh;">