From 29a28e712e52c3156f96931d42e7e9f6a69fbc22 Mon Sep 17 00:00:00 2001 From: akastijn Date: Sat, 18 Oct 2025 02:43:23 +0200 Subject: [PATCH] Add player count display with periodic updates to home page --- .../src/app/pages/home/home.component.html | 279 +++++++++--------- frontend/src/app/pages/home/home.component.ts | 41 ++- 2 files changed, 177 insertions(+), 143 deletions(-) diff --git a/frontend/src/app/pages/home/home.component.html b/frontend/src/app/pages/home/home.component.html index 95c3338..8afe1d1 100644 --- a/frontend/src/app/pages/home/home.component.html +++ b/frontend/src/app/pages/home/home.component.html @@ -1,157 +1,160 @@ + [background_image]="'/public/img/backgrounds/120spawn-min.png'">

Altitude

The Altitude Minecraft Server -

Altitude now on {{ ALTITUDE_VERSION }}!

- - -

Scroll Down

- -
- -
-
- + width="550"> +

Altitude now on {{ ALTITUDE_VERSION }}!

+ + +

Scroll Down

+ + + +
+
+ @if (this.playerCount() === null) {

Loading...

-

Server IP: play.alttd.com

-
- -
-
-
-
-
-

Adventure Begins

-

You awake in a strange town, where are you? There are residents running about trading with each other and - stories of distant realms with more towns. It's time to write your story. Welcome to Altitude, the laid-back + } @else { +

{{ playerCount() }}

+ } +

Server IP: play.alttd.com

+
+ +
+
+
+
+
+

Adventure Begins

+

You awake in a strange town, where are you? There are residents running about trading with each other and + stories of distant realms with more towns. It's time to write your story. Welcome to Altitude, the laid-back community-oriented server that hosts your home for Minecraft.

+
+ Alternative Altitude Server Logo +
+
+ +
+
+ +
+

Meet the Community

+

Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude + is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is + intended for older players, but all are welcome!

+

Don't have Discord? Keep up with news and announcements at the blog.

+ -
- -
-
- -
-

Meet the Community

-

Altitude is home to players young and old from all around the globe, and here, everyone is family. Altitude - is your place to get together with friends and relax - and maybe enjoy some survival too. Altitude is - intended for older players, but all are welcome!

-

Don't have Discord? Keep up with news and announcements at the blog.

-
- -
- Join Our Discord -
- +
+

Dynamic map

+

See the world and the players around it in real-time! The map shows the entire survival world with claims + and warps.

+ +
+ Visit Map
-
+
-
-
-
-

Survival Shaped by You

-

Altitude is built by the - community, for the community. We've added features requested by our members and several custom plugins to - create our "perfect" survival experience.

-
-
-

McMMO & MyPet

-

Two of the most requested plugins on Altitude, level up yourself and your pet with these MMO-based - plugins!

- -
- MyPet Info -
- +
+

Player Shops

+

Our economy is built on player shops, encouraging player interaction and putting the control in your + hands.

+ +
+ Shop Guide
-
-

Dynamic map

-

See the world and the players around it in real-time! The map shows the entire survival world with claims - and warps.

- -
- Visit Map -
- -
-
-

Player Shops

-

Our economy is built on player shops, encouraging player interaction and putting the control in your - hands.

- -
- Shop Guide -
- -
-
+
-
-
-
-

Community Builds

-

Thank you to our brilliant players for sharing - their impressive builds. Take a look at some of them here!
- If you know of any builds that should be featured, please let us know!

-
-
-
-
-
-
+
+
+
+
+
+

Community Builds

+

Thank you to our brilliant players for sharing + their impressive builds. Take a look at some of them here!
+ If you know of any builds that should be featured, please let us know!

+
+
+
+
+
+
-
-
-
- @for (slide of getSlideIndices(); track slide) { - - } -
+ [style.background-image]="'url(' + slide + ')'" + [style.opacity]="carouselOpacity" + [style.display]="'block'">
-
-
-
-
-

"Great - community, great people, great server all round . . . If it can bring back my love for minecraft, it could - work wonders for you."

-

- /u/seanhanley1993

-
-
-
-
- Alternative Altitude Server Logo -

play.alttd.com

- +
+ @for (slide of getSlideIndices(); track slide) { + + }
-
- - -

Scroll Down

- -
- + + + +
+
+
+

"Great + community, great people, great server all round . . . If it can bring back my love for minecraft, it could + work wonders for you."

+

- /u/seanhanley1993

+
+
+
+
+ Alternative Altitude Server Logo +

play.alttd.com

+ +
+
+ + +

Scroll Down

+ +
+ diff --git a/frontend/src/app/pages/home/home.component.ts b/frontend/src/app/pages/home/home.component.ts index 8b26f6f..9ba59ae 100644 --- a/frontend/src/app/pages/home/home.component.ts +++ b/frontend/src/app/pages/home/home.component.ts @@ -1,12 +1,22 @@ -import {Component, OnInit} from '@angular/core'; +import {Component, inject, OnDestroy, OnInit, signal} from '@angular/core'; import {Title} from '@angular/platform-browser'; import {ALTITUDE_VERSION} from '@custom-types/constant'; import {ScrollService} from '@services/scroll.service'; -import { CommonModule, NgOptimizedImage } from '@angular/common'; +import {CommonModule, NgOptimizedImage} from '@angular/common'; import {HeaderComponent} from '@header/header.component'; import {CopyIpComponent} from '@shared-components/copy-ip/copy-ip.component'; import {RouterLink} from '@angular/router'; import {JwtHelperService} from '@auth0/angular-jwt'; +import {interval, map} from 'rxjs'; +import {HttpClient} from '@angular/common/http'; +import {startWith} from 'rxjs/operators'; + +interface MinecraftServerStatus { + online?: boolean; + players?: { + online?: number; + }; +} @Component({ standalone: true, @@ -24,9 +34,16 @@ import {JwtHelperService} from '@auth0/angular-jwt'; templateUrl: './home.component.html', styleUrl: './home.component.scss' }) -export class HomeComponent implements OnInit { - constructor(private titleService: Title, public scrollService: ScrollService) { - } +export class HomeComponent implements OnInit, OnDestroy { + private httpClient = inject(HttpClient); + private titleService = inject(Title); + public scrollService = inject(ScrollService); + public playerCount = signal(null); + private playerCountUpdateInterval = interval(60000).pipe( + startWith(() => 0), + ).subscribe(() => { + this.updatePlayerCount(); + }); private slides: string[] = ["/public/img/backgrounds/caruselimage2.png", "/public/img/backgrounds/caruselimage4.png", @@ -44,6 +61,10 @@ export class HomeComponent implements OnInit { this.randomizeSlides() } + ngOnDestroy(): void { + this.playerCountUpdateInterval.unsubscribe(); + } + private randomizeSlides(): void { const array = [...this.slides]; @@ -108,5 +129,15 @@ export class HomeComponent implements OnInit { } } + private updatePlayerCount() { + this.httpClient.get('https://api.mcsrvstat.us/2/play.alttd.com').pipe( + map(response => { + if (response.online && response.players && response.players.online) { + this.playerCount.set(response.players.online); + } + }) + ).subscribe(); + } + protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION; }