refactoring gameinput

src/Koogle.Web/Components/Game/ConfirmPanel.razor

@@ -0,0 +1,161 @@
+@using Koogle.Domain.Enums
+
+<div class="action-buttons">
+    <MudButton Variant="Variant.Filled"
+               Color="Color.Warning"
+               Size="Size.Large"
+               OnClick="HandleBellClick"
+               Class="action-button"
+               Disabled="@(!IsInteractive)">
+        <MudIcon Icon="@Icons.Material.Filled.NotificationsActive" />
+        Glocke
+    </MudButton>
+
+    <MudButton Variant="Variant.Filled"
+               Color="Color.Success"
+               Size="Size.Large"
+               OnClick="HandleConfirmThrow"
+               Class="action-button confirm-button"
+               Disabled="@(!IsInteractive || !CanConfirmThrow)">
+        <MudIcon Icon="@Icons.Material.Filled.Check" />
+        Wurf
+    </MudButton>
+</div>
+
+<style>
+    .number-panel {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        padding: 16px;
+        background: var(--mud-palette-surface);
+        border-radius: 8px;
+    }
+
+    .number-buttons {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 8px;
+    }
+
+    .number-button {
+        min-width: 48px !important;
+        height: 48px !important;
+        font-size: 1.2rem !important;
+        font-weight: bold !important;
+    }
+
+    .action-buttons {
+        display: flex;
+        gap: 8px;
+        justify-content: center;
+    }
+
+    .action-button {
+        flex: 1;
+        height: 56px !important;
+    }
+
+    .confirm-button {
+        min-width: 120px;
+    }
+
+    @@media (max-width: 600px) {
+        .number-buttons {
+            grid-template-columns: repeat(5, 1fr);
+            gap: 6px;
+        }
+
+        .number-button {
+            min-width: 40px !important;
+            height: 40px !important;
+            font-size: 1rem !important;
+        }
+
+        .action-button {
+            height: 48px !important;
+        }
+    }
+</style>
+
+@code {
+    /// <summary>
+    /// Whether the panel is interactive.
+    /// </summary>
+    [Parameter]
+    public bool IsInteractive { get; set; } = true;
+
+    /// <summary>
+    /// Whether the throw can be confirmed (pins have been selected).
+    /// </summary>
+    [Parameter]
+    public bool CanConfirmThrow { get; set; } = true;
+
+    /// <summary>
+    /// Currently selected number (for highlighting).
+    /// </summary>
+    [Parameter]
+    public int? SelectedNumber { get; set; }
+
+    /// <summary>
+    /// Current bell value state.
+    /// </summary>
+    [Parameter]
+    public bool BellValue { get; set; }
+
+    /// <summary>
+    /// Callback when a number is clicked (sets all pins 1-N as fallen).
+    /// </summary>
+    // [Parameter]
+    // public EventCallback<int> OnNumberClicked { get; set; }
+
+    /// <summary>
+    /// Callback when bell button is clicked.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnBellClicked { get; set; }
+
+    /// <summary>
+    /// Callback when throw is confirmed.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnThrowConfirmed { get; set; }
+
+    private Color GetButtonColor(int number)
+    {
+        if (SelectedNumber == number)
+            return Color.Secondary;
+
+        // Special colors for key numbers
+        return number switch
+        {
+            0 => Color.Error,     // Rinne (gutter)
+            9 => Color.Success,   // Alle (strike)
+            _ => Color.Primary
+        };
+    }
+
+    // private async Task HandleNumberClick(int number)
+    // {
+    //     if (!IsInteractive)
+    //         return;
+
+    //     await OnNumberClicked.InvokeAsync(number);
+    // }
+
+    private async Task HandleBellClick()
+    {
+        if (!IsInteractive)
+            return;
+
+        await OnBellClicked.InvokeAsync();
+    }
+
+    private async Task HandleConfirmThrow()
+    {
+        if (!IsInteractive || !CanConfirmThrow)
+            return;
+
+        await OnThrowConfirmed.InvokeAsync();
+    }
+}

src/Koogle.Web/Components/Game/GameInputPanel.razor

@@ -32,16 +32,24 @@
                   OnPinClicked="HandlePinClick" />
     </div>
 
-    @* Number quick-entry *@
+    
-    <div class="number-input-section">
+    @if (@GameState.Value.ThrowPanel.ThrowMode == ThrowMode.Reposition)
-        <NumberPanel IsInteractive="@IsInteractive"
+    {
-                     CanConfirmThrow="@CanConfirmThrow"
+        @* Number quick-entry *@
-                     SelectedNumber="@_selectedNumber"
+        <div class="number-input-section">
-                     BellValue="@GameState.Value.ThrowPanel.BellValue"
+            <NumberPanel IsInteractive="@IsInteractive"
-                     OnNumberClicked="HandleNumberClick"
+                         CanConfirmThrow="@CanConfirmThrow"
-                     OnBellClicked="HandleBellClick"
+                         SelectedNumber="@_selectedNumber"
-                     OnThrowConfirmed="HandleThrowConfirmed" />
+                         BellValue="@GameState.Value.ThrowPanel.BellValue"
-    </div>
+                         OnNumberClicked="HandleNumberClick"
+                         />
+        </div>
+    }
+    
+    <ConfirmPanel IsInteractive="@IsInteractive"
+                  CanConfirmThrow="@CanConfirmThrow"
+        OnBellClicked="HandleBellClick"
+                  OnThrowConfirmed="HandleThrowConfirmed"/>
 
     @* Throw info and controls *@
     <div class="throw-control-section">
