progress on front page

OpenBirchWebsite/Pages/Components/ConsoleText.razor

@@ -0,0 +1,37 @@
+@implements IDisposable
+
+@inject OpenBirchConsole console
+
+<div>
+    @for (int i = 0; i < console.history.Count; i++)
+    {
+        int temp = i;
+        ConsoleLine line = console.history[temp];
+        @if (line.source == ConsoleSource.User)
+        {
+            <MudText Align="Align.Start" Class="user-text"><MudText Style="color: #575279;" Inline="true">&gt;</MudText><b> @(' ' + line.text)</b></MudText>
+        }
+        else
+        {
+            <MudText Align="Align.Start" Class="openbirch-text"><i>@line.text</i></MudText>
+            <br />
+        }
+    }
+</div>
+
+@code {
+    protected override void OnInitialized()
+    {
+        OpenBirchConsole.OnLinesChanged += updateComp;
+    }
+
+    public void Dispose()
+    {
+        OpenBirchConsole.OnLinesChanged -= updateComp;
+    }
+
+    void updateComp(List<ConsoleLine> _)
+    {
+        InvokeAsync(StateHasChanged);
+    }
+}

OpenBirchWebsite/Pages/Components/ConsoleText.razor.css

@@ -0,0 +1,7 @@
+.user-text{
+
+}
+
+.openbirch-text * {
+    color: #31748f !important;
+}

OpenBirchWebsite/Pages/Home.razor

@@ -5,27 +5,44 @@
 
 <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 < console.history.Count; i++)
-                {
-                    int temp = i;
-                    <MudText Align="Align.Start"> @((console.history[temp].source == ConsoleSource.User) ? ">" : "#") @console.history[temp].text</MudText>
-                }
+<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>
-            <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick='OnInputClicked'></MudTextField>
         </MudPaper>
     </div>
-</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'>
+    <MudStack Row="true">
+        <MudStack>
+            <MudText Typo="Typo.h1">What is this?</MudText>
+            <MudText Typo="Typo.body1">Maths</MudText>
+        </MudStack>
+        <MudImage Src="/images/literally-scam-v0-ssol5c3n5ibd1.webp" />
+    </MudStack>
+</MudStack>
 
 @code {
     public string inputField = "";
     public bool hasInteracted = false; // Has the user interacted with the input field?
-    private Task AutoTypingTask;
+    private Task? AutoTypingTask;
 
     readonly string[] exampleInputs = { 
         "2+2",
@@ -54,12 +71,16 @@
 
     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");
     }

OpenBirchWebsite/Pages/Home.razor.css

@@ -3,6 +3,7 @@
     grid-template-columns: 1fr 1fr;
     /*border: red 1mm solid;*/
     gap: 2rem;
+    place-items: center;
 }
 
 .console-container {
@@ -10,7 +11,13 @@
     grid-template-columns: 1fr 2fr 1fr 1fr;
 }
 
+
 .input-field {
     max-width: 400px;
     min-width: 300px;
 }
+
+.reverse-scroll-start {
+    display: flex;
+    flex-direction: column-reverse;
+}

OpenBirchWebsite/Pages/OpenBirch.razor

@@ -5,18 +5,7 @@
 
 <div class="console-container reverse-stack-direction pa-4">
     <div class="px-2 h-100 reverse-scroll-start overflow-auto">
-        <div>
-            @for (int i = 0; i < console.history.Count; i++)
-            {
-                int temp = i;
-                ConsoleLine line = console.history[temp];
-                <MudText Align="Align.Start"> @((line.source == ConsoleSource.User) ? ">" : "") @line.text</MudText>
-                @if (line.source == ConsoleSource.OpenBirch)
-                {
-                    <br/>
-                }
-            }
-        </div>
+        <ConsoleText/>
     </div>
     <div>
         <MudTextField id="console-input" AutoFocus="true" @bind-Value="inputField" Variant="Variant.Outlined" OnKeyDown="OnKeyDown" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.ArrowForwardIos"></MudTextField>

OpenBirchWebsite/Services/GlobalVariables.cs

@@ -0,0 +1,8 @@
+namespace OpenBirchWebsite.Services
+{
+    // Cry about it
+    public static class GlobalVariables
+    {
+        public static bool HasAutoTypingEd = false;
+    }
+}

OpenBirchWebsite/Services/OpenBirchConsole.cs

@@ -7,6 +7,8 @@ namespace OpenBirchWebsite.Services
         public List<ConsoleLine> history = new();
         private readonly IJSRuntime js = js;
 
+        public static event Action<List<ConsoleLine>> OnLinesChanged;
+
         public Task pushCommand(string command)
         {
             history.Add(new ConsoleLine() { source = ConsoleSource.User, text = command });
@@ -17,6 +19,7 @@ namespace OpenBirchWebsite.Services
         {
             string result = await js.InvokeAsync<string>("runEval", command);
             history.Add(new ConsoleLine() { source = ConsoleSource.OpenBirch, text = result });
+            OnLinesChanged?.Invoke(history);
         }
 
         public void Dispose()

OpenBirchWebsite/_Imports.razor

@@ -10,3 +10,4 @@
 @using OpenBirchWebsite.Layout
 @using MudBlazor
 @using OpenBirchWebsite.Services
+@using OpenBirchWebsite.Pages.Components