Player Specific Custom UI - bindings

Hello
I am not experienced with this development technology but here are some ideas that might be helpful:

1. Is the HeadsUpDisplay script running locally or on the server?

2. Shouldn't the handleHealthUpdate method check that the player in the parameter is the local player of the device before changing the state?

3. In general I don't think it's a good practice to store player's state (in this case the health value) inside the UI class.

Since you want different stuff displayed on the HUD for each player it will be better to make it a local script. Since the hud script is a local script and the item is a server script you will have to use Network events and since you want to only send to the specific player you will not want to use a Broadcast event.

Here is the CollectibleItems script with the updates.

import { Component, CodeBlockEvents, Player, PropTypes, NetworkEvent } from 'horizon/core';

class CollectibleItems extends Component<typeof CollectibleItems> {
     static propsDefinition = {
          numberToUpgrade: { type: PropTypes.Number, default: 1.0 },
     };

     start() {
          this.connectCodeBlockEvent(this.entity, CodeBlockEvents.OnPlayerEnterTrigger, (player: Player) => { this.playerEnterTrigger(player); })
     }

     playerEnterTrigger(player: Player) {
          // since the HUD is going to be a local script we cannot use a local event as the item and the hud are running on different clients.
          // and since we want only the player to receive the event we cannot use a broadcast event
          this.sendNetworkEvent(player, new NetworkEvent<{ health: number, player: Player }>('handleHealthUpdate'), { health: this.props.numberToUpgrade, player: player });
     }
}
Component.register(CollectibleItems);

Here is the HeadsUpDisplay with the updates

import { CodeBlockEvents, Player, PropTypes, NetworkEvent } from 'horizon/core';
import { UIComponent, View, Text, Binding, UINode } from "horizon/ui";

class HeadsUpDisplay extends UIComponent<typeof HeadsUpDisplay> {
     static propsDefinition = {
     maxHealthNumber: { type: PropTypes.Number },
     };

     private strPlayerHealthTotal = new Binding<string>("0");

     private healthCount = 0;
     private playerIndex: number = 0;

     private activePlayer: Player | undefined;

     initializeUI(): UINode {
          return View({
               children: [
                    Text({
                         text: this.strPlayerHealthTotal,
                         style: { fontSize: 24, fontFamily: 'Optimistic', color: 'white', },
                    })
               ],
               style: {},
          })
     }

     preStart() {
          // Always connect in prestart unless it is for a player
          this.connectCodeBlockEvent(this.entity, CodeBlockEvents.OnPlayerEnterWorld, (player: Player) => { this.OnPlayerEnterWorld(player); })
          this.connectCodeBlockEvent(this.entity, CodeBlockEvents.OnPlayerExitWorld, (player: Player) => { this.OnPlayerExitWorld(player); })
     }

     start() {
          // The entities name is PlayerHud00
          // the following code gets the entities name and removes all but the last 2 characters
          // then turns it into a number type so we can set it to the playerIndex variable
          // I do it this way becasue it is easier to change an entities name than set a props def.
          const name = this.entity.name.get();
          const index = name.slice(name.length - 2);
          this.playerIndex = parseInt(index);

          this.activePlayer = this.entity.owner.get();

          // if the active player is not the server player we will connect to the handleHealthUpdate event.
          if (this.activePlayer !== this.world.getServerPlayer()) {
          this.connectNetworkEvent(this.activePlayer, new NetworkEvent<{ health: number, player: Player }>('handleHealthUpdate'), ({ health, player }) => this.handleHealthUpdate(health, player));
          }
          // if the active player is the server player we will disconnect from the handleHealthUpdate event.
          else {
          this.connectNetworkEvent(this.entity, new NetworkEvent<{ health: number, player: Player }>('handleHealthUpdate'), ({ health, player }) => this.handleHealthUpdate(health, player)).disconnect()
          }
     }

     OnPlayerEnterWorld(player: Player) {
          if (player.index.get() !== this.playerIndex) return;

          this.entity.owner.set(player);
     }

     OnPlayerExitWorld(player: Player) {
          if (player.index.get() !== this.playerIndex) return;

          this.entity.owner.set(this.world.getServerPlayer());
     }

     private handleHealthUpdate(health: number, player: Player): void {
          if (player !== this.activePlayer) return;

          // use += health to be able to subtract health with the same event.
          this.healthCount += health;
          this.strPlayerHealthTotal.set(this.healthCount.toString());
     }
}
UIComponent.register(HeadsUpDisplay);

Thanks for the response. I appreciate both of your responses!

I'm combining both answers and trying to make my own solution that makes sense in my head.