IGP-Fan-Reference/Components/Form/FormGuessComponent.razor

@using Model.MemoryTester
@using Services.Immortal
@implements IDisposable

@inject IMemoryTesterService MemoryTesterService

<div class="formGuessContainer">
    @if (MemoryQuestion.Name != "")
    {
        <div class="formLabel">
            @MemoryQuestion.Name
        </div>
    }
    <div>
        <input readonly="@MemoryQuestion.IsRevealed"
               class="formTextInput @(MemoryQuestion.IsRevealed ? "revealed" : IsSubmitted == false ? "guess" : int.Parse(guess ?? string.Empty) == MemoryQuestion.Answer ? "correct" : "wrong")"
               placeholder="guess..."
               type="number"
               value="@guess"
               id="@labelId"
               @onchange="OnGuessChanged"/>
    </div>
</div>

<style>
    .formGuessContainer {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
    }

    .formLabel {
        font-weight: 800;
    }

    .formInfo {
        font-size: 0.8rem;
        font-style: italic;
    }

    .formTextInput {
        background-color: #2C2E33;
        border: 3px solid #A8ADB9;
        border-radius: 1px;
        padding: 8px;
        display: block;
        width: 100%;
    }

    .guess {
        background-color: var(--primary);
        border: 4px solid var(--primary-border);
        border-radius: 1px;
    }

    ::placeholder {
        color: white;
        opacity: 1;
    }

    .formTextInput.correct {
        border: 3px solid green;
        border-radius: 2px;
    }

    .formTextInput.wrong {
        border: 3px solid red;
        border-radius: 2px;
        font-weight: bold;
    }
</style>

@code {

    [Parameter]
    public string Label { get; set; } = "";

    [Parameter]
    public string Info { get; set; } = "";

    [Parameter]
    public EventCallback<AnswerEventArgs> OnChange { get; set; } = default!;

    [Parameter]
    public MemoryQuestionModel MemoryQuestion { get; set; } = default!;

    [Parameter]
    public bool IsSubmitted { get; set; }


    private string? guess = "";


    private string labelId = "";

    protected override void OnInitialized()
    {
        labelId = Label.ToLower().Replace(" ", "_") + MemoryQuestion.Id;

        MemoryTesterService.Subscribe(OnMemoryEvent);

        if (MemoryQuestion.IsRevealed)
        {
            guess = MemoryQuestion.Answer.ToString();
        }

        OnRefresh();
    }

    void IDisposable.Dispose()
    {
        MemoryTesterService.Unsubscribe(OnMemoryEvent);
    }

    void OnMemoryEvent(MemoryTesterEvent memoryTesterEvent)
    {
        if (memoryTesterEvent == MemoryTesterEvent.OnVerify)
        {
            OnVerify();
        }

        if (memoryTesterEvent == MemoryTesterEvent.OnRefresh)
        {
            OnRefresh();
        }
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (MemoryQuestion.IsRevealed)
        {
            guess = MemoryQuestion.Answer.ToString();
        }
    }

    void OnVerify()
    {
        IsSubmitted = true;
    }

    void OnRefresh()
    {
        guess = "";

        if (MemoryQuestion.IsRevealed)
        {
            guess = MemoryQuestion.Answer.ToString();
        }


        IsSubmitted = false;
    }

    void OnGuessChanged(ChangeEventArgs changeEventArgs)
    {
        guess = changeEventArgs.Value!.ToString()!;

        OnChange.InvokeAsync(new AnswerEventArgs
        {
            Name = MemoryQuestion.Name,
            IsCorrect = int.Parse(guess) == MemoryQuestion.Answer,
            Guess = int.Parse(guess)
        });
    }

}