deprived-main-website/OpenBirchWebsite/Pages/Home.razor

@page "/"
@inject OpenBirchConsole console
@inject IJSRuntime jsRuntime
@inject NavigationManager nav

<PageTitle>Home</PageTitle>

<MudStack Row="true">
    <div class ="d-flex justify-center" style="position: absolute; height: 85vh; width: 100vw; overflow: hidden; z-index: -1;">
        <MudImage Src="/videos/DifferentialEquation.gif" ObjectFit="ObjectFit.Cover" Alt="Background video" Style="filter:blur(10px);" Class="rounded-0 w-100 overflow-hidden" />
    </div>

    <MudSpacer />
    <div class="pt-6 z-10">
        <MudText Align="Align.Center" Typo="Typo.h2">Welcome to<br /><b>OpenBirch!!!</b></MudText>
        <MudPaper Class="rounded-lg mt-6">
            <div class="reverse-stack-direction pa-4" style="width: 25vw; height: 40vh; min-width: 20rem;">
                <div class="px-2 h-100 reverse-scroll-start rounded-t-lg" style="background-color: #191724; overflow-y: auto; overflow-x: hidden;">
                    <ConsoleText />
                </div>
                <div>
                    <MudTextField id="console-input" Class="rounded-b-xl" @bind-Value="inputField" Variant="Variant.Outlined" @onclick="OnInputClicked" OnKeyDown="OnKeyDown" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.ArrowForwardIos"></MudTextField>
                </div>
            </div>
        </MudPaper>
    </div>
    <MudSpacer/>
    <MudSpacer/>
    <MudSpacer/>
</MudStack>

<MudStack style='margin-top: 15vh; width: 100%; height: 100vh; position: relative; background: linear-gradient(180deg, #101018, #1a1a27 2%); z-index: 1'>
    <MudContainer Class="d-flex justify-center">
        <MudStack>
            <MudStack Class="pt-10" Row="true">
                <MudStack>
                    <MudText Typo="Typo.h2">What is this?</MudText>
                    <MudText Typo="Typo.body1">This is an open-source solution for your academic math software.</MudText>
                </MudStack>
                <MudImage Width="100" Src="/images/literally-scam-v0-ssol5c3n5ibd1.webp" />
            </MudStack>

            <MudStack Class="pt-10" Row="true">
                <MudImage Width="100" Src="/images/literally-scam-v0-ssol5c3n5ibd1.webp" />
                <MudStack>
                    <MudText Typo="Typo.h2">Why did we make this?</MudText>
                    <MudText Typo="Typo.body1">Because linux bad and can't run .exe, and other programs are expendsive.</MudText>
                </MudStack>
            </MudStack>
        </MudStack>
    </MudContainer>
</MudStack>

<Footer />

@code {
    public string inputField = "";
    public bool hasInteracted = false; // Has the user interacted with the input field?
    private Task? AutoTypingTask;

    readonly string[] exampleInputs = { 
        "2+2",
        "69*420+50",
        "sin(2+4)",
        "sqrt(9)",
        "nroot(27, 3)",
        "f(x):=2*x",
        "f(5)",
        "pi",
        "e",
        "myvar := 5",
        "15 + myvar",
        "myfunctionvar := f",
        "myfunctionvar(10)",
        "d/dx x",
        "d/dx x^2",
        "d/dx 69*x^2",
        "d/dx sin(x)*x^2"
    };

    private void print(string e)
    {
        Console.WriteLine(e);
    }

    protected override async Task OnInitializedAsync()
    {
        if (!GlobalVariables.HasAutoTypingEd)
            AutoTypingTask = StartAutoTyping();

        GlobalVariables.HasAutoTypingEd = true;
    }

    private async void OnInputClicked()
    {
        hasInteracted = true;
        if (AutoTypingTask != null)
            await AutoTypingTask;
        nav.NavigateTo("openbirch");
    }

    async void OnKeyDown(KeyboardEventArgs args)
    {
        if (args.Key == "Enter")
        {
            await Task.Delay(100);
            sendCommand(inputField);
            StateHasChanged();
        }
    }

    private async void sendCommand(string command)
    {
        inputField = "";
        await console.pushCommand(command);
        await InvokeAsync(StateHasChanged);
    }

    const int typingDelay = 200;
    private async Task StartAutoTyping()
    {
        await Task.Delay(1000);

        foreach (string example in exampleInputs)
        {
            foreach (char letter in example)
            {
                inputField += letter;
                await InvokeAsync(StateHasChanged); // Trigger UI update
                await Task.Delay(200); // Non-blocking delay

                // Makes it check if user inputted while waiting
                const int waitTime = 10;
                int waitedTime = 0;
                while (waitedTime < typingDelay)
                {
                    await Task.Delay(waitTime);
                    waitedTime += waitTime;
                    if (!hasInteracted) goto earlyExit;
                }

                inputField = ""; // Clear input and let user input
                await InvokeAsync(StateHasChanged);
                return;

                earlyExit:;
            }

            sendCommand(inputField);
            await Task.Delay(500);
        }
    }
}