diff --git a/PersonalWebsite/Components/TerminalCommands.razor b/PersonalWebsite/Components/TerminalCommands.razor index 5cce430..f075098 100644 --- a/PersonalWebsite/Components/TerminalCommands.razor +++ b/PersonalWebsite/Components/TerminalCommands.razor @@ -1,16 +1,34 @@ -@for (int i = 0; i <= ExecutedCommandCount - 1; i++) +@if (CurrentState is State.Waiting) { - + } - -@if (!IsAnimating && ExecutedCommandCount != Commands.Length) +else { - + for (int i = 0; i <= ExecutedCommandCount - 1; i++) + { + + } + + @if (ShowCursor) + { +
>
+ } + + @if (IsTyping) + { + + } } @code { - private bool IsAnimating { get; set; } = false; + private State CurrentState { get; set; } = State.Waiting; + + private bool IsTyping { get; set; } + private bool ShowCursor => HasNext() && !IsTyping; + private int ExecutedCommandCount { get; set; } = 0; [Parameter] @@ -19,26 +37,38 @@ [Parameter] public EventCallback OnComplete { get; set; } - private void Start() + private async Task OnCommandCompleted() { - IsAnimating = true; - ExecutedCommandCount++; - } - - private async Task AnimateNextCommand() - { - IsAnimating = false; + IsTyping = false; StateHasChanged(); await Task.Delay(600); - if (ExecutedCommandCount == Commands.Length) + if (!HasNext()) { await OnComplete.InvokeAsync(); return; } - IsAnimating = true; + EnterNextCommand(); + } + + private bool HasNext() + { + return ExecutedCommandCount < Commands.Length; + } + + private void EnterNextCommand() + { + IsTyping = true; ExecutedCommandCount++; } + + private void Start() + { + CurrentState = State.Running; + EnterNextCommand(); + } + + private enum State { Waiting, Running, Completed } } diff --git a/PersonalWebsite/wwwroot/sfx/keyboard-typing.mp3 b/PersonalWebsite/wwwroot/sfx/keyboard-typing.mp3 new file mode 100644 index 0000000..4494290 Binary files /dev/null and b/PersonalWebsite/wwwroot/sfx/keyboard-typing.mp3 differ