153 lines
3.5 KiB
Plaintext
153 lines
3.5 KiB
Plaintext
@using Koogle.Domain.Enums
|
|
|
|
<div class="number-panel">
|
|
<div class="number-buttons">
|
|
@for (int i = 0; i <= 9; i++)
|
|
{
|
|
var number = i;
|
|
<MudButton Variant="Variant.Filled"
|
|
Color="Color.Secondary"
|
|
Size="Size.Large"
|
|
OnClick="() => HandleNumberClick(number)"
|
|
Class="number-button"
|
|
Disabled="@(!IsInteractive)">
|
|
@number
|
|
</MudButton>
|
|
}
|
|
</div>
|
|
|
|
|
|
</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();
|
|
// }
|
|
|
|
|
|
}
|