UI/DarknessSlider.razor
@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent
@namespace CryptidHunt

<root>
    <div class="instructions"></div>
    <div class="tests">
        <div class="imageTest" style="opacity: @(60f / 255f); background-color: rgb(55,55,55)"></div>
        <div class="imageTest" style="opacity: @(120f / 255f); background-color: rgb(90,90,90)"></div>
        <div class="imageTest" style="opacity: @(180f / 255f); background-color: rgb(140,140,140)"></div>
    </div>
    <div class="cover" style="opacity: @(0.99f - (Opacity * 0.9f))"></div>
    <div class="instructionsText">Drag the slider until the square on the left is barely visible</div>
    <div class="sliderContainer">
        <Slider></Slider>
        <button class="okay" onclick=@Okay>CONFIRM</button>
    </div>
</root>

@code
{
    public static float Opacity { get; set; } = 0.5f;

    protected override void OnAwake()
    {
        if (Settings.Instance.Darkness != null)
        {
            Enabled = false;
        }
    }

    public void Okay()
    {
        Enabled = false;

        Settings.Instance.Change(settings => settings.Darkness = Opacity);
    }

    /// <summary>
    /// the hash determines if the system should be rebuilt. If it changes, it will be rebuilt
    /// </summary>
    protected override int BuildHash() => System.HashCode.Combine(Opacity);
}