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

@layout PageLayout

@inherits BasePage

@inject IStringLocalizer<Localizations> Locale

@inject IKeyService KeyService
@inject IImmortalSelectionService FilterService
@inject IBuildOrderService BuildOrderService
@inject IEconomyService EconomyService
@inject IToastService ToastService
@inject ITimingService TimingService
@inject IDataCollectionService DataCollectionService

@page "/build-calculator"
@using Services.Website
@implements IDisposable

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

    <ContentDividerComponent></ContentDividerComponent>

    <div class="calculatorGrid">
        <div class="gridItem" style="grid-area: timing;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Filter Info"]">
                    <FactionBorderComponent>
                        <FilterComponent></FilterComponent>
                    </FactionBorderComponent>
                </InfoTooltipComponent>
            </PanelComponent>
            
            <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order
            </ButtonComponent>
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Timing Info"]">
                    <TimingComponent></TimingComponent>
                </InfoTooltipComponent>
            </PanelComponent>

            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Options Info"]">
                    <OptionsComponent></OptionsComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </div>


        <div class="gridItem" style="grid-area: chart;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Chart Info"]">
                    <BuildChartComponent></BuildChartComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </div>

        <div class="gridItem" style="grid-area: view;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Entity Info"]">
                    <ImmortalBorderComponent>
                        <EntityClickViewComponent/>
                    </ImmortalBorderComponent>
                </InfoTooltipComponent>

            </PanelComponent>
        </div>

        <div class="gridItem" style="grid-area: bank;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Bank Info"]">
                    <BankComponent></BankComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </div>

        <div class="gridItem" style="grid-area: army;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Army Info"]">
                    <ArmyComponent></ArmyComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </div>

        <div class="gridItem gridKeys">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Hotkey Info"]">
                    <HotkeyViewerComponent Size="80"></HotkeyViewerComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </div>

        <div class="gridItem" style="grid-area: highlights;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip Highlights Info"]">
                    <HighlightsComponent></HighlightsComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </div>

        <div class="gridItem" style="grid-area: buildorder;">
            <PanelComponent>
                <InfoTooltipComponent InfoText="@Locale["Tooltip BuildOrder Info"]">
                    <BuildOrderComponent></BuildOrderComponent>
                </InfoTooltipComponent>
            </PanelComponent>
        </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>
    .gridItem {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .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'
            'timing bank army army'
            'keys keys highlights buildorder'
            'chart chart chart chart';
    }

    .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'
                'keys'
                'bank'
                'army'
                'highlights'
                'buildorder'
                'chart';
            padding-left: 2px;
            padding-right: 2px;
        }
    }
</style>


@code {

    protected override void OnInitialized()
    {
        base.OnInitialized();

        EconomyService.Calculate(BuildOrderService, TimingService, 0);

        KeyService.Subscribe(HandleClick);

        DataCollectionService.SendEvent(
            DataCollectionKeys.PageInitialized,
            new Dictionary<string, string> { { "page", "build-calculator" } }
        );
    }

    void IDisposable.Dispose()
    {
        KeyService.Unsubscribe(HandleClick);
    }

    private void OnResetClicked()
    {
        ToastService.AddToast(new ToastModel
        {
            SeverityType = SeverityType.Success,
            Message = "Build order has been cleared.",
            Title = "Reset"
        });

        BuildOrderService.Reset();
    }


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

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

        if (hotkey == "`")
        {
            BuildOrderService.RemoveLast();
            EconomyService.Calculate(BuildOrderService, TimingService, BuildOrderService.GetLastRequestInterval());
            return;
        }

        var hotkeyGroup = KeyService.GetHotkeyGroup();
        var isHoldSpace = KeyService.IsHoldingSpace();
        var faction = FilterService.GetFaction();
        var immortal = FilterService.GetImmortal();

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

        if (entity == null)
        {
            return;
        }

        if (BuildOrderService.Add(entity, EconomyService))
        {
            EconomyService.Calculate(BuildOrderService, TimingService, BuildOrderService.GetLastRequestInterval());
        }
    }

}