add instructions after 5 seconds

erinnmclaughlin · Nov 24, 2023 · d9d619b · d9d619b
1 parent 0b14cb5
commit d9d619b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 6 deletions.
diff --git a/PersonalWebsite/Components/TerminalCommands.razor b/PersonalWebsite/Components/TerminalCommands.razor
@@ -1,6 +1,21 @@
 @if (CurrentState is State.Waiting)
 {
-    <button id="start" type="button" @onclick="Start">> <TerminalCursor /></button>
+    <button id="start" type="button" aria-label="start" @onclick="Start">
+
+        @if (ShowInstructions)
+        {
+            <div id="mobile-instructions">
+                <TerminalCommand Command="Tap to start" />
+            </div>
+            <div id="desktop-instructions">
+                <TerminalCommand Command="Click to start" />
+            </div>
+        }
+        else
+        {
+            <span>> <TerminalCursor /></span>            
+        }
+    </button>
 }
 else
 {
@@ -24,10 +39,16 @@ else
 
 @code {
 
+    private readonly System.Timers.Timer _timer = new()
+    {
+        Interval = 5_000
+    };
+
     private State CurrentState { get; set; } = State.Waiting;
 
     private bool IsTyping { get; set; }
     private bool ShowCursor => HasNext() && !IsTyping;
+    private bool ShowInstructions { get; set; }
 
     private int ExecutedCommandCount { get; set; } = 0;
 
@@ -37,6 +58,22 @@ else
     [Parameter] 
     public EventCallback OnComplete { get; set; }
 
+    protected override void OnInitialized()
+    {
+        _timer.Elapsed += TriggerInstructions;
+        _timer.Start();
+    }
+
+    private void TriggerInstructions(object? o, EventArgs e)
+    {
+        _timer.Stop();
+        _timer.Elapsed -= TriggerInstructions;
+        _timer.Dispose();
+
+        ShowInstructions = true;
+        StateHasChanged();
+    }
+
     private async Task OnCommandCompleted()
     {
         IsTyping = false;

diff --git a/PersonalWebsite/Components/TerminalCommands.razor.css b/PersonalWebsite/Components/TerminalCommands.razor.css
@@ -4,12 +4,28 @@
     font-family: unset;
     font-size: unset;
     cursor: pointer;
-    margin-right: auto;
     border: 0;
-    padding-right: 1rem;
-    padding-bottom: 1rem;
+    height: 100%;
+    width: 100%;
+    display: flex;
 }
 
-#start:hover {
-    color: lime;
+    #start:hover {
+        color: lime;
+    }
+
+#desktop-instructions {
+    display: none;
+}
+
+
+@media only screen and (min-width: 600px) {
+
+    #desktop-instructions {
+        display: unset;
+    }
+
+    #mobile-instructions {
+        display: none;
+    }
 }