@@ -172,7 +180,7 @@
 
     private void HandleNumberClick(int number)
     {
-        // Quick entry: set pins 1-N as fallen, rest as standing
+        // Quick entry: set pins 1-N as fallen, reset as standing
         var newState = GameState.Value.ThrowPanel.ResetPins();
 
         for (int i = 1; i <= 9; i++)
@@ -280,4 +288,5 @@
         9 => GameState.Value.ThrowPanel.Pin9,
         _ => PinStatus.Standing
     };
+
 }

src/Koogle.Web/Components/Game/NumberPanel.razor

@@ -6,7 +6,7 @@
         {
             var number = i;
             <MudButton Variant="Variant.Filled"
-                       Color="@GetButtonColor(number)"
+                       Color="Color.Secondary"
                        Size="Size.Large"
                        OnClick="() => HandleNumberClick(number)"
                        Class="number-button"
@@ -16,27 +16,7 @@
         }
     </div>
 
-    <div class="action-buttons">
-        <MudButton Variant="Variant.Filled"
-                   Color="Color.Warning"
-                   Size="Size.Large"
-                   OnClick="HandleBellClick"
-                   Class="action-button"
-                   Disabled="@(!IsInteractive)">
-            <MudIcon Icon="@Icons.Material.Filled.NotificationsActive" />
-            Glocke
-        </MudButton>
     
-        <MudButton Variant="Variant.Filled"
-                   Color="Color.Success"
-                   Size="Size.Large"
-                   OnClick="HandleConfirmThrow"
-                   Class="action-button confirm-button"
-                   Disabled="@(!IsInteractive || !CanConfirmThrow)">
-            <MudIcon Icon="@Icons.Material.Filled.Check" />
-            Wurf
-        </MudButton>
-    </div>
 </div>
 
 <style>
@@ -114,11 +94,11 @@
     [Parameter]
     public int? SelectedNumber { get; set; }
 
-    /// <summary>
+    // /// <summary>
-    /// Current bell value state.
+    // /// Current bell value state.
-    /// </summary>
+    // /// </summary>
-    [Parameter]
+    // [Parameter]
-    public bool BellValue { get; set; }
+    // public bool BellValue { get; set; }
 
     /// <summary>
     /// Callback when a number is clicked (sets all pins 1-N as fallen).
@@ -126,31 +106,31 @@
     [Parameter]
     public EventCallback<int> OnNumberClicked { get; set; }
 
-    /// <summary>
+    // /// <summary>
-    /// Callback when bell button is clicked.
+    // /// Callback when bell button is clicked.
-    /// </summary>
+    // /// </summary>
-    [Parameter]
+    // [Parameter]
-    public EventCallback OnBellClicked { get; set; }
+    // public EventCallback OnBellClicked { get; set; }
 
-    /// <summary>
+    // /// <summary>
-    /// Callback when throw is confirmed.
+    // /// Callback when throw is confirmed.
-    /// </summary>
+    // /// </summary>
-    [Parameter]
+    // [Parameter]
-    public EventCallback OnThrowConfirmed { get; set; }
+    // public EventCallback OnThrowConfirmed { get; set; }
 
-    private Color GetButtonColor(int number)
+    // private Color GetButtonColor(int number)
-    {
+    // {
-        if (SelectedNumber == number)
+    //     if (SelectedNumber == number)
-            return Color.Secondary;
+    //         return Color.Secondary;
 
-        // Special colors for key numbers
+    //     // Special colors for key numbers
-        return number switch
+    //     return number switch
-        {
+    //     {
-            0 => Color.Error,     // Rinne (gutter)
+    //         0 => Color.Error,     // Rinne (gutter)
-            9 => Color.Success,   // Alle (strike)
+    //         9 => Color.Success,   // Alle (strike)
-            _ => Color.Primary
+    //         _ => Color.Primary
-        };
+    //     };
-    }
+    // }
 
     private async Task HandleNumberClick(int number)
     {
@@ -160,19 +140,13 @@
         await OnNumberClicked.InvokeAsync(number);
     }
 
-    private async Task HandleBellClick()
+    // private async Task HandleBellClick()
-    {
+    // {
-        if (!IsInteractive)
+    //     if (!IsInteractive)
-            return;
+    //         return;
 
-        await OnBellClicked.InvokeAsync();
+    //     await OnBellClicked.InvokeAsync();
-    }
+    // }
 
-    private async Task HandleConfirmThrow()
-    {
-        if (!IsInteractive || !CanConfirmThrow)
-            return;
     
-        await OnThrowConfirmed.InvokeAsync();
-    }
 }