KoogleApp/KoogleApp/Components/Controls/NumberPanel.razor

@using KoogleApp.Model
@using KoogleApp.Model.EventMessages
@using KoogleApp.Services
@using KoogleApp.Store.Game
@using KoogleApp.Store.Game.ThrowPanel

@inherits FluxorComponent

@inject IState<ThrowPanelState> ThrowPanelState
@inject IDispatcher Dispatcher

@if (ThrowPanelState.Value.IsStated)
{
    <MudGrid>

        <MudItem xs="4">
            <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                <MudButton OnClick="ToggleClick">
                    <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.PublishedWithChanges"
                             Color="Color.Primary"
                             Style="font-size: 3rem;"/>
                </MudButton>
            </MudPaper>
        </MudItem>
        <MudItem xs="4">
            <MudPaper Class="d-flex align-center justify-center mud-width-full py-0" Style="height: 76px;">
                <MudStack Spacing="0" Wrap="Wrap.Wrap">
                    <MudChip T="string" Color="Color.Dark" Size="Size.Small">in die Vollen</MudChip>
                    <MudChip T="string" Color="Color.Dark" Size="Size.Small">Wurf 1 von 1</MudChip>
                </MudStack>
            </MudPaper>
        </MudItem>
        <MudItem xs="4">
            <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                <BellButton />
            </MudPaper>
        </MudItem>

        <MudFlexBreak/>
        @if (ShowNumbers)
        {
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(1))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter1" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(2))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter2" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(3))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter3" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>

            <MudFlexBreak/>

            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(4))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter4" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(5))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter5" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(6))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter6" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>

            <MudFlexBreak/>

            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(7))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter7" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(8))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter8" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>
            <MudItem xs="4">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton OnClick="@(async _ => await OneClick(9))">
                        <MudIcon Class="ma-2" Icon="@Icons.Material.Filled.Filter9" Color="Color.Primary"
                                 Style="font-size: 3rem;"/>
                    </MudButton>
                </MudPaper>
            </MudItem>

            <MudFlexBreak/>
        }

        @if (CanSelectPlayer)
        {
            <MudItem xs="12">
                <MudPaper Class="d-flex align-center justify-center mud-width-full py-0">
                    <MudButton>
                        <p>Spieler auswählen</p>
                    </MudButton>
                </MudPaper>
            </MudItem>
        }
    </MudGrid>
}


@code {
    
    [Parameter]
    public bool ShowNumbers
    {
        get;
        set;
    }

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

    private void ToggleClick(MouseEventArgs obj)
    {
        Dispatcher.Dispatch(new ToggleAllPinsAction());
    }

    private async Task OneClick(int number)
    {
        Dispatcher.Dispatch(new UpdatePinStateByNumberAction(number));
    }
}