Daybreak/Daybreak.Core/Views/Components/FocusView/PlayerResourcesComponent.razor

<div class="container backdrop-panel">
    @if (this.Context is not null)
    {
        <div class="title">
            Faction Resources
        </div>
        <div class="bar-container">
            <div @onclick="@(() => this.KurzickBarClicked())">
                <div class="kurzick-bar-fill" style="@(this.GetBarWidth(this.Context.CurrentKurzick, this.Context.MaxKurzick))"></div>
                <div class="bar-text">
                    @this.GetBarText(this.Context.CurrentKurzick, this.Context.MaxKurzick, "Kurzick")
                </div>
            </div>
        </div>
        <div class="bar-container">
            <div @onclick="@(() => this.LuxonBarClicked())">
                <div class="luxon-bar-fill" style="@(this.GetBarWidth(this.Context.CurrentLuxon, this.Context.MaxLuxon))"></div>
                <div class="bar-text">
                    @this.GetBarText(this.Context.CurrentLuxon, this.Context.MaxLuxon, "Luxon")
                </div>
            </div>
        </div>
        <div class="bar-container">
            <div @onclick="@(() => this.BalthazarBarClicked())">
                <div class="balthazar-bar-fill" style="@(this.GetBarWidth(this.Context.CurrentBalthazar, this.Context.MaxBalthazar))"></div>
                <div class="bar-text">
                    @this.GetBarText(this.Context.CurrentBalthazar, this.Context.MaxBalthazar, "Balthazar")
                </div>
            </div>
        </div>
        <div class="bar-container bottom-round">
            <div @onclick="@(() => this.ImperialBarClicked())">
                <div class="imperial-bar-fill" style="@(this.GetBarWidth(this.Context.CurrentImperial, this.Context.MaxImperial))"></div>
                <div class="bar-text">
                    @this.GetBarText(this.Context.CurrentImperial, this.Context.MaxImperial, "Imperial")
                </div>
            </div>
        </div>
    }
    else
    {
        <SpinnerWidget IsLoading="true" />
    }
    
</div>

@code {
    [Parameter]
    public required PlayerResourcesComponentContext? Context { get; init; }
    [Parameter]
    public required Action OnKurzickBarClicked { get; init; }
    [Parameter]
    public required Action OnLuxonBarClicked { get; init; }
    [Parameter]
    public required Action OnBalthazarBarClicked { get; init; }
    [Parameter]
    public required Action OnImperialBarClicked { get; init; }

    private void KurzickBarClicked()
    {
        this.OnKurzickBarClicked();
    }

    private void LuxonBarClicked()
    {
        this.OnLuxonBarClicked();
    }

    private void BalthazarBarClicked()
    {
        this.OnBalthazarBarClicked();
    }

    private void ImperialBarClicked()
    {
        this.OnImperialBarClicked();
    }

    private string GetBarWidth(uint current, uint max)
    {
        if (this.Context is null)
        {
            return string.Empty;
        }

        return $"width: {current * 100d / max}%;";
    }

    private string GetBarText(uint current, uint max, string factionName)
    {
        if (this.Context is null)
        {
            return string.Empty;
        }

        return $"{current} / {max} ({factionName})";
    }
}