Working repl version online

OpenBirchWebsite/Pages/Home.razor

@@ -6,37 +6,115 @@
 <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: center;">
-        <div style="align-self: end;" class="input-field">
-            <MudTextField Class="pa-4" @bind-Value="temp" Variant="Variant.Outlined" @onclick="()=>hasInteracted = true"></MudTextField>
+    <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="()=>hasInteracted = true"></MudTextField>
+        </MudPaper>
     </div>
 </div>
 
 @code {
-    public string temp = " ";
+    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 (char letter in "Balls... Itchy... HELP ME!!!")
+        foreach (string example in exampleInputs)
         {
-            temp += letter;
+            foreach (char letter in example)
+            {
+                inputField += letter;
                 await InvokeAsync(StateHasChanged); // Trigger UI update
                 await Task.Delay(200); // Non-blocking delay
 
                 if (!hasInteracted) continue;
 
-            temp = ""; // Clear input and let user input
+                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
     }
 }

OpenBirchWebsite/Pages/Home.razor.css

@@ -2,9 +2,21 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     /*border: red 1mm solid;*/
+    gap: 2rem;
+}
+
+.console-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr 1fr;
 }
 
 .input-field {
     max-width: 400px;
     min-width: 300px;
 }
+
+.reverse-stack-direction {
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
+}