IGP-Fan-Reference/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor

@implements IDisposable

@layout PageLayout

@inject IKeyService keyService
@inject IImmortalSelectionService filterService
@inject IBuildOrderService buildOrderService
@inject IEconomyService economyService
@inject ITimingService timingService

@page "/build-calculator"

<LayoutLargeContentComponent>
    <WebsiteTitleComponent>Build Calculator</WebsiteTitleComponent>

    <AlertComponent Type="@SeverityType.Warning">
        <Title>Work In Progress and Not Fully Tested</Title>
        <Message>
            Currently not considering training queue times. Lacking error toasts for invalid actions. Performance needs to be optimized. Calculations haven't been thoroughly compared against real gameplay. Added a 2 second delay to actions to account for casual micro (will probably tweak later).
        </Message>
    </AlertComponent>

    <ContentDividerComponent></ContentDividerComponent>


    <div class="calculatorGrid">

        <div style="grid-area: timing;" class="gridItem">
            <InfoTooltipComponent InfoText="">

                <TimingComponent></TimingComponent>
            </InfoTooltipComponent>
        </div>


        @if (true)
        {
            <div style="grid-area: chart;" class="gridItem">
                <InfoTooltipComponent InfoText="Shows economy at each game interval. Use to determine if spending additional resourcses on harvesters will help or hinder overall timing attack.">
                    <ChartComponent></ChartComponent>
                </InfoTooltipComponent>
            </div>
        }

        <div style="grid-area: filter;" class="gridItem">
            <InfoTooltipComponent InfoText="Select build details, such as Faction and Immortal. Affects entities you can build.">
                <FilterComponent></FilterComponent>
            </InfoTooltipComponent>
        </div>


        <div style="grid-area: view;" class="gridItem">
            <InfoTooltipComponent InfoText="Summary of the entity you just selected.">
                <EntityClickViewComponent></EntityClickViewComponent>
            </InfoTooltipComponent>
        </div>


        <div style="grid-area: bank;" class="gridItem">
            <InfoTooltipComponent InfoText="Bank at time of last requested action. Use this section to determine if your build is floating too much alloy or ether.">
                <BankComponent></BankComponent>
            </InfoTooltipComponent>
        </div>


        <div style="grid-area: army;" class="gridItem">
            <InfoTooltipComponent InfoText="Overview of current army, and when it will be ready to begin an attack.">
                <ArmyComponent></ArmyComponent>
            </InfoTooltipComponent>
        </div>


        <div class="gridItem gridKeys">

            <InfoTooltipComponent InfoText="">

                <HotkeyViewerComponent Size="80"></HotkeyViewerComponent>
            </InfoTooltipComponent>
        </div>


        @if (false)
        {
            <div style="grid-area: timeline;" class="gridItem">
                <TimelineComponent></TimelineComponent>
            </div>
        }

        <div style="grid-area: highlights;" class="gridItem">
            <InfoTooltipComponent InfoText="Timeline highlights of your build order. Shows when you start a new action and when the action is done.">
                <HighlightsComponent></HighlightsComponent>
            </InfoTooltipComponent>
        </div>

        <div style="grid-area: buildorder;" class="gridItem">
            <InfoTooltipComponent InfoText="Some raw JSON data to represent your build order.">
                <BuildOrderComponent></BuildOrderComponent>
            </InfoTooltipComponent>
        </div>
    </div>

    <ContentDividerComponent></ContentDividerComponent>

    <PaperComponent>
        <FormLayoutComponent>
            <InfoBodyComponent>
                <InfoQuestionComponent>
                    What is this tool?
                </InfoQuestionComponent>
                <InfoAnswerComponent>
                    This is a calculator to determine build timings. Mostly so someone can quickly try out a few build orders to see if they somewhat make sense.
                </InfoAnswerComponent>
            </InfoBodyComponent>

            <InfoBodyComponent>
                <InfoQuestionComponent>
                    How does it work?
                </InfoQuestionComponent>
                <InfoAnswerComponent>
                    The tool calculates every second of game time. So if you attempt to build a <b>Legion Hall</b> as your first action, the tool will scan every second, until you get to one where the request can be made. In this case, that is interval 58.
                    <br/>
                    <br/>
                    If you then build 2 <b>Apostle of Bindings</b> a <b>Soul Foundry</b> and a 3 <b>Absolvers</b> you should see yourself roughly floating 500 alloy, with barely having any ether. Which means you could of gotten an <b>Acropolis</b> and a <b>Zentari</b> without hurting your build.
                    <br/>
                    <br/>
                    Try building <b>Apostle of Bindings</b> before the <b>Legion Hall</b> and see how that changes the timing of your 3 <b>Absolvers</b>. (Spoiler: <SpoilerTextComponent> your <b>Absolvers</b> will be built much faster, and you won't be floating so much alloy.</SpoilerTextComponent>)
                </InfoAnswerComponent>
            </InfoBodyComponent>

            <InfoBodyComponent>
                <InfoQuestionComponent>
                    What is CONTROl key for?
                </InfoQuestionComponent>
                <InfoAnswerComponent>
                    Economy and tech related upgrades for townhalls.
                </InfoAnswerComponent>
            </InfoBodyComponent>

            <InfoBodyComponent>
                <InfoQuestionComponent>
                    What is SHIFT key for?
                </InfoQuestionComponent>
                <InfoAnswerComponent>
                    Misc building related upgrades. (Omnivores)
                </InfoAnswerComponent>
            </InfoBodyComponent>

            <InfoBodyComponent>
                <InfoQuestionComponent>
                    What is 2 key for?
                </InfoQuestionComponent>
                <InfoAnswerComponent>
                    It will be for Pyre camps. Currently not implemented.
                </InfoAnswerComponent>
            </InfoBodyComponent>
        </FormLayoutComponent>
    </PaperComponent>
</LayoutLargeContentComponent>


<style>
    .calculatorGrid {
        display: grid;
        gap: 8px;
        max-width: 90vw;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 600px 400px 450px;
        grid-template-areas:
            'timing view view view'
            'filter bank army army'
            'keys keys highlights buildorder'
            'chart chart chart chart';
    }

    .gridItem {
        border: 2px solid var(--paper-border);
        padding: 20px;
        background-color: var(--paper);
    }

    .gridKeys {
        grid-area: keys;
    }

    @@media only screen and (max-width: 1025px) {
        .gridKeys {
            background-color: #282A30;
        }

        .calculatorGrid {
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                'timing'
                'view'
                'filter'
                'keys'
                'bank'
                'army'
                'highlights'
                'buildorder'
                'chart';
            padding-left: 2px;
            padding-right: 2px;
        }


        .gridItem {
            padding: 0px;
            border: 0px;
            width: 100%;
        }
    }
</style>


@code {
    protected override void OnInitialized()
    {
        keyService.Subscribe(HandleClick);
        filterService.Subscribe(StateHasChanged);
        economyService.Subscribe(StateHasChanged);
        timingService.Subscribe(HandleTimingChanged);
        economyService.Calculate(buildOrderService, timingService, 0);
    }

    void IDisposable.Dispose()
    {
        keyService.Unsubscribe(HandleClick);
        filterService.Unsubscribe(StateHasChanged);
        timingService.Unsubscribe(StateHasChanged);
        economyService.Unsubscribe(StateHasChanged);
    }

    private void HandleTimingChanged()
    {
        economyService.Calculate(buildOrderService, timingService, buildOrderService.GetLastRequestInterval());
    }

    private void HandleClick()
    {
        var hotkey = keyService.GetHotkey();

        if (hotkey == "")
        {
            return;
        }

        if (hotkey == "`")
        {
            buildOrderService.RemoveLast();
            economyService.Calculate(buildOrderService, timingService, buildOrderService.GetLastRequestInterval());
            StateHasChanged();
            return;
        }

        var hotkeyGroup = keyService.GetHotkeyGroup();
        var isHoldSpace = keyService.IsHoldingSpace();
        var faction = filterService.GetFactionType();
        var immortal = filterService.GetImmortalType();

        var entity = EntityModel.GetFrom(hotkey, hotkeyGroup, isHoldSpace, faction, immortal);

        if (entity == null)
        {
            return;
        }
        if (buildOrderService.Add(entity, economyService))
        {
            economyService.Calculate(buildOrderService, timingService, buildOrderService.GetLastRequestInterval());
        }
    }

}