Skip to content

Commit

Permalink
add instructions after 5 seconds
Browse files Browse the repository at this point in the history
  • Loading branch information
erinnmclaughlin committed Nov 24, 2023
1 parent 0b14cb5 commit d9d619b
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 6 deletions.
39 changes: 38 additions & 1 deletion PersonalWebsite/Components/TerminalCommands.razor
Original file line number Diff line number Diff line change
@@ -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
{
Expand All @@ -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;

Expand All @@ -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;
Expand Down
26 changes: 21 additions & 5 deletions PersonalWebsite/Components/TerminalCommands.razor.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

0 comments on commit d9d619b

Please sign in to comment.