Better console now usable

OpenBirchWebsite/Pages/Home.razor

@@ -1,4 +1,5 @@
 @page "/"
+@inject OpenBirchConsole console
 @inject IJSRuntime jsRuntime
 @inject NavigationManager nav
 
@@ -10,13 +11,13 @@
     <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++)
+                @for (int i = 0; i < console.history.Count; i++)
                 {
                     int temp = i;
-                    <MudText Align="Align.Start"> @((consoleHistory[temp].source == ConsoleSource.User) ? ">" : "#") @consoleHistory[temp].text</MudText>
+                    <MudText Align="Align.Start"> @((console.history[temp].source == ConsoleSource.User) ? ">" : "#") @console.history[temp].text</MudText>
                 }
             </div>
-            <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick='()=>nav.NavigateTo("openbirch")'></MudTextField>
+            <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick='OnInputClicked'></MudTextField>
         </MudPaper>
     </div>
 </div>
@@ -24,6 +25,7 @@
 @code {
     public string inputField = " ";
     public bool hasInteracted = false; // Has the user interacted with the input field?
+    private Task AutoTypingTask;
 
     readonly string[] exampleInputs = { 
         "2+2;",
@@ -50,17 +52,16 @@
         Console.WriteLine(e);
     }
 
-    public struct consoleLine
-    {
-        public ConsoleSource source;
-        public string text;
-    } 
-
-    public List<consoleLine> consoleHistory = new();
-
     protected override async Task OnInitializedAsync()
     {
-        StartAutoTyping();
+        AutoTypingTask = StartAutoTyping();
+    }
+
+    private async void OnInputClicked()
+    {
+        hasInteracted = true;
+        await AutoTypingTask;
+        nav.NavigateTo("openbirch");
     }
 
     async void OnKeyDown(KeyboardEventArgs args)
@@ -68,28 +69,21 @@
         if (args.Key == "Enter")
         {
             await Task.Delay(100);
-            pushCommand(inputField);
-            inputField = "";
+            sendCommand(inputField);
             StateHasChanged();
         }
     }
 
-    private void pushCommand(string command)
+    private async void sendCommand(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 });
+        inputField = "";
+        await console.pushCommand(command);
         await InvokeAsync(StateHasChanged);
     }
 
-    private async void StartAutoTyping()
+    int typingDelay = 200;
+
+    private async Task StartAutoTyping()
     {
         await Task.Delay(1000);
 
@@ -101,21 +95,25 @@
                 await InvokeAsync(StateHasChanged); // Trigger UI update
                 await Task.Delay(200); // Non-blocking delay
 
-                if (!hasInteracted) continue;
+                // 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:;
             }
 
-            pushCommand(inputField);
+            sendCommand(inputField);
             await Task.Delay(500);
         }
     }
-
-    public enum ConsoleSource
-    {
-        User, // From the user
-        OpenBirch, // Guess
-    }
 }

OpenBirchWebsite/Pages/OpenBirch.razor

@@ -1,20 +1,50 @@
 @page "/openbirch"
 
+@inject OpenBirchConsole console
+@inject IJSRuntime js
+
 <div class="console-container reverse-stack-direction pa-4">
-    <div class="px-2 reverse-scroll-start overflow-auto">
+    <div class="px-2 h-100 reverse-scroll-start overflow-auto">
         <div>
-            @for (int i = 0; i < 100; i++)
+            @for (int i = 0; i < console.history.Count; i++)
             {
                 int temp = i;
-                <MudText>test @temp</MudText>
+                ConsoleLine line = console.history[temp];
+                <MudText Align="Align.Start"> @((line.source == ConsoleSource.User) ? ">" : "") @line.text</MudText>
+                @if (line.source == ConsoleSource.OpenBirch)
+                {
+                    <br/>
+                }
             }
         </div>
     </div>
     <div>
-        <MudTextField @bind-Value="test" Variant="Variant.Outlined"></MudTextField>
+        <MudTextField id="console-input" AutoFocus="true" @bind-Value="inputField" Variant="Variant.Outlined" OnKeyDown="OnKeyDown" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.ArrowForwardIos"></MudTextField>
     </div>
 </div>
 
 @code {
-    public string test = "";
+    public string inputField = "";
+
+    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);
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        
+    }
 }

OpenBirchWebsite/Program.cs

@@ -1,6 +1,7 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using MudBlazor.Services;
+using OpenBirchWebsite.Services;
 
 namespace OpenBirchWebsite
 {
@@ -13,6 +14,8 @@ namespace OpenBirchWebsite
             builder.RootComponents.Add<HeadOutlet>("head::after");
 
             builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+            builder.Services.AddScoped<OpenBirchConsole>();
+
 
             builder.Services.AddMudServices();
 

OpenBirchWebsite/Services/OpenBirchConsole.cs

@@ -0,0 +1,41 @@
+using Microsoft.JSInterop;
+
+namespace OpenBirchWebsite.Services
+{
+    public class OpenBirchConsole(IJSRuntime js) : IDisposable
+    {
+        public List<ConsoleLine> history = new();
+        private readonly IJSRuntime js = js;
+
+        public Task pushCommand(string command)
+        {
+            history.Add(new ConsoleLine() { source = ConsoleSource.User, text = command });
+            return ExecuteCommand(command);
+        }
+
+        private async Task ExecuteCommand(string command)
+        {
+            string result = await js.InvokeAsync<string>("runEval", command);
+            history.Add(new ConsoleLine() { source = ConsoleSource.OpenBirch, text = result });
+        }
+
+        public void Dispose()
+        {
+            // The following prevents derived types that introduce a
+            // finalizer from needing to re-implement IDisposable.
+            GC.SuppressFinalize(this);
+        }
+    }
+
+    public struct ConsoleLine
+    {
+        public ConsoleSource source;
+        public string text;
+    }
+
+    public enum ConsoleSource
+    {
+        User, // From the user
+        OpenBirch, // Guess
+    }
+}

OpenBirchWebsite/Services/StateContainer.cs

@@ -0,0 +1,7 @@
+namespace OpenBirchWebsite.Services
+{
+    public class StateContainer
+    {
+        public readonly Dictionary<int, object> ObjectTunnel = new();
+    }
+}

OpenBirchWebsite/_Imports.razor

@@ -9,3 +9,4 @@
 @using OpenBirchWebsite
 @using OpenBirchWebsite.Layout
 @using MudBlazor
+@using OpenBirchWebsite.Services

OpenBirchWebsite/wwwroot/JavaScript🤮/helperFunctions.js

@@ -0,0 +1 @@
+clickElement = (elementId) => document.getElementById(elementId).click();