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

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

<PageTitle>Home</PageTitle>

<div class="double_centered_boxes">
    <MudText Align="Align.Center" Typo="Typo.h2">Welcome to<br /><b>OpenBirch!!!</b></MudText>
    <div></div>
    <div style="height: 200px; display: grid; place-items: end center;">
        <MudPaper Style="background-color: #191724; height: 200px;" Elevation="4" Class="input-field pt-0 console-container">
            <div style="height: 100%;" class="reverse-stack-direction overflow-hidden">
                @for (int i = 0; i < consoleHistory.Count; i++)
                {
                    int temp = i;
                    <MudText Align="Align.Start"> @((consoleHistory[temp].source == ConsoleSource.User) ? ">" : "#") @consoleHistory[temp].text</MudText>
                }
            </div>
            <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick='()=>nav.NavigateTo("openbirch")'></MudTextField>
        </MudPaper>
    </div>
</div>

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

    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);
    }

    public struct consoleLine
    {
        public ConsoleSource source;
        public string text;
    } 

    public List<consoleLine> consoleHistory = new();

    protected override async Task OnInitializedAsync()
    {
        StartAutoTyping();
    }

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

    private void pushCommand(string command)
    {
        inputField = ""; // Clear input field
        consoleHistory.Add(new consoleLine() { source = ConsoleSource.User, text = command });
        InvokeAsync(StateHasChanged);
        ExecuteCommand(command);
    }

    private async Task ExecuteCommand(string command)
    {
        string result = await jsRuntime.InvokeAsync<string>("runEval", command);
        consoleHistory.Add(new consoleLine() { source = ConsoleSource.OpenBirch, text = result });
        await InvokeAsync(StateHasChanged);
    }

    private async void 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

                if (!hasInteracted) continue;

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

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

    public enum ConsoleSource
    {
        User, // From the user
        OpenBirch, // Guess
    }
}