IGP-Fan-Reference/IGP/Dialog/EntityDialogComponent.razor

@implements IDisposable;
@inject IEntityDialogService entityDialogService

<div class="dialogBackground" onclick="@CloseDialog">

    <div class="dialogContainer"
         @onclick:preventDefault="true"
         @onclick:stopPropagation="true">
        @if (entity == null)
        {
            <div>Entity is null</div>
        }
        else
        {
            <div class="dialogHeader">
                @if (entityDialogService.HasHistory())
                {
                    <button class="backButton" @onclick="entityDialogService.BackDialog">
                        <div class="backButtonIcon"></div>
                    </button>
                }

                <div class="dialogTitle">
                    @entity.Info().Name
                </div>

            </div>
            <div class="dialogContent">
                <CascadingValue Value="@entity">
                    <EntityVanguardAddedComponent/>
                    <EntityInfoComponent/>
                    <EntityVanguardsComponent/>
                    <EntityProductionComponent/>
                    <EntityStatsComponent/>
                    <EntityMechanicsComponent/>
                    <EntityPassivesComponent/>
                    <EntityPyreSpellsComponent/>
                    <EntityUpgradesComponent/>
                    <EntityWeaponsComponent/>
                    <EntityAbilitiesComponent/>
                </CascadingValue>

            </div>
            <div class="dialogFooter"></div>
        }

    </div>

</div>

<style>

    .pageContents * {
        filter: blur(2px);
    }


    .dialogBackground {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
    }

    .dialogContainer {
        margin-left: auto;
        margin-right: auto;
        margin-top: 64px;
        width: 800px;
        height: 600px;

        background-color: var(--background);
        border-width: var(--dialog-border-width);
        border-style: solid;
        border-color: var(--dialog-border-color);
        border-radius: var(--dialog-radius);


        box-shadow: 1px 2px 2px black;

    }

    .dialogHeader {
        width: 100%;
        background-color: var(--accent);
        border-top-left-radius: var(--dialog-radius);
        border-top-right-radius: var(--dialog-radius);
        border-bottom: 4px solid black;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .backButton {
        margin-left: 16px;
        padding: 12px;

        border: 1px solid var(--accent);
    }

    .backButton:hover {
        background-color: var(--primary-hover);
        border: 1px solid var(--primary-border-hover);
    }

    .backButtonIcon {
        height: 32px;
        width: 32px;
        border: solid white;
        border-width: 0 9px 9px 0;
        transform: rotate(135deg);
    }

    .dialogTitle {
        padding: 16px;
        font-size: 2rem;
        font-weight: bold;
    }

    .dialogContent {
        flex-grow: 1;
        padding: 6px;
        overflow-y: auto;
        overflow-x: hidden;

        height: 800px;
    }

    .dialogFooter {
        width: 100%;
        height: 6px;
        background-color: var(--paper);
    }
</style>

@code {

    EntityModel entity = default!;

    private int refresh;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        entity = EntityData.Get()[entityDialogService.GetEntityId() ?? string.Empty];

        entityDialogService.Subscribe(OnUpdate);
    }

    void IDisposable.Dispose()
    {
        entityDialogService.Unsubscribe(OnUpdate);
    }

    void OnUpdate()
    {
        entity = EntityData.Get()[entityDialogService.GetEntityId()];
        refresh++;

        StateHasChanged();
    }

    public void CloseDialog()
    {
        entityDialogService.CloseDialog();
    }

}