chk
/
KoogleApp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring gameinput

This commit is contained in:
beo3000 2025-12-27 13:42:32 +01:00
parent 92dfb47a08
commit aa8cf4d83a
3 changed files with 217 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/Koogle.Web/Components/Game/ConfirmPanel.razor Normal file
View File

@ -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();
}
}

31
src/Koogle.Web/Components/Game/GameInputPanel.razor
View File

@ -32,16 +32,24 @@
OnPinClicked="HandlePinClick" />
</div>
@* Number quick-entry *@
<div class="number-input-section">
<NumberPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
SelectedNumber="@_selectedNumber"
BellValue="@GameState.Value.ThrowPanel.BellValue"
OnNumberClicked="HandleNumberClick"
OnBellClicked="HandleBellClick"
OnThrowConfirmed="HandleThrowConfirmed" />
</div>
@if (@GameState.Value.ThrowPanel.ThrowMode == ThrowMode.Reposition)
{
@* Number quick-entry *@
<div class="number-input-section">
<NumberPanel IsInteractive="@IsInteractive"
CanConfirmThrow="@CanConfirmThrow"
SelectedNumber="@_selectedNumber"
BellValue="@GameState.Value.ThrowPanel.BellValue"
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
};
}

98
src/Koogle.Web/Components/Game/NumberPanel.razor
View File

@ -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>
/// Current bell value state.
/// </summary>
[Parameter]
public bool BellValue { 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).
@ -126,31 +106,31 @@
[Parameter]
public EventCallback<int> OnNumberClicked { get; set; }
/// <summary>
/// Callback when bell button is clicked.
/// </summary>
[Parameter]
public EventCallback OnBellClicked { 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; }
// /// <summary>
// /// Callback when throw is confirmed.
// /// </summary>
// [Parameter]
// public EventCallback OnThrowConfirmed { get; set; }
private Color GetButtonColor(int number)
{
if (SelectedNumber == number)
return Color.Secondary;
// 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
};
}
// // 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)
{
@ -160,19 +140,13 @@
await OnNumberClicked.InvokeAsync(number);
}
private async Task HandleBellClick()
{
if (!IsInteractive)
return;
// private async Task HandleBellClick()
// {
// if (!IsInteractive)
// return;
await OnBellClicked.InvokeAsync();
}
// await OnBellClicked.InvokeAsync();
// }
private async Task HandleConfirmThrow()
{
if (!IsInteractive || !CanConfirmThrow)
return;
await OnThrowConfirmed.InvokeAsync();
}
